Design Responsibly
2 likes724 views
This document discusses responsive design and the need for a collaborative, multi-step process involving content creators, designers, developers, and product owners. It introduces Adobe's new Reflow tool, which allows designing web pages visually across different screen sizes and devices using HTML and CSS. Reflow aims to make responsive design and development easier through features like a flexible grid system, intelligent layouts, and visual media query breakpoints.
!["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](https://image.slidesharecdn.com/designresponsibly-121101185536-phpapp01/85/Design-Responsibly-31-320.jpg)
Design Responsibly
- 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
- 5. Ethan Marcotte + =
- 6. Responsive design is NOT just the responsibility of the designer
- 7. It takes a community to build a responsive site
- 9. Designers Writers Developers
- 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
- 26. Visual Media Query Breakpoints
- 27. Mobile First? Desktop First?
- 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...
- 37. Edge Web Fonts
- 40. Reflow PSD
- 41. Design the Desktop view
- 42. Design the Mobile view
- 43. Responsive Responsive Design Development
- 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
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n
- #55: \n
- #56: \n
- #57: \n
- #58: \n
- #59: \n
- #60: \n
- #61: \n
- #62: \n
- #63: \n
- #64: \n
- #65: \n
- #66: \n
- #67: \n
- #68: \n
- #69: \n
- #70: \n
- #71: \n
- #72: \n
- #73: \n
- #74: \n
- #75: \n
- #76: \n
- #77: \n
- #78: \n