O'Reilly logo

Responsive Web Design Patterns by Chelsea Myers

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Most popular layout patterns

Fixed, fluid, adaptive, and responsive are the four main categories of layouts for websites. Responsive layouts can be categorized even further. In 2012, Luke Wroblewski released an article titled Multi-Device Layout Patterns (http://www.lukew.com/ff/entry.asp?1514). Here, Luke categorizes responsive layouts under 5 labels; tiny tweaks, mostly fluid, column drop, layout shifter, and off canvas. His categorizations caught on and are now commonly used when talking about RWD layout patterns. Together, we will review these patterns and see how they are made.

Note

You can view all these patterns live at http://chelmyers.github.io/RPL/layouts/.

Tiny tweaks

Let's start by looking at the easiest layout pattern. This pattern doesn't ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required