Responsive Design
Mobilanpassa din
webbplats
med
#c9seminarie
Agenda1. Varför?
2. Vad?
3. Hur?
4. När?
1. Varför
Mobiltra!ken i Sverige ökar...
2%
3%
4%
5%
6%
7%
feb 11 apr 2011 jun 2011 okt 2011 dec 2011 feb 2012 apr 2012
An
de
len
mo
bil
we
bb
tra
fik
av
to
tal
tra
fik
Källa: http://gs.statcounter.com/
2013 surfar "est från mobilen
0
400
800
1200
1600
2000
2007 2008 2009 2010 2011 2012 2013 2014 2015
An
tal
inte
rne
tan
vä
nd
are
(m
ilja
rde
r)
Källa: Morgan Stanley
2013 surfar "est från mobilen
0
400
800
1200
1600
2000
2007 2008 2009 2010 2011 2012 2013 2014 2015
An
tal
inte
rne
tan
vä
nd
are
(m
ilja
rde
r)
Källa: Morgan Stanley
brytpunkt
Källa: Svenskarna och internet 2011
Vilka är dom
Källa: Svenskarna och internet 2011
Vilka är dom
Källa: Svenskarna och internet 2011
Vad gör dom?
Källa: Svenskarna och internet 2011
Vad gör dom?
2. Vad?
Institut du Monde Arabe, Paris
An escalator can never break. it can only become stairs.
Mitch Hedberg
Mobil appMobil webb
Responsiv webb Mobil appMobil webb
✓ Skala ✓ Flytta om ✓ Dölja ✓ Visa nytt
Den största responsiva sajten som byggts.
Staffanstorp.se
cloudnine.se
Försvarsmakten
Folktandvården i Stockholm
Byggmax (sneak peak...)
3. Hur?
Börja med det mobila gränssnittet först.
(Även om ingen mobil version är planerad.)Luke Wroblewoski
Southwest Airlines
Southwest Airlines
Southwest Airlines
Southwest Airlines
3Viktiga beståndsdelar
#1Flexibel layout
#1Flexibel layout
Bilder
Menyer
1. 2.
Menyer
3.
Tabeller
Tabeller
#2Media Queries
#2Media Queries
Hur stor är din?
...320px
Enhet Skärmstorlek
Smartphone, stående 320px
Smartphone, liggande 480 px
Surfplatta, stående 768 px
Surfplatta, liggande 1024 px
Desktop, default 1280 px
Skärmstorlekar
#3Iterativt arbetsätt
#3Iterativt arbetsätt
4. När?
Skidskytte är inte längdskidor med gevär
Responsive design är inte webben fast
automatiskt för alla olika användare
Anpassatför mobilt
Appar
Speci!k
Alla
Bygga nytt
DesktopDin digitala hubb
Anpassatför mobilt
Appar
Speci!k
Alla
Anpassa be!ntlig lösning
$?
20-30% högre kostnad att utveckla en responsive sajt
men
Billigare i längden
Genomsnittligt ordervärde iphone 2012 (jan-apr) = 410 kr
Genomsnittlig konverteringsgrad iphone 2012 (jan-apr) = 0,38%
Tra!k iPhone = Motsvarar estimerad iphonetra!k April 2012 = 9645 besök
Genomsnittlig konverteringsgrad iphone responsive design lösning = samma som iPad 2012 (jan-apr) =1,16%
Case X : Grundantaganden ur GA
Case X : Beräkning
Månad Trafik Transaktionerofärändrad site
Transaktioner responsive
design
Försäljning ofärändrad site
Försäljning responsive
design
Januari 3 282 10 3 013 kr
Februari 6 305 25 5 606 kr
mars 6 134 24 6 880 kr
April* 9 645 37 14 877 kr
Maj 9 645 37 112 15 027 kr 45 872 kr
juni 9 645 37 112 15 027 kr 45 872 kr
juli 9 645 37 112 15 027 kr 45 872 kr
augusti 9 645 37 112 15 027 kr 45 872 kr
September 9 645 37 112 15 027 kr 45 872 kr
oktober 9 645 37 112 15 027 kr 45 872 kr
Case X : ROI på 5 månader
RedakörenFörvaltning
Summering
4 punkter att ta med er här ifrån
Den mobila revolutionen är här.
4 punkter att ta med er här ifrån
Den mobila revolutionen är här.
Responsiv design är framtidsvänlig.
4 punkter att ta med er här ifrån
Den mobila revolutionen är här.
Responsiv design är framtidsvänlig.
Den initialt högre kostnaden tjänas in.
4 punkter att ta med er här ifrån
Den mobila revolutionen är här.
Responsiv design är framtidsvänlig.
Den initialt högre kostnaden tjänas in.
Besparingar kan göras på #er plan som för redaktör och förvaltning.
4 punkter att ta med er här ifrån
