Bart gives a presentation on responsive design and mobile strategies. He outlines 6 key learnings: 1) think content first, 2) think design first, 3) think mobile first, 4) think conversion first, 5) think retina first, and 6) think back-end first. The strategies emphasize designing for different screen sizes and resolutions from the start, with a focus on usability and content delivery across diverse mobile platforms.

1. Think Mobile

2. Good afternoon.
My name is Bart.

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

4. I’m passionate
about coffee.

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

6. I work at digital agency Wijs.

8. You can find me on
Twitter: @netlash

9. http://slideshare.net/netlash

10. Think Mobile
24/9/2013

11. 34% Belgen gebruiken smartphones
Source: Ipsos, 2013

12. Bij -40jarigen ligt het aandeel veel hoger
Source: Ipsos, 2013

13. Bij -40jarige Nederlanders ligt het aandeel op 81%
Source: Consumer Barometer

14. Demografische gegevens
Source: Our Mobile planet: Belgium

15. Source: Think Finance with Google, April 2011

16. Source: Think Finance with Google, April 2011

17. Source: Think Finance with Google, April 2011

18. A Wijs-example: paths to conversion

19. First...
responsive design?

20. OMG!
We’re still
arguing
about this?

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

22. ‣ daily appliciation
‣ device capabilities
‣ performance
Why not?

23. We’re still learning.

24. 6 key learnings
www.rockwerkchter.be
www.deltalloydbank.be

27. 1. Think content first

28. ‣ 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

32. content
>
design
>
technology

33. ‣ navigation: not the usual hierarchy
‣ fly-outs, hover: big no no!
‣ contextual navigation
‣ starts from content
1. Think content first

36. 2. Think design first

37. ‣ 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

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

39. ‣ if possible: move away from rough breakpoints
‣ gradual shifts
‣ make it future proof
Breakpoints

40. design testing
>
device testing

41. 3. Think mobile first

43. ‣ 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

45. ‣ avoid typing where possible
‣ think touch first
3. Think mobile first

50. 4. Think conversion first

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

53. ‣ think thumbs
‣ what is the natural stance of your hands on smartphone/tablets?
4. Think conversion first

54. 5. Think retina first

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

56. 6. Think back-end first

57. ‣ responsive images: different image size vs. screen size
‣ back-end: one interface
‣ images are scaled automatically
6. Think back-end first

58. 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

59. Good luck!

60. Conversation

61. bart@wijs.be
@netlash
www.wijs.be

62. 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