Embed Size (px)
Citation preview
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
i
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
ii
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.
iii
Innehåll
1 Introduktion _______________________________________________ 1 1.1 Inledning/bakgrund _____________________________________ 1
1.2 Tidigare forskning ______________________________________ 2 1.3 Problemformulering _____________________________________ 5
1.4 Syfte och frågeställning __________________________________ 5 1.5 Avgränsning/Begränsning ________________________________ 5
1.6 Målgrupp _____________________________________________ 6 1.7 Disposition ____________________________________________ 6
2 Bakgrund/Teori ____________________________________________ 7 2.1 Responsive web design __________________________________ 7
2.2 Mobildedikerad webbplats _______________________________ 11
3 Metod ___________________________________________________ 13
3.1 Vetenskaplig ansats ____________________________________ 13 3.2 Datainsamling _________________________________________ 13
3.3 Analys _______________________________________________ 17 3.4 Tillförlitlighet _________________________________________ 17
4 Resultat/Empiri ___________________________________________ 18 4.1 Kvantitativ enkät ______________________________________ 18 4.2 Kvalitativ undersökning - experiment och observation _________ 18
4.3 Intervju ______________________________________________ 18
5 Analys och diskussion ______________________________________ 19
5.1 Problemlösning/resultat _________________________________ 19 5.2 Metodreflektion _______________________________________ 22
6 Avslutning _______________________________________________ 23 6.1 Slutsats ______________________________________________ 23
6.2 Förslag till fortsatt forskning _____________________________ 23
7 Referenser _______________________________________________ 24
8 Bilagor __________________________________________________ 28
1
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
SMS1 det enda man kunde använda en mobiltelefon till. Idag finns det en
uppsjö av mobila enheter2 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' Sullivan3 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" (http://sv.wikipedia.org a, 2012). 2 I uppsatsen har denna benämning valts, för digitala enheter som kan användas vid Internet-
uppkoppling 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 http://www.gomonews.com.
2
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.
3
Figur 1.1: StatCounter statistik (StatCounter Global Stats b, 2012)
Tid Desktop Mobil (excludes tablets5)
April 2011 94,79% 5,21%
April 2012 90,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 Tesco6. 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).
4
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 webbplatser7 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 CSS8 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 Nielsen9 (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
skript10
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 300 000 anställda(...).
(...)Företaget har på senare år expanderat även utanför Storbritannien och finns nu i ett flertal
europeiska och östasiatiska länder(...)" (http://sv.wikipedia.org b, 2012). 7 En närmare beskrivning av termen och tekniker bakom finns i kapitel 2.1. 8 "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" (http://sv.wikipedia.org 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 (http://sv.wikipedia.org
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
5
Närmare beskrivningar av båda tekniker finns i kapitel 2.1 och 2.2.
1.3 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" (http://sv.wikipedia.org/wiki/Script d,
2012). Populära skriptspråk är bland annat: PHP, JavaScript eller Python.
6
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.
7
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, http://www.alistapart.com, 2010). 2011 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 2.1.1-2.1.3.
2.1.1 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
8
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 em11
eller % istället för fast
definierade pixlar12
(http://sv.wikipedia.org 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
1t.ex. storleken av en rubrik på sidan
2t.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" (http://en.wikipedia.org g, 2012). 12 Pixel eller bildpunkt är det minsta elementet som en grafisk bild byggs upp av.
9
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:
566 ÷ 900 = .628888889 * 100 = 62.8888889%
331 ÷ 900 = .367777778 * 100 = 36.7777778%
På detta sätt kommer elementens proportioner att behållas.
2.1.2 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 AlphaImageLoader13
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-taggar14
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:
http://unstoppablerobotninja.com/entry/fluid-images. 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 jQuery15
-plugin, skapad av Scott
Robbin och tillgänglig under denna adress: http://srobbin.com/jquery-
plugins/backstretch/.
2.1.3 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: http://msdn.microsoft.com/en-us/library/ms532969.aspx 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 image-
tagg: <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
10
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. 78):
@media 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:
11
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.
12
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, http://dev.opera.com, 2008).
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.
13
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
3.2.1 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 LNU17
. 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
14
Till den kvalitativa intervjun gjordes valet att ta kontakt med Johan Edlund,
eftersom han varit involverad i ett projekt (www.staffanstorp.se) 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.
3.2.2 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.
15
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/04 2012 och mätningen
avslutades 26/04 2012 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 Magazine18
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 WordPress19
version 3.2.2
samt en TwentyTen WordPress tema20
), fylld med information
kommande från Long Island Divers webbplats21
. 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; www.smashingmagazine.com. 19 WordPress är ett modernt publiceringsverktyg med fokus på utseende, webbstandard och
användarvänlighet (http://sv.wordpress.org/). 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. 21 www.longislanddivers.com
16
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 Theme22
, tillgänglig att
köpa på www.themeforest.net samt Any Mobile Theme Switcher
0.323
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
arbete25
bland sina favoritexempel på just responsiva sajter. Intervjun
spelades in för att underlätta senare bearbetning av samlad data.
Intervjuguide finns i bilaga 12.
22 http://themeforest.net/item/my-mobile-page-v3-wordpresstheme/full_screen_preview/ 1328741 23 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: http://wordpress.org/extend/plugins/any-mobile-
theme-switcher/ 24 http://www.netmagazine.com/features/ethan-marcottes-20-favourite-responsive-sites 25 www.staffanstorp.se
17
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).
18
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.
19
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.
5.1.1 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.
5.1.2 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
20
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.
5.1.3 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.
5.1.4 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
21
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.
22
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).
23
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.
24
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 10 2 2011). SmartOnline. Hämtat från
www.smartonline.com: http://www.smartonline.com/smarton-
products/smarton-mobile/smartphones-pass-pc-sales-for-the-first-time-in-
history/ den 11 4 2012
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:
http://blog.sarahlynndesign.com/new-ipad-retina-display-responsive-design/
den 11 04 2012
http://en.wikipedia.org g. (den 12 05 2012).
http://en.wikipedia.org/wiki/Em_%28typography%29. Hämtat från
http://en.wikipedia.org/wiki/Em_%28typography%29:
http://en.wikipedia.org/wiki/Em_%28typography%29 den 24 05 2012
http://sv.wikipedia.org a. (den 15 04 2012). http://sv.wikipedia.org/wiki/Sms.
Hämtat från http://sv.wikipedia.org/wiki/Sms:
http://sv.wikipedia.org/wiki/Sms den 05 05 2012
http://sv.wikipedia.org b. (den 19 03 2012).
http://sv.wikipedia.org/wiki/Tesco. Hämtat från
http://sv.wikipedia.org/wiki/Tesco: http://sv.wikipedia.org/wiki/Tesco den 05
05 2012
http://sv.wikipedia.org c. (den 31 12 2011).
http://sv.wikipedia.org/wiki/Cascading_Style_Sheets. Hämtat från
http://sv.wikipedia.org/wiki/Cascading_Style_Sheets:
http://sv.wikipedia.org/wiki/Cascading_Style_Sheets den 05 05 2012
25
http://sv.wikipedia.org e. (den 12 08 2011). http://sv.wikipedia.org/wiki/Pixel.
Hämtat från http://sv.wikipedia.org/wiki/Pixel:
http://sv.wikipedia.org/wiki/Pixel den 05 05 2012
http://sv.wikipedia.org f. (den 20 01 2012).
http://sv.wikipedia.org/wiki/Jakob_Nielsen. Hämtat från
http://sv.wikipedia.org/wiki/Jakob_Nielsen:
http://sv.wikipedia.org/wiki/Jakob_Nielsen den 09 05 2012
http://sv.wikipedia.org/wiki/Script d. (den 08 01 2012).
http://sv.wikipedia.org/wiki/Script. Hämtat från
http://sv.wikipedia.org/wiki/Script: http://sv.wikipedia.org/wiki/Script den 05
05 2012
http://sv.wordpress.org/. (u.d.). http://sv.wordpress.org/. Hämtat från
http://sv.wordpress.org/: http://sv.wordpress.org/ den 07 05 2012
Knight, K. (den 12 01 2011). http://coding.smashingmagazine.com. Hämtat
från http://coding.smashingmagazine.com:
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-
web-design/#more-75660 den 05 05 2012
Lawson, B. (den 28 07 2008). http://dev.opera.com. Hämtat från
http://dev.opera.com: http://dev.opera.com/articles/view/the-mobile-web-
optimization-guide/#strategy-1 den 09 05 2012
Lawson, B. (den 19 04 2012). http://www.smashingmagazine.com. Hämtat
från http://www.smashingmagazine.com:
http://www.smashingmagazine.com/2012/04/19/why-we-shouldnt-make-
separate-mobile-websites/ den 20 04 2012
Marcotte, E. (den 03 03 2009). http://www.alistapart.com/articles/fluidgrids/.
Hämtat från http://www.alistapart.com/articles/fluidgrids/:
http://www.alistapart.com/articles/fluidgrids/ den 23 08 2012
Marcotte, E. (den 25 05 2010). http://www.alistapart.com. Hämtat från
http://www.alistapart.com: http://www.alistapart.com/articles/responsive-
web-design/ den 23 04 2012
Marcotte, E. (2011). Responsive web design. New York, New York: A Book
Apart.
26
Nielsen, J. (den 10 04 2012). Mobile Site vs. Full Site. Hämtat från
http://www.useit.com: http://www.useit.com/alertbox/mobile-vs-full-
sites.html den 23 04 2012
O' Sullivan, C. (den 14 12 2011). http://www.gomonews.com. Hämtat från
http://www.gomonews.com/mobile-web-growth-1-in-5-internet-users-dont-
use-a-computer/: http://www.gomonews.com/mobile-web-growth-1-in-5-
internet-users-dont-use-a-computer/ den 02 05 2012
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. 905-914). Beijing,
China: International World Wide Web Conference.
Rutter, R. (den 20 11 2007).
http://www.alistapart.com/articles/howtosizetextincss/. Hämtat från
http://www.alistapart.com/articles/howtosizetextincss/:
http://www.alistapart.com/articles/howtosizetextincss/ den 27 04 2012
[email protected]. (den 03 05 2012). http://code.google.com/p/php-
mobile-detect/downloads/detail?name=php-mobile-
detect.v.2.0.7.zip&can=2&q=. Hämtat från http://code.google.com/p/php-
mobile-detect/downloads/detail?name=php-mobile-
detect.v.2.0.7.zip&can=2&q=: http://code.google.com/p/php-mobile-
detect/downloads/detail?name=php-mobile-detect.v.2.0.7.zip&can=2&q=
den 05 05 2012
Stanley, M. (den 20 10 2009). Hämtat från http://www.morganstanley.com:
http://www.morganstanley.com/institutional/techresearch/pdfs/MS_Economy
_Internet_Trends_102009_FINAL.pdf den 11 04 2012
Stanley, M. (den 12 04 2010). http://www.morganstanley.com. Hämtat från
http://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Tren
ds_041210.pdf den 11 4 2012
StatCounter Global Stats a. (den 06 02 2012). http://gs.statcounter.com.
Hämtat från http://gs.statcounter.com: http://gs.statcounter.com/press/mobile-
internet-usage-is-doubling-year-on-year den 16 04 2012
StatCounter Global Stats b. (den 05 05 2012). http://gs.statcounter.com.
Hämtat från http://gs.statcounter.com:
http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201104-201204
den 05 05 2012
27
Wikipedia. (den 20 03 2012).
http://en.wikipedia.org/wiki/Grid_%28page_layout%29. Hämtat från
http://en.wikipedia.org/wiki/Grid_%28page_layout%29:
http://en.wikipedia.org/wiki/Grid_%28page_layout%29 den 2012 05 01
28
8 Bilagor
Bilaga 1: PHP skript som tillåter att känna igen vilken enhet en användare surfar
med ([email protected], 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
1
Bilaga 1
PHP skript som tillåter att känna igen vilken enhet en användare surfar med
([email protected], 2012).
<?php
/**
* Mobile Detect
* $Id: Mobile_Detect.php 44 2012-05-03 21:45:00Z [email protected] $
*
* @usage require_once 'Mobile_Detect.php';
* $detect = new Mobile_Detect();
* $detect->isMobile() or $detect->isTablet()
*
* For more specific usage see the documentation navigate to:
* http://code.google.com/p/php-mobile-detect/wiki/Mobile_Detect
*
* @license http://www.opensource.org/licenses/mit-license.php 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.*(6800|8100|8900|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|
2
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',
3
'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', // @todo: check for mobile friendly emails 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' => '',
4
);
// 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
) {
5
$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.
*
* @method boolean is[...]()
* @param string $name
* @param array $arguments
* @return mixed
*/
public function __call($name, $arguments)
{
$key = substr($name, 2);
return $this->_detect($key);
}
/**
* Private method that does the detection of the
* mobile devices.
*
* @param type $key
* @return 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)){
6
$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
* @return bool
*/
public function isMobile()
{
return $this->isMobile;
}
/**
* Check if the device is a tablet.
* Return true if any type of tablet device is detected.
* @return boolean
*/
7
public function isTablet()
{
foreach($this->tabletDevices as $_regex){
if(preg_match('/'.$_regex.'/is', $this->userAgent)){
$this->isTablet = true;
return true;
}
}
return false;
}
}
1
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
2
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
1
Bilaga 3
Skärmdump - desktopp version
8.1Desktopp version
1
Bilaga 4
Skärmdump - ej anpassad sajt via iPhone3s
1 Ej anpassad sajt via iPhone3s
1
Bilaga 5
Skärmdump - Responsive tema - menu
1 Responsive tema - menu
1
Bilaga 6
Skärmdump - Responsive tema via iPhone3 - text
1 Responsive tema via iPhone3
1
Bilaga 7
Skärmdump - Mobildedikerad tema
1 Mobildedikerad tema
1
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
2
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 100 237
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?
Svar Resultat i % Resultat i st.
Ja 83,1 197
Nej 12,2 29
Jag minns inte 4,6 11
Totalt 100 237
4. 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 100 237
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:
Svar Resultat i % Resultat i st.
Sidan anpassade för mobila enheter men en
viss information/funktionalitet kan vara
borttagen
49,8 118
Ej anpassade sida men med alla
information/ funktionalitet bibehållen
35 83
Det spelar ingen roll 15,2 36
Totalt 100 237
1
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
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.
2
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...
3
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
4
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.
5
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.
1
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
2
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?
1
Bilaga 13
Responsive vs mobildedikerad - trender
(Lawson, http://www.smashingmagazine.com/2012/04/19/why-we-
shouldnt-make-separate-mobile-websites/, 2012)
