Being Responsive to Change

Or how I learned to stop worrying and love the bomb

Being Responsive to Change Experiences from taking Vodafone.ie into Responsive Web Design

Section divider title

Ian HuetLead Developer

• Global design & strategy consultancy based in Dublin.

• Our services run the gamut from user research and design, through to build, deployment and testing.

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

Responsive Web Design

Responsive Web Design / Ethan Marcotte, 2010

1.Flexible grids

2.Flexible images

3.Media queries

alistapart.com/article/responsive-web-design

Instead of PX use EM or %

Max-width: 100%

@media (max-width: 770px)

Full steam ahead...

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

1. Flexible Grids

Flexible grids & Rigid mindsets

• Omnigraffle & Photoshop are static design tools

• Design by 320px & 960px

• Designing without using representative content

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.

3. Media Queries

Adopting new technologies & techniques

• Streamlining a greatly extended browser testing profile

• Effective media queries

• Feature detection and polyfills

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

4. Page weight & Load speed

Gallery Detail Choice

JSON feed

The way ahead

✤ 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

Designing

✤ Embrace the increasingly functional Web

✤ Develop consistency & stability

✤ Ensure ample resources to test & develop

Keep scope conservative

Be vigilant in maintaining standards

Development

✤ 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

Content Production

Planning

✤ Small but devastating

✤ Impacts everything

✤ Develop language everyone understands

Planning

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

first, we must accept the ebb and flow of things

alistapart.com/article/dao

Section divider titleThank you

Slides: slideshare.net/ianhuet/being-responsive-to-change

Twitter: @ianhuetEmail: [email protected]