The purpose of this master thesis project was to investigate and analyse the main design and development approaches to creating a user interface of a cross-platform web application that is optimised for usage on both mobile and non-mobile devices. The additional goals were to analyse the main challenges in implementing such a user interface and find out whether it is feasible to achieve a consistent user experience both on mobile and desktop devices.

The theoretical part of this paper analyses the main development approaches and design considerations for creating a user interface that works on mobile and non-mobile devices. For the practical part, a prototype user interface for a cross-platform book cataloguing web application has been built, tested on a number of mobile and non-mobile devices and evaluated in terms of performance and user experience. Also ideas for its further development are presented.

As the result of this project, a semi-functional web application prototype has been built using Backbone.js and user interface has been created in HTML5 with CSS3. The application allows the user to organise his/her books and planned reads, leave reviews and view reviews from other readers.

The application did not have all the functioning features and it still needs further work before actual usage. The biggest challenges were content planning, designing reusable UI components, finding a suitable framework for the application implementation and inconsistent CSS support across browsers. By planning the navigation and content early, testing the user interface on real devices, following the mobile first approach and progressively enhancing to a device’s capabilities, it is possible to create a consistent user experience across mobile and non-mobile devices in lightweight web applications.