So, what is Responsive web design (RWD)?
Responsive web design (RWD) is the practice of making a website's layout change depending on what device and/or resolution the website is being viewed on. For instance, you may have a navigation bar at the top of your website with links laid out in a horizontal manner when viewed on desktop monitors, but when viewed on a small cell phone screen, wouldn't it be better if those links stacked on top of each other or collapsed into a menu?
This kind of thinking is what separates good web designers from great web designers, and the best part is, it's incredibly easy to up your game with a little bit of knowledge. When you are competing at job interviews or for a prospective client, who is more likely to get the job? The person who knows how to make websites, or the person who knows how to make websites that act great on any device? It's always a huge advantage to be the person who can tap into the ever growing landscape of non-desktop users. Clients love that.
So how does it work? With the help of something called CSS Media Queries.
CSS Media Queries are little wrappers in CSS. They appear in three forms. One form appears in your <head> tags and will supply a different stylesheet usually depending on what the width of the viewport is (amongst other conditions), and looks like the following code:
<link rel="stylesheet" media="(max-width: 700px)" href="mobile.css">
Note
If the maximum size of the viewport is 700 px wide, activate another stylesheet.
Another form appears as an @import directive in your stylesheet itself and can look something like the following code:
@import url(mobile.css) and (max-width: 700px);
Note
Activate a mobile stylesheet when the width of the screen is at most 700 px.
The most common form of a media query will appear in your stylesheet and looks something like the following code:
@media (max-width: 700px) {
body {
background: blue;
}
}
Note
If the maximum width of the page is 700 px wide, change the background color to blue.
In the preceding example, if you click on the edge of your browser and drag it to make the viewport smaller, the background of the entire page will change to blue when you get to and below 700 px. When you expand the viewport above 700 px, it will revert to the default white background. Pretty cool, huh?
max-width is just one of the many options you can pass to these media queries to target a myriad of devices and sizes. For instance, you can change the appearance of your website for printers to save your visitors some ink. Or, you can use min-width to change the layout of the website as you scale up from a small device. This approach is called the mobile-first approach and is gaining a larger following every day, but we'll get into that later. The point is that media queries are very powerful.
RWD saves an enormous amount of resources and time when making your site device agnostic. Here's why:
- One code base: Imagine having to design and code around four to five websites each time you made a website. It's much easier to design one site and simply rearrange elements to fit whatever device they're on.
- Work harder, make more money: This one applies to the client and the designer. Responsive sites are accessible sites; therefore, your clients' websites are reaching more people (which is good for their businesses). Since you're doing more work, you are justified in raising the price a bit.
- Past and future proof: Media queries have been around for several years, so you can be rest assured knowing that all modern browsers and most devices support media queries out of the box. In lieu of every browser supporting media queries, there are great polyfills (JavaScript plugins that add modern functionality to older browsers) like
Respond.jsthat will allow you to confidently support almost everyone all the way back to IE6 if you have to target that for some reason. Not only that, but RWD is future proof if done right. This means that the largest or smallest monitors will deliver beautiful, highly-usable websites now and forever.
An example of Responsive web design is how Paravel's (http://paravelinc.com)
Microsoft.com redesign provides various layouts depending on browser width:
Quite a lot of sites are now responsive. You can check any site by adjusting your browser width, but if you'd just like to see an exceptional list of responsive websites, check out http://mediaqueri.es shown as follows:
http://mediaqueri.es features quite a large list of beautiful and responsive websites.
Media queries and RWD have reinvigorated and revolutionized a somewhat stale industry in web designing. The job of a web designer is no longer to solely make a beautiful site, but now encompasses making a beautiful site that is extremely usable to everyone who may visit it. I think that adds a lot of value to our profession and if you're sitting on the fence about whether or not you should take the time to learn RWD, you better get hip quick because it's quickly becoming the standard.