Embed Size (px)
DESCRIPTION
Citation preview
12023-04-08
Dags att bygga responsivt
2
AGENDA
» Vad är responsiv design?» Användarnas mobila beteende» Trender» Navigering och interaktionsdesign» Innehållet» Bygga nytt eller utveckla på befintlig
lösning
3
AGENDA
» Vad är responsiv design?» Användarnas mobila beteende» Trender» Navigering och interaktionsdesign» Innehållet» Bygga nytt eller utveckla på befintlig
lösning
4
VAD ÄR RESPONSIV DESIGN?
VAD ÄR RESPONSIV DESIGN?
AGENDA
» Vad är responsiv design?» Användarnas mobila beteende» Trender» Navigering och interaktionsdesign» Innehållet» Bygga nytt eller utveckla på befintlig
lösning
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
9
FLER RESPONSIVA TJÄNSTER
10
FLER RESPONSIVA TJÄNSTER
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
12
E-POST & NYHETSBREV
Bli inte raderad i mobilen!
» Avsändare ~ 25 tecken» Ämnesrad ~ 35 tecken» Texten ~ 85 tecken
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.
14
AGENDA
» Vad är responsiv design?» Användarnas mobila beteende» Trender» Navigering och interaktionsdesign» Innehållet» Bygga nytt eller utveckla på befintlig
lösning
15
PLATT DESIGN
16
PLATT DESIGN
17
PLATT DESIGN
18
RESPONSIV LOGOTYP
19
SINGLE PAGE DESIGN
20
AGENDA
» Vad är responsiv design?» Användarnas mobila beteende» Trender» Navigering och interaktionsdesign» Innehållet» Bygga nytt eller utveckla på befintlig
lösning
21
NAVIGATION & INTERAKTIONSDESIGN
22
NAVIGATION & INTERAKTIONSDESIGN
23
FET-FINGER-FELET
» Mycket fungerar bra i en dator men inte på mobilen.
» Testa design på olika plattformar.
24
AGENDA
» Vad är responsiv design?» Användarnas mobila beteende» Trender» Navigering och interaktionsdesign» Innehållet» Bygga nytt eller utveckla på befintlig
lösning
25
Ooooops innehållet är borta …
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
27
28
AGENDA
» Vad är responsiv design?» Användarnas mobila beteende» Trender» Navigering och interaktionsdesign» Innehållet» Bygga nytt eller utveckla på befintlig
lösning
29
DET BEROR PÅ …
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
31
THIS IS THE END
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
