ptg16476052454 LESSON 16: Using Responsive Web Design
Building a Style Sheet with Media Queries
As mentioned previously, you should start by designing for mobile devices first. And the
easiest way to do that is to start writing your style sheet for mobile devices without media
queries. This will be the basic design for your site, so you should stick to one column and
add all the colors, typography, and iconography you want everyone to see. Because this
is not inside a query, it will be applied to every browser regardless of the specifications.
Once you have your site designed for mobile devices, you should start adding your media
queries to affect larger screen devices. Most designers immediately want to know what
widths they should set for their breakpoints. Is it better to use 800px to target smart-
phones, or should you aim higher to design for tablets? But this is the wrong question.
Instead of asking what widths you should set to target specific devices, you should ask at
what widths your design starts falling apart.
For instance, with a single column design, there comes a point where it gets too wide for
the text to be readable. How wide is that? That is the point where you might set a break-
point and divide your page into two columns.Understanding the Mechanics of RWD
When you start working with media queries and RWD, there are a lot of things you can
adjust. Whatever you can change with CSS, you can also modify with media queries and
CSS inside them.Adjusting the Layout
The layout is the most common adjustment you’ll see with RWD. A typical two-
breakpoint design might have one column for small screens, two columns for medium-
sized screens, and three columns for large screens. There are many ways to do web
layout. But the three most common types are fixed width layout, fluid or liquid layout,
elastic layout, and hybrid layouts that use aspects of fixed and liquid or elastic layouts.
It is possible to create a responsive design using any of these layout types. So choose the
method you prefer. Lesson 11, “Using CSS to Position Elements on the Page” covered
how to do basic positioning, and then you learned more advanced page layout in Lesson
15, “Advanced CSS: Page Layout in CSS.”
I’ve found that it’s best to create a wireframe or mockup of how you want the site to look
two or three device sizes. Then you can use CSS media queries to adjust your layout to
match those.