Making the content flow: introducing responsive web design

Karolina Szczur

Karolina Szczur

@fox

Almost three years ago now, Ethan Marcotte introduced responsive web design. So far there were as many lovers as haters and many argued about the difference between responsiveness and native, mobile design. In the era of almost unlimited connectivity and wide variety of devices our designs can no longer be static, 960px wide layouts.

This lesson will teach you how to adapt for variety of devices and design reusable systems, not static pages.

  1. Responsive Navigation Patterns

    Carefully go through the different types of navigation – after all this is the way how users mainly interact with the websites or apps you’re creating. Taking into account pros and cons outlined by Brad try to think of examples of couple use cases for each one of them (which one would work for for blogs, ecommerce websites, etc).

  2. Responsive Web Design Workflow

    Create a content inventory and content reference wireframes (or simple sketches) – for desktop, mobile and tablet. Use iPad and iPhone resolutions as a reference.

  3. Designing the Hi-DPI Web

    Choose one of your designs and make sure all the image assets are prepared for Retina displays. If you don’t want to scale up manually use one of these Photoshop actions. If you’re still not sure about why bitmaps are evil head to Bjango’s article on designing for Retina displays.

  4. Styleguides for the Web

    Create a style guide with all the necessary components for a project of your choice. Use a blank file or PSD source from styletil.es. Remember that as much as these are standalone elements, they do exist in surroundings of others – keep the interactive nature in mind. Share the result.

  5. Responsive Web Design by Ethan Marcotte

    Pick one of your previous, fixed-width designs and try to make it responsive. Think how the components should behave with different resolutions in mind. If you’re having problems with figuring out the layout, have a look at Multi-Device Layout Patterns by Luke Wroblewski. Feeling comfortable coding? Make a HTML/CSS prototype! Post the results.

    Editor’s note: Deja Vu? Nope, just a refresher from Lesson 2 – this article really is the definitive piece on RWD and is worth re-reading.