Post on 21-Oct-2014
description
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 about
I live and work in Ghent.
I work at digital agency Wijs (ex Netlash-bSeen).
We deliver strategy, execution and tools to help you score in digital.
We will make you awesome in digital.
Process
You can find me on Twitter: @netlash
iabThinkMobile27/11/2012
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
‣ coolness...
Why responsive design?
‣ daily appliciation
‣ device capabilities
‣ performance
Why not?
We’re still learning.
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
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
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
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
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