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

1. Being Responsive to Change
Experiences from taking Vodafone.ie 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. Vodafone.ie 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)
alistapart.com/article/responsive-web-design

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

9. 1. Flexible Grids
Flexible grids & Rigid mindsets
• Omnigraffle & Photoshop are static design tools
• Design by 320px & 960px
• Designing without using representative content

10. 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.

11. 3. Media Queries
Adopting new technologies & techniques
• Streamlining a greatly extended browser testing profile
• Effective media queries
• Feature detection and polyfills

12. 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

13. The way ahead

14. 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

15. Development
✤ Embrace the increasingly functional Web
✤ Develop consistency & stability
✤ Ensure ample resources to test & develop
Keep scope conservative
Be vigilant in maintaining standards

16. Content Production
✤ Content/Function first approach
✤ Blob based CMS are not best suited
Responsive Design won’t fix your content problem
alistapart.com/article/responsive-design-wont-fix-your-content-problem

17. Planning

18. Planning
✤ Small but devastating
✤ Impacts everything
✤ Develop language everyone
understands

20. 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

21. first, we must accept the ebb and flow of things
alistapart.com/article/dao

22. Thank you
Section divider title
Twitter: @ianhuet
Email: ian.huet@iqcontent.com