Responsive Design Workflow
3 likes561 views
The document discusses responsive web design, emphasizing the need for a unified approach to accommodate various devices through techniques like fluid grids, flexible images, and media queries. It critiques traditional design methods and highlights case studies like 'The Boston Globe' and 'The Responsive Workflow' to demonstrate collaborative, component-driven strategies. The piece concludes with suggestions for tools to enhance responsive design workflows while recognizing that ongoing discussions about design approaches continue within the field.
Responsive Design Workflow
- 1. RESPONSIVE WEB DESIGN didn’t we settle this already?
- 2. Ethan Marcotte “the” article source: alistapart.com/article/responsive-web-design
- 3. “Rather than tailoring disconnected designs to each of an ever- increasing number of web devices, we can treat them as facets of the same experience. In short, we need to practice responsive web design.” -May, 2010 coined the term • Fluid Grids • Flexible Images • Media Queries responsive techniques
- 4. “Rather than tailoring disconnected designs to each of an ever- increasing number of web devices, we can treat them as facets of the same experience. In short, we need to practice responsive web design.” -May, 2010 coined the term • Fluid Grids • Flexible Images • Media Queries responsive techniques adaptive Instead of one flexible design, adaptive design detects the device and then provides the appropriate feature and layout based on a predefined set of viewport sizes.
- 5. How to execute a Responsive web design project?
- 6. Is the current way of doing things adequate to create a responsive design ? Planning and Strategy Wireframes Visual Design Dev Launch
- 7. Is the current way of doing things adequate to create a responsive design ? 764px 1024px 320px
- 8. why does this question arise?
- 10. smashing magazine 122011251019800650610500 Seven Breakpoints • Logo size readjustment • Footer layout change • Logo size readjustment • Font Size Adjustment • Icon Size Adjustment • Images in body stop resizing • Layout Changes to two columns • Logo Changes • Font size adjustment • Primary Navigation layout changes • Right side column becomes visible • Changes in logo size • Footer Resizes • Full text in label becomes visible • Layout changes to three columns • Logo size adjustment • Layout changes in social icons • Footer layout changes
- 11. smashing magazine Logo size readjustment 609px 610px Seven Breakpoints 122011251019800650610500
- 12. smashing magazine Font Size Adjustment 649px 650px Seven Breakpoints 122011251019800650610500
- 13. smashing magazine Full text in label becomes visible 1124px 1125px Seven Breakpoints 122011251019800650610500
- 15. smashing magazine v/s traditional approach • Design dictates breakpoints • Component level responsive strategy, finer control • Behaviour suggests an collaborative approach. • Three breakpoints irrespective of design • Page level responsive strategy • Ineffective communication tools for the task.
- 17. three case studies We are looking for an approach in which design dictates breakpoints, component level control, collaborative
- 18. CASE STUDY 1: the boston globe Ethan Marcotte was involved in the re-design of Boston Globe The website was built in November 2010 Design driven breakpoints Collaborative Component level control “Designing in Browser”
- 19. CASE STUDY 1: the boston globe Get Requirements Decide Breakpoints High-level design strategy Code (asap) 2 weeks Test Iterate in static 1 week cycles
- 20. CASE STUDY 1: the boston globe Pros: • Gives component level control • Very collaborative and iterative. • many breakpoints Cons: • Not device independent • Designing at template level is challenging • Designing in browser is challenging Planning and Strategy Wireframes Visual Design Dev Traditional Boston Globe Get Requirement s Decide Breakpoints High- level design strategy Code (asap) Test Iterate in static
- 21. CASE STUDY 2: the responsive workflow By Mark Boulton, Stephen Hay, Viljami Salminen in 2012 Design driven breakpoints Collaborative Component level control “Design in Browser” “Text Design” “Content Out”
- 22. Content CASE STUDY 2: the responsive workflow Sketch Prototype Visual Design Test Discuss Design in Text
- 23. Pros: • Based on Collaboration, almost as if one person is doing everything • So component level that it is content out • Design lead breakpoint Cons: • Designing in browser is challenging • Too far away from the traditional approach Planning and Strategy Wireframes Visual Design Dev Traditional Boston Globe CASE STUDY 2: the responsive workflow Content Sketch Prototype Visual Design Test Discuss Design in Text
- 24. CASE STUDY 3: envision The case study appeared in Smashing Magazine on March 5th, 2013 Design lead breakpoints Component level control Collaborative “Designing to extremes” “Content Parity” “Device augmentation”
- 25. Content first Design to Extremes Code CASE STUDY 3: envision Sketch Deduce Breakpoints Device augmentation
- 26. CASE STUDY 3: envision Pros • Better approach for deciding breakpoints • Component level control • Closer to our approach and deliverables Cons • Not as collaborative • Less scope for iteration Content Strategy Wireframes all bps Visual Design Dev Traditional Envision Content first Design to Extremes Code Sketch Deduce Breakpoints Device augmentatio n
- 27. lets look back a bit Traditional approach does not give us enough control over our design An approach in which design dictates breakpoints, component level control, iterative
- 28. lets look back a bit The Boston Globe, The Responsive Workflow, Envision All three in a nutshell are advocating different ways to take design process into development phase Built our vocabulary: • Design in Browser • Text Design • Content Out • Content Parity • Device Augmentation
- 29. Which approach should we follow?
- 30. Which approach should we follow? The discussion is ongoing, Share the realisation that in responsive world the traditional workflow is not jut an inconvenience we can ignore, Contemporary solutions people have found
- 31. Tools for responsive design Some responsive web design tools to add to your workflow http://www.creativebloq.com/netmag/4-responsive-web-design-tools-add-your-workflow-21410629 Gridset https://gridsetapp.com/ Sketch http://www.bohemiancoding.com/sketch/ Pandoc http://johnmacfarlane.net/pandoc/ Jekyll http://jekyllrb.com/ Hakyll http://jaspervdj.be/hakyll/
- 32. Tools for responsive design Dexy http://dexy.it/ RWD Wireframes http://www.lifeishao.com/rwdwire/ Responsinator http://www.responsinator.com/ Responsive Deliverables http://daverupert.com/2013/04/responsive-deliverables/
- 33. REFERENCES A List Apart alistapart.com Smashing Magazine smashingmagazine.com The Boston Globe — Responsive Web Design responsivewebdesign.com Personal Disquite of Mark Boulton markboulton.co.uk/ Envision Case Study smashingmagazine.com/2013/03/05/building-a-better-responsive- website/ 9 Basic Principle of Responsive Web Design froont.com/ * This presentation is available FREE of cost. Images used under Creative Common License but can be remove on objection Build a responsive site in a week: designing responsively (part 1) creativebloq.com/css3/build-responsive-site-week-designing- responsively-part-1-4122850 Mixing Responsive Design and Mobile Templates css-tricks.com/mixing-responsive-design-and-mobile-templates/ Adaptive Images adaptive-images.com/ Medium medium.com Content Parity bradfrost.com
- 34. SPECIAL thanks to @vishujuneja kumar bhaskar reddy @Avinash_US