Upload
ianhuet
View
613
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Experiences from going into Responsive Web Design in a multi-purpose production environment
Citation preview
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]