As the use of mobile devices is increasing and the use of laptops and computers is decreasing it is becoming more important to design for better web usability across platforms. The established design principles for web design provide guidelines when designing and testing web usability. The principles, however, are not commonly used to evaluate and test the usability of mobile websites. This study seeks to examine how the usability of mobile and desktop websites is affected based on the adaption of established web design principles. The study is built upon an analytical framework where common keywords have been selected from a selection of established web design principles. This study takes on a qualitative approach with experimental features, using a heuristic evaluation, a usability study and an eye-tracking experiment. The study indicates that there is a connection between low adaption of certain keywords of web design principles and the usability of mobile and desktop websites, contributing to a deeper understanding of how adaption of design principles affect web usability across platforms. / Användningen av mobila enheter har på senare tid ökat och användningen av bärbara datorer och stationära datorer har minskat. Det blir därför allt viktigare att designa mer användarvänliga hemsidor på olika plattformar. Etablerade design principer för webbdesign anger riktlinjer för design och test av webbanvändbarhet. Design principer används inte i en större utsträckning för att utvärdera användbarheten på mobila hemsidor, därför syftar denna studie till att undersöka hur användbarheten för mobilhemsidor påverkas utifrån att tillämpningen av design principer för webbdesign. Studien bygger på ett analytiskt ramverk där nyckelord har valts ut från ett antal etablerade webbdesign principer. Studien har ett kvalitativt tillvägagångssätt, med experimentella inslag. Studien har genomförts genom heuristik utvärdering, användbarhets studier och eye-tracking experiment. Studien indikerar att det finns en koppling mellan lägre nivåer av tillämpning av webbdesign principer och användbarheten på mobil- och datorsanpassade hemsidor. Denna studie bidrar till en djupare förståelse om hur anpassningen av design principer och dess påverkan av användbarheten på hemsidor över olika plattformar.

Surfing the web has moved from the stationary computers to mobile devices such as smartphones and tablets. As the technology moves further and more devices comes out on the market this is a trend that will continue. This makes it more important for web developers to adapt and make their websites fit not only for one device. The website needs to fit all devices. Since many of these devices are using wireless connections, the website performance has also become even more important in order to give the users a good experience.   Responsive web design is an approach for designing and developing web pages. By using the three techniques of flexible grid layout, flexible images and media, and media queries, websites can get a design that fits all devices. Responsive web techniques will also make the web page perform better on each device since it makes the web page adapt to its environment. There are several performance techniques that can be applied to a website in order to increase performance and loading time. Responsive web design including performance techniques can together make a great impact on a website's loading speed and user experience.   This thesis embraces this approach for web development. By developing a design theory, a website emerges where these approaches of web development have been implemented. During the development of the website the experiences implementing this approach and techniques is discussed. The website developed for this thesis was able to finish loading below 4 seconds on a mobile device using a 3G connection. We argue that responsive web design and performance techniques can help a website immensely to increase its user experience and performance.

Human-computer interaction problems have been approached by design practitioners and researchers for a few decades now. Usability is an established quality attribute that is used to assess how easy user interfaces are to use. Websites have been determined to benefit from such assessment, and responsive web design (RWD) is a fairly new approach to web design where usability problems have been recognised, and where usability focused research has been carried out. While usability testing can be used to determine how easy a RWD website is to use, it does not provide a detailed psychological model that tells the designer how to design RWD websites that are easy to use. Discoverability is a psychological model within the field of design in general, that can be implemented by designers who want to achieve a good design. No previous research has been carried out with the purpose of exploring how discoverability can be used to improve the usability of a RWD website, and the author of this thesis suggests that there is value in conducting such research, because it has the potential to provide new insight into how RWD websites can be designed in way that makes them easier to use. This thesis approaches the question by conducting a usability test on a RWD website, and uses the results of the test as a foundation for a suggested discoverability focused approach to improving the usability of the RWD website.

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.

The thesis is about the phenomena and benefits of design and development for mobile devices. Theoretical part of the thesis is focused on describing the mobile market's and devices' specifics and their future development and reasoning their values. In-depth description of the methods and problems of mobile applications' design with focus on web applications is included as well as the overview of technologies for mobile web development. Capability comparison of these technologies with the possibilities of native applications are described too. The practical part of the thesis aims to verify these theories by applying them to a real project (news portal). After an implementation part the thesis provides an analysis of the benefits this implementation provided to the project. The main goals of this thesis are providing complex overview of the methods and technologies for mobile web development and the analysis, which verifies the benefits and outcomes of these theories in real practice. Results of this analysis are as well the main contribution of this theses as it provides valuable information about the benefits of described methods on real project which is used by many users. Other contribution is the part describing the implementation which unveils practical information and real problems of described theoretical methods on practical examples.

There has recently been an emergence of new devices in which users can access the web. These devices have significantly smaller screen sizes than the more common desktop. This results in that the approach to designing web content has to be changed. The approach to design web content that adapts its visual layout to different screen sizes, is referred to as Responsive Web Design. Ida Infront is a company that develops systems and solutions for informationintensive businesses. They are currently examining how to design a layout editor that can be used to define responsive design for web-forms. The purpose of this project is to design and implement a prototype of such a layout editor, which will then be evaluated by Ida Infront. The project is divided into two phases, starting out with the research process, followed by the prototype design process. In the research process, the following is examined: structure of the XML file describing web-forms, Responsive Web Design techniques and technologies appropriate for the layout editor. In the prototype design process, a layout editor prototype allowing responsive design for web-form components, is designed and implemented. The responsive design configuration is added to the web-form XML file. We found that Bootstrap is a suitable technology to define responsive design of web-forms, since placement of web-form components can be translated into a Bootstrap grid system. The resulting layout editor prototype allows responsive configuration in Bootstrap. This is done by utilising the grid system as the underlying structure for placement of web-form components. The prototype also allows configuration for each of the four Bootstrap device classifications, named xs, sm, md and lg. Position and size of webform components are stored for each Bootstrap device classification. The resulting responsive configuration is added into the existing XML file for the web-form. / Den senaste tiden så har det uppkommit nya enheter som man kan komma åt webben med. Dessa enheter har betydligt mindre skärmar än de mer vanliga stationära enheterna. Det har resulterat i att sättet man designar webbinnehåll måste ändras. Metoden att designa webbinnehåll så det anpassar sin grafiska utformning efter olika skärmstorlekar kallas för responsiv webb design. Ida Infront är ett företag som utvecklar system och lösningar för informationsintensiva verksamheter. De undersöker just nu hur man designar en layout editor som kan användas för att definiera responsiv design för webb-formulär. Syftet med detta projekt är att designa och implementera en prototyp av en sådan layout editor, som sedan kommer utvärderas av Ida Infront. Examensarbetet är uppdelat i två faser, det inleds med forskningsfasen och efterföljs av prototypfasen. I forskningsfasen undersöks följande: strukturen i XML filen som beskriver webb-formulär, olika tekniker för responsiv webb design och lämpliga teknologier att använda i en layout editor. I prototypfasen, designas och implementeras en prototyp som gör det möjligt att definera responsiv konfiguration för webb-formulär. Konfiguration för responsiv design läggs till i den befintliga XML filen. Vi kom fram till att Bootstrap är en lämplig teknologi för att definera responsiv design för webb-formulär. Eftersom placeringen av komponenter i webb-formulär kan översättas till Bootstraps rutnät. Den resulterande layout editorn gör det möjligt att definera responsiv design i Bootstrap. Detta genom att använda Bootstraps rutnät som underliggande struktur för placering av webb-formulärets komponenter. Prototypen gör det också möjligt att konfiguera för var och en av de fyra Bootstrap enhets klasserna, namngivna som xs, sm, md och lg. Position och storlek för webb-formulärets komponenter lagras för varje Bootstrap enhets klass. Den resulterande responsiva konfigurationen läggs till i den befintliga XML filen för webb-formuläret.

This paper aims to examine what the differences is between the three application types, native, hybrid and web. The main focus will be placed on the web app and investigate whether it could be an alternative to native and hybrid app. To explain what a web app has the capacity to do, a web app is created in wordpress. Web development is moving forward, which is obviously positive. The problem may be, however, for companies that come from a completely different industry and who wish to develop a new web solution for their company. A native app can be a very expensive investment and it is far from all companies that can pay this. This study wants to find out if a web app, could be an alternative to the native app. Furthermore, the report will examine what the possibilities are for a web app and what existing web apps there is today. Furthermore, a simple price comparison between the different app types to be made. / Den här rapporten syftar till att undersöka vad skillnaden är mellan de tre applikationstyperna, native, hybrid och webb. Störst fokus kommer att placeras på webb appen och undersöka om denna skulle kunna vara ett alternativ till native och hybrid appen. För att redogöra vad en webb app har kapacitet att göra kommer en webb app att skapas i wordpress. Webbutvecklingen går framåt vilket självklart är positivt. Problemet som kan bli är dock för företag som kommer från en helt annan bransch och som önskar ta fram en ny webb-lösning för sitt företag. En native app kan vara en väldigt dyr investering och det är långt ifrån alla företag som kan betala detta. Denna undersökning vill reda ut om en webb app kan var ett alternativ till native appen. Vidare kommer rapporten undersöka vad det finns för möjligheter för en webb app och vad det finns för webb appar idag. Dessutom kommer en enklare prisjämförelse mellan de olika apptyperna att göras.

Den här rapporten förklarar tillvägagångssättet för framtagningen utav en responsiv design till webbplatsen Projects & Staff, en webbplats som tidigare hade en fixed design. Projektet består utav två leveranser, hi-fi prototyper skapade i Adobe Illustrator och Adobe Photoshop samt en färdig mobilversion utav webbplatsen, utvecklad med CSS3. Under projektets gång har jag designat för användarupplevelse och användbarhet, två områden som är viktiga inom responsiv webbdesign. Jag har utfört en förstudie i form av en webbplatsanalys, gjort en PACT-analys samt användarintervjuer. Detta för att definiera behoven som fanns för en responsiv design, samt att få en tydlig bild av användare och deras vanor. Målet med projektet har varit en responsiv webbdesign som representeras väl på olika enheter, speciellt smartphone, ett mål som jag lyckats bra med att uppnå. / This report explains the approach for the making of a responsive design to the website Projects & Staff, a website that previously had a fixed design. The project consists of two parts, hi-fi prototypes created in Adobe Illustrator and Adobe Photoshop as well as a complete mobile version of the website, created with CSS3. During the project I have designed for user experience and usability, two areas that are important to responsive web design. I have conducted a feasibility study in the form of a website analysis, made a PACT analysis and user interviews. This to define the needs that existed for a responsive design, and to get a clear picture of the users and their habits. The goal has been a responsive web design represented well on different devices, especially smartphones, a goal that I have done well with achieving.

Denna rapport redovisar för design- och utvecklingsprocessen i byggandet av en responsiv webbsida. Webbsidan skapades för användning av den blivande spelstudion Rocket Luncher Studios. Wordpress som CMS (Content Management System) har används som innehålls-hanteringssystem för att förenkla uppdatering av webbsidan av uppdragsgivaren själva. Webbsidan är kodad utifrån Luke Wroblewskis ”mobile-first”-tänk, vilket börjar med att fokusera designen på mindre skärmar för att sedan anpassa innehållet mot större skärmstorlekar. För att göra designen responsiv har de tre beståndsdelarna flexible grid, flexible images/media och media queries använts, utöver kodning i HTML, CSS, PHP och JavaScript. Resultatet av denna rapport blev en undersökning av design- och utvecklingsprocessen vid byggandet av en responsiv webbsida. Det praktiska i examensarbetet resulterade i en responsiv prototyp till en webbsida för en spelstudio. / This report describes the design and development process in building a responsive website. The website was created for the use of the intended game studio Rocket Lunches Studios. Wordpress has been used as a CMS (Content Management System) to simplify the updating of the website by the client themselves. The website is coded by thinking "mobile-first", which begins with the design focusing on smaller screens and then adapt the content on larger screen sizes. To make the design responsive the three components flexible grids, a flexible images / media and media query has been used, in addition to coding in HTML, CSS, PHP and JavaScript. The result of this report is a survey of the design and development process when building a responsive website. The practicality of the thesis resulted in a responsive prototype of a web page for a game studio.

Att göra webbsidor tillgängliga för olika sorters enheter är ett område som har uppstått i och med smartphonens utveckling. Mängden enheter har under de senaste åren ökat stort och det är inte längre endast laptops och datorer som används. Då enheternas skärmupplösning skiljer sig krävs en anpassning beroende på enhet för att ge en bra användarupplevelse. För att identifiera tillgängliga tekniker har en kvalitativ undersökning genomförts. Undersökningen består av en genomgång av utvald litteratur samt intervjuer med utvecklare på företagen Nethouse och Laget.se utförts. Detta för att inhämta information om användandet av tekniker, undersöka om det finns något framträdande tankesätt samt undersöka för- och nackdelar med teknikerna. Slutsatsen är att alla tekniker har sina användningsområden eftersom de har olika styrkor och svagheter. Resultatet från denna studie presenteras som en genomgång av de befintliga teknikerna och deras potentiella användningsområden för att vägleda valet av teknik. / Making web pages available for different types of devices is an area that has arisen with the development of smartphones. In recent years it has become a major increase in units and there are no longer only laptops and computers that are being used. Since there is a size difference between the different devices there is need for adjustment depending on the device to provide a good user experience. The study was carried out as a qualitative study to identify available technologies. A review of available literature and interviews with developers at the companies Nethouse and Laget.se was conducted to obtain information on the performance of the techniques, if there is any way of thinking and if there is advantages and disadvantages of the techniques. The conclusion is that all technologies have their uses as they have different strengths and weaknesses. The results from this study are presented as a review of the existing technologies and their potential uses to guide the choice of technology.