Making the content flow: introducing responsive web design
Karolina Szczur
Lesson 15
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.
-
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. -
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).
-
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.
-
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.
-
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.
Karolina Szczur
Designer, http://thefox.is
№1 inclusivity and empathy enthusiast, user centrism advocate ✻ Co-running @jsconfeu + @cssconfau + @jsconfau. I discovered a passion for teaching by speaking at conferences along with editing and writing for Smashing Magazine. I also ramble and shoot.
