Think Mobile

Good afternoon.My name is Bart.

This is my daughterMerel (I have 3 kids).

I’m passionateabout coﬀee.

I live and work in Ghent.I’m passionate about

I work at digital agency Wijs (ex Netlash-bSeen).

We will make you awesome in digital.We deliver strategy, execution and tools to helpyou score in digital.

Process

You can ﬁnd me onTwitter: @netlash

http://slideshare.net/netlash

iabThinkMobile27/11/2012

First...responsive design?

OMG!We’re stillarguingabout this?

Why responsive design?‣ one back-end to update‣ one development cost (higher?)‣ future ready (throw them devices at me!)‣ browser-based (serendipity)‣ no install‣ coolness...

Why not?‣ daily appliciation‣ device capabilities‣ performance

We’re still learning.

6 key learningswww.rockwerkchter.be

1. Think content ﬁrst

1. Think content ﬁrst‣ 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

content>design>technology

2. Think design ﬁrst

2. Think design ﬁrst‣ breakpoints are essential‣ you can’t build for all current and future devices‣ test if design works, not if devices work

Breakpoints‣ 5 breakpoints: 480px, 600px, 770px, 980px, 1200px‣ 480px, 770px, 980px: current popular devices‣ 600px, 1200px: make it future proof

design testing>device testing

3. Think mobile ﬁrst

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

4. Think conversion ﬁrst

4. Think conversion ﬁrst‣ bottom line: sell tickets...‣ typography is responsive: font size changes with screen size‣ ‘buy tickets’ button stays big

5. Think retina ﬁrst

5. Think retina ﬁrst‣ build HD-ready (retina)‣ all logos and icons are vector based‣ scales beautifully on all resolutions

6. Think back-end ﬁrst

6. Think back-end ﬁrst‣ responsive images: diﬀerent image size vs. screen size‣ back-end: one interface‣ images are scaled automatically

6 key learnings1. Think content first2. Think design first3. Think mobile first4. Think conversion first5. Think retina first6. Think back-end first

Good luck!

Conversation

bart@wijs.be@netlashwww.wijs.be

Wijs bvbaVoorhavenlaan 31/39000 GENT09 335 22 8009 330 09 83http://wijs.beinfo@wijs.beBE 0473.071.275

https://twitter.com	25
http://chamci.wordpress.com	22
http://wannes.iben.ch	18
http://localhost	15
http://www.twylah.com	11
http://franckvalverde.wordpress.com	9
http://www.onlydoo.com	8
http://light.mindtalk.com	6
http://www.mindtalk.com	4
http://tehnicimediatice.wordpress.com	4
http://fr.slideshare.net	2
http://www.facebook.com	2
https://si0.twimg.com	2
https://www.facebook.com	2
http://tecnologiadoctorm.ning.com	2
http://xgportal.imcplus.net	1
http://twitter.com	1
http://efaz.com.br	1
http://musikagintza.blogspot.com.es	1

Think Mobile

de Bart De Waele le 27 novembre 2012

Accessibilité

Catégories

Détails de l'import

Droits d'utilisation

19 Ajouts 136

Statistiques

Think Mobile Presentation Transcript