Responsive Web Design (RWD) is the methodology of writing mark-up once, then using CSS and media queries to best present the content to whatever device being used. You may think RWD and Mobile First are frenemies but they’re more like that quirky couple whose ever changing passion for one another is secretly envied by everyone else. You know who I’m talking about. Instead of designing and coding different layouts for mobile, tablets and laptops, we use front-end code to manipulate the page elements to shine at any size.
In our layouts, we’ll use the same 12 column grid, resized for each breakpoint. This example compares the smallest grid, mobile, with the largest one, desktop.
Say you have a sweet mobile layout ready to go. There’s a photo that spans 12 columns with copy below and a button CTA. When this layout is scaled up to desktop, it’s huge. I mean HUGE. Enter RWD. We can now take the same 3 elements, make the photo span 6 columns and float the copy and button to the right in the remaining 6 columns. In a snippet of code, the layout is reworked for desktop.
Content within fixed containers will reside between the left edge of the 1 column and the right of the 12 column. The outer margin on each side is equally divided, centering the layout in the browser. The majority of our page content, particularly long text pages, reside in fixed containers. The other option is to use fluid containers which will proportionally distribute the same grid across the entire width of the browser. An example of this is a large impact billboard or a maybe a navigation bar that spans the width of the page. Even when using these fluid containers, you can still nest a fixed container to keep the content in your predefined column widths.
If you’re designing around a specific device size, these grid breakpoints may be handy. But basically it’s one grid (to rule them all).
Device | Width | Columns | Gutters | Outer margins |
---|---|---|---|---|
Mobile | 353px | 12 @ 1px | 11 @ 26px | 15px |
Mobile HD | 576px | 12 @ 18px | 11 @ 30px | 15px min. |
Tablet Portrait | 768px | 12 @ 34px | 11 @ 30px | 15px min. |
Desktop | 996px | 12 @ 53px | 11 @ 30px | 15px min. |
Desktop HD | 1200px | 12 @ 70px | 11 @ 30px | 15px min. |