Responsive web design

I’ve been doing quite a lot of research lately on responsive web design. This fancy name was given to a combination of techniques, such as media queries, fluid proportion-based grids and flexible images which adapt a website’s layout to the viewing environment (phone, tablet, desktop etc). Long story short, it is an alternative to the method followed so far of creating a desktop version of a website, a phone version and possibly a tablet version. Instead of creating a different site for each different viewing environment, only one website is developed and is designed to respond to whichever device the user is viewing it from. For a quick example, open the [Boston Globe] website and resize your browser.

There are obvious benefits for taking such an approach. First and foremost, no longer do you need to design for the myriad of different resolutions, aspect ratios and screen sizes. 320×480, 360×480, 480×800, 540×960, 640×940, 640×960, 768×1024, 768×1280, 800×1280,  4:3, 16:9, 16:10, 20:9, 22:9, 22:10, 3.5″, 3.6″, 4″, 4.3″, 4.7″, 4.8″, 5.1″, 5.3″, 7″, 7.8″, 8.1″, 9.8″, 10″, 10.1″, 11″, 12″, 13″… Did you get a headache yet? Imagine designing for all these, or at least the most popular. Now imagine you did design for all these, but in 2 years a bunch of new devices, with new resolutions, aspect ratios and screen sizes came out. What do you do? Design for them as well? Go into the endless circle of chasing after resolutions? There is always the option of designing only for the most popular ones, which is what many designers do nowadays. They worry about how their website will look on an iphone, ipad and desktop, and don’t care about anything else. Clearly that strategy is flawed and something new needs to happen. Well, guess what, it’s already here and it’s called Responsive Web Design.

Another benefit is that there is no duplicate content. The client doesn’t have to maintain two different versions with two different urls (m.domain anyone?), which decreases maintenance and also increases the page ranking of the website. If there is one thing Google’s spider hates is duplicate content and multiple links to the same page. Moreover, a day or two ago, a friend of mine sent me this [link] on facebook. Obviously, not a very interesting article if you are not Greek, but stay with me for a second. What we can tell from the link is that, said friend copied the link from his mobile browser and pasted on my facebook, as you can tell from the m. prefix to the url. I opened the link on my desktop (as most of you just did) and was presented with that horror. Now open this [link here] and you’ll see the exact same article, as it was intended to view on a desktop. Why can’t I see the content I want in the most pleasant way possible on the device I am using to view it, without having to worry about the syntax of the links? Talking about making things simple for the user…

There is a number of other advantages of responsive design that I feel are a bit more technical and not relevant to the subject of our blog. What I want to focus on next though, are the disadvantages or, to put it in a more optimistic way, the considerations.

When you visit a mobile site, you often have the option to switch to the desktop view. This is not possible on a responsive design, as the CSS determines the view you will get based on your screen’s size. Each device will get the view that the designer thought looks better and is more usable on each device. This can be a disadvantage when the mobile view doesn’t contain everything the desktop view does. For example, the designer may have thought it prudent to remove the option to write a review of a product on an e-commerce site on the mobile view, because he thought that mobile users would not bother typing a review on a small screen. Such decisions and limitations can negatively influence a user’s experience of a website.

This brings us to the next consideration. Do the users do or want to do the same things on a website when they visit it from different devices? There is always the argument that, when somebody visits a restaurant’s website from their phone for example, they are most likely on their way there and are looking for the directions, while if they are visiting from their desktop, they are most likely looking for the menu, prices, reviews etc. The designer may then decide to remove or re-arrange the content based on these assumptions. I don’t know how that makes you feel, but it doesn’t make me feel very good. In a sense, we are punishing users for the devices they use. Why should the mobile user not have easy access to the restaurant’s menu? Who decides which part of the experience to subtract from each device? We also need to remember that a big number of users only uses their smartphones to access the web, therefore offering them a limited view of the website will lead them to believe that that’s all there is to it. Not everybody will go on a site on their phone and then check the full version on their desktop.

This post merely scratches the surface of responsive web design. I welcome any contributions to the discussion. If you want to learn more about it, a great place to start is [Responsive Web Design] by Ethan Marcotte and the following articles:

• What the heck is responsive web design?
• Responsive web design
• Case study