62
Think Mobile

Think Mobile - Financelab

  • Upload
    wijs

  • View
    905

  • Download
    1

Embed Size (px)

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

Page 1: Think Mobile - Financelab

Think Mobile

Page 2: Think Mobile - Financelab

Good afternoon. My name is Bart.

Page 3: Think Mobile - Financelab

This is my daughter Merel (I have 3 kids).

Page 4: Think Mobile - Financelab

I’m passionate about coffee.

Page 5: Think Mobile - Financelab

I’m passionate I live and work in Ghent.

Page 6: Think Mobile - Financelab

I work at digital agency Wijs.

Page 7: Think Mobile - Financelab
Page 8: Think Mobile - Financelab

You can find me on Twitter: @netlash

Page 10: Think Mobile - Financelab

Think Mobile24/9/2013

Page 11: Think Mobile - Financelab

34% Belgen gebruiken smartphones

"0$463+21(

#$%/(6

�(5.623�$3623

Source: Ipsos, 2013

Page 12: Think Mobile - Financelab

Bij -40jarigen ligt het aandeel veel hoger

"0$463+21(

#$%/(6

�(5.623�$3623

Source: Ipsos, 2013

Page 13: Think Mobile - Financelab

Bij -40jarige Nederlanders ligt het aandeel op 81%

Source: Consumer Barometer

('(4/$1'(45�(/*(1

Page 14: Think Mobile - Financelab

Demografische gegevens

Source: Our Mobile planet: Belgium

��%(82/.,1*

Page 15: Think Mobile - Financelab

Source: Think Finance with Google, April 2011

Page 16: Think Mobile - Financelab

Source: Think Finance with Google, April 2011

Page 17: Think Mobile - Financelab

Source: Think Finance with Google, April 2011

Page 18: Think Mobile - Financelab

A Wijs-example: paths to conversion

Page 19: Think Mobile - Financelab

First...responsive design?

Page 20: Think Mobile - Financelab

OMG! We’re still arguing about this?

Page 21: Think Mobile - Financelab

‣ 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?

Page 22: Think Mobile - Financelab

‣ daily appliciation

‣ device capabilities

‣ performance

Why not?

Page 23: Think Mobile - Financelab

We’re still learning.

Page 25: Think Mobile - Financelab
Page 26: Think Mobile - Financelab
Page 27: Think Mobile - Financelab

1. Think content first

Page 28: Think Mobile - Financelab

‣ 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

Page 29: Think Mobile - Financelab
Page 30: Think Mobile - Financelab
Page 31: Think Mobile - Financelab
Page 32: Think Mobile - Financelab

content>design>technology

Page 33: Think Mobile - Financelab

‣ navigation: not the usual hierarchy

‣ fly-outs, hover: big no no!

‣ contextual navigation

‣ starts from content

1. Think content first

Page 34: Think Mobile - Financelab
Page 35: Think Mobile - Financelab
Page 36: Think Mobile - Financelab

2. Think design first

Page 37: Think Mobile - Financelab

‣ 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

Page 38: Think Mobile - Financelab

‣ 5 breakpoints: 480px, 600px, 770px, 980px, 1200px

‣ 480px, 770px, 980px: current popular devices

‣ 600px, 1200px: make it future proof

Breakpoints

Page 39: Think Mobile - Financelab

‣ if possible: move away from rough breakpoints

‣ gradual shifts

‣ make it future proof

Breakpoints

Page 40: Think Mobile - Financelab

design testing>device testing

Page 41: Think Mobile - Financelab

3. Think mobile first

Page 42: Think Mobile - Financelab
Page 43: Think Mobile - Financelab

‣ 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

Page 44: Think Mobile - Financelab
Page 45: Think Mobile - Financelab

‣ avoid typing where possible

‣ think touch first

3. Think mobile first

Page 46: Think Mobile - Financelab
Page 47: Think Mobile - Financelab
Page 48: Think Mobile - Financelab
Page 49: Think Mobile - Financelab
Page 50: Think Mobile - Financelab

4. Think conversion first

Page 51: Think Mobile - Financelab

‣ bottom line: sell tickets...

‣ typography is responsive: font size changes with screen size

‣ ‘buy tickets’ button stays big

4. Think conversion first

Page 52: Think Mobile - Financelab
Page 53: Think Mobile - Financelab

‣ think thumbs

‣ what is the natural stance of your hands on smartphone/tablets?

4. Think conversion first

Page 54: Think Mobile - Financelab

5. Think retina first

Page 55: Think Mobile - Financelab

‣ build HD-ready (retina)

‣ all logos and icons are vector based

‣ scales beautifully on all resolutions

5. Think retina first

Page 56: Think Mobile - Financelab

6. Think back-end first

Page 57: Think Mobile - Financelab

‣ responsive images: different image size vs. screen size

‣ back-end: one interface

‣ images are scaled automatically

6. Think back-end first

Page 58: Think Mobile - Financelab

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

Page 59: Think Mobile - Financelab

Good luck!

Page 60: Think Mobile - Financelab

Conversation

Page 62: Think Mobile - Financelab

Wijs bvba

Voorhavenlaan 31/3

9000 GENT

09 335 22 80

09 330 09 83

http://wijs.be

[email protected]

BE 0473.071.275