The document discusses Ian Huet's experience taking Vodafone.ie's website to a responsive web design. The goals were to convert high traffic pages to be responsive within a fixed timeframe using the Vodafone group framework. There were risks of affecting the existing site or not completing it on time given constraints. It describes responsive web design techniques like flexible grids using EM or %, flexible images with max-width 100%, and media queries. It also discusses challenges of designing without representative content, revisiting content patterns, and building performant pages through reducing assets, load speed, and leveraging client-side functionality. Planning is emphasized to identify unknown risks.

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

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

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

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

23. Thank you
Section divider title
Slides: slideshare.net/ianhuet/being-responsive-to-change
Twitter: @ianhuet
Email: ian.huet@iqcontent.com