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

ES6 Object Enhancements

This is the part of a series of blogs on the new features on the upcoming ECMAScript 6 (ES6) specification which JavaScript implements. In this blog we focus on the object literal property initialization enhancements introduced in ES6.... Continue →