mobilanpassa din webbplats med responsiv design

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

Tack!Patrik Åkerman von Knorring

patrik.avk@cloudnine.se @pavk