dags att bygga responsivt!
DESCRIPTION
TRANSCRIPT
![Page 1: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/1.jpg)
12023-04-08
Dags att bygga responsivt
![Page 2: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/2.jpg)
2
AGENDA
» Vad är responsiv design?» Användarnas mobila beteende» Trender» Navigering och interaktionsdesign» Innehållet» Bygga nytt eller utveckla på befintlig
lösning
![Page 3: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/3.jpg)
3
AGENDA
» Vad är responsiv design?» Användarnas mobila beteende» Trender» Navigering och interaktionsdesign» Innehållet» Bygga nytt eller utveckla på befintlig
lösning
![Page 4: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/4.jpg)
4
![Page 5: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/5.jpg)
VAD ÄR RESPONSIV DESIGN?
![Page 6: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/6.jpg)
VAD ÄR RESPONSIV DESIGN?
![Page 7: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/7.jpg)
AGENDA
» Vad är responsiv design?» Användarnas mobila beteende» Trender» Navigering och interaktionsdesign» Innehållet» Bygga nytt eller utveckla på befintlig
lösning
![Page 8: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/8.jpg)
8
ANVÄNDARNAS MOBILA BETEENDE
Andel i olika åldersgrupper som dagligen använder sig av mobilt internet.Källa: Svenskarna och internet 2013, Stiftelsen för internetinfrastruktur
2013
2012
2011
2010
![Page 9: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/9.jpg)
9
FLER RESPONSIVA TJÄNSTER
![Page 10: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/10.jpg)
10
FLER RESPONSIVA TJÄNSTER
![Page 11: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/11.jpg)
11
Andel av de med smarta mobiler (12+ år) som någon gång eller dagligen utför olika aktiviteter på internet i sin mobil Källa: Svenskarna och internet 2013, Stiftelsen för internetinfrastruktur
![Page 12: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/12.jpg)
12
E-POST & NYHETSBREV
Bli inte raderad i mobilen!
» Avsändare ~ 25 tecken» Ämnesrad ~ 35 tecken» Texten ~ 85 tecken
![Page 13: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/13.jpg)
13
MULTI-KANAL-BETEENDE
Kom ihåg!
» SEO blir allt viktigare» Ge användarna en
bra sökupplevelse.» Tänk mobilt & multi-
kanal vid kampanjer.
![Page 14: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/14.jpg)
14
AGENDA
» Vad är responsiv design?» Användarnas mobila beteende» Trender» Navigering och interaktionsdesign» Innehållet» Bygga nytt eller utveckla på befintlig
lösning
![Page 15: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/15.jpg)
15
PLATT DESIGN
![Page 16: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/16.jpg)
16
PLATT DESIGN
![Page 17: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/17.jpg)
17
PLATT DESIGN
![Page 18: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/18.jpg)
18
RESPONSIV LOGOTYP
![Page 19: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/19.jpg)
19
SINGLE PAGE DESIGN
![Page 20: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/20.jpg)
20
AGENDA
» Vad är responsiv design?» Användarnas mobila beteende» Trender» Navigering och interaktionsdesign» Innehållet» Bygga nytt eller utveckla på befintlig
lösning
![Page 21: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/21.jpg)
21
NAVIGATION & INTERAKTIONSDESIGN
![Page 22: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/22.jpg)
22
NAVIGATION & INTERAKTIONSDESIGN
![Page 23: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/23.jpg)
23
FET-FINGER-FELET
» Mycket fungerar bra i en dator men inte på mobilen.
» Testa design på olika plattformar.
![Page 24: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/24.jpg)
24
AGENDA
» Vad är responsiv design?» Användarnas mobila beteende» Trender» Navigering och interaktionsdesign» Innehållet» Bygga nytt eller utveckla på befintlig
lösning
![Page 25: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/25.jpg)
25
Ooooops innehållet är borta …
![Page 26: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/26.jpg)
26
TÄNK PÅ INNEHÅLLET
» Responsivt projekt – ett innehållsprojekt?
» Mycket fungerar bra i en dator men inte på mobilen.
» Testa design på olika plattformar.
» Utgå från användarnas behov» Prioritera ännu hårdare» Enkelt & annorlunda
![Page 27: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/27.jpg)
27
![Page 28: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/28.jpg)
28
AGENDA
» Vad är responsiv design?» Användarnas mobila beteende» Trender» Navigering och interaktionsdesign» Innehållet» Bygga nytt eller utveckla på befintlig
lösning
![Page 29: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/29.jpg)
29
DET BEROR PÅ …
![Page 30: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/30.jpg)
30
BYGGA NYTT, ELLER …
» Oftast snabbast att bygga om HTML och CSS från grunden.
» Ramverk som “bootstrap” eller “foundation”» Går att göra om responsivt oberoende av
CMS
![Page 31: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/31.jpg)
31
THIS IS THE END
![Page 32: Dags att bygga responsivt!](https://reader036.vdocuments.pub/reader036/viewer/2022062614/5472d246b4af9fa30a8b50fb/html5/thumbnails/32.jpg)
32
metamatrix.se
Sveavägen 31, 111 34 Stockholm | c/o Malmö Arena, Norra Vallgatan 20, 211 25 MALMÖ
Växel: 08-50 65 33 00
Calle Törnquist, [email protected]
Pia Flodquist, [email protected]@PiaFlodquist