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

http://slideshare.net/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.

6 key learnings

www.rockwerkchter.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

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

bart@wijs.be@netlashwww.wijs.be

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