This Master's thesis focuses on the issue of responsive design creation and comparison of the particular patterns aiming to customizable website. The theoretical part discusses the majority of available possibilities for achieving a responsive design and their general purpose. The practical part covers the use of the particular patterns on the specific web presentation. The thesis includes three similar websites using the responsive design particular patterns without frontend frameworks and, subsequently, their utilization. Their testing served as a means for recommendation for the practice. Another part of the thesis is the summarization of cascading style sheets development with the focus on the responsive design and comparison of two frontend frameworks selected by the author.

Responsiv design syftar till att en webbsida ska anpassa sig efter användarens enhet, oavsett enhetens skärmstorlek. Arbetet har gått ut på att ta reda på om man kan utveckla en framgångsrik responsiv design som fungerar på många typer av enheter enbart med en persondator som utvecklingsplattform, och på så sätt undvika att behöva genomgå en stor process med testning. Resultaten visar att det är fullt möjligt. / Responsiv design means creating a web page that responds and adapts to the user’s device regardless of the devices’ screen size. The work behind this report has been finding out if it is possible to develop a successful responsive design, that works on a wide range of devices, using only a desktop computer and because of that avoiding having to go through a long process of testing. The results show that this is possible.

I och med lanseringen av nya och mobila plattformar, såsom smarttelefoner och surfplattor, uppstår svårigheter med att anpassa webbsidor för samtliga typer av enheter. Tidigare har mobila applikationer (appar) och mobila sidor använts för att överkomma dessa problem. Responsive Web Design (RWD) är en ung designprincip som uppkom 2010 och har anammats av många webbutvecklare. Designprincipen medför att en webbsidas presentation förändras beroende på skärmstorleken som används för att visa sidan. I en studie har fem företag intervjuats för att få deras tankar och åsikter om RWD i jämförelse med utveckling av mobila sidor och appar. Detta för att besvara huruvida RWD kan ersätta denna plattformsspecifika utveckling. Majoriteten av företagen har helt gått över till att utveckla responsiva webbsidor istället för andra mobilanpassningar men appar utvecklas fortfarande. Skiftet från mobila sidor beror främst på att denna typ av lösning kräver dubbelt arbete med innehållet då olika innehåll visas på olika enheter. Med RWD används istället samma innehåll över samtliga olika skärmtyper. Undersökningen visar på att RWD kan ersätta plattformsspecfik utveckling av informationssidor och e-tjänster. Däremot kommer det inte kunna ersätta appar då dessa i grunden fyller olika syften. Vid större krav på funktionalitet är dessvärre RWD inte alltid lämpligt att använda.

"Adapt or Die" handlar om mobila webbplatser. Populariteten av mobila enheter växer ständigt och en intressant fråga var hur användarna upplever webbplatser genom mobila enheter. Arbetet hade som sitt mål att undersöka i fall användarna uppskattar att webbplatser anpassas till deras media; om det är viktigt för användarna att känna igen sig på en webbplats samt om man kan ta bort viss information från en webbplats när den presenteras via en mobil enhet. I uppsatsen förklaras begrepp som responsive web design samt mobildedikerad webbplats vilka är populära metoder för att anpassa webbplatser till mobila enheter. Den snabbt ökande användningen av mobila enheter gör denna problemställning mycket aktuell och intressant. För att försöka ge svar på dessa frågor, har genomförts en enkät, ett experiment samt en intervju.Resultatet av undersökningarna påvisar att anpassning av webbplatser till mobila enheter uppskattats mycket högt av användarna. Majoriteten (91,1%) respondenter tyckte att det var viktigt att kunna ha tillgång till sidor som är lätta att använda på mobila enheter. Det visade sig också viktigt för användarna att känna igen sig på en sida (64,6%) och behålla tillgång till all information även via mobila enheter (35%). Samtidigt var användarna dock villiga att offra just dessa egenskaper för att kunna använda sig av en enkel och lättläst webbplats (49,8%).

Fler går över till att använda mobila enheter för att besöka webben samtidigt som e-handelsmarknaden växer. Till skillnad mot fysiska butiker så saknar ofta butiker på nätet möjligheten till att ge tillräcklig information om produkterna. Bilder blir därmed en viktig nyckelfaktor för att ge kunder möjligheten att undersöka produkterna innan köpbeslut fattas. Problemet med bilder är att de bidrar till långsam sidladdning framförallt för de mindre enheterna som används vid e-handel vilket påverkar användbarheten negativt. Studien i projektet undersöker två olika bildimplementationstekniker, en villkorsbaserad bildteknik och flexible image för att undersöka skillnaderna i laddningstid. Prestandamätningarna visade att en villkorsbaserad bildteknik presterar bäst på mobila enheter medans det inte går att säga om det finns någon skillnad mellan bildteknikerna på desktopenheter. För framtiden kan även en webbserver användas istället för en lokal server för att skapa ett mer verklighetsbaserat resultat och fler optimeringar kan göras på bilderna för att utvärdera laddningstiderna ytterligare.

Responsive design is a common expression at the web today. This thesis was about learning about responsive web design in order to apply it to Windows 8 applications created in C# and XAML. The purpose of this thesis was to learn if responsive design can be used in such applications. This was done by first learning about responsive design through a literature study about responsive web design and then specifying responsive application design. How responsive design can be used in applications was found through research and creation of an example application. No literature was found about responsive design for Windows 8 applications in C# and XAML and therefore most of the results came from own ideas and partly solutions found on different forums. The thesis was performed at Infor in Kista. The example application was a social application which was connected to a social web service developed by Infor. Responsive web design is a technique used for making webpages adapt to the size and resolution of the viewport. This is done by creating a structured, fluid layout by using a flexible grid and flexible images. Media queries are used to set up different states for presenting the page in different ways for different sizes and resolutions of the viewport. In the different states parts of the content can for example be hidden or styled. The number of columns of information can also be set to adapt to make the page easier to view. Responsive design for applications should make the layout of the application adapt to fit the application window of the device used depending on its resolution. One way to specify a responsive design for Windows 8 applications could be to create only one application which could be used on all different Windows 8 platforms, such as phones, tablets and computers. It is probably not possible today to create this one application for different Windows 8 platforms. Another way of specifying responsive design for application is to create a responsive user interface which could be shared and used in the different Windows 8 applications. The latter was the chosen definition for this thesis. The scope of this thesis was limited to only research for responsive design in Windows Store apps and Windows Phone 8 applications. Windows Phone 8 applications are applications used on smartphones with Windows Phone 8 as operating system while Windows Store applications are used on computers with Windows 8 as operating system. Other Windows 8 devices were not included in this thesis. The final conclusion of this thesis was that although it is complicated to use responsive application design it can be used for most of the user interface. A responsive user interface for the applications can be created separately, but some parts of the application pages cannot be shared between the different platforms. This results in a mostly responsive sharable user interface.