Slides från Patriks frukostseminarium om responsive design. Lär dig mer om vilka fördelar du får med responsive design. Presentationen tar upp den mobila revolutionen, Strategi och angreppsätt, Värdet av att mobilanpassa din webbplats med "responsive design".

1. Responsive
Design
Mobilanpassa
din
webbplats
med
#c9seminarie

2. Agenda
1. Varför?
2. Vad?
3. Hur?
4. När?

3. 1. Varför

6. Mobiltrafiken i Sverige ökar...
2%
3%
4%
5%
6%
7%
feb 11 apr 2011 jun 2011 okt 2011 dec 2011 feb 2012 apr 2012
Andelenmobilwebbtrafikavtotaltrafik
Källa: http://gs.statcounter.com/

7. 2013 surfar flest från mobilen
0
400
800
1200
1600
2000
2007 2008 2009 2010 2011 2012 2013 2014 2015
Antalinternetanvändare(miljarder)
Källa: Morgan Stanley

8. 2013 surfar flest från mobilen
0
400
800
1200
1600
2000
2007 2008 2009 2010 2011 2012 2013 2014 2015
Antalinternetanvändare(miljarder)
Källa: Morgan Stanley
brytpunkt

9. Källa: Svenskarna och internet 2011
Vilka är dom

10. Källa: Svenskarna och internet 2011
Vilka är dom

11. Källa: Svenskarna och internet 2011
Vad gör dom?

12. Källa: Svenskarna och internet 2011
Vad gör dom?

15. 2. Vad?

16. Institut du Monde Arabe, Paris

17. An escalator can never break.
it can only become stairs.
Mitch Hedberg

18. Mobil appMobil webb

19. Responsiv webb Mobil appMobil webb

23. ✓ Skala ✓ Flytta om ✓ Dölja ✓ Visa nytt

24. Den största responsiva sajten som byggts.

25. Staffanstorp.se

26. cloudnine.se

27. Försvarsmakten

28. Folktandvården i Stockholm

29. Byggmax (sneak peak...)

30. 3. Hur?

32. Börja med det mobila
gränssnittet först.
(Även om ingen mobil version är planerad.)
Luke Wroblewoski

33. Southwest Airlines

34. Southwest Airlines

35. 3Viktiga beståndsdelar

36. #1Flexibel layout

37. Bilder

38. Menyer
1. 2.

39. Menyer
3.

40. Tabeller

41. #2Media Queries

42. Hur stor
är din?
...320px

43. 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

44. #3Iterativt arbetsätt

45. 4. När?

46. Skidskytte är inte
längdskidor med gevär

47. Responsive design är
inte webben fast
automatiskt för alla
olika användare

48. Anpassat
för mobilt
Appar
Specifik
Alla
Bygga nytt

49. Desktop
Din digitala hubb
Anpassat
för mobilt
Appar
Specifik
Alla
Anpassa
befintlig
lösning

50. $?

51. 20-30% högre kostnad att
utveckla en responsive sajt
men
Billigare i längden

52. Genomsnittligt ordervärde iphone 2012
(jan-apr) = 410 kr
Genomsnittlig konverteringsgrad iphone
2012 (jan-apr) = 0,38%
Trafik iPhone = Motsvarar estimerad
iphonetrafik 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

53. Case X : Beräkning
Månad Trafik
Transaktioner
ofä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

54. Case X : ROI på 5 månader

55. RedakörenFörvaltning

56. Summering

57. 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

58. Den mobila revolutionen är här.
Responsiv design är
framtidsvänlig.
Den initialt högre kostnaden
tjänas in.
Besparingar kan göras på fler
plan som för redaktör och
förvaltning.
4 punkter att ta med er här ifrån

59. Tack!Patrik Åkerman von Knorring
patrik.avk@cloudnine.se
@pavk