Följande projektarbetet har resulterat i en ny webbplats åt verkstadsföretaget Löfman & Co Verkstad AB,resultatet är sprunget ur WordPress och projektet vilar på en teoretiskt grund av läsbarhetsteori samtbeprövad erfarenhet kring ämnet responsiv design. Projektrapporten innehåller både information gällandedet teoretiska ramverket samt de slutgiltiga tekniska lösningarna som implementerades på webbplatsen.Två kvalitativa undersökningar på företagets gamla webbplats har bidraget med ytterligare underlag förskapandet utav företagets nya webbplats.. Utöver det ha en viktig del i utvecklingen gjorts av den ständigakontakten med kunden. Projektresultatet är ett bevis för att det finns en arbetsmarknadsmässig funktionför de studenter som läst Visuell Kommunikation och Design vid Karlstad Universitet. / This project has yielded a new web page for the mechanical shop Löfman & Co VerkstadAB, the final result is that of a WordPress built site, built ontop of a foundation oftheoretical knowledge regarding readability and responsive web design. The report coversboth the theoretical groundwork as well as the final technical solutions used on the web site.Two studies of the companys old web site have also contributed to the creation of the newweb page. Another important aspect of the development have been the on-going contactwith the customer. The end result is a standing evidence that there is a use for students fromVisuell kommunikation och design at Karlstad University at the current job market.

Syfte – Ta reda på hur man utformar en receptsida i avseende på design och anpassning för mobila enheter samt hur mycket detta påverkar den dagliga datatrafiken på webbplatsen. Metod – Litteratursökning, kvantitativ webbenkät, webbaserad intervju samt mätning och jämförelse av datatrafik på webbplatsen. Resultat – Navigation (struktur) på en webbplats är enligt många den viktigaste delen av webbplatsens innehåll. Navigationen ska även följa med i en mobilanpassning – för att användaren ska kunna känna igen sig på webbplatsen ska både strukturen och designen vara konsekvent. Smartphones är framtidens datorer, vi blir bara fler och fler som surfar via mobila enheter. Ska en webbplats hållas modern och kunna konkurrera med liknande sidor så måste den vara mobilanpassad. På så sätt tappar inte webbplatsen några besökare, och användarna stannar längre på webbplatsen eftersom de även kan navigera från sin smartphone (eller surfplatta). Begränsningar – Studien går endast på ytan av några av problemen som beskrivs i rapporten, eftersom en fysisk webbplats gjordes utöver studien. Empirin består mestadels av litteratursökning och en kvantitativ enkät. Den kvalitativa aspekten av en utav metodvalen försvann under arbetets gång och blev mest en blandning mellan kvantitativ/kvalitativ. Därför förlitade jag mig mest på min webbenkät när jag besvarade min första frågeställning. Nyckelord – användbarhet, navigation, datatrafik, responsiv webbdesign

Idag kommer det hela tiden nya enheter, alla med olika egenskaper, med möjlighet att koppla upp mot internet. Därmed blir det allt svårare för webbdesigners att anpassa webbplatser för användarens behov och förutse i vilken kontext användaren brukar webbplatsen. Syftet med studien var att undersöka hur webbutvecklare kan implementera flexibilitet för webbplatser, för att webbplatsen ska passa de olika enheterna, genom responsiv webbdesign. Vidare undersöks också hur användare upplever en webbplats utvecklad med responsiv webbdesign. Studien omfattar utvecklingen av en prototyp som också har används som grund för användartestning och kvalitativa intervjuer. Användartestningen omfattade test på en webbplats utvecklad med fasta mått samt testning av den responsiva prototypen. Resultatet av studien visar att användare upplever en responsiv webbplats som ett bra alternativ för en mobil webbplats. Den främsta fördelen för testpersonerna var att inte behöva scrolla i sidled eller zooma in och ut för att hitta informationen som behövdes.

Det blir allt mer vanligt att människor kopplar upp sig mot internet via sin smartphone, både privat och i arbetet. Detta innebär att webbsidor måste anpassas för att visas i dessa enheter. Men att mobilanpassa en webbsida kan vara svårt när det kommer till överskådlighet och navigation av webbsidan. Detta på grund av den begränsade skärmytan. När det kommer till att mobilanpassa en webbsida talas det ofta om två tekniker, responsiv webbdesign och mobila webbapplikationer. Det är dessa två tekniker som diskuteras och jämförs i denna kandidatuppsats. Netgain är ett företag som just nu står inför valet av teknik och detta fall används som exempel för att visa på hur resultatet från denna kandidatuppsats kan relateras till ett specifikt fall i praktiken. Syftet med denna kandidatuppsats i informatik är att göra en jämförelse mellan teknikerna responsiv webbdesign och mobil webbapplikation. Uppsatsen syftar till att beskriva vilka faktorer som kan påverka valet av teknik när det gäller navigation och överskådlighet i smartphones med fokus på användning. Uppsatsen syftar även till att visa hur dessa faktorer kan relateras till ett företag som Netgain. Frågan är hur dessa faktorer kan användas för att ta fram rekommendationer avseende vilken av teknikerna responsiv webbdesign och mobil webbapplikation som passar bäst för en mobil representation av deras affärsmodell för IT. I denna undersökning har ett kvalitativt angreppssätt tillämpats bestående av en fallstudie som har baserats på personliga intervjuer med konsulter på ett webbföretag. Utifrån dessa intervjuer, tillsammans med insamlad teori, har faktorer som kan påverka valet av teknik när det gäller navigation och överskådlighet i smartphones identifierats. Det tydligaste resultatet som framkom i denna undersökning är att mängden information, som ska finnas på den mobilanpassade webbsidan, kan påverka valet av teknik. Vid stora informationsmängder och djupa informationsstrukturer har en mobil webbapplikation en fördel framför responsiv webbdesign. Däremot tillgodoser responsiv webbdesign användarens förväntning om att det som går att finna på en webbsida som visas på en desktop även ska gå att finna i en smartphone. I en mobil webbapplikation finns möjligheten att styra innehållet på ett annat sätt än vid responsiv webbdesign. Detta gör att en mobil webbapplikation har en fördel även när det kommer till överskådlighet och detta kan även bidra till att användaren kan nå sitt mål snabbare än på en webbsida utvecklad med responsiv webbdesign. Undersökningen visade vidare att när det kommer till att göra en mobilanpassad webbsida överskådlig samt enkel att navigera för alla användare, oavsett behov, har en mobil webbapplikation även här en fördel framför responsiv webbdesign. Detta på grund av att det vid responsiv webbdesign kan vara svårt att få innehållet på webbsidan att läsas upp korrekt av en skärmläsare. Dock har responsiv webbdesign en fördel i att denna teknik tillhandahåller ett minimalt behov av att zooma innehållet. Nyckelord: responsiv webbdesign, mobil webbapplikation, navigation, mobil webb.

The work has been performed in collaboration with Jönköping University. The aim of this work has been to study different methods for mobile adaption of large CMS (Content Management System) websites, where the website of Jönköping has been used as a reference. The website at Jönköping University is used daily by current students, faculties, prospective students and external users. Research carried out by the University shows that the use of mobile devices has increased, and it is therefore necessary to examine the mobile adaptation of the large CMS website. A layout proposal has been suggested by determining which method that is most relevant for mobile adaption of a large CMS website. The website should adapt to different resolutions and devices according to how the existing website is based in the current situation. Emphasis has been put on menu operations, to navigate through the large website in a user-friendly way. This is going to be a basis for the University in the development of the mobile website. Based on the results of the choice of method for mobile adaptation, the students have come to the conclusion that the relevant method for a large CMS website is responsive web design. But the choice of method for mobile adaptation can also be based on the need, purpose and target group that a company or organization has with the website. The work ends with a conclusion and discussion where their opinions have been raised. The conclusion that the students have come up with is that the benefits of responsive web design and the solution of the menu navigation, is the right option for Jönköping University website. / Examensarbetet har utförts i samarbete med Högskolan i Jönköping. Syftet med arbetet har varit att studera olika metoder för mobilanpassning av stora CMS (Content Management System) webbplatser, där webbplatsen för Högskolan i Jönköping har använts som en referens. Webbplatsen på Jönköpings högskola används dagligen av befintliga studenter, lärare, blivande studenter och externa användare. Undersökning gjord av Högskolan visar att användning av mobila enheter har ökat, och därför är det aktuellt att undersöka mobilanpassning av den stora CMS webbplatsen. Ett layoutförslag har föreslagits genom att avgöra vilken metod som är mest relevant för att mobilanpassa en stor CMS webbplats. Webbplatsen skall anpassa sig efter olika upplösningar och enheter med hänsyn till hur den befintliga webbplatsen är uppbyggd i dagsläget. Tyngdpunkten har därför lagts på menyhanteringen, för att på ett användarvänligt sätt kunna navigera sig genom den stora webbplatsen. Detta skall vara ett underlag för Högskolan vid utveckling av den mobila webbplatsen. Utifrån resultatet av metodval för mobilanpassning, har studenterna kommit fram till att den relevanta metoden för en stor CMS webbplats är responsiv webbdesign. Men metodvalet för mobilanpassning kan även baseras på vilket behov, syfte och målgrupp som ett företag eller en organisation har med webbplatsen. Arbetet avslutas med en slutsats och diskussion där egna åsikter har tagits upp. Slutsatsen blev att genom fördelarna för responsiv webbdesign och lösningen av menynavigeringen, kände studenterna att responsiv webbdesign var rätt alternativ för Högskolan i Jönköpings webbplats.

Mångfalden av enheter för webbanvändning ökar, men det finns fortfarande webbplatser som utvecklas med PC:s som enda prioritet. Responsiv webbdesign erbjuder nya möjligheter till webbutveckling eftersom en responsiv webbplats är anpassad till samtliga enheter på marknaden. Området har förvisso fått stort genomslag, men det är fortfarande nytt och relativt outforskat. Det finns också endel utmaningar med responsiv webbdesign som kan vara svåra att bemöta. Uppsatsen kartlägger utmaningar som lyfts fram i vetenskaplig litteratur, och bekräftar eller dementerar samt kompletterar kartlagda utmaningar genom enempirisk studie. I uppsatsens slutsats introduceras ett ramverk med utmaningar inom responsiv webbdesign. / The variety of devices for web use increases, but some web sites are still being developed with PC:s as their only priority. Responsive web design is a way of developing web sites for all devices on the market, and therefore creating new opportunities for web development. The area is still new and relatively unexplored, and there are challenges that can be difficult to address. The thesis maps out challenges found in scientific literature, and confirmes or denies and supplements identified challenges through an empirical study. The thesis concludes with an introduction to a framework with challenges in responsive webdesign.

Studiens syfte är att undersöka hur strategiskt IKEA arbetar med CSR, genom att studera hur de hanterar samhällets förväntade krav för att uppnå legitimitet. Metoden var kvalitativ och genomfördes som en innehållsanalys, baserad på sekundärdata. Denna bestod av sammanlagt sex rapporter, varav tre av dessa var IKEAs hållbarhetsrapporter från 2010, 2013 och 2016. De tre resterande var granskande rapporter från EU-parlamentet, SVTs Uppdrag Granskning och Svenska Dagbladet. Studien utgick från Porter och Kramers teori om strategisk CSR, Carrolls CSR-pyramid och nyinstitutionell teori. Resultatet av den insamlade datan visade att IKEA arbetar med CSR genom egna, konkretiserade mål som är kärnan i hållbarhetsarbetet och att de förhåller sig till ett flertal organisationers riktlinjer för hur CSR ska tillämpas. En viktig komponent i hållbarhetsrapporterna är IWAY, IKEAs uppförandekod för samarbetet med leverantörer. Vidare visade analysen att företaget har identifierat de områden väl där de har en störst påverkan på samhället och att CSR arbetet är bra integrerat i verksamheten. De har i viss mån uppnått ett strategiskt CSR arbete, främst gällande bomullsutvinningen och IWAY. Ett område IKEA kan utvecklas inom är att se vilka möjligheter det finns i den omgivande miljöns påverkan på företaget. I syfte att uppnå legitimitet måste IKEA förhålla sig till samhällets normer, som ställer högre krav än det som förväntas i ren legal och ekonomisk mening, Detta innebär att företaget har blivit tvunget att agera responsivt eller löskoppla.

Människor spenderar allt mer tid på Internet och använder enheter med olika skärmstorlekar och upplösningar mer frekvent när de bläddrar på webben. Detta har gjort att webbutvecklare har ställts inför stora utmaningar med att kunna nå ut till samtliga internetanvändare på ett tillgängligt sätt, oavsett vilken enhet som används. På senare tid har detta blivit ett problem som har lett till att webbutvecklare måste optimera webbplatser för att maximera internetanvändarnas upplevelse. I detta arbete utförs ett tekniskt experiment genom användartester. Målet med experimentet är att undersöka hur interaktioner från användare på en responsiv webbplats kan aggregeras och visualiseras med hjälp av de grafiska verktygen heatmap och heatelements. Resultatet av experimentet visar att det grafiska verktyget heatelement är mer tillförlitligt än heatmaps på en responsiv webbplats när interaktionsdata som samlats in från olika enheter ska aggregeras och visualiseras.

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.

Med responsiv webbdesign skapas en design som sedan dynamiskt anpassar sig till olika enheters skärmbredder, utan att specifika designer måste skapas för att få en anpassad layout till varje specifik enhet. De senaste åren har användandet av mobila enheter för surf på webben ökat och kraven som ställs på det mobila surfandet ökar med detta. Ett problem som uppstår med mobila enheter är att de trots sina små skärmar, använder samma högupplösta bilder som skapats för större skärmar. Detta medför att, trots omskalning av bilder för att responsivt anpassa bilden till enheten, så laddas en onödigt stor bild ned till enheten. Detta kan exempelvis p.g.a. dålig uppkopplings-hastighet skapa en långsam nedladdning som i sin tur ger användaren en långsam surfupplevelse. Detta kan också innebära att det stjäls onödigt mycket trafik. I denna uppsats undersöks och utvärderas olika ramverk och lösningar för responsiv hantering av bilder för att ta reda på vad en bästa lösning är på detta problem. Vad en bästa lösning är visade sig bero mycket på vilka grundförutsättningar som råder och vilka krav som från början ställs på den applikation lösningen ska implementeras i. / With responsive web design, a design is created that dynamically adapts to various devices with different screen widths, without the need to create a custom layout for each specific device. In recent years the use of mobile devices to surf the Web has increased and the demands made on the mobile surfing is growing with it. A problem that arises with mobile devices is that despite their small screens, they’re using the same high-resolution images created for larger screens. This means that, despite resizing images to responsively adjust the image to the device, an unnecessarily large image is downloaded to the device. Due to poor connection speeds, this may create a slow download, which in turn provides the user with a slow browsing experience. This could also mean that an excessive amount of bandwidth is being used. This paper investigates and evaluates different frameworks and solutions for responsive handling of images to find out what the best solution is to this problem. What a best solution is, is shown to depend a lot on what basic conditions that prevail and what requirements are initially placed on the application the solution should be implemented in.