Being Responsive to Change


Published on

Experiences from going into Responsive Web Design in a multi-purpose production environment

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Being Responsive to Change

  1. 1. Being Responsive to Change Experiences from taking into Responsive Web Design Or how I learned to stop worrying and love the bomb
  2. 2. Ian Huet Lead Developer Section divider title • Global design & strategy consultancy based in Dublin. • Our services run the gamut from user research and design, through to build, deployment and testing.
  3. 3. Mobilisation / Responsive Web Design Goals • Convert the highest traffic flows & pages to be Responsive • Achieve this within a fixed timeframe • Use the Vodafone Group framework Risks • Achieve Responsive without affecting the existing site • Complete this within a constraint heavy environment
  4. 4. Responsive Web Design
  5. 5. Responsive Web Design / Ethan Marcotte, 2010 1.Flexible grids Instead of PX use EM or % 2.Flexible images Max-width: 100% 3.Media queries @media (max-width: 770px)
  6. 6. Full steam ahead...
  7. 7. Dao of Web Design / John Allsop, 2004 “Well established hierarchies are not easily uprooted; Closely held beliefs are not easily released; So rituals enthrall generation after generation” Tao Te Ching; 38 Ritual
  8. 8. 1. Flexible Grids Flexible grids & Rigid mindsets • Omnigraffle & Photoshop are static design tools • Design by 320px & 960px • Designing without using representative content
  9. 9. 2. Flexible Images More than just Flexible Images: Content / Function First • Content replaces ‘fixed width’ as the first design step • Revisiting all your existing content presentation patterns shouldn’t be underestimated • Media management: Images, Video, Pdf, etc.
  10. 10. 3. Media Queries Adopting new technologies & techniques • Streamlining a greatly extended browser testing profile • Effective media queries • Feature detection and polyfills
  11. 11. 4. Page weight & Load speed Building performant pages • Consolidate page assets to reduce HTTP calls • Reduce bloat in all assets: CSS, JS & images • Leverage Client-side functionality: Backbone & HandlebarsJS Dynamic Upgrade Flow Gallery Detail JSON feed Choice
  12. 12. The way ahead
  13. 13. Designing ✤ Embrace the fluid web ✤ Find new tools & develop new processes: represent all contexts & states ✤ Do you speak Progressive Enhancement? Upskill in the medium: HTML, CSS, JS, and Browser capabilities
  14. 14. Development ✤ Embrace the increasingly functional Web ✤ Develop consistency & stability ✤ Ensure ample resources to test & develop Keep scope conservative Be vigilant in maintaining standards
  15. 15. Content Production ✤ Content/Function first approach ✤ Blob based CMS are not best suited Responsive Design won’t fix your content problem
  16. 16. Planning
  17. 17. Planning ✤ Small but devastating ✤ Impacts everything ✤ Develop language everyone understands
  18. 18. Unknown unknowns / Donald Rumsfeld “There are known unknowns; this is to say, there are things that we now know we don’t know. But there are also unknown unknowns - there are things we do not know we don’t know” Donald Rumsfeld Rigor is required to identify & mitigate unknowns
  19. 19. first, we must accept the ebb and flow of things
  20. 20. Thank you Section divider title Slides: Twitter: @ianhuet Email: