Responsive Design

Recently I attended a Responsive Design workshop headed by industry experts Ethan Marcotte and Karen McGrane. This post is a summary of my notes and key takeaways from an e-commerce website’s point of view.


 What is Responsive Design?

 Advantages:

 User Behaviour:


 Versus Adaptive?

 Adaptive Layouts
 Adaptive Content

 Differences

Responsive Adaptive M-Dot
Same URL X X
Same HTML X X
Same Content X

 Content Targeting

 Device
 Context

 Web Design

“The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. … we must accept the ebb and flow of things.
John Allsopp, A Dao of Web Design


 Responsive Layout

Percentages Formula:

target / context = result

target pixel width is proportional to the container context … equals the percentage based result

 Fluid Grid
 Media Queries

 Performance

 Progressive Enhancement

 Content Prioritization

  1. Purpose of the page
  2. Name each module
  3. Priority of each item
  4. Is every item required?

 How to Start?

 Content Maturity

Once you name an object, you shape its future.
For example, if you give it a presentational name, its future will be limited, because it will be confined by its style.
A functional name might work better.

Steps Examples
Content Repository Flight Itineraries
Author Experience Airlines or Airports
Pattern Library Essence of Content Purpose
Design Styles Design Trends (colour, flat, native-like, etc.)

Don’t create content for a specific context


 Performance

 Design for Performance

Load What You Need
Because we have no way of reliably knowing the user agent’s bandwidth (even on desktop)

 Performance Budget
  1. Look at your competitors
  2. Look at your own site
    • Load times across the board of products
    • With varying connection speeds
  3. Define an aggressive target
  4. Constant prototyping against your Performance Budget
  5. Critical path CSS to have it usable on initial page load
 If something exceeds you budget?

 Image Adaption Checklist


 The Design Pod

Designers: “Introduce” the comp

Developers: Ask lots of questions

Like a thesis defense

Build a pattern library:

  1. Visual inventory of Patterns
  2. Naming Modules / Components
  3. Develop a shared vocabulary
  4. Profit!

 Rolling out Responsive

 Responsive Retrofit

CON PRO
Less nice for transactional sites Content heavy sites
Stakeholder problems Fast
Keep desktop conversion

 Mobile Only Responsive (which then takes over the desktop site)

CON PRO
Maintaining two versions Selective group for user feedback
Focus might be still into the old desktop site Significance change to model
Keep desktop conversion

 Pick-a-Page

CON PRO
Bad UX Easy sandbox for teams
All at once might be easier Help plan for future releases
Works together with retrofit

 Kill with Fire

CON PRO
Cost heavy The perfect responsive site
Time consuming

 Reviewing Responsive Designs


 Problems:


 TL;DR


“Responsive is not a project. Responsive is a permanent new way of working.”

 
5
Kudos
 
5
Kudos

Now read this

Retrospective on Appcelerator Titanium and Alloy

Working as a Front-End JavaScript developer there would naturally come a time when you would need to work on a mobile solution. There are couple of ways to handle it, from writing a pure website for your users to access your content to... Continue →