Responsive design is a style of web design that responds to the user as they arrive at the web page. Rather than forcing a mobile user to see a desktop site, a laptop user with a small screen to scroll horizontally to see a wide-screen monitor site, or a wide-screen monitor to view a site as a mobile customer might like, instead the design looks at each of these scenarios and adapts to display the content most effectively.
Web Pages Must Be Flexible and Adapt
I've said it many times, the web is not print. And with more and more different types and sizes of devices coming online, the sooner you accept that your pages will look different, no they must look different depending upon what is displaying them, the happier you will be.
The best web designs are the ones that make things easy. But not just easy for the website customers. The best web designs make things easy for the client as well. And responsive web design does that, but the down side is that it's not exactly easy for the web designers.
Creating a Whole Separate Website is a Bad Idea
It can be tempting, and I admit I've done it myself, to create a “mobile” site with a separate sub-domain or site location. Then you just slap up all the mobile friendly site features like single-columns, limited content, and reduced navigation in that one location and point mobile users there.
In the short term, this can work, as it gets up a mobile site quickly. But eventually it will start to cause problems. The first pain point comes when the site owner realizes that he has to post every article twice—once to the main site and once to the mobile site. This realization usually comes months after you trained them in how to maintain their new mobile site, and they have forgotten what they need to do to make the articles mobile friendly and they probably have dozens of articles that need to be ported.
Many web developers, at this point, start thinking of ways to programmatically copy files posted to the “real” website (the one for desktop browsers) into the mobile site. This can result in very complicated scripts and programs and ultimately the mobile user is still treated like an afterthought.
Responsive Design Treats Mobile and Desktop the Same
A responsive web design uses the exact same content to create a page that works whether you are viewing it at 1800 pixels wide or 320 pixels wide. But the pages that are created may look vastly different, while containing the same content. This means that whether you come to the site on an iPhone or a 27-inch iMac, you will get the same content, in fact you will go to the same URL. But on the iPhone you might see the page with only one column while the iMac gets five. But they are both considered equally important when delivering the content.
How Do you Create a Responsive Web Design?
CSS media queries are the answer. Back with CSS 2.1 we were introduced to the idea of print style sheets. These are style sheets written just to style how the page should look when it is printed out by using media types. For example:
<link rel="stylesheet" type="text/css" href="print-styles.css" media="print">
Media types were a good start, but some devices didn't use them as they were intended, sending information that said they were a desktop browser when they were really a small handheld device. This made it difficult to use them correctly for anything beyond print.
CSS media queries were introduced as part of CSS3 and they improved on the idea of media types by looking at the actual physical specifications being sent from the browser to the computer. A mobile browser could easily pretend to be a desktop browser by simply sending that media type, but it would still have to display the contents in a smaller window.
For example, to send a specific style sheet only to iPhones, you would write:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="480-styles.css">
This tells the browser to use this style sheet if the media is a screen device (rather than print, for example) and has a width of no more than 480 pixels. Note: this will catch any device that has a width less than 480px, even desktop browsers, because it is not a device dependent script. It is just looking at the width and displaying the contents accordingly.
Advantages of CSS Media Queries
You may be thinking that this isn't really that different from using a resolution detection script to pass on the correct style sheet. But there are some definite advantages to using media queries for responsive design:
- CSS media queries go well beyond just testing the resolution. There are, in fact, 13 different features you can evaluate against to get very specific with your designs. Plus media queries let you combine multiple queries to get, for example, only devices that are 600x800px in landscape orientation and not HD.
- You can implement CSS media queries against just one or two rules in an existing style sheet by using the @media rule.
- You can also import media specific style sheets with the @import rule and media queries.
Don't Be Afraid to Start Designing Responsive Web Designs
The easiest way to get started is to simply create a mobile design for your existing site. Follow all the rules you would normally follow for that design, but use your existing HTML to style it, and put your styles in a new style sheet. When you're satisfied with the new styles, simply add that style sheet to your pages with CSS media queries.
Oh, and don't forget to remove the links to your
m.domain.com site—you won't be needing that any longer.