Detta examensarbete har haft till syfte att åskådliggöra eventuella skillnader och/eller likheter i den upplevda användbarheten vid användandet av en webbplats skapad via mobile first design och desktop first design. Målsättningen med examensarbetet har varit att ta fram en hifi-prototyp, skapad utifrån mobile first design, som visualiserade ett designförslag för flygfotoföretaget HimlaFotos startsida. Jämförelsen har utgått ifrån en egendefinierad version av begreppet användbarhet baserad på ISO:s definition, där användbarhet består av tre faktorer; kraftfullhet, effektivitet och tillfredställelse. För att samla in data om den upplevda användbarheten har användartester genomförts. Flera likheter har identifierats gällande användbarhetsmåtten kraftfullhet och effektivitet, medan skillnader har funnits vid måttet för tillfredställelse. Bland nyckelfynden fanns att innehållsprioriteringen, som är en viktig del av mobile first design, kan vara ett användbart verktyg vid skapandet av tekniska artefakter till mobila enheter. / The aim of this study has been to explore if there is any similarities and/or differences in usability characteristics of a website created with mobile first design versus desktop first design. A design suggestion of the aerial photo company HimlaFoto’s homepage, visualized by a hifi-prototype using mobile first design, has been the goal of the study. Based on ISO:s definition of usability, a  definition by the author has been used in the study where usability consists of three factors; efficiency, effectiveness and satisfaction. To gather data about the usability when using both the hifi-prototyp and HimlaFotos default website, usability testing has taken place. For efficiency and effectiveness several similarities has been found, while some differences was identified with the usability factor satisfaction. Among the key findings was that the content prioritization, a key principle of mobile first design, could be a useful tool when developing technical artefacts for mobile devices.

In recent years the development of mobile devices has made great progress and today they account for a large proportion of the internet usage. This trend poses new demands on web developers as more companies and product owners want to customize their services and products for this new market. In this study we examine the pros and cons of the strategies desktop-first and mobile-first in the development of adaptive interfaces for the web. The study aims to create guidelines for situations in which each strategy fits well. The purpose of the study is to create an understanding of how these strategies can help developers and product owners to develop adaptive interfaces based on different goals and objectives. The study was conducted through the development of two high-fidelity prototypes for the redesign of an existing website. A literature review was also performed to create a deeper understanding of the subject. Our conclusion showed that mobile-first was preferable when building a website from scratch. However, there are cases when desktop-first may be preferable, for example, in the redesign of an existing website where the foundation is already finished. Furthermore, the study has led us to the realization that there are many purposes of different websites making the subject complex. Therefore, the developer should always make an evaluation of the product owner's goals and objectives in order to choose the right strategy.

This Master thesis focuses on responsive web design. The main objective is to provide comprehensive view of the website created in so-called responsive realization, and impart awareness to readers not only about idea of responsive web design itself, but also about other ways of creating mobile webs. Furthermore, thesis deals with constructing of overview and comparison of selected technologies and frameworks with support of creating responsive websites. Every group of technologies or procedures is discussed in single chapter, to let reader simple and clearly return to particular concepts. After reading this thesis the reader should acquire not only detailed knowledge about responsive web design, but also suggestions and manuals for creating websites and for decisions in choosing the type of technology, which is possible to use to creating websites.

För att spara tid och ändå få en responsiv webbplats, kan med fördel ett responsivt front-end ramverk användas. Ett responsivt front-end ramverk kan använda olika angreppssätt: desktop-first och mobile-first. Påverkar front-end ramverkens angreppssätt (approach) något på en webbplats svarstider? Eller finns den stora betydelsen var webbplatsen renderar data, som hämtas från en databas? Ett experiment lämpar sig för att testa studiens hypotes. Utvärdering av studiens fyra olika webbapplikationer och analysering av mätningarna finns, för att få fram slutsatsen som är: Det finns ingen större skillnad mellan front-end ramverken, den stora betydelsen finns på val av rendering. Hypotesen motbevisas, då klientapplikationerna är snabbare än serverapplikationerna på alla plattformarna. Mätningar av svarstider finns och vid ett fortsatt arbete är det intressant bland annat också mäta batterimängden och plattformarnas minne. Implementera fler webbapplikationer, som använder andra front-end ramverk, där mätningarna kan exekveras på fler plattformar, webbläsare och scenarier.

The aim of the thesis is to create a comprehensive material that covers the basic knowledge of theory and practices necessary to understand the whole complexity of the Responsive Web Design (RWD). This thesis first focuses on the RWD origin and its two approaches. Furthermore, the work deals with technical solutions of the RWD and technologies that enabled its creation or were found useful for it. This part also mentions tools which simplify the work with given technologies. The next part is devoted to Responsive CSS Frameworks as being the base for creating responsive websites and shows layout examples where two different approaches and frameworks were used. At last an issue of testing responsive websites is discussed.

Mobile e-commerce is an increasing trend. Still, many sales sites are not adapted to mobile interfaces. Important factors in the design of successful e-commerce applications are trust, high quality graphics, and easy navigation. However, a typical design approach is to strip down functionality and this can have a negative impact on the user experience. The goal of this thesis was to create a style guide that can be used to develop responsive e-commerce sites through a mobile first implementation strategy. A style guide was created by applying modern design theory and by investigating existing e-commerce solutions. Moreover, a prototype of an e- commerce solution was developed using the style guide. This prototype was evaluated by an expert group of usability professionals. The study indicates that the style guide is a useful and effective tool in the design and development of e-commerce systems. We conclude that a mobile first strategy needs to be combined with subsequent traditional desktop design.