Your SlideShare is downloading. ×

Being Responsive to Change


Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Being Responsive to Change Experiences from taking into Responsive Web Design Or how I learned to stop worrying and love the bomb
  • 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. 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. Responsive Web Design
  • 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. Full steam ahead...
  • 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. 1. Flexible Grids Flexible grids & Rigid mindsets • Omnigraffle & Photoshop are static design tools • Design by 320px & 960px • Designing without using representative content
  • 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. 3. Media Queries Adopting new technologies & techniques • Streamlining a greatly extended browser testing profile • Effective media queries • Feature detection and polyfills
  • 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. The way ahead
  • 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. Development ✤ Embrace the increasingly functional Web ✤ Develop consistency & stability ✤ Ensure ample resources to test & develop Keep scope conservative Be vigilant in maintaining standards
  • 15. Content Production ✤ Content/Function first approach ✤ Blob based CMS are not best suited Responsive Design won’t fix your content problem
  • 16. Planning
  • 17. Planning ✤ Small but devastating ✤ Impacts everything ✤ Develop language everyone understands
  • 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. first, we must accept the ebb and flow of things
  • 20. Thank you Section divider title Slides: Twitter: @ianhuet Email: