Design Responsibly

884 views
833 views

Published on

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
  • Please can you send me an invite, please. I will appreciate it. please.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
884
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
0
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Design Responsibly

    1. 1. DesignResponsivelyJacob Surber - Sr. Product Manager HTML Design@jacobsurber
    2. 2. Mobile Desktop 2 Billions of Users 1.5 1 0.5 2009 2010 2011 2012 2013 2014 2015ComScore survey 2012
    3. 3. 3.5Billionscreens with web content
    4. 4. ResponsiveDesign
    5. 5. EthanMarcotte + =
    6. 6. Responsive design is NOT justthe responsibility of the designer
    7. 7. It takes a community to build a responsive site
    8. 8. ResponsibleDesign
    9. 9. Designers WritersDevelopers
    10. 10. Product OwnerorCustomer
    11. 11. ResponsibleDesign Two Steps
    12. 12. Step One: Exploration
    13. 13. Exploration: Content Creators Site Map Information Hierarchy Persistent content Wireframing
    14. 14. Exploration: Designers Amazing Control Absolute Sizes Creative Potential Fixed Positioning Pixel Perfection Ignorant of the Web
    15. 15. Exploration: Developers Grid system Templating language LESS / SASS Browser requirements Graceful degradation
    16. 16. Step Two: Creation
    17. 17. Creation: Target Browsers
    18. 18. N designs N devices
    19. 19. Edge Reflow
    20. 20. +
    21. 21. A new kind of design tool... HTML design Flexible grid Intelligent web Design & surface system layout Typography
    22. 22. HTML design surface 1:1 design rendering
    23. 23. Flexible Grid System
    24. 24. Design Simultaneously
    25. 25. Visual Media Query Breakpoints
    26. 26. Mobile First? Desktop First?
    27. 27. Intelligent Web Layout
    28. 28. Advanced Controls
    29. 29. Design with CSS
    30. 30. "If we use these techniques right [HTML and CSS3], we can get rid of half of the images on the web, because theyre used for styling."Håkon Wium Lie, Opera
    31. 31. Do you charge by the refresh click?
    32. 32. Designing in thebrowser is so 2012...
    33. 33. Design and Typography
    34. 34. Design and Typography
    35. 35. Design and Typography
    36. 36. Edge Web Fonts
    37. 37. Design and Typography
    38. 38. Reflow PSD
    39. 39. Design the Desktop view
    40. 40. Design the Mobile view
    41. 41. Responsive ResponsiveDesign Development
    42. 42. Long road ahead...
    43. 43. Visual Style Guide Element LibraryStyle management Multiple Pages Pseudo selectors Markup
    44. 44. html.adobe.com/edge/reflowFollow us on Twitter@Reflow @jacobsurber
    45. 45. Exclusively for FoWD50 Reflow beta invites adobe.com/go/reflowprerelease

    ×