Responsive Web Design or RWD is the hot buzzphrase in contemporary web design. RWD responds to the needs of the users by changing layout and style based on the capabilities of the device or viewport. For example, on a phone you might see content shown in a single column view while a tablet or desktop displays the same content in two columns.
The point at which the layout changes in response to a shift in the viewport is called a breakpoint (more on that later).
Three Main Keys to RWD:
- Use a meta element in the head of your HTML with a name of viewport.
- Size your content using relative measurements whenever possible.
- Use media queries to apply styles differently in different situations.
RWD Point the First: Meta Viewport Element
Pages optimized for a variety of devices must include a meta viewport element in the head of each HTML page.
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
As you can see, this element has two attributes: name, which has value of “viewport”, and content,which has values of “width=device-width, initial-scale=1”.
On the barest bones level, what you’re telling the browser with this meta element is to base the width of the page on the width of the device while simultaneously establishing a 1:1 relationship between CSS pixels and device pixels.
That’s a lot of technical mumbo, but what you really need to know is that this code helps your pages display correctly on any device without the need for horizontal scrolling or pinch-n-zoom (both of which make your users want to kick puppies in frustration… and fluffy puppies at that!)
RWD Point the Second: Relative Measurements
Since screen dimensions vary widely between devices, your content should not rely on a particular minimum screen size to render well. For example, creating a container div with a width of 1000px means that any device whose viewport is smaller than 1000px will have to either shrink your content or rely on the aforementioned puppy-kick-inducing horizontal scrolling/pinch-n-zoom.
Therefore, whenever possible use relative size values, such as the following:
This ensures that the div in question spans the width of the viewport and is never too big or too small whether it’s viewed on a 320px wide smart phone or a 1280px desktop computer.
Beware also of using of using absolute positioning with values that may cause an element to fall outside the viewport. For example, setting a photo position:absolute and 900px from the left edge would cause it to be out of the frame on many devices.
RWD Point the Third: Media Queries
Media queries are simple filters that can be applied to CSS styles. They make it easy to change those styles based on the device rendering the content.
In essence, media queries work like this… you write code that specifies a particular requirement has to be met in order for a certain group of CSS rules to apply. For example, you might say that a screen has to have a min-width of 640px in order to use group-of-rules #1. If the device someone is using to access your site is less than 640px wide, your media query filter won’t apply group-of-rules #1.
There are two main ways to make media queries work in your code.
The first way to incorporate media queries is to use a media attribute in the link element(s) of your HTML. Media attribute typically relies on you also creating and linking two or more CSS stylesheets to your HTML. The browser will choose one of the stylesheets to apply depending on the requirements specified.
Establishing a media attribute is easy. Simply add it to <link> (which is probably already in the head of your HTML), and then assign an appropriate value. Here are two examples for a website with two external CSS stylesheets, one titled “mobile.css” and one titled “desktop.css”.
<link rel=”stylesheet” href=”mobile.css” media=”handheld”>
<link rel=”stylesheet” href=”desktop.css” media=”screen”>
The value you choose for a media attribute is what directs the browser how to display your content. There are many possibilities including device type (such as those used in the examples above) or measurements such as the ones we used last week.
<link rel=”stylesheet” href=”mobile.css” media=”(max-width:640px)”>
<link rel=”stylesheet” href=”desktop.css”media=”(min-width:640px)”>
Media values based on measurements are ideal for fine-tuned breakpoints intended keep your site looking good at a variety of screen sizes.
The W3C Schools page on media attributes lists all possible values: http://www.w3schools.com/tags/att_link_media.asp
The second way to incorporate media queries is to embed them in your CSS using @media. This method works well if you only have a few rules to change (as with a minor breakpoint) OR you want to keep all your CSS on one stylesheet. As with the media attribute in <link>, you can specify devices or measurements for @query.
/* or whatever other rules you want to add here */
/* or whatever other rules you want to add here */
For more info on @media, check out the W3C Schools page: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
P.S. Although you can use both the media attribute in your HTML and @media in your CSS, you certainly don’t have to. Either/or is fine. Which you pick depends on the situation at hand.
Breakpoints in a Super-Nutty Nutshell
As stated above, a breakpoint in terms of RWD is the point at which the layout of your site changes to accommodate a new device or screen size. Although some people set breakpoints based on specific devices, this is not ideal since technology changes rapidly. Instead, use the content of your website to determine breakpoints. Resize the browser screen until the design needs adjustment and you’ve found a breakpoint. You can use a pixel measuring service such as http://whatsmy.browsersize.com/ to measure your viewport size.
How many breakpoints do you need? Again, it varies from site to site, but choose enough keep your website functional and readable across the board. Usually sites have at least a mobile and a desktop breakpoint.
FYI: many people advise designing responsive sites from small to large. In other words, they suggest laying out for the smallest mobile device first then progressively enhancing the experience as the browser gains more space. However, you should adjust your workflow to a method that works for you.
The responsive code we worked on last week in class is available on our course Dropbox should you want to take a look at all the above in action.