You must have heard the term “responsive design” thrown about these days in the realm of web development and design. But what does it mean, and why is it important? We hope we can answer those questions and more.
When being explained what responsive design is, you will often see how columns reorganize themselves and content structures itself based on the form factor of the device it is being viewed on. So a three-column website might switch to a two-column layout when it is viewed on a tablet, and a single column when viewed on mobile.
But this isn’t all responsive design is, it is so much more.
What is responsive design?
Computers aren’t the only thing accessing the web these days, and it isn’t even just mobile and desktop. There is a spectrum of devices available these days which can range from a 3-inch mobile to a 60-inch TV set.
In order of increasing screen size are mobiles, tablets, netbooks, laptops, desktops, and televisions. All these devices are capable of accessing the internet these days.
Now responsive design isn’t just about getting your content to fit each screen size, but also about understanding how each device is used and responding to that. Mobiles and tablets are used via touch, so your fancy hover effects and navigation wont work there. TVs on the other hand are a beast of their own, and care need to be taken to ensure that text is readable on screen, considering it is likely being viewed from far away.
It also means that the design for a mobile device needs to keep in mind that the device is likely on a slow and restricted or metered internet connection, and furthermore it is not as powerful as a desktop device and wont be good at multiple high fidelity animations.
Responsive design is similar to the concept of progressive enhancement, where you keep in mind the users who have the oldest browsers and computers, design their experience and ensure that it works. Then on top of that you can layer enhancements that make the site better for those who are accessing the website from modern browser and modern machines in a less restrictive environment.
With responsive design you take into account the most basic experience of your website—which will likely be designed for mobile consumers—and you enhance that with more information, and features as the device gets more powerful and large.
Responsive design is more than just about layout and screen size, but about bandwidth and device capability.Whether you can get metrics for that is another story entirely.
Let’s take an example of an article about the Eiffel Tower. For people visiting this article on a desktop with a large monitor, you could have a nice wide header image with the Eiffel Tower. However what if you were to simply resize the image and send it to a mobile user.
|
|
|
| Note that both images have the same width. | |
As you can see above, the result isn’t very good, the tower is barely visible. What if we were to crop the image and focus it on the subject matter more closely. A good responsive site would have an appropriate image rather than just a resized one.
So Responsive Design isn’t about creating a different experience for each possible device, but to make your design flexible enough, and adaptable enough, that it can respond to any kind of device it is accessed from.
Why is adaptive design important?
This is a simple one. Because being considerate is important, because giving people the best experience possible on the device they are using is the right thing to do. Responsive design in the end is about responsible design.
Let’s make an analogy that puts this in “real world” terms. Imagine you go to a restaurant that has seating for groups of four. If you come with any fewer or more than four people, they refuse to serve you. You wouldn’t be very happy would you? On they other hand, they could be responsive to your needs, by adding seats to the side if there are up to six people, or joining tables to accommodate more people. If you’re annoyed that this has nothing to do with the web, we will have you know the waiter was noting orders on a web app running on an iPad—there, happy?
Similarly, no one likes to visit a website where they have to scroll horizontally on their mobile in order to read stuff. Or where the website uses huge images that make it load slowly on a mobile connection. People don’t like mobile-centric experiences on their desktops either. They wont like it if your images look like crap because they were created for a smaller screen and navigation will be cumbersome.
If you don’t care about mobile web consumers, start caring. It is audience that is quickly growing.
This might not seem very new. There have been mobile websites from a long time you might say. Ah! But the fact is there aren’t two different webs for mobile and desktop. They aren’t two separate worlds any more. At one time you had mobiles and desktops, then you got netbooks, now we also have TVs and tablets, what next? Can you create a separate website for each? What about the iPad 3 and iPhone 4, which have small screens but higher resolution?
Responsive design is important because it forces you to think about these things. A well designed responsive website is already ready for that new device coming out tomorrow with that weird aspect ratio and unconventional resolution.
How to go responsive
While there is a continuum of devices and resolutions going from 3” to 60” with nearly every step in between, it is obviously not possible to respond to every pixel change. A responsive design is thus fluid, not based on a fixed width, but rather the width of the browser, such that as the size of the browser changes, the elements of the page scale with it.
However, as we have said before, this isn’t enough. Just scaling down the page will make it difficult to navigate or read. So while resizing is fine within reasonable limits, after a point we should consider adapting the layout to the new size.
You can look at the standard size of a tablet device, and change the layout of your website to a tablet-friendly layout when the size of the browser falls below that limit. This can be done purely in CSS using a feature called media queries. CSS media queries are a powerful way to take the same HTML structure and style it differently based on the form factor of the device being used to view the page.
Here pixel density is also an important consideration. The iPad 3 for example, has a display resolution that is higher than most desktops, but sending it the desktop version of your site is a bad idea, since it is a much smaller screen than a desktop of a similar resolution (9.7” compared 27”). Luckily, CSS can query this as well.
Now when the screen size moves to a smaller size still you know that you have reached mobile territory, and you need to adapt your layout once again. At this point you are best off with a single-column layout. Once again the screen width isn’t enough, because a device like the iPhone 4 has a display resolution that is close to tablet territory. Similarly you can use CSS media queries to detect when the website is being viewed on a TV, and change the layout and style accordingly.
You need not restrict yourself to predefined form factors of mobile, tablet, desktop and TV; you can add as many breakpoints as you wish and adjust based on those criteria.
The rule is to start with a basic experience, and change parameters such as the resolution of the device till you reach the point where the basic experience is no longer comfortable. At that point you can improve the design to better respond to that environment, then repeat the process of incrementing the resolution till you reach the point where the experience once again begins to suffer. Of course there are special cases, such as the high-resolution display of the iPad and the relatively low resolution of TVs despite their massive size.
CSS Media Queries
A big part of responsive design is the use of CSS media queries to style content based on the dimensions of the device. The principle of media queries is quite simple, they provide a simple syntax for expressing the conditions in which a particular stylesheet—or a collection of CSS rules—is applied.
So you can include a number of stylesheets with your web page, and all the stylesheets that match your rules are applied and the ones that done, are not applied. Media queries can also be used for providing a stylesheet for use while printing; in such a situation you might want to hide non-content elements such as navigation, advertisements, banners etc. and perhaps remove backgrounds reduce the number of colours used.
Let’s see how one would use a print-specific stylesheet:
<link rel="stylesheet" media="print" href="print.css"> That is it! What lies next is designing a good print stylesheet, but that will depend on the contents of your website.
The use for responsive design is similar, in the above example, the page is responding with the best design considering that the content is to be printed. Similarly we can provide different designs based on the device the content is being consumed on. Obviously the most important thing then is, how much information about the device you have access to in order to create a design specific to it. We will list some of the most important ones:
- width / height: The width / height of the rendering area, i.e. the browser window.
- device-width / device-height: The width of the device irrespective of the size of the browser.
- orientation:
orientation: landscapeandorientation: portraitcan be used to determine how the device is oriented. - resolution: The pixel density of the device.
There are a number of other queries as well, such as colour (to detect the colour depth of the screen), aspect-ratio, device-aspect-ratio, grid, monochrome, and scan.
With most of these parameters you can use min- or max- to test if the values lie within a range. So let’s say we needed to detect if the browser window viewing the content is less than 400px wide, here is what we would do while including the stylesheet:
<link rel="stylesheet" media="screen and (max-width: 400px)" href="less-than-400.css"> Here we add screen to ensure that the stylesheet applies to content when being viewed on screen, using all would apply the stylesheet universally, and we have already talked about print.
We have used a logical operator and here to ensure that both conditions—that the content is being viewed on a screen, and that its width is less than 400px—are being met. There are other logical operations available to us; the not operator as you can guess is used to negate a query, so if for some reason you wanted to apply a stylesheet in all situations except print, you could test that as “not print”. If you want to test if either on or the other condition is true, that can be accomplished with a simple comma as follows:
<link rel="stylesheet" media="screen, tv" href="screen-or-tv.css"> This will apply the stylesheet if the content is being viewed on either a tv or a computer screen. This can be used with more complex queries as well, such as testing if the width is less than a certain amount or the height is more than a certain amount.
Now let’s move on to screens larger than 500px, but lesser than 1000px, a query for that would be as follows:
<link rel="stylesheet" media="screen and (min-width: 400px) and (max-width: 1000px)" href="less-400-to-1000.css"> For here on you can probably guess how to get specific stylesheets for specific screen sizes. However right now this might seem a little inefficient to you, considering that you need to have a separate stylesheet for each possible situation. Well it is possible to perform all these tests within CSS using the media query syntax, here is how that would go for the above situation:
@media screen and (min-width: 400px) and (max-width: 1000px) { /* CSS Rules to be applied when width is more than 400, but less than 1000 pixels */ } Having separate stylesheets makes sense in many cases since it is better for organization, and in many cases you cannot change the width of the browser window anyway (on tablets and mobiles). However this is better for situations where the stylesheet might change on the same device. For example, testing for orientation.
Once you have different stylesheets ready, testing can be done by simply resizing the browser window on a desktop in some cases. Firefox will include a tool for testing responsive layouts in Firefox 15, you can use it by downloading the beta, or check it out below:
Challenges
There are some challenges when you try to adopt the Responsive Design “philosophy.” These are mostly because of shortcomings the current web standards and technologies that make creating a good responsive website difficult.
One of the biggest sore spots when it comes to responsive design, is the matter of responsive images. Let us warn straight away that this problem has not been completely solved yet, although there are some clever solutions out there.
While it is an easy matter to deal with image assets used by a website’s design, such as the headers, logos and other elements of design. One simply has to use the deliver the correct image depending on the media query. However how do you deal with images embedded in HTML using the <img> tag? Turns out this is not as simple as one might think.
If you use JavaScript to insert an image, none of our images will work without JavaScript. If you have JavaScript change the image source based on the the device size, it will fetch both the smaller and larger version of the image. This can be a long topic in itself but we’ll spare you the details and just tell you that there is no solution that works entirely in the browser, across all browsers. Current solutions rely on a combination of client-side JavaScript code, and server-side code to select and send the best asset for the device requesting the image.
Worry not, there is work ongoing to create standards that deal with this issue, since it is a likely to be central to the web in the future.
Another big shortcoming of current standards is that while CSS can be responsive to screen size and pixel density using media queries, it is not possible to take into account the power of the device, or the bandwidth of the connection. For now the common assumption is that the smaller the screen, the slower the device and its network connection. This isn’t always true. Take for example the latest third-generation iPad, it has a higher resolution than most desktops, but is less powerful and likely has a slower internet connection. Similarly event he most powerful of desktops in India are often have rather poor internet connectivity.
CSS media queries are perhaps the most powerful tool available for creating a responsive website, however it is not the only one, and it alone will not take your all the way. It is something that if done right improves the experience of all your uses on any device. For a design to even be capable of being adapted to so many different platforms, responsive design needs to be kept in mind from the start.
As you can see Responsive Design isn’t just based on the use of any particular technology, but rather at using everything at your disposal to ensure that your website is adaptable to any kind of device.
