Bart gives a presentation on responsive design and lessons learned from building the Rock Werchter website. The key lessons are to think of content first and design around it, design for specific breakpoints to ensure things work at different sizes, start with a mobile-first approach prioritizing touch navigation and information architecture, focus on conversion goals like making the "buy tickets" button prominent, build for high resolution retina displays from the start, and use responsive images and back-end to automatically scale and serve the right image sizes. The overall message is that responsive design requires considering content, design, users and business goals at each step to create a high quality experience across devices.

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 live and work
in Ghent.
I’m passionate about

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

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

8. Process

9. You can find me on
Twitter: @netlash

10. http://slideshare.net/netlash

11. iabThinkMobile
27/11/2012

12. First...
responsive design?

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

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

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

16. We’re still learning.

17. 6 key learnings
www.rockwerkchter.be

19. 1. Think content first

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

24. content
>
design
>
technology

25. 2. Think design first

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

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

28. design testing
>
device testing

29. 3. Think mobile first

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

33. 4. Think conversion first

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

35. 5. Think retina first

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

37. 6. Think back-end first

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

39. 6 key learnings
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

40. Good luck!

41. Conversation

42. bart@wijs.be
@netlash
www.wijs.be

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