Responsive Design

First, let's define some terms.





Designing for Desktop

Explosion in Variety of Device Sizes

Don't forget about televisions!

Problems to Solve

Responsive Design to the Rescue!

Process: Key Points

Process: Breakdown

  1. Figure out what the content of your site will be.
    • Layout is always designed around content.
  2. Figure out what actions users will take on your site (i.e. the use cases).
  3. Figure out the information architecture.
  4. Design the mobile experience first.
    • Why? Because of the small screen real estate, it forces you to focus on the key information to display and the key tasks to accomplish. And focus is good for any design, large or small.
    • There's also a technical reason: if at all possible, we want the same HTML markup to be used at all screen sizes. Starting with the mobile design ensures we have the minimum markup needed, and can scale up from there much more easily than we can scale down.
  5. Developer implements the mobile experience.
  6. Sit with the developer, review the site, test on different devices, and work with them to fix any problems.
  7. Make the browser window larger until the design breaks down (i.e. until there's room to try a different layout that will organize the content in a more visually-pleasing way).
  8. Tweak the design and layout for this new size.
  9. Repeat the previous four steps until you've gone as large as the project needs. Depending on desire and budget, don't forget about television screen sizes!

Let's go!