Top Banner
WordPress och den responsiva webben
35

WordPress och den responsiva webben

Jul 08, 2015

Download

Technology

Jesper Bylund

A run down of how and why we should be building responsive web, especially on WordPress. Created for Internetdagarna 2013 in Sweden so all swedish stats.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: WordPress och den responsiva webben

WordPressoch den responsiva webben

Page 2: WordPress och den responsiva webben

Internet har förändrats

Page 3: WordPress och den responsiva webben

“responsive”Anpassar sig till maskinen

Page 4: WordPress och den responsiva webben

Saker som inte är sant• “Människor köper inte i mobilen”

• “Människor vill inte ha samma information i mobilen som på datorn”

• “Olika gränssnitt skapar olika behov” (http://globalmoxie.com/jhc/prez/mobile-myths.pdf)

Page 5: WordPress och den responsiva webben

Hur många använder mobilt internet?

Page 6: WordPress och den responsiva webben

Internetanslutningar 2012

58% 29%

13%

Fast bredband Mobilt bredband Mobilabonnemang

Page 7: WordPress och den responsiva webben

Internetanslutningar 2012

52%

33%

15%

Fast bredband Mobilt bredband Mobilabonnemang

Page 8: WordPress och den responsiva webben

Internetanslutningar 2012

85%

15%

Fast bredband Mobilt

Page 9: WordPress och den responsiva webben

Datatrafik över mobila nät (terabyte)

0

45000

90000

135000

180000

2006 2007 2008 2009 2010 2011 2012

Page 10: WordPress och den responsiva webben

Bygga för mobila nät

Page 11: WordPress och den responsiva webben

Mobila nätet (2G/3G)

250ms <10ms

Page 12: WordPress och den responsiva webben

WordPress?

• Skickar få filer

• Förminskar bilder

• Stöd för cache

• W3 Total Cache

• Slå på Gzip

• Använd få tillägg

• Minimera antalet anrop

Page 13: WordPress och den responsiva webben

Designa för många olika skärmar

Page 14: WordPress och den responsiva webben

Hur ser det ut idag?

Page 15: WordPress och den responsiva webben
Page 16: WordPress och den responsiva webben
Page 17: WordPress och den responsiva webben
Page 18: WordPress och den responsiva webben
Page 19: WordPress och den responsiva webben

Bättre lösningar

Page 20: WordPress och den responsiva webben

Microsoft Build

Page 21: WordPress och den responsiva webben

SVT.se

Page 22: WordPress och den responsiva webben

Mashable

Page 23: WordPress och den responsiva webben

bokcirklar.se

Page 24: WordPress och den responsiva webben

The Onion

Page 25: WordPress och den responsiva webben

Google Cards

Page 26: WordPress och den responsiva webben

Navigeringsmönster

Page 27: WordPress och den responsiva webben

“Gör inget”

Page 28: WordPress och den responsiva webben

“Hänvisa till sidfoten”

Page 29: WordPress och den responsiva webben

“Snabbfixen”

Page 30: WordPress och den responsiva webben

“Expandera nedåt”

Page 31: WordPress och den responsiva webben

“Expandera från vänster”

Page 32: WordPress och den responsiva webben

Vilka olika skärmar bör man designa för?

Page 33: WordPress och den responsiva webben

Alla

Page 34: WordPress och den responsiva webben

Mobila enheter 320px - 1024px