Responsive Web Design : A Case for Using It

I’ve been a fan of liquid layouts from the early days of web design and always compromised my designs to incorporate them. After all, why have all that screen estate and not use it? With the consumerization of IT and the influx of smartphones and tablets we have some additional problems to deal with in terms of resolution.

• The Smartphone use case relies on a screen width of 320px.
• Most Desktop and Laptops can comfortably display 1,280px — 1,024px to be safe.
• And then we have Tablets which pose a secondary problem of rotation; using 1,024px in landscape mode and 768px in portrait mode.

Most sites are designed twice; once for the desktop/laptop and once for the mobile world using a lightweight design that is optimized for 320px. I haven’t seen anybody with a site catering to tablets but the rotational dilemma poses some issues.

Ethan Marcotte has an answer though — Responsive Web Design– a design methodology that uses one core site that adapts to the resolution of the browser. There are a few responsive designs on ThemeForest with the SuperSkeleton design being a great example of how this stuff works.

However, with every new way of doing something there are various detractors saying it’s not a good idea. I think WebDesignShock have summed up the reasons (11 of them) against responsive web design very well but it’s not going to put me off.

I don’t think responsive web design is the all-round solution for every site but if there is a significant audience need for two or three designs then you should consider it. You also need to consider the use cases individually and whether it’s appropriate to show the same information in all three cases. For example, a cinema site accessed via a smartphone should be optimized to show the current movie showing times. For a tablet and desktop use case, this information is important but not as important so you can fill the pages with fluff and other links. A corporate site may need to focus more on location and contact details rather than corporate news.

You need to understand the use cases and how this impacts your content strategy.

I have a small site for my local sushi restaurant. All three use cases apply and my analytics support the need for a responsive design. At some point they may use tablets to replace their printed menu so using the additional space to provide more details and links to a ‘Sushi 101′ would be beneficial.

Lets go through WebDesignShock’s 11 reasons and consider them against this project.

1. Image Resizing. Good point but it can be countered with some context-aware image sizing.
2. Resizing images consumes CPU and RAM. Good point but countered with the link above.
3. Mobile devices download non-viewable data. True but we’ll just have to bear this in mind during the design or we could leverage AJAX to load content inline.
4. Mobile speed vs desktop speed. Another design consideration, not a deal breaker in my mind.
5. Hiding background images is a bad idea. Another design consideration then.
6. More code, more to update. I don’t really agree as I’d rather update one complex site than three sites that are marginally less complex. With the design criteria we’re all supposed to follow to achieve high PageSpeed scores we’re all using a complex set of techniques to achieve that. Adding a little more into the mix isn’t so bad IMO.
7. CSS media queries will not remove unncessary code. True, but I can use AJAX again if I really need to.
8. CSS media query is a bad choice for multiple devices. I’m not a fan of niche legacy browsers and if my analytics are not showing a significant number of visitors using them, I’m not going to design for them. It’s similar to the ‘Do I design for IE6?’ question. If it’s your corporate Intranet and you’re still running IE6 then ‘yes’. If your user-base is still using IE6 then ‘yes’. If you’re not as restricted then don’t do it. If my new site works on the iPhone, iPad, MacBook and Windows Desktop I’ll be happy as these represent 95% of my audience.
9. “Great mobile products are created, never ported”. Agreed but I’m not building an App — which is a completely different argument. If anything I’m trying to obviate the need for an App by building a site that works equally well on all mobile devices not just the ones from Cupertino especially as I’m an Android user.
10. Mobile needs are different from desktop needs. I agree and I opened my discussion with a similar caveat but the final statement about excessive scrolling is misleading. You just replace the large logo with a small one or swap in a different header design.
11. Better create a mobile website than a responsive one. If there are a significant number of mobile users then it may be worth the effort especially if you have a team of developers behind a high traffic site. If it’s the local sushi restaurant it’s not worth the effort.

In my case it’s better to use a responsive design.

Next Question: Do I use a responsive design framework or start from scratch?

No related posts.