View
905
Download
1
Category
Preview:
DESCRIPTION
Onze eigenste Bart De Waele sprak op het #Financelab te Leuven. Hoeveel Belgen zijn mobile anno 2013, wie zijn ze en wat doen ze? En welke 6 learnings leerden we van een succesvol responsive design project.
Citation preview
Think Mobile
Good afternoon. My name is Bart.
This is my daughter Merel (I have 3 kids).
I’m passionate about coffee.
I’m passionate I live and work in Ghent.
I work at digital agency Wijs.
You can find me on Twitter: @netlash
Think Mobile24/9/2013
34% Belgen gebruiken smartphones
"0$463+21(
#$%/(6
�(5.623�$3623
Source: Ipsos, 2013
Bij -40jarigen ligt het aandeel veel hoger
"0$463+21(
#$%/(6
�(5.623�$3623
Source: Ipsos, 2013
Bij -40jarige Nederlanders ligt het aandeel op 81%
Source: Consumer Barometer
('(4/$1'(45�(/*(1
Demografische gegevens
Source: Our Mobile planet: Belgium
��%(82/.,1*
Source: Think Finance with Google, April 2011
Source: Think Finance with Google, April 2011
Source: Think Finance with Google, April 2011
A Wijs-example: paths to conversion
First...responsive design?
OMG! We’re still arguing about this?
‣ one back-end to update
‣ one development cost (higher?)
‣ future ready (throw them devices at me!)
‣ browser-based (serendipity)
‣ no install
‣ SEO! E-mail! Social!
‣ coolness...
Why responsive design?
‣ daily appliciation
‣ device capabilities
‣ performance
Why not?
We’re still learning.
6 key learnings
www.rockwerkchter.bewww.deltalloydbank.be
1. Think content first
‣ photos of bands and artists are central
‣ we started with 1500px
‣ design is based on aspect ratio of photos
‣ content boxes are responsive in width and height
1. Think content first
content>design>technology
‣ navigation: not the usual hierarchy
‣ fly-outs, hover: big no no!
‣ contextual navigation
‣ starts from content
1. Think content first
2. Think design first
‣ breakpoints are essential
‣ you can’t build for all current and future devices
‣ test if design works, not if devices work
2. Think design first
‣ 5 breakpoints: 480px, 600px, 770px, 980px, 1200px
‣ 480px, 770px, 980px: current popular devices
‣ 600px, 1200px: make it future proof
Breakpoints
‣ if possible: move away from rough breakpoints
‣ gradual shifts
‣ make it future proof
Breakpoints
design testing>device testing
3. Think mobile first
‣ start with touch
‣ navigation and interaction is designed for touch first
‣ information architecture is designed for mobile first
‣ build up to tablet and to desktop
‣ big typography and buttons, made for thumbs
3. Think mobile first
‣ avoid typing where possible
‣ think touch first
3. Think mobile first
4. Think conversion first
‣ bottom line: sell tickets...
‣ typography is responsive: font size changes with screen size
‣ ‘buy tickets’ button stays big
4. Think conversion first
‣ think thumbs
‣ what is the natural stance of your hands on smartphone/tablets?
4. Think conversion first
5. Think retina first
‣ build HD-ready (retina)
‣ all logos and icons are vector based
‣ scales beautifully on all resolutions
5. Think retina first
6. Think back-end first
‣ responsive images: different image size vs. screen size
‣ back-end: one interface
‣ images are scaled automatically
6. Think back-end first
1. Think content first
2. Think design first
3. Think mobile first
4. Think conversion first
5. Think retina first
6. Think back-end first
6 key learnings
Good luck!
Conversation
Wijs bvba
Voorhavenlaan 31/3
9000 GENT
09 335 22 80
09 330 09 83
http://wijs.be
info@wijs.be
BE 0473.071.275
Recommended