Adapt or Die Användarnas preferenser av mobila webbplatser

Transkript

1 C-Uppsats i Datavetenskap Adapt or Die Användarnas preferenser av mobila webbplatser Författare: Marta Johnsson Handledare: Anne Norling Examinator: Mathias Hedenborg Termin: VT12 Kurskod: 2DV40E

2 Sammanfattning/abstrakt "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%). Nyckelord: responsive web design, mobilanpassad, mobildedikerad, mobil enhet, stationär enhet, anpassa, webbplats, media queries, flexible grids, flexible images i

3 Förord Uppsatsskrivandet har gått relativt smidigt och jag är tacksam för att jag har haft möjligheten att fördjupa mig i ett väldigt intressant ämne. Jag vill tacka Anne Norling för hennes tid, tålamod, mentorskap och viljan att hjälpa till. Jag vill tacka Johan Edlund som fann tid att ställa upp i min intervju. Jag vill också tacka Morgan Rydbrink för all tid, alla artiklar och alla intressanta synvinklar han har bidragit till med. Ett stort tack till alla som har fyllt i mina enkäter och bidragit med sina åsikter på något viss. Jag vill också tacka Mathias Hedenborg som har examinerat detta arbete och med sina värdefulla kommentarer bidragit till en avsevärd förbättrat kvalité av rapporten. Sist men inte minst vill jag tacka min underbara familj för all support och kärlek. ii

4 Innehåll 1 Introduktion Inledning/bakgrund Tidigare forskning Problemformulering Syfte och frågeställning Avgränsning/Begränsning Målgrupp Disposition 6 2 Bakgrund/Teori Responsive web design Mobildedikerad webbplats 11 3 Metod Vetenskaplig ansats Datainsamling Analys Tillförlitlighet 17 4 Resultat/Empiri Kvantitativ enkät Kvalitativ undersökning - experiment och observation Intervju 18 5 Analys och diskussion Problemlösning/resultat Metodreflektion 22 6 Avslutning Slutsats Förslag till fortsatt forskning 23 7 Referenser 24 8 Bilagor 28 iii

5 1 Introduktion Detta kapitel innehåller beskrivning av bakgrunden till detta arbete samt introducerar läsaren in i problemets område. Här presenteras tidigare forskning samt statistisktdata vilka är viktiga för att läsaren ska lättare kunna bekanta sig med problemets domän. Här formläras och klargörs uppsatsens frågeställning. Kapitlet berättar också om uppsatsens begränsningar; den tänkta målgruppen samt presenterar kommande kapitel på ett kortfattat sätt. 1.1 Inledning/bakgrund Dagens teknologiska utveckling går väldigt fort framåt. Nya tekniker och tekniska lösningar tas fram varje dag. Det som verkade omöjligt igår är i allmänt bruk idag. Det är inte bara teknologin som går framåt; vårt sätt att utnyttja den har också förändrats. För bara några år sen var telefonsamtal och SMS 1 det enda man kunde använda en mobiltelefon till. Idag finns det en uppsjö av mobila enheter 2 vilka erbjuder mycket mer än den basala funktionaliteten. Innan mobila enheters explosiva uppkomst på marknaden behövde webbdesigners i stort sett bara tänka på användarens skärmupplösning, det största problemet under denna tid var webbläsarnas olika tolkningar av innehållet. Det fanns någorlunda fasta ramar för de skärmupplösningar som var populärast och det fanns lösningar för hur man skulle gå runt webbläsarnas olika tolkningar av presentationslager. Webbdesigners behövde aldrig tänka på vilken sorts media en webbsida visas på. Idag är det möjligt att utnyttja många olika media-bärare för att just visa en webbsajt. Stora och små dataskärmar, surfplattor, Notebooks, smartphones, TV-skärmar och en del andra enheter som gör det möjligt att se webbens innehål och dessa möjligheter utnyttjas flitigt. Statistiska undersökningar visar att en växande andel Internetanvändare utnyttjar mobila enheter som enda terminal vid användning av Internet O' Sullivan 3 skriver: In the UK and US, a surprising 20% of Internet users are already Mobile Only In African and Asian markets, the number is greater than 50% (O' Sullivan, 2011) 1 "Short Message Service: SMS, är en tjänst för korta textmeddelanden som sänds mellan mobiltelefoner eller från dator till mobiltelefon" ( a, 2012). 2 I uppsatsen har denna benämning valts, för digitala enheter som kan användas vid Internetuppkoppling och som kan vara lätt transporterade i t.ex. en liten väska eller användarens ficka. Med mobila enheter avses inte bara mobiltelefoner, utan också smartphones, surfplattor och andra handhållna enheter samt till och med så kallade minidatorer. 3 En före detta skribent på sajten 1

6 Statistiken visar att betydelsen av mobila enheter växer och att en anpassning av befintliga webbplatser borde ske för att inte stanna i utvecklingen. Det läggs ner otroliga resurser på reklam och sökmotoroptimering, allt för att vinna nya kunder och nya marknader, och just nu är det den mobila marknaden som växer snabbast. Genom att undlåta att anpassa webbplatser till användarnas behov och önskemål, kommer företagen att utestänga en stor del potentiella kunder, vilket kommer att resultera i stora ekonomiska förluster. Uppdragsgivaren för detta arbete är Long Island Divers, vilket är ett mindre dykcenter på norra Öland som vill mobilanpassa sin nuvarande webbsida. 1.2 Tidigare forskning Morgan Stanley påpekar upprepade gånger i sin rapport om Internet Trends (Stanley, 2010) att bruket av mobila enheter vid Internet-användning kommer att överstiga användningen av stationära enheter. I rapporten finns följande påstående: "(...) we believe more users will likely connect to the Internet via mobile devices than desktop PCs within 5 years" (Stanley, 2010). Detta påstående får förstärkning av den statistik som presenteras av Jeremy Ferguson (Ferguson, 2011) samt hans entusiastiska utrop "Smartphones sales pass PC sales for the first time in history!" (Ferguson, 2011). Antalet användare av mobila lösningar växer ständigt och enligt Stanley kommer det bara att växa vidare: "Heavy Mobile Data Users Likely to Triple to 1B+ by 2013E" (Stanley, 2009). En annan statistik från StatCounter 4 pekar åt samma håll och visar att användningen av stationära enheter minskar till förmån för mobila enheter. Detta illustreras med följande figur: 4 StatCounter är ett online verktyg för att mäta webbtrafik. 2

7 Figur 1.1: StatCounter statistik (StatCounter Global Stats b, 2012) Tid Desktop Mobil (excludes tablets 5 ) April ,79% 5,21% April ,42% 9,58% Tabell 1.1: Mobile vs Desktop (StatCounter Global Stats b, 2012) Trots att utvecklingen av nya enheter och användarens vanor förändras väldigt fort, så finns det webbplatser som inte hunnit anpassa sig eller insett vikten av en sådan anpassning, därmed är dessa inte tillgängliga för den breda publiken. Hittade undersökningar har bara koncentrerat sig på sådana mätningar, från vilka det tydligt framstår att användningen av mobila enheter är på ständig framväxt. I ett konferensbidrag från Yanqing Cui och Virpi Roto (Roto & Cui, April 21-25, 2008) kan man dessutom utläsa, att vi använder oss av mobila enheter inte bara när vi har bråttom eller är på resande fot. Det händer att vi väljer att använda oss av mobila enheter även om den stationera enheten är tillgänglig. I skrivande stund har ingen rapport hittats, som visar vilken utformning av sidor anpassade för mobila enheter som föredras av användarna. Det som man kan referera till i detta arbete är ett fall, där man har skapat en "access site" för Tesco 6. Här har man skapat en speciell och fullständig sajt 5 StatCounter defines mobile device as a pocket-sized computing device, typically having a display screen with touch input or a miniature keyboard (StatCounter Global Stats a, 2012). 3

8 som anpassats för människor med någon sorts handikapp. Med tiden visade sig access-versionen mycket mer eftertraktat än den fullständiga sajten. I Tesco fallet handlade det inte om en anpassning till mobila sidor, men trots allt anses det vara relevant. Det visade sig att trots att access-versionen var mer omtyckt, så klagade användarna på att innehållet och funktionaliteten inte var densamma som på den fullständiga sajten (Lawson, 2012). Av detta kan man i stort sett dra slutsatsen att användarna vill kunna nyttja samma innehåll och funktionalitet oberoende av förutsättningar. Det finns två olika teorier och rekommendationer för hur webbutvecklare ska anpassa webbplatser, för att dessa ska blir användbara på mobila enheter och på det sättet tillgängliga för flera.den ena teorin förespråkas av Ethan Marcotte (Marcotte, Responsive web design, 2011) och hans sympatisörer och går ut på att skapa responsiva webbplatser 7 med hjälp av tekniker som Flexible grids Flexible images Media queries I stort sett visas den primära sajten på samma sätt på alla enheter, fast utnyttjande av tidigare nämnda tekniker tillåter en flexibel anpassning (intelligent användning av olika CSS 8 mallar) av alla element. För att avgöra sidans utseende använder man sig av webbläsarens viewport det vill säga storleken av den synliga delen av webbläsarfönstret. Den andra teorin förespråkas av bland annat Jakob Nielsen 9 (Nielsen, 2012). Denna metod går ut på att skapa en separat webbsajt under en annan webbadress eller subdomän. Sajter byggda med denna teori som grund kännetecknas av ett nerbantat innehåll och funktionalitet. För att avgöra, i fall användaren ska omdirigeras till den mobila versionen eller inte, används ett skript 10 med vilken man kan kolla i fall användaren använder sig av en mobil enhet. Exempel på ett sådant skript finns i bilaga nr 1. 6 "Tesco är Storbritanniens största dagligvaruhuskedja med över anställda(...). (...)Företaget har på senare år expanderat även utanför Storbritannien och finns nu i ett flertal europeiska och östasiatiska länder(...)" ( b, 2012). 7 En närmare beskrivning av termen och tekniker bakom finns i kapitel "Cascading Style Sheets (CSS, på svenska stilmall) är ett språk som beskriver presentationsstilen för ett strukturerat dokument som till exempel typsnitt, textstorlek och färg" ( c, 2011). 9 Jakob Nielsen, kallad för "the guru of Web page usability" av The New York Times, är en dansk-amerikansk författare och konsult inom dator- och webbanvändbarhet.(...) Idag anses Nielsen vara en av de ledande auktoriteterna inom användarvänlighet ( f, 2012). 10 "Ett skriptspråk är ett tolkat programspråk. Det innebär att det krävs en speciell exekveringsmiljö för att kunna köra program skrivna i skriptspråk, enligt ungefär samma princip som för Java-program. Varje skriptspråk har en egen exekveringsmiljö, oftast för 4

9 Närmare beskrivningar av båda tekniker finns i kapitel 2.1 och Problemformulering De flesta av dagens webbplatser är inte skapade med mobila enheter i åtanke. De flesta fungerar bäst på vanliga stationära enheter och ibland till och med vid viss skärmupplösning och i valda webbläsare. Tidigare nämda fakta påvisar att Internetanvändare har ändrat sina vanor och sättet att utnyttja webbens resurser. Nya webbsajter dyker upp dagligen och konkurrerar om blivande kunder och användare, vilka allt oftare utnyttjar sina mobila enheter för Internetuppkoppling. Frågan är i fall företag har råd att stanna i utvecklingen och inte anpassa sig efter marknadens behov? Hur ska vi veta vilken av tidigare nämnda lösningar som passar våra användare bäst och vilken information som värderas av de som använder sig av mobila enheter? 1.4 Syfte och frågeställning De frågeställningar arbetet ämnar besvara är: Är det viktigt för användarna att en webbplats är anpassad till mobila enheter? Kan innehållet på den mobila versionen av sajten skilja sig från innehållet på den fullständiga sajten? Är det viktigt för användaren att sidan presenterad på den mobila enheten ser likadan ut som på hans/hennes stationära enhet? Vilken form av anpassning av mobilsajter rekommenderas och praktiseras av webbutvecklare? Anledningen till valet att fördjupa sig i ämnet var bland annat viljan att undersöka användarnas preferenser för att senare kunna utnyttja detta i anpassningen av Long Island Divers webbplats för mobilenheter. 1.5 Avgränsning/Begränsning Det finns ett tredje sätt att skapa mobilanpassat innehåll och detta kan uppnås genom att skapa en så kallad App. Detta sätt kommer inte att tas upp i detta arbete. En populär term, som ofta förväxlas med responsive web design, är adaptive web design, ofta kallad för progressive enhancement. Adaptive web design är en bredare term för användning av principer kring responsive web design. Skillnaden är att med hjälp av adaptive web design kan vi skapa sidor, som flera operativsystem. Skriptkoden är ofta helt portabel vilket innebär att samma skript kan köras på många operativsystem utan redigering" ( d, 2012). Populära skriptspråk är bland annat: PHP, JavaScript eller Python. 5

10 inte bara anpassar sitt utseende med tidigare nämnda tekniker, men också den tillgängliga funktionaliteten beroende på användarens förutsättningar. Detta kan i praktiken innebära att en användare, som inte accepterar JavaScript, får se en sida med innehåll och funktionalitet som anpassats efter just dessa förutsättningar. Detta arbete tar ingen hänsyn till adaptive web design och försöker inte svara på några frågor som kan förknippas med adaptive web design. I undersökningen tas inte hänsyn till kön eftersom problemet inte anses vara genusrelaterat. Den kvantitativa enkätens karaktär förutsätter att respondenten använder sig av Internet, därför har det inte ansetts vara av vikt att efterfråga hans/hennes Internetvanor. 1.6 Målgrupp Målgruppen för denna uppsats är den moderna webbplatsägaren som är medveten om vikten av mobila lösningar och vill anpassa sitt utbud till den breda publiken. Dessutom kan arbetet hjälpa webbutvecklare, som överväger just val av metod för att ska skapa mobila webbplatser för framtida användning. 1.7 Disposition Uppsatsen inleds med en teoretisk bakgrund där användaren lär känna både teorier bakom responsive web design och mobildedikerade webbplatser. För att öka läsarens förståelse för problemet ges praktiska exempel och utförliga förklaring till hur dessa teorier tillämpas i praktiken. Efterföljande metodkapitel beskriver den vetenskapliga ansatsen samt de metoder som valdes för insamling av data. Detta kapitel beskriver också, på en detaljerad nivå, hur datainsamlingen genomfördes och hur analysen av detta material var tänkt att utföras. Kapitel 4 presenterar insamlad data och ger information om undersökningens respondenter. I nästa kapitel finns en analys av det samlade materialet och ett försök att svara på frågeställningar från kapitel ett. Utifrån den genomförda analysen dras slutsatser i det sjätte, avslutande kapitlet. Där finns också förslag på vidare forskning inom ämnet. 6

11 2 Bakgrund/Teori Detta kapitel presenterar teorier vilka denna uppsats stödjer sig på. I kapitlet får man förklaring till vad responsive web design och mobildedikerad sida är och vilka som är dess förespråkare. 2.1 Responsive web design Termen responsive web design användes för första gången av Ethan Marcotte i den artikel i vilken hade han presenterat sina tankar om just responsive web design (Marcotte, ) skrev Marcotte en bok (Marcotte, Responsive web design, 2011) inom ämnet, i vilken han detaljerat beskriver vad begreppet går ut på, vilka tekniker som används för att webbplatsen ska bli responsive samt syftet med själva tekniken. I boken understryker författaren att webben har förändrats och att vi, med utvecklingen av olika medier, inte längre kan vara säkra på hur webbens innehåll serveras för slutanvändaren. Ett stort antal olika modeller av mobiltelefoner, surfplattor, smartphones och liknande enheter gör det nästan fysiskt omöjligt att skapa alternativa sajter för att tillfredställa allas speciella behov. Marcotte beskriver hur vår syn borde förändras och hur vi ska skapa sajter som på sikt kommer att vara flexibla och kan anpassa sig till media som de visas på: Rather than creating disconnected designs, each tailored to a particular device or browser, we should instead treat them as facets of the same experience. In other words, we can craft sites that are not only more flexible, but that can adapt to the media that renders them(marcotte, 2011, s.8). I sin bok presenterar Marcotte tre huvudingredienser i responsive web design. Dessa beskrivs i avsnitten Flexible grids layout (Marcotte, 2011, s.13-41) (...)every aspect of our grid the rows and columns, and the modules draped over them can be expressed as proportions of their containing element, rather than in unchanging, inflexible pixels (Marcotte, 2011, s.23). Flexible grid är ett typografiskt galler i form av två-dimensionell struktur som består av en serie korsande vertikala och horisontella axlar som används för att strukturera innehåll. Gallret fungerar som ett ankare, i vilket en designer 7

12 kan organisera text och bilder på ett sätt som är rationellt och enkelt att ta till sig (egen översättning av definitionen, Wikipedia, 2012). Figur 2.1: Exempel på flexible grid system (Marcotte, 2009) För att skapa skalbara, proportionella layouter förespråkar Marcotte användningen av flexibla enheter som em 11 eller % istället för fast definierade pixlar 12 ( e, 2011) när man anger storleken på sina element. Användningen av skalbara enheter som em har redan relativt länge varit känd bland webbdesigners och används för att skapa texter med bibehållen proportion (Rutter, 2007). Rent praktiskt utgår man från följande formel för att bestämma storleken på sina element: target (mål) context(kontext) = storleken i skalbara enheter Exempel: 24px (storleken vi vill uppnå 1 ) 16px (storleken vi relaterar till 2 ) = 1.5 em 1 t.ex. storleken av en rubrik på sidan 2 t.ex. storleken på bastexten på en sida 11 "An em is a unit of measurement in the field of typography, equal to the currently specified point size" ( g, 2012). 12 Pixel eller bildpunkt är det minsta elementet som en grafisk bild byggs upp av. 8

13 Detta enkla exempel visar hur man skapar skalbar text. För att skapa flexibla grids förespråkar Marcotte att omvandla em till procent genom att multiplicera enheten med 100. Om vi har ett omslutande element, som är 900px brett, och vill placera två andra element inuti, vars respektive bredd är 566 och 331 pixlar, kan vi använda formeln på följande sätt: = * 100 = % = * 100 = % På detta sätt kommer elementens proportioner att behållas Flexible images, audio och video (Marcotte, 2011, s.42-63) Genom att sätta max-width: 100% på ett element med hjälp av CSS (för vissa webbläsare width: 100% samt med hjälp av AlphaImageLoader 13 filter och dess sizingmethod egenskap satt to scale) kan man uppnå skalbara bilder eller andra mediaelement, som aldrig kommer överskrida storleken av sina omslutande element. Användning av AlphaImageLoader förhindrar att bilder tappar sin skärpa. Denna teknik skapar flexibla bilder och media som befinner sig just inom specifika media-taggar 14 som t.ex. image eller video. Ethan Marcotte har skrivit ett JavaScript-skript för att underlätta hela processen med skapande av flexibla images. Skriptet och instruktioner hur man använder det finns under följande adress: För att skapa flexibla bakgrundsbilder finns det andra lösningar vi måste använda oss av. CSS3 tillåter användning av egenskapen background-size för att skapa fullt flexibla bakgrundsbilder. För att den sistnämnda lösningen ska stödjas av alla webbläsare måste man använda sig av en jquery 15 -plugin, skapad av Scott Robbin och tillgänglig under denna adress: Media queries 16 (...) an incredibly robust mechanism for identifying not only types of media, but for actually inspecting the physical characteristics of the devices and 13 Ett filter som skapades för att kunna presenter transparenta bilder i webbläsare som inte hade denna funktionalitet från början. En närmare beskrivning finns tillgänglig här: 14 Tagg är beteckning på olika element som bygger upp ett HTML dokument. För att t.ex. adressen i src-attributet ska kunna tolkas som sökväg till en bild placeras denna i en imagetagg: <image src='bild.jpg'>. 15 jquery är ett kodbibliotek som underlättar arbete med JavaScript 16 Media queries: en av modulerna från CSS3-specifikationen 9

14 browsers that render our content (Marcotte, 2011, s. 74). Användningen av media queries tillåter systemet att känna igen vilken skärmstorlek som en användare har på sin enhet och med hjälp av detta ladda ner specifika stilmallar för att styra hur sidan ska presenteras beroende på enhetens förutsättningar. Media queries fanns redan i CSS version 2.1 och tillät att skriva specifika stilmallar för t.ex. utskrifter eller tv. Genom anpassning av media attribut kunde man bestämma vilken stilmal skulle användas som i följande exempel: <link rel="stylesheet" href="global.css" media="all" /> <link rel="stylesheet" href="main.css" media="screen" /> <link rel="stylesheet" href="paper.css" media="print" /> Media queries i CSS3-specifikationen har gått ännu längre och tillåter att känna igen ännu fler egenskaper av den använda enheten. Med hjälp av media queries kan man kontrollera följande egenskaper: width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan och grid. De flesta egenskaper kan använda sig av min- och max-prefix vid behov. Man kan kombinera samman dessa med hjälp av ordet and för uppnå bättre precision, som i följande exempel ur Marcotts bok (Marcotte, 2011, s. screen and (min-device-width: 480px) and (orientation: landscape) { } För att kunna dra nytta av media queries måste man använda sig av följande kod i sitt dokument: <meta name="viewport" content="initial-scale=1.0, width=device-width" /> Marcotte motiverar detta kodstycke med följande ord: The initial-scale property sets the zoom level of the page to 1.0, or 100%, and helps ensure some consistency across small-screen, viewport-aware browsers (Marcotte, 2011, s.80). Ett exempel på hur man kan använda sig av media queries i ett stilmallsdokument: 10

15 Figur 2.2: Exempel på användning av media queries (Knight, 2011) Detta tillåter att samla CSS-regler för alla enheter i ett och samma dokument. Man kan också placera referenser, i form av standard-länkar, i sitt dokument på följande sätt: Figur 2.3: Media queries placerad i dokumentets head (Knight, 2011) När man använder sig av denna lösning delar man upp CSS-regler i olika dokument, beroende på vilken form av enhet som kommer att använda sig av dessa. 2.2 Mobildedikerad webbplats Det är svårt att hitta ursprung till detta sätt att framställa mobilanpassade webbplatser. Detta är trots allt en vanligt förekommande teknik med många anhängare. Enligt Jakob Nielsen är det nödvändigt att skapa en mobildedikerad webbplats för att skapa en bra upplevelse för slutanvändaren: Good mobile user experience requires a different design than what s needed to satisfy desktop users. 11

16 Two designs, two sites, and cross-linking to make it all work (Nielsen, 2012). Tekniken går ut på att man skapar en speciell variant av en webbsajt och placerar den under en ny adress eller subdomän. Genom att använda sig av ett skript bestäms till vilken version av sajten som användaren skickas, beroende av enheten han/hon använder sig av. Ett exempel på ett sådant skript finns i bilaga 1. Man måste i stort sett hela tiden uppdatera scriptet så fort en ny enhet kommer ut på marknaden. Dessutom krävs det dubbelt jobb både när man tar fram sajten och när man ska uppdatera den. Detta kan i praktiken betyda att användare inte får samma information samtidigt, om de inte använder sig av samma typ/modell av enhet. Of course, if a new browser comes on to the market, the list must be updated or it will return false results, resulting in annoyed users being directed to the wrong site (Lawson, ). Det som kännetecknar sajter skapade på detta sätt är att de oftast blir mycket annorlunda jämfört med den ursprungliga sajten, både utseende- och funktionsmässigt. Detta eftersom de som förespråkar detta sätt att arbeta på tycker att användare av mobila enheter och användare av stationära enheter har olika behov. Man råder dock till att ha en länk till den fullständiga versionen av sajten, i fall användaren vill komma åt den. 12

17 3 Metod I detta kapitel beskrivs de metoder som används för att svara på uppsatsens frågeställningar. Här finns en detaljerad beskrivning av hur man gick till väga för att samla in data som utgör den empiriska bakgrunden i uppsatsen. Här beskrivs också på vilka grunder aktuella målgrupper valdes samt motiveras urval och bortfall. Kapitlet innehåller slutligen en förklaring till hur insamlad data har analyserats samt en bedömning av arbetets tillförlitlighet. 3.1 Vetenskaplig ansats Eftersom det finns två olika teorier, vilka förespråkar två olika sätt att jobba på för att tillgodose behov hos användare av mobila enheter, så har i detta arbete en deduktiv ansats valts. "Vid deduktion börjar man med teorierna och gör utifrån dessa förutsägelser om empirin, vilka man sedan försöker få verifierade av insamlade fakta. Därmed dras slutsatser om separata företeelser utifrån den befintliga teorin." (Björklund & Paulsson, 2003 s.62). 3.2 Datainsamling För att kunna svara på uppsatsens frågeställningar valdes en blandning av kvantitativa och kvalitativa metoder. Valda datainsamlingstekniker: Kvantitativ enkät Kvalitativ studie med experiment och observation Intervju Urval och bortfall För att komma åt en relativt stor grupp respondenter i den kvantitativa undersökningen valdes att använda sig av Internet och e-postlistor, tillgängliga genom LNU 17. Begäran för att fylla i enkäten skickades också genom egna kontakter via Facebook. Det tycktes vara en bra idé. Sannolikheten att frågorna kommer fram till personer som dagligen använder sig av Internet ökade chansen att dessa använde sig av mobila enheter och resultera i ett stort antal svar. I princip var det ett slumpmässigt urval av personer. Det är svårt att bestämma hur stort bortfallet var, eftersom enkäten skickades via e-postlistor där man inte kunde utläsa hur många som skulle komma att få just denna begäran via sin e-post. Hur många kontakter från Facebook, som har fyllt i enkäten är också svårt att bedöma och därmed bestämma bortfall. 17 Linnéuniversitetet 13

18 Till den kvalitativa intervjun gjordes valet att ta kontakt med Johan Edlund, eftersom han varit involverad i ett projekt ( där han valt att tillämpa responsive web design i utvecklingsarbetet. Det tycktes vara av vikt att få prata med en professionell hemsidesnickare, som Johan Edlund kallar sig själv, och få skaparens perspektiv på problemet. Detta var ett strategiskt medvetet val, eftersom Edlunds arbetsområde överstämde mycket väl med valt forskningsområde. För den kvalitativa enkäten gjordes det ett urval bland egna kontakter och kontakternas kontakter. Detta med vetskap om att dessa personer brukar använda sig av mobila enheter för att surfa på Internet. Detta var framförallt ett bekvämlighetsurval, eftersom dessa personer var lättillgängliga men detta utesluter inte, att de skulle kunna tillföra mycket kvalitativ data till projektet. Personer i det egna nätverket var mest kvinnor. De sex respondenter som slutligen ställde upp på att delta i den kvalitativa undersökningen var två män och fyra kvinnor. De var åldermässigt mellan 17 och 55 år gamla samt brukar alla ibland använda sig av sina mobila enheter för att surfa på Internet (i samtliga fall användes en iphone i version 3s till 4s). Tanken var att genomföra denna enkät med tio stycken respondenter, men av de personer som tillfrågades och sade ja från början valde fyra att dra sig ur med motivering som tidsbrist eller bristande intresse Genomförande För att kunna belysa olika aspekter av problemet valdes att jobba med en blandning av kvantitativa och kvalitativa metoder. Den kvantitativa enkätundersökningen har inte tillåtit användaren att motivera sina svar. Den gav en stadig grund och fungerade främst som en pilotenkät, för att utkristallisera ett antal centrala frågeställningar och underlätta framställningen av frågor till den kvalitativa undersökningen. Samtidigt gav den kvantitativa metoden en möjlighet att undersöka en bredare grupp av respondenter utan att insamlad data skulle vara för svår att bearbeta inom ramar för detta tidsbegränsade uppsatsarbete. Dessutom är det vanligt förekommande praktik att använda sig av kvantitativa metoder vid deduktiv vetenskaplig ansats (Backman, 2008, s 54). Eftersom kvalitativa studier tillåter att analysera människornas uppfattningar samt upplevelser bestämdes att låta en mindre grupp att uttala sin mening och göra aktiva val. Detta gav ett nytt ljus på det kvantitativt samlade data. 14

19 För att få en webbutvecklarens perspektiv har en intervju genomförts. En intervju med öppna frågor med låg grad av strukturering valdes. För att kunna svara på uppsatsens frågeställningar, befanns följande metoder vara lämpligt att använda: Kvantitativ enkät Denna metod användes för att undersöka om det är av vikt för användarna att mobilanpassade webbplatser skapas, samt för att undersöka användarnas preferenser vad gäller den mobilanpassade sidans innehåll. Denna metod tillåter att samla en relativ stor datamängd under en ganska kort period och kan vara till stor hjälp vid framtagande av kvalitativa frågor. Frågor som ställdes i enkäten finns i bilaga nr 2. Enkäten publicerades 19/ och mätningen avslutades 26/ med 237 svar som underlagg. I empirin har det medvetet bortsetts från fråga nr 1 som finns med i enkäten, eftersom den senare bedömdes ha varit riktad mot en felaktig grupp av respondenter. För att få fram data, som kunde svara på en liknande fråga, användes en mätning som Smashing Magazine 18 genomförde (bilaga 13). Kvalitativ undersökning med experiment och observation Eftersom uppsatsen har som ambition att svara på hur visa anpassningar till mobila enheter upplevs av webbanvändare, samt undersöka deras preferenser, är det viktigt att fråga om just deras åsikter. Den kvalitativa metoden ger inte något underlag för att kunna dra generella slutsatser, men ger möjlighet att analysera och förhoppningsviss förstå hur den enskilda individen uppfattar och tolkar den rådande verkligheten. Respondenterna fick 4 stycken frågor och ombads att svara på dessa i några få meningar, för att få ut huvudessensen av deras synpunkter. Sedan fick respondenter besöka en fiktiv webbsajt (skapad med hjälp av WordPress 19 version samt en TwentyTen WordPress tema 20 ), fylld med information kommande från Long Island Divers webbplats 21. Denna sajt fick respondenten bekanta sig med på en stationär enhet, med en 24'' stor skärm med 1920px * 1080px i upplösning (se bilaga 3). Sajten 18 Smashing Magazine är en webbplats för professionella webbutvecklare med fokus på nyaste tekniker, trender och best practices inom webbdesign; 19 WordPress är ett modernt publiceringsverktyg med fokus på utseende, webbstandard och användarvänlighet ( Man kan variera en utseendet på en WordPress installation med hjälp av en tema. 20 Man kan applicera olika färdiga thema på sin WordPress- publikation för att ändra dess utseende

20 innehåll 7 stycken huvudsidor och en av dessa ('Dykmål') innehåll 20 stycken undersidor. Senare fick samma person se samma webbsajt i tre olika utföranden med hjälp av en iphone 3s samt iphone 4. A. Samma version av sajten utan några förändringar dvs. TwentyTen WordPress tema (se bilaga 4). B. En version med TwentyEleven WordPress tema; denna tema är en responsive tema (se bilaga 5 och 6) men liknar TwentyTen thema i sitt utseende. En mindre anpassning av typsnittet gjordes i temas CSS fil. C. En mobildedikerad version (se bilaga 7) vilken skapades med hjälp av My Mobile Page V3 Wordpress Theme 22, tillgänglig att köpa på samt Any Mobile Theme Switcher plugin. Denna version var medvetet nerbantad i sitt innehåll och skiljde sig medvetet från de tidigare versioner som respondenten fick se, trots att den skulle representera samma sajt som tidigare versioner. Den innehöll bara fem stycken sidor plus en huvudsida utan text; inga undersidor inkluderades i denna version. Alla respondenter fick använda sig av samma stationära- och mobila enheter under studien. Detta val kan motiveras med att man ville att alla respondenter fick likadana förutsättningar. Intervju En intervju är ett ypperligt tillfälle att ställa följdfrågor och utvinna svar som man inte har kunnat få med hjälp av tidigare valda metoder. I arbetet valdes att intervjua Johan Edlund en expert och pionjär inom responsive web design på den svenska marknaden. Johan Edlund förespråkar teorier liggande bakom responsive web design och är erkänd av själva Ethan Marcotte som listar 24 Johan Edlunds arbete 25 bland sina favoritexempel på just responsiva sajter. Intervjun spelades in för att underlätta senare bearbetning av samlad data. Intervjuguide finns i bilaga Detta plugin känner igen vilken sorts enhet man surfar med; dvs. om det är en mobil enhet eller en desktopps-enhet. Tillgänglig här:

21 3.3 Analys För att analysera den kvantitativa delen av resultatet används jämförelser av insamlad data. Vid analys av miniintervjuer är målet att hitta den gemensamma nämnaren om en sådan finns i det respondenter säger och verkar tycka. För att uppnå detta sker en kontroll ifall det finns några ord, uttryck eller synonymer som förekommer oftare än andra; utifrån denna information ska slutsatser dras. Analysen av intervjun med Johan Edlund, består i att lyfta ut de citat, som bedöms vara av vikt i strävan efter slutsatser. 3.4 Tillförlitlighet Den relativt höga svarsantalet i den kvantitativa undersökningen kan vara en faktor som tyder på hög reliabilitet. Man kan förhoppningsviss upprepa en sådan mätning och få liknande procentuell utfall. Validiteten försökte hållas på en hög nivå, men det är svårt att säga i fall man kunde ställa andra frågor eller formulera dessa på ett annat sätt och på det viset påverka resultatet. I stort sett får det slutliga resultat anses stämma överens med arbetets syfte och frågeställning samtidigt som strävan efter både hög reliabilitet och validitet har genomsyrat hela forskningsprocessen, därför anses validitet att vara uppnådd. Validiteten i en kvalitativ studie är ej heller relaterad enbart till själva datainsamlingen. Istället genomsyrar strävan efter god validitet forskningsprocessens samtliga delar (Patel & Davidson, 2003, s.103). 17

22 4 Resultat/Empiri I detta kapitel presenteras det, via tidigare valda metoder, uppnådda resultatet. Här framgår hur många som har deltagit i respektive undersökning samt hänvisningar till bilagor i vilka man kan hitta både det kvalitativa som kvalitativa data som utgör grunden för kommande analys. 4.1 Kvantitativ enkät I enkäten deltog det sammanlagt 237 personer. Enkäten finns tillgänglig i bilaga 8; resultatet finns i bilaga 9. Enkäten innehåll 5 stycken frågor. Fråga nr 1 ansågs inte vara representativ för studien och resultatet för denna fråga presenteras inte. 4.2 Kvalitativ undersökning - experiment och observation I den kvalitativa intervjun deltog fyra kvinnor och två män i åldrarna 17 till 55; medelåldern för deltagarna var ca: 35 år. Undersökningen var anonym och vid representationen av respondenternas svar används det beteckning A till F istället för verkliga namn. A: kvinna 55 år B: kvinna 33 år C: kvinna 32 år D: man 55 år E: kvinna 17 år F: man 20 år Frågor och instruktioner finns i bilaga 10; resultatet finns i bilaga 11. En djupare återkoppling till resultatet finns i analysdelen. 4.3 Intervju Intervjuguide finns i bilaga 12. Citaten som utvaldes att använda i bearbetning av resultatet kommer att lyftas fram i analysdelen; resultat och analyskapitlet läggs ihop. 18

23 5 Analys och diskussion Detta kapitel innehåller analys av tidigare insamlad data. Ambitionen med detta kapitel är att svara på arbetets frågeställningar samt reflektera över den valda metoden; dess för- och nackdelar och eventuella påverkan på resultatet. 5.1 Problemlösning/resultat Detta avsnitt presenterar en detaljerad analys av samlad data och försöker att svara på frågeställningar från första kapitlet Mobil anpassning Både den kvantitativa och den kvalitativa undersökningen påvisar att användare av mobila enheter tycker att det är viktigt med anpassning av webbsajter till just deras media. Det är hela 91,1% som anser att det är viktigt med lättanvända webbplatser och 83,1% visar sitt missnöje genom att lämna en webbplats som inte motsvarar deras förväntningar: "Skulle sidor vara anpassade så skulle man inte behöva sätta på datorn så ofta bara för att kolla upp en liten grej eller så" (man, 55år). Egenskaper som snabbhet, bekvämlighet, läsbarhet och närhet till själva enheten samt tillgång till en genomtänk navigering och struktur uppskattas och detta är viktigt eftersom det anses vara enklare att använda den mobila enheten till en del uppgifter: "Det är enklare att använda mobilen än att starta datorn" (kvinna, 17 år). Det som upplevdes som mest jobbigt och besvärligt är behovet att zooma in och ut för att kunna komma åt informationen på en sida samt behovet att scrolla sidorna horisontellt: "Jag tycker att det är jobbigt när jag behöver zooma in och ut eller scrolla skärmen åt sidan" (kvinna, 33 år). Edlund säger att typografin är mycket viktig och det man jobbar mest med när man skapar responsiva sidor. Han säger: "(...) typografin inom webb designen har fått en boots genom responsive web design" och understryker senare i intervjun ännu gång vikten av typografin Igenkännande För över hälften av respondenter (64,6%) är det mycket viktigt att känna igen sig på en mobil webbplats; detta skapar en känsla av trygghet "Så att jag vet hur saker är tänkta att fungera och vad jag kan hitta på sidan" (man, 55 år). Edlund tycker också att det är viktigt för användarna att kunna känna igen sig och säger: " (...) jag tror som besökare att man ska ha den där igenkänningen och känna jag är på samma sajt fast jag använder en annan enhet (...)". Trots att staffanstorp.se fick en positiv genklang fanns det röster av missnöje, huvudsakligen från äldre användare som redan hade lärt sig hur den gamla sajten fungerade och inte tyckte om att behöva lära sig en ny. Det 19

24 genomförda experiment visar att användarna, trots viljan att sajten ska se likadan ut oberoende av enheten, är villiga att offra den bekväma zonen av igenkännande och acceptera en annan layout så länge som det bidrar till att sidan bli enklare att använda Innehållet Enligt den kvantitativa undersökningen visar sig hälften av respondenterna (49,8%) villiga att offra en del av informationen eller funktionaliteten på en sida, mot det att webbplatsen är anpassad till just mobila enheter. Samtidigt vill hela 35% behålla all information och funktionalitet och är villiga att offra just den mobila anpassningen för det. Om man nu tittar på vilka val som gjordes av deltagare i den kvalitativa undersökningen, visar det sig att de flesta var villiga att offra tillgång till den fullständiga informationen och funktionaliteten i fall användningen av sidan skulle underlättas på det viset. Detta valdes trots att de innan dess tyckte att det var viktigt att sidan såg likadan ut och hade samma innehåll oberoende av enheten den visas på. Man kan se en viss inkonsekvens mellan hur respondenterna svarar på rent teoretiska frågor och vilka val de genomför i praktiken. Detta kan antyda att användarna har en hög nivå av flexibilitet och en förmåga att anpassa sig. Användarna väljer i första hand det gamla och beprövade för att inte behöva lära sig något nytt. Om den nya lösningen motsvarar deras förväntningar har de ingenting emot ändringar. Detta kan också tolkas, som att användarna kan prioritera om sina behov så fort de har ändrat sitt sätt att komma åt informationen och ändrar sitt beteende när de ändrar enheten de använder sig av. Även Johan Edlund fick prioritera bort en del av innehållet på staffanstorp.se och säger att "(...) webbdesign är i stort sett prioritering" och ibland måste man välja bort saker som inte känns så viktiga för att kunna presentera det väsentliga utan att skräpa ner sidan. Detta är i stort sett emot responsive web design-teorin, men som vi ser används i praktiken (författarens anm.). Edlund hänvisar också till olika undersökningar eller HTML-quiz gjorda av webbdesigners (han nämner Dan Cederholm som exempel) för att upptäcka vilka delar av sidan kan tas bort utan att den tappar sitt budskap och mening. Han säger också att allt är individuellt och beror på projektet man jobbar med Responsive vs mobildedikerad Den av Smashing Magazine genomförda webbenkäten (bilaga 13) visade att det är ett flertal webbutvecklare som väljer att bygga sajter med responsive 20

25 web design än de som väljer separata mobildedikerade sidor. Johan Edlund fick relativt fria händer när han skulle bygga den nya sajten för Staffanstorp kommun och valde då responsive web design eftersom det verkade lovande: Då satte jag mer ner och precis då hade Dan Cederholm gett ut en bok där Ethan Marcotte har ett avsnitt som handlar om responsive design. Och när jag läste det avsnittet så kändes det väldigt bra alltså; det var precis; jag tänkte det här verkar hur bra som helst och sade att då kör jag på att bygga en responsive design sajt för Staffanstorp. Edlund säger att responsive web design inte är botmedel mot allt och ingen lösning för alltid, eftersom tekniken går framåt och nya lösningar tas fram. Edlund tror på det och väljer att använda i sina projekt när moderna webbplatser ska byggas. (...) filosofin bakom responsive web design och mobile first tänket också då, det känns helt rätt och det kommer inte att försvinna i första taget, utan grundstrukturerna att det ska vara flexibelt, och att det ska fungera på alla olika enheter, det kommer att vara kvar en ganska bra stund. Samtidigt påpekar han att skapande av en separat mobildedikerad sajt kräver extra jobb ofta i form av ett separat projekt. Detta tycker han inte om eftersom dessa olika projekt ofta har väldigt lite gemensamt. Det faktum att det redan finns teorier, som förespråkar olika utformningar på mobila webbplatser, tyder på att problemet är aktuellt. Det är svårt att säga i fall responsive web design eller mobilanpassad lösning fungerar bäst för användarna, eftersom de oftast är omedvetna om vilka tekniker som gömmer sig bakom en lösning. Den genomförda studien visar, att användare är villiga att offra möjligheten att kunna komma åt information i bekvämlighetens namn, samt kan acceptera skillnader i layouten av samma anledning. Detta pekar åt teorin som Jakob Nielsen förespråkar, och antyder att användare av mobila enheter har andra förväntningar än användare av stationära enheter och borde betraktas olika. Man kan trots allt inte glömma bort att användarna inte känner till bakomliggande svårigheter som är kopplade till just denna lösningen. Dessutom säger Edlund att som kund så får man faktiskt "(...) mycket design för pengarna". Responsive web design kan vara något dyrare och lite mer tidskrävande i början än andra lösningar. Trots allt måste man komma ihåg att det blir lättare och billigare i längden eftersom man inte behöver underhålla olika versioner av sajten. En annan fördel är att alla användare får tillgång till samma information samtidigt. 21

26 Internet-användare vill att webben ska anpassa sig till deras förutsättningar och med alla nya tekniska lösningar är detta fullkomligt möjligt. Man kan kanske skapa webbplatser vilka motsvarar användarnas förväntningar samtidigt som de är lätta att underhålla för webbutvecklarna; precis som Edlund sa: "(...) webbdesign är i stort sett prioritering". 5.2 Metodreflektion Metoder som valdes för att genomföra denna studie, möjliggör att belysa olika aspekter av problemet. I efterhand kan sägas att just blandningen av kvantitativa och kvalitativa metoder gjorde hela studien mer spännande och intressant, eftersom den tillät både generella slutsatser och en möjlighet att bekanta sig med individuella synpunkter. Samtidigt fanns initialt risken, att var och en av de valda metoderna kunde resultera i så pass olika resultat, att hela studien skulle kännas för splittrad och opålitlig. För att undvika en sådan förvirring skulle man kunnat koncentrera sig på bara en metod t.ex. den kvalitativa. Fler djupgående intervjuer med 'vanliga' brukare av mobila enheter skulle kunna tillföra intressanta synvinklar till arbetet. Eftersom intervjun med Johan Edlund var ostrukturerad och frågornas ordning har styrts av den naturliga samtalsgången, är den bifogade intervjuguiden (bilaga 12) redigerad i efterhand för att underlätta för läsaren. Utskriftsarbetet är inte någon mekanisk process där bandinspelat tal överförs till skrivna meningar. Det talade ordet måste "snyggas upp" och redigeras en aning för att få en för läsaren begriplig form på den skrivna sidan. Därigenom förlorar det ofrånkomligen en del av sin autenticitet (Denscombe, 2009, s. 262). 22

27 6 Avslutning Detta avslutande kapitel innehåller en övergripande slutsats baserad på analysen av undersökningsdata samt förslag till eventuell vidare forskning. 6.1 Slutsats Det har visat sig att tillgången till webbsidor, som presenteras på ett tillgängligt sätt på mobila enheter, uppskattas mycket högt av användarna: "Finns det möjlighet att surfa via mobilen då tycker jag att det ska vara lätt" (kvinna, 33år). Den moderna användaren föredrar enkelhet och användarvänliga sidor (detta var viktigt för 91,1% av respondenterna) men kan anpassa sina förväntningar på innehållet, beroende på tekniken som används. Nästan hälften av respondenterna (49,8%) svarade att de kunde avstå en viss information på sidan bara för att få den anpassad för mobila enheter. Även om Internet-användare vänjer sig vid utseendet på sidor de använder sig av, är de, trots en viss dos av skepticism, villiga att lära sig använda en sida med ett annat utseende: "Det tog tid att lära sig att använda min bank på deras mobilsida eftersom allt såg annorlunda ut. Jag var skeptisk till sidan från början för att den inte påminde om den riktiga sidan" (kvinna, 32 år). 6.2 Förslag till fortsatt forskning Den fortsatta forskningen skulle kunna koncentrera sig på en ren kvalitativ studie, där man på ett bredare plan undersöker fler olika versioner av en webbplats och testar dessa med olika enheter. En koppling till teorier kring användarvänlighet skulle kunna tillföra arbetet en djupare nivå av förståelse för bakomliggande motiv till användarnas val. Man skulle sedan kunna genomföra djupare intervjuer, för att katalogisera användarnas preferenser vad gäller just sajter, visade via mobila enheter. 23

28 7 Referenser Backman, J. (2008). Rapporter och uppsatser. Lund: Studentlitteratur. Björklund, M., & Paulsson, U. (2003). Seminarieboken - att skriva, presenter och opponera. Lund: Studentlitteratur. Denscombe, M. (2009). Forskningshandboken - för småskaliga förskningsprojekt inom samhällsvetenskaperna. Lund: Studentlitteratur. Ferguson, J. (den ). SmartOnline. Hämtat från den Gustafson, A. (2011). Adaptive web design. Crafting Rich Experiences with Progressive Enhancement. Chattanooga, Tennessee, USA: Easy Readers, LLC. Hicks, S. (2012). Hämtat från Words & Letters: den g. (den ). Hämtat från den a. (den ). Hämtat från den b. (den ). Hämtat från den c. (den ). Hämtat från den

29 e. (den ). Hämtat från den f. (den ). Hämtat från den d. (den ). Hämtat från den (u.d.). Hämtat från den Knight, K. (den ). Hämtat från den Lawson, B. (den ). Hämtat från den Lawson, B. (den ). Hämtat från den Marcotte, E. (den ). Hämtat från den Marcotte, E. (den ). Hämtat från den Marcotte, E. (2011). Responsive web design. New York, New York: A Book Apart. 25

30 Nielsen, J. (den ). Mobile Site vs. Full Site. Hämtat från den O' Sullivan, C. (den ). Hämtat från internet-users-dont-use-a-computer/ den Patel, R., & Davidson, B. (2003). Forskningsmetodikensgrunder. Att planera, genomföra och rapportera en undersökning. Lund: Studentlitteratur. Roto, V., & Cui, Y. (April 21-25, 2008). How People Use the Web on Mobile Devices. How People Use the Web on Mobile Devices (ss ). Beijing, China: International World Wide Web Conference. Rutter, R. (den ). Hämtat från den (den ). Hämtat från den Stanley, M. (den ). Hämtat från _Internet_Trends_102009_FINAL.pdf den Stanley, M. (den ). Hämtat från ds_ pdf den StatCounter Global Stats a. (den ). Hämtat från den StatCounter Global Stats b. (den ). Hämtat från den

31 Wikipedia. (den ). Hämtat från den

32 8 Bilagor Bilaga 1: PHP skript som tillåter att känna igen vilken enhet en användare surfar med 2012). Bilaga 2: Kvalitativ enkät - frågor Bilaga 3: Skärmdump - desktopp version Bilaga 4: Skärmdump - ej anpassad sajt via iphone3s Bilaga 5: Skärmdump - Responsive tema - menu Bilaga 6: Skärmdump - Responsive tema via iphone3 - text Bilaga 7: Skärmdump - Mobildedikerad tema Bilaga 8: Kvantitativ enkät - frågor Bilaga 9: Kvantitativ enkät - resultat Bilaga 10: Kvalitativ undersökning - frågor och instruktioner Bilaga 11: Kvalitativ undersökning - resultat Bilaga 12: Intervjuguide Bilaga 13 Responsive vs mobildedikerad - trender 28

33 Bilaga 1 PHP skript som tillåter att känna igen vilken enhet en användare surfar med (serbanghita@gmail.com, 2012). <?php /** * Mobile Detect * $Id: Mobile_Detect.php :45:00Z serbanghita@gmail.com $ * require_once 'Mobile_Detect.php'; * $detect = new Mobile_Detect(); * $detect->ismobile() or $detect->istablet() * * For more specific usage see the documentation navigate to: * * The MIT License */ class Mobile_Detect { protected $detectionrules; protected $useragent = null; protected $accept = null; // Assume the visitor has a desktop environment. protected $ismobile = false; protected $istablet = false; protected $phonedevicename = null; protected $tabletdevicename = null; protected $operatingsystemname = null; protected $useragentname = null; // List of mobile devices (phones) protected $phonedevices = array( 'iphone' => '(iphone.*mobile ipod itunes)', 'BlackBerry' => 'BlackBerry rim[0-9]+', 'HTC' => 'HTC HTC.*( A7272 S510e C110e Legend Desire T8282) APX515C KT Qtek9090', 'Nexus' => 'Nexus One Nexus S', 'DellStreak' => 'Dell Streak', 'Motorola' => '\bdroid\b.*build HRI39 MOT\- A1260 A1680 A555 A853 A855 A953 A955 A956 Motorola.*ELECTRIFY Motorol a.*i1 i867 i940 MB200 MB300 MB501 MB502 MB508 MB511 MB520 MB525 MB 526 MB611 MB612 MB632 MB810 MB855 MB860 MB861 MB865 MB870 ME501 ME502 ME511 ME525 ME600 ME632 ME722 ME811 ME860 ME863 ME865 MT 620 MT710 MT716 MT720 MT810 MT870 MT917 Motorola.*TITANIUM WX435 1

34 WX445 XT300 XT301 XT311 XT316 XT317 XT319 XT320 XT390 XT502 XT530 XT531 XT532 XT535 XT603 XT610 XT611 XT615 XT681 XT701 XT702 XT711 XT720 XT800 XT806 XT860 XT862 XT875 XT882 XT883 XT894 XT909 XT910 XT912 XT928', 'Samsung' => 'Samsung GT-I9100 GT-I9000 GT-I9020 SCH-A310 SCH- A530 SCH-A570 SCH-A610 SCH-A630 SCH-A650 SCH-A790 SCH-A795 SCH- A850 SCH-A870 SCH-A890 SCH-A930 SCH-A950 SCH-A970 SCH-A990 SCH- I100 SCH-I110 SCH-I400 SCH-I405 SCH-I500 SCH-I510 SCH-I515 SCH- I600 SCH-I730 SCH-I760 SCH-I770 SCH-I830 SCH-I910 SCH-I920 SCH- LC11 SCH-N150 SCH-N300 SCH-R300 SCH-R400 SCH-R410 SCH-T300 SCH- U310 SCH-U320 SCH-U350 SCH-U360 SCH-U365 SCH-U370 SCH-U380 SCH- U410 SCH-U430 SCH-U450 SCH-U460 SCH-U470 SCH-U490 SCH-U540 SCH- U550 SCH-U620 SCH-U640 SCH-U650 SCH-U660 SCH-U700 SCH-U740 SCH- U750 SCH-U810 SCH-U820 SCH-U900 SCH-U940 SCH-U960 SCS-26UC SGH- A107 SGH-A117 SGH-A127 SGH-A137 SGH-A157 SGH-A167 SGH-A177 SGH- A187 SGH-A197 SGH-A227 SGH-A237 SGH-A257 SGH-A437 SGH-A517 SGH- A597 SGH-A637 SGH-A657 SGH-A667 SGH-A687 SGH-A697 SGH-A697 SGH- A707 SGH-A717 SGH-A727 SGH-A737 SGH-A747 SGH-A767 SGH-A777 SGH- A797 SGH-A817 SGH-A827 SGH-A837 SGH-A847 SGH-A867 SGH-A877 SGH- A887 SGH-A897 SGH-A927 SGH-C207 SGH-C225 SGH-C417 SGH-D307 SGH- D347 SGH-D357 SGH-D407 SGH-D415 SGH-D807 SGH-E105 SGH-E315 SGH- E316 SGH-E317 SGH-E335 SGH-E635 SGH-E715 SGH-I577 SGH-I607 SGH- I617 SGH-I627 SGH-I637 SGH-I677 SGH-I717 SGH-I727 SGH-I777 SGH- I827 SGH-I847 SGH-I857 SGH-I896 SGH-I897 SGH-I907 SGH-I917 SGH- I927 SGH-I937 SGH-I997 SGH-N105 SGH-N625 SGH-P107 SGH-P207 SGH- P735 SGH-P777 SGH-Q105 SGH-R225 SGH-S105 SGH-S307 SGH-T109 SGH- T119 SGH-T139 SGH-T209 SGH-T219 SGH-T229 SGH-T239 SGH-T249 SGH- T259 SGH-T309 SGH-T319 SGH-T329 SGH-T339 SGH-T349 SGH-T359 SGH- T369 SGH-T379 SGH-T409 SGH-T429 SGH-T439 SGH-T459 SGH-T469 SGH- T479 SGH-T499 SGH-T509 SGH-T519 SGH-T539 SGH-T559 SGH-T589 SGH- T609 SGH-T619 SGH-T629 SGH-T639 SGH-T659 SGH-T669 SGH-T679 SGH- T709 SGH-T719 SGH-T729 SGH-T739 SGH-T749 SGH-T759 SGH-T769 SGH- T809 SGH-T819 SGH-T839 SGH-T919 SGH-T919 SGH-T929 SGH-T939 SGH- T939 SGH-T959 SGH-T989 SGH-V205 SGH-V206 SGH-X105 SGH-X426 SGH- X427 SGH-X475 SGH-X495 SGH-X497 SGH-X507 SGH-ZX10 SGH-ZX20 SPH- A120 SPH-A400 SPH-A420 SPH-A460 SPH-A500I SPH-A560 SPH-A600 SPH- A620 SPH-A660 SPH-A700 SPH-A740 SPH-A760 SPH-A790 SPH-A800 SPH- A820 SPH-A840 SPH-A880 SPH-A900 SPH-A940 SPH-A960 SPH-D600 SPH- D700 SPH-D710 SPH-D720 SPH-I300 SPH-I325 SPH-I330 SPH-I350 SPH- I500 SPH-I600 SPH-I700 SPH-L700 SPH-M100 SPH-M220 SPH-M240 SPH- M300 SPH-M305 SPH-M320 SPH-M330 SPH-M350 SPH-M360 SPH-M370 SPH- M380 SPH-M510 SPH-M540 SPH-M550 SPH-M560 SPH-M570 SPH-M580 SPH- M610 SPH-M620 SPH-M630 SPH-M800 SPH-M810 SPH-M850 SPH-M900 SPH- M910 SPH-M920 SPH-M930 SPH-N200 SPH-N240 SPH-N300 SPH-N400 SPH- Z400 SWC-E100', 'Sony' => 'E10i SonyEricsson SonyEricssonLT15iv', 'Asus' => 'Asus.*Galaxy', 2

35 'Palm' => 'PalmSource Palm', // avantgo blazer elaine hiptop plucker xiino 'GenericPhone' => '(mmp pocket psp symbian Smartphone smartfon treo up.browser up.link vodafone w ap nokia Series40 Series60 S60 SonyEricsson N900 PPC; MAUI.*WAP.*Browser L G-P500)' ); // List of tablet devices. protected $tabletdevices = array( 'BlackBerryTablet' => 'PlayBook RIM Tablet', 'ipad' => 'ipad ipad.*mobile', check for mobile friendly s topic. 'Kindle' => 'Kindle Silk.*Accelerated', 'SamsungTablet' => 'SAMSUNG.*Tablet Galaxy.*Tab GT-P1000 GT- P1010 GT-P6210 GT-P6800 GT-P6810 GT-P7100 GT-P7300 GT-P7310 GT- P7500 GT-P7510 SCH-I800 SCH-I815 SCH-I905 SGH-I777 SGH-I957 SGH- I987 SGH-T849 SGH-T859 SGH-T869 SGH-T989 SPH-D710 SPH-P100', 'HTCtablet' => 'HTC Flyer HTC Jetstream HTC-P715a HTC EVO View 4G PG41200', 'MotorolaTablet' => 'xoom sholest MZ615 MZ605 MZ505 MZ601 MZ602 MZ603 MZ604 MZ606 MZ60 7 MZ608 MZ609 MZ615 MZ616 MZ617', 'AsusTablet' => 'Transformer TF101', 'NookTablet' => 'NookColor nook browser BNTV250A LogicPD Zoom2', 'AcerTablet' => 'Android.*(A100 A101 A200 A500 A501 A510 W500 W500P W501 W501P)', 'YarvikTablet' => 'Android.*(TAB210 TAB211 TAB224 TAB250 TAB260 TAB264 TAB310 TAB360 TAB364 TAB410 TAB411 TAB420 TAB424 TAB450 TAB460 TAB461 TAB464 TAB465 TAB467 TAB468)', 'GenericTablet' => 'Tablet(?!.*PC) ViewPad7 LG- V909 MID7015 BNTV250A LogicPD Zoom2 \ba7eb\b CatNova8 A1_07 CT704 CT1002 \bm721\b', ); // List of mobile Operating Systems. protected $operatingsystems = array( 'AndroidOS' => '(android.*mobile android(?!.*mobile))', 'BlackBerryOS' => '(blackberry rim tablet os)', 'PalmOS' => '(avantgo blazer elaine hiptop palm plucker xiino)', 'SymbianOS' => 'Symbian SymbOS Series60 Series40 \bs60\b', 'WindowsMobileOS' => 'IEMobile Windows Phone Windows CE.*(PPC Smartphone) MSIEMobile Window Mobile XBLWP7', 'ios' => '(iphone ipod ipad)', 'FlashLiteOS' => '', 'JavaOS' => '', 'NokiaOS' => '', 'webos' => '', 'badaos' => '\bbada\b', 'BREWOS' => '', 3

36 ); // List of mobile User Agents. protected $useragents = array( 'Chrome' => '\bcrmo\b Chrome\/[.0-9]* Mobile', 'Dolfin' => '\bdolfin\b', 'Opera' => 'Opera.*Mini Opera.*Mobi', 'Skyfire' => 'skyfire', 'IE' => 'IEMobile', 'Firefox' => 'fennec firefox.*maemo (Mobile Tablet).*Firefox Firefox.*Mobile', 'Bolt' => 'bolt', 'TeaShark' => 'teashark', 'Blazer' => 'Blazer', 'Safari' => 'Mobile.*Safari Safari.*Mobile', 'Midori' => 'midori', 'GenericBrowser' => 'NokiaBrowser OviBrowser SEMC.*Browser' ); function construct(){ // Merge all rules together. $this->detectionrules = array_merge( $this->phonedevices, $this->tabletdevices, $this->operatingsystems, $this->useragents ); $this->useragent = $_SERVER['HTTP_USER_AGENT']; $this->accept = $_SERVER['HTTP_ACCEPT']; if ( isset($_server['http_x_wap_profile']) isset($_server['http_x_wap_clientid']) isset($_server['http_wap_connection']) isset($_server['http_profile']) isset($_server['http_x_operamini_phone_ua']) // Reported by Nokia devices (eg. C3) isset($_server['http_x_nokia_ipaddress']) isset($_server['http_x_nokia_gateway_id']) isset($_server['http_x_orange_id']) isset($_server['http_x_vodafone_3gpdpcontext']) isset($_server['http_x_huawei_userid']) isset($_server['http_ua_os']) // Reported by Windows Smartphones (isset($_server['http_ua_cpu']) && $_SERVER['HTTP_UA_CPU'] == 'ARM') // Seen this on a HTC ) { 4

37 $this->ismobile = true; } elseif (!empty($this->accept) && (strpos($this->accept, 'text/vnd.wap.wml')!== false strpos($this->accept, 'application/vnd.wap.xhtml+xml')!== false)) { $this->ismobile = true; } else { $this->_detect(); } } public function getrules() { return $this->detectionrules; } /** * Magic overloading method. * boolean is[...]() string $name array $arguments mixed */ public function call($name, $arguments) { } $key = substr($name, 2); return $this->_detect($key); /** * Private method that does the detection of the * mobile devices. * type $key boolean null */ private function _detect($key='') { if(empty($key)){ // Begin general search. foreach($this->detectionrules as $_regex){ if(empty($_regex)){ continue; } if(preg_match('/'.$_regex.'/is', $this->useragent)){ 5

38 $this->ismobile = true; return true; } } return false; } else { // Search for a certain key. // Make the keys lowecase so we can match: isiphone(), isiphone(), isiphone(), etc. $key = strtolower($key); $_rules = array_change_key_case($this->detectionrules); } } if(array_key_exists($key, $_rules)){ if(empty($_rules[$key])){ return null; } if(preg_match('/'.$_rules[$key].'/is', $this->useragent)){ $this->ismobile = true; return true; } else { return false; } } else { trigger_error("method $key is not defined", E_USER_WARNING); } return false; /** * Check if the device is mobile. * Returns true if any type of mobile device detected, including special ones bool */ public function ismobile() { return $this->ismobile; } /** * Check if the device is a tablet. * Return true if any type of tablet device is detected. boolean */ 6

39 public function istablet() { } foreach($this->tabletdevices as $_regex){ if(preg_match('/'.$_regex.'/is', $this->useragent)){ $this->istablet = true; return true; } } return false; } 7

40 Bilaga 2 Kvalitativ enkät - frågor Responsive web design - Adapt or die Hej! Mitt namn är Marta Johnsson och jag och jag skriver min C-uppsats om responsive (adaptive/reaktiv) webdesign. Detta är ett intressant och väldigt aktuellt ämne; jag vill gärna veta vad ni har åsikter. Jag skulle vara mycket tacksam om ni kunde ta er tid att svara på mina enkätfrågor. Ni kommer självklart vara anonyma. Tack på förhand! Mvh Marta Johnsson *Ett sätt att skapa webbsajter som anpassar sitt utseende/beteende till enheten dom visas på. Med mobila enheter menas det i undersökningen alla sorters smartphones, surfplattor och liknande enheter som inte går att kvalificera som en standard desktop enhet eller laptop (så kallade mini datorer kommer också betraktas som mobila enheter). Fråga nr 1 är riktad till webbutvecklare, personer som inte jobbar med webbutveckling behöver inte svara på den. Man bör helst använda, eller ha en viss kunskap om mobila enheter när man svarar på enkäten. 1 Utvecklar du webbsajter med tanken på responsive (adaptive/reaktiv) web design? Ja Nej Jag vet inte vad responsive (adaptive/reaktiv) web b design är 2 *Tycker du att det är viktigt att en webbplats är lättanvänd på mobila enheter? Ja Nej Varken eller 3 *Har det hänt att du lämnade en sajt för att det var jobbigt/besvärligt att använda den via mobila enheter? Ja Nej Jag minns inte 4 *Hur viktigt är det att man 'känner igen sig' på en sajt oberoende av vilken enhet man surfar med? Mycket Viktigt Inte så viktigt Inte alls viktigt 1

41 5 *Om du hade att välja två sidor som tillhandahåller en likadan tjänst/produkt och var tvungen att använda enmobil enhet för att skaffa tjänsten/produkten vilken sida skulle du föredra: Sidan anpassade för mobila enheter men en viss information/funktionalitet kan vara borttagen Ej anpassade sida men med alla information/ funktionalitet bibehållen Det spelar ingen roll 2

42 Bilaga 3 Skärmdump - desktopp version 8.1Desktopp version 1

43 Bilaga 4 Skärmdump - ej anpassad sajt via iphone3s 1 Ej anpassad sajt via iphone3s 1

44 Bilaga 5 Skärmdump - Responsive tema - menu 1 Responsive tema - menu 1

45 Bilaga 6 Skärmdump - Responsive tema via iphone3 - text 1 Responsive tema via iphone3 1

46 Bilaga 7 Skärmdump - Mobildedikerad tema 1 Mobildedikerad tema 1

47 Bilaga 8 Kvantitativ enkät - frågor 1. Utvecklar du webbsajter med tanken på responsive (adaptive/reaktiv) web design? Ja Nej Jag vet inte vad responsive (adaptive/reaktiv) web design är 2. Tycker du att det är viktigt att en webbplats är lättanvänd på mobila enheter? Ja Varken eller Nej 3. Har det hänt att du lämnade en sajt för att det var jobbigt/besvärligt att använda den via mobila enheter? Ja Nej Jag minns inte 4. Hur viktigt är det att man 'känner igen sig' på en sajt oberoende av vilken enhet man surfar med? Mycket Viktigt Inte så viktigt Inte alls viktigt 5. Om du hade att välja två sidor som tillhandahåller en likadan tjänst/produkt och var tvungen att använda en mobil enhet för att skaffa tjänsten/produkten vilken sida skulle du föredra: Sidan anpassade för mobila enheter men en viss information/funktionalitet kan vara borttagen Ej anpassade sida men med alla information/funktionalitet bibehållen Det spelar ingen roll 1

48 Bilaga 9 Kvantitativ enkät - resultat 2. Tycker du att det är viktigt att en webbplats är lättanvänd på mobila enheter? Svar Resultat i % Resultat i st. Ja 91,1 216 Varken eller 5,9 14 Nej 3 7 Totalt Har det hänt att du lämnade en sajt för att det var jobbigt/besvärligt att använda den via mobila enheter? Svar Resultat i % Resultat i st. Ja 83,1 197 Nej 12,2 29 Jag minns inte 4,6 11 Totalt Hur viktigt är det att man 'känner igen sig' på en sajt oberoende av vilken enhet man surfar med? Svar Resultat i % Resultat i st. Mycket Viktigt 64,6 153 Inte så viktigt 32,9 78 Inte alls viktigt 2,5 6 Totalt Om du hade att välja två sidor som tillhandahåller en likadan tjänst/produkt och var tvungen att använda en mobil enhet för att skaffa tjänsten/produkten vilken sida skulle du föredra: Svar Resultat i % Resultat i st. Sidan anpassade för mobila enheter men en 49,8 118 viss information/funktionalitet kan vara borttagen Ej anpassade sida men med alla information/ funktionalitet bibehållen Det spelar ingen roll 15,2 36 Totalt

49 Bilaga 10 Kvalitativ undersökning - frågor och instruktioner 1. Brukar du använda din mobila enhet för att surfa trots att du har tillgång till en desktops enhet? Motivera ditt svar. 2. Tycker du att det är viktigt att en webbplats är lättanvänd på mobila enheter? Motivera ditt svar. 3. Har det hänt att du lämnade en webbplats för att det var jobbigt/besverligt att använda den i på din mobila enhet? Motivera ditt svar. 4. Är det viktigt för dig att 'känna igen sig' på en sajt när du surfar till den från en annan enhet än vad du brukar göra? Motivera ditt svar. 5. Nu presenteras den fullständiga sajten på en desktop enhet samt dess olika utföranden på mobila enheter. Respondenten få först välja bland den ej anpassade webbsajten (hädanefter kallad för normal ) (se bilaga 4) och den responsiva sajten (hädanefter kallad för responsive ) (se bilaga 5 och 6) för att sedan välja mellan sitt första val och den mobil anpassade sajten (hädanefter kallad för mobil ) (se bilaga 7). Respondenten ska motivera sina val. 1

50 Bilaga 11 Kvalitativ undersökning - resultat 1. Brukar du använda din mobila enhet för att surfa trots att du har tillgång till en desktops enhet? Motivera ditt svar. A. Ja Därför att jag inte alltid orkar att sätta på datorn. Det händer ibland att jag gör två olika saker samtidigt; en sak på min dator och en annan på min mobil. B. Ja Det händer ofta att jag ligger i sängen och surfar för att jag inte orkar att gå till datorn. Jag behöver inte vänta på att datorn startar; det är lätt att kolla upp saker när man har sin mobil i fickan. C. Ja, mycket ofta Det är bekvämt; jag slösar inte bort tid på att starta min dator. Det går snabbare och är bekvämare. D. Mycket sällan För att oftast är texten för liten för mig och att det är otympligt att behöva zooma med fingrarna så jag väljer min dator men är jag inte hemma så använder jag mobilen om jag måste. E. Ja Det är enklare att använda mobilen än att starta datorn. F. Nej För det går snabbare på en dator. 2. Tycker du att det är viktigt att en webbplats är lättanvänd på mobila enheter? Motivera ditt svar. A. Ja Så att den är enkel att använda så att det inte ska ta lång tid för mig att använda den. B. Ja Den ska underlätta mitt liv och inte krångla till det. Finns det möjlighet att surfa via mobilen då tycker jag att det ska vara lätt. C. Ja, mycket viktigt När jag behöver veta något snabbt så går det snabbare att använda en lätt sida. Jag vill inte behöva zooma in och ut för att komma fram åt informationen. 1

51 D. Ja Skulle sidor vara anpassade så skulle man inte behöva sätta på datorn så ofta bara för att kolla upp en liten grej eller så. E. Ja Då slipper man tänka för mycket hur man ska göra och att det är viktigt att texten är stor så man inte behöver zooma in och ut. F. Ja För att det tar lång tid att gå in på en massa menyer så det är smidigare om det finns snabblänkar. 3. Har det hänt att du lämnade en webbplats för att det var jobbigt/besverligt att använda den i på din mobila enhet? Motivera ditt svar. A. Ja Det var svårt att använda sidan och klicka på länkar. Sidan var långsam och man fick zooma in och ut för att kunna klicka på något för att träffa länken. B. Ja, ofta Det händer mig ganska ofta. Jag tycker att det är jobbigt när jag behöver zooma in och ut eller scrolla skärmen åt sidan. C. Ja, mycket ofta Sist ville jag beställa en klänning på mobilen men det var jobbigt så jag lämnade sidan. Det händer ofta att jag gör så om det är för jobbigt och tar för lång tid. D. Ja Det ska fungera vettigt och vara enkelt att använda för att man ska ha någon nytta av det och vilja använda det. E. Ja Det gör jag om sidan är seg; jag orkar inte vänta. Det händer att jag struntar i att kolla för att det är jobbigt att zooma ut och in för att komma åt det man vill; är det oviktigt så struntar jag i det. F. Nej Brukar bara surfa på mobilen när jag måste ha reda på något och då får man stå ut... 2

52 4. Är det viktigt för dig att 'känna igen sig' på en sajt när du surfar till den från en annan enhet än vad du brukar göra? Motivera ditt svar. A. Ja För att jag känner igen sidan och då vet jag hur jag ska använda den; var jag ska klicka för att hitta saker. B. Ja Jag har bildminne och då brukar jag komma ihåg på ett ungefär hur en sida ser ut och vill att den ska se liknande ut när jag använder den en annan gång. Det känns tryggt och jag behöver inte tänka om jag kom till rätt sida eller inte. C. Ja Det tog tid att lära sig att använda min bank på deras mobil sida eftersom allt såg annorlunda ut. Jag var skeptisk till sidan från början för att den inte påminde om den riktiga sidan. D. Ja Så att jag vet hur saker är tänkta att fungera och vad jag kan hitta på sidan. E. Ja Då slipper man lära sig en ny sida. Mycket enklare att hålla kol om sidorna är likadana. F. Ja, Annars är det bara jobbigt att hitta det man söker. 5. Nu presenteras den fullständiga sajten på en desktop enhet samt dess olika utföranden på mobila enheter. Respondenten få först välja bland den ej anpassade webbsajten (hädanefter kallad för normal ) (se bilaga 4) och den responsiva sajten (hädanefter kallad för responsive ) (se bilaga 5 och 6) för att sedan välja mellan sitt första val och den mobil anpassade sajten (hädanefter kallad för mobil ) (se bilaga 7). Respondenten ska motivera sina val. A. Val 1: responsive Den är lättare att använda, lättare att läsa och för att jag inte behöver zooma in och ut för att kunna läsa. Val 2 : mobil Jag tyckte om logiken, enkelt att använda. Jag var förvirrad i början för att det var svårt att tro att det är samma sida. Jag visste inte hur 3

53 jag skulle använda sidan först. Jag tycker om den men jag skulle vilja ha tillgång till all information. B. Val 1: responsive Jag tycker om att inte behöva förstöra texten för att kunna läsa den och att menyn är så pass stor så jag kan klicka på den utan att det blir fel. I den andra versionen (resp. menar den normala)kunde man inte se vad som står där utan att behöva zooma in texten; det var jobbigt. Val 2: responsive Jag tycker om den sista versionen (dvs. mobila) men tycker att den skiljer sig så mycket från det jag såg innan att jag skulle snarare bli förvirrad om jag fick växla mellan dessa hela tiden om jag nu skulle använda sajten ofta på både min dator och i mobilen dessutom finns det inte all information på den och tänk om jag skulle behöva komma åt den och jag bara hade min mobil att använda. C. Val 1: responsive För att jag inte behöver zooma och att den är enkel; jag hittar allt precis som i datorn. Val 2: mobile Den verkar maximalt begränsad men jag hittar snabbt allt jag skulle eventuellt behöva med hjälp av tydliga ikoner. Att kunna ta kontakt är viktigast. Den är mycket enklare och mindre så jag hoppas att det kommer att kosta mindre att använda den. D. Val 1: responsive Den är lättare att navigera på den än den första(dvs. normal). Val2: responsive Den sista (mobila) är bra men mycket begränsad och då föredrar jag att kunna komma åt all information som är på sidan även via mobilen. Dessutom tycker jag om att den andra(responsive) ser precis likadan ut som på datorn. E. Val 1: responsive Mycket enklare, det räcker att bara komma in på sidan och använda den utan att behöva zooma in och ut. Val 2: mobil Den ser mycket roligare ut. Jag kan avstå från info för att det ska vara enkelt. Det viktigaste är att man kan kontakta företaget. Det är bra med tydliga ikoner så det blir lätt att hitta. 4

54 F. Val 1: responsive För att den var mycket lättare; på den första såg man inget. Val 2: mobil Man kan korta ner informationen, det blir också snabbare. Nej det spelar ingen roll om den ser annorlunda ut, bara den är smidig att använda. 5

55 Bilaga 12 Intervjuguide Mitt namn är Marta Johnsson och jag skriver en C uppsats om Responsive Web Design och olika tekniker som tillåter en anpassning av webbsajter till mobila enheter och då menar jag inte bara smartphones och tablets och allt som man kan ta i fickan med sig eller kanske tom mini datorer så att webbplatser ska ju se bra ut och ge nytta för användaren. Och med mig har jag Johan Edlund. - Du har varit med och utvecklat staffanstorp.se och det är en webbplats för Staffanstorps kommun. Det som kännetecknar just denna sajt är att du hade använt en teknik som kallas för responsive web design och jag vill veta varför, varför har du valt just den lösning för att skapa den sajten? - Du har just nu sagt att målet var att skapa en modern sajt och på sajten det står det att staffanstorp är framtidens kommun, tror du att just responsive web design är framtiden? Att det är det som vi har väntat på och behöver ju ha för att komma åt personer som använder mobila enheter för att surfa? Det känns som att trenderna ändrar sig, att man använder just mobiler och mobila enheter oftare för att surfa och det handlar inte bara om att slösurfa, man helt enkelt håller på byter om nästan. - Man läser att det är rätt så framtidssäkert; utvecklar man en webbsajt med den tekniken så är det stor chans att den kommer se bra ut i framtiden också. Vad tycker du om det? - Om man tar responsive web design och jämför med ett annat sätt att utveckla just mobila webbplatser eller platser som är anpassade just för att just visa på mobila enheter så kan man också göra så att man skapar en separat sajt där som man lägger på en annan adress eller kanske en underdomän och sen kollar man vad det är för klient som kommer till mig och sen redirectar till en annan sajt, vad tycker du om den lösningen? - Det är lite roligt för att just min nästa fråga skulle vara vad tycker du, hur viktigt det att användarna känner igen sig men det känns som att du tycker att det är jätte.. eller ganska viktigt för att få den känslan att känna igen sig och veta på vilken sajt man är och hur man ska bete sig? - Ja visst för att det är just presentationen vi är ute efter egentligen, jag menar att det är klart att det är fortfarande innehållet som räknas men den ska ju också presenteras på rätt sätt för att användarna ska kunna tillgodose den informationen som finns. Men hur viktigt är det att bibehålla hela funktionaliteten. Jag har ju lyssnat på den intervjun med Per Axbom och där 1

56 ha ni pratat om just om att visa delar har ni prioriterat bort för att just...just varför, jag undrar varför ni har prioriterat bort det? - Du säger att de äldre kanske har klagat eller de som har lärt sig hur sajten ser ut eller så de har kanske kritiserat den för att de måste lägga ner lite mera tid för att lära sig det nya och det är så att min uppsats heter Adapt or die. Tror du att det kan vara så att de sajter som inte anpassar sig till utvecklingen de kommer inte ha någon chans vinna på marknaden, vinna nya kunder, att folk väljer bort de och går till de som är lite mer moderna och anpassade till just mobila enheter? - Visst det kanske är en dyrare process (skapa responsiva sajter), kanske längre process men då behöver man inte skapa de andra alternativ och det är kanske svårt att forcera sig att man (har sajter till varje enhet), det är så många enheter, olika typer att man har 58 sajter som är anpassade till varje typ av enhet, så det kanske det ändå blir billigare i det stora hela. - Det handlar också om att underhålla sajten det gäller inte bara att skapa den, den måste underhållas för att den ska vara levande (Nu vill jag inte sätta ord i din mun), tror du, för det känns ju för mig att just fördelen att man har responsive web design är att skippa underhålla fem olika sajter, Appar eller nåt sånt då och alla användare får samma information samtidigt, eller? 2

57 Bilaga 13 Responsive vs mobildedikerad - trender (Lawson, ) 1