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 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 #

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

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

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 #

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

Kill with Fire #

Cost heavy The perfect responsive site
Time consuming

Reviewing Responsive Designs #

Problems: #


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


Now read this

Building a Slack Bot in Golang

The Background # This blog post details the steps in which I’ve built my first Slack Bot with less than trivial functionality. It was created over a hackathon and was then released on open source as Pricelinelabs’s leaderboard project... Continue →