1. Design
Responsively
Jacob Surber - Sr. Product Manager HTML Design
@jacobsurber

2. Mobile Desktop
2
Billions of Users
1.5
1
0.5
2009 2010 2011 2012 2013 2014 2015
ComScore survey 2012

3. 3.5
Billion
screens with web content

4. Responsive
Design

5. Ethan
Marcotte
+ =

6. Responsive design is NOT just
the responsibility of the designer

7. It takes a community to
build a responsive site

8. Responsible
Design

9. Designers
Writers
Developers

10. Product Owner
or
Customer

11. Responsible
Design
Two Steps

12. Step One:
Exploration

13. Exploration: Content Creators
Site Map
Information Hierarchy
Persistent content
Wireframing

14. Exploration: Designers
Amazing Control Absolute Sizes
Creative Potential Fixed Positioning
Pixel Perfection Ignorant of the Web

15. Exploration: Developers
Grid system
Templating language
LESS / SASS
Browser requirements
Graceful degradation

16. Step Two:
Creation

17. Creation: Target Browsers

18. N designs N devices

20. Edge Reflow

21. +

22. A new kind of design tool...
HTML design Flexible grid Intelligent web Design &
surface system layout Typography

23. HTML design surface
1:1 design rendering

24. Flexible Grid System

25. Design Simultaneously

26. Visual Media Query Breakpoints

27. Mobile First? Desktop First?

28. Intelligent Web Layout

29. Advanced Controls

30. Design with CSS

31. "If we use these techniques right [HTML and
CSS3], we can get rid of half of the images on
the web, because they're used for styling."
Håkon Wium Lie, Opera

32. Do you charge by the refresh click?

33. Designing in the
browser is so 2012...

34. Design and Typography

35. Design and Typography

36. Design and Typography

37. Edge Web Fonts

38. Design and Typography

40. Reflow PSD

41. Design the Desktop view

42. Design the Mobile view

43. Responsive Responsive
Design Development

45. Long road ahead...

46. Visual Style Guide Element Library
Style management Multiple Pages
Pseudo selectors Markup

47. html.adobe.com/edge/reflow
Follow us on Twitter
@Reflow
@jacobsurber

48. Exclusively for FoWD
50 Reflow beta invites
adobe.com/go/reflowprerelease