Article overview

Responsive Web Design and Mobile Devices

· By · 32 comments ·

In a couple of days work, I managed to turn Spoiled Milk's website design fully responsive so it adapts nicely to whatever device it is rendered on.

Nowadays, people access the Internet from an ever-growing range of devices with very different screen sizes and controls (mouse vs fingers).

This poses some very real design and usability issues because most websites are only designed to be viewed on big screens and navigated by mouse. This is clearly the old way of doing things – residue from an age where you could make reasonable assumptions about the user’s screen size.

Modern websites will have to adapt for all kinds of screens and controls. Websites should look and work just as well on an Android-phone and an iPad, as they do on a desktop computer. The modern website fits the device, instead of commanding that the device fits the website.

Luckily, we have an elegant and straight-forward way of achieving this dream – it’s called responsive web design.

Responsive web design

A List Apart has written an excellent introduction to the topic. In short, responsive web designs adapt the layout of the page depending on the screen size of the device that renders the page.

In practice, this is done by clever use of media queries – a part of the CSS3 specification. Media queries allow you to conditionally apply subsets of CSS styles depending on the media – the device – that renders the page. Including screen size.

This means your website can respond to the screen size of the device that renders it – rearrange elements, increase or decrease font-sizes, etc. so the design looks and works just as good on an smartphone as it does on a desktop computer. That’s responsive web design.

Designing for multiple devices

The most obvious aspect of responsive web design is handling varying screen sizes. On a desktop computer you may want a three-column layout, whereas on a smartphone the limitations of the small screen often force you to fall back on a one-column layout. Images will have to be scaled down and up nicely. And so on and so on.

However, there’s more than just screen size to think of when doing a responsive web design. You’ll also want to think about the way the user controls your website – by mouse or with their fingers? Incidentally, the controls on most smartphones are much less precise because they are controlled with a touch screen instead of a mouse.

This forces you to put links and buttons at a certain distance from one another so user’s don’t click the wrong one by accident. Site navigation often has to be rethought.

Another big difference is that you can no longer expect hover to be available since touch devices don’t offer this functionality (not yet, anyways). So your site must be usable and accessible without hover.

Is it worth it?

Mobile browsing is exploding these days and the percentage of visitors on most sites is getting too big to ignore (at Baymard.com it’s already above 10%). And mobile Internet usage is only going one direction, and that’s up.

At first, responsive web design sounds like a lot of work. However, compared to creating a dedicated site for smartphones, and one for tablets, and one for desktops, simply altering the layout of a single site is much easier to implement and (just as importantly) maintain.

Responsive web design definitely forces you to approach your web designs in a different way. However, once you get the hang of it, responsive design is actually fairly straight-forward. I’ve implemented responsive designs on Baymard’s and Spoiled Milk’s website in just a couple of days.

Considering all you need is a couple of days to turn your website into an iPhone-, iPad-, Android-, Blackberry-optimized website, I feel safe saying “Yes, responsive web design is worth it.”

Responsive web design is the future, and betting on the future is hardly a bad idea.

Agree? Disagree? Feedback?

Related content

3 sites with a responsive design

Linda Brillante May 9, 2011 Reply to this comment

This approach is definitely the way to go! Unless your users need specific functions that would be better served as an app, making full use of CSS to make website work for different devices is much more cost effective.

Jamie, Baymard Institute May 11, 2011 Reply to this comment

Exactly :)

Mike May 11, 2011 Reply to this comment

What are your thoughts on using responsive design on content-heavy sites? Sites you might want to drastically cut content for the web version. Seems like a seperate mobile template/layout at a mobile subdomain might be better in these instances. Or what about all the phones that don’t have modern browsers yet? I’ve been struggling with this for client sites.

Mike May 11, 2011 Reply to this comment

In the second sentence I said “web version”, i meant “mobile version”

Jamie, Baymard Institute May 11, 2011 Reply to this comment

Hi Mike,

Check the reply I wrote to you and Elion below.

Elion May 11, 2011 Reply to this comment

it’s a nice approach to this matter but i still see one big problem to say the least.

Heavy sites will have to hide certain sections through css (“visibillity:hidden”). While this will apparently work while we look at it on screen, it will be a problem for the device itself as the content will still be downloaded. We simply won’t see it (I think Mike’s comment here above gets directly to this point)

Just to add to the conversation you may want to read this: http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

I still think media queries are a very powerful tool we have, but I don’t think that they will totally replace the usage of separate websites. They will be a good option, especially for lightweight websites.

Jamie, Baymard Institute May 11, 2011 Reply to this comment

Hi Elion & Mike (this is a reply to both of you),

Thanks for your comments, it’s always nice with input. Here’s my thoughts on the issues you raise.

If the site is content-heavy, surely the people visiting the site will be expecting lots of content? If you remove the content, you remove the incentive to go to the site.

If the content is non-essential then it shouldn’t be on the web version either (even if there’s space for it on the screen). But if the content is actually meaningful to have on the web version, then surely it is also meaningful to have on the mobile version. (There are exceptions of course, but typically this would be minor bits of the page content – not the main content altogether.)

If the concern is load-time, the time it takes to download a couple of extra bits of content (that is hidden) is not much of an issue as the downloading of the actual html-document is typically only a fraction of the load time – server response time, latency and javascript execution make up 80% of the load time in most cases.

The site can of course still be slow due to bad latency or poor javascript execution, but building a separate mobile version because your web version is slow is a hack, not a solution.

If the site is slow, then this is a separate issue that must also be solved – a slow desktop/web versions results in a bad user experience and worse search engine rankings.

All of that being said, if you do have the money to not only build but also maintain a separate mobile version, then by all means do so. Of course a completely tailored solution can always achieve better results. In case of web “apps” (rather than traditional websites), separate mobile versions often also make more sense as the product here is based on interaction and user input – which may be very different in a mobile context.

However, for the vast majority of business sites and blogs, building an maintaining a parallel version of a website is too expensive and delivers very little extra value to the end-user. In these cases, responsive design is a great solution.

Elion May 11, 2011 Reply to this comment

Well, so then I think we moreless share the same ideas, but I’d remark a couple of things.

Our (let’s call it) “normal” website must be fast to download in any case, I totally agree. If we do already have one and our aim is just to turn it mobile-friendly we could test it as is on some mobiles. If It’s fast-loading already then media-queries can definately be a good solution.

But what about we may want to hide images or divs containing bits of code with server requests?
Let’s say these parts may be quite fast-loading on a desktop, where we want our user to take advantage of the greater amount of real estate given by the screen size, while we want our mobile users to focus on less things, maybe only the core ones. Are we sure we need to cut those parts from the desktop version too?

And then, what do you think about forcing users towards a mobile-specific version vs. the ability to choose between mobile and desktop each time they want? Some people say that they prefer to have the choice between the two each time…. I don’t have a strong opinion in this case, I’d be really happy to hear from you.

In any case the answer seems to be always the same: ther’s no single solution good for anybody.

Ps- by the way, interesting discussion here.

Jamie, Baymard Institute May 11, 2011 Reply to this comment

Hi Elion,

Thanks a lot for the feedback. These are valid points.

I think if you need the website to work differently on the two types of devices, then a dedicated mobile site is often a better solution (granted you have the resources for maintenance).

Image loading is by far the biggest issue, but there are javascript solutions out there that can help. But I’ll admit this is a real weakness when using media queries on image-heavy sites.

Regarding content, I generally think it is very few cases where you’d want to hide actual page content on the mobile version. Perhaps a navigation caption or something like that, but any kind of real page content should generally be available in the mobile version if it is available in the desktop version. (There are of course exceptions, but generally I think it should be this way.)

Regarding being able to switch between the two layouts, I think people want to do this for two reasons:

  1. The mobile version doesn’t have all content of the desktop version. This is a very real problem – a lot of mobile sites are limited versions of the website with content missing (even whole pages and sections of the site sometimes), whereas the whole idea behind responsive design is to make the entire site’s content accessible from any device. So with responsive design this is not an issue.
  2. Returning visitors know the desktop layout so if they are looking for something in a specific place but the mobile layout is different in structure and navigation, they’d like to switch because it is easier to find in the layout they are used to. The advice here is obviously to mimic the structure and navigation of the desktop version on the mobile version. When using media queries, you’re using the same HTML for both versions, which means the structure and navigation will be similar by nature.

I think that if all content is available on the mobile site (which is it in responsive design), then people will be fine without the ability to switch to the desktop layout.

In any case, if you wanted to give people the option this wouldn’t be a problem. You could do some simple class-scoping and then use that to enable/disable the media queries, effectively giving people the option to toggle between the two layouts.

Thanks again for your comments, it’s is indeed an interesting discussion.

Rachel McCollin May 11, 2011 Reply to this comment

Agree. For most simple sites a media query will do the job, although image size may be an issue if large ones are still downloading – there a JavaScript plugins that can help with this. For a large site I think the design team needs to go back to the drawing board to some extent and identify what mobile users will need form the site, i.e. what to include and how to set up navigation. If you consider this form the outset you can build your site in a way that enables navigation to hide unwanted content instead of CSS. Maybe a middle road?

Jamie, Baymard Institute May 11, 2011 Reply to this comment

Hi Rachel,

Thanks for your comment. As I mentioned in my reply above, if you have the resources to build a separate mobile version, that is of course going to be the ideal solution.

However, to most companies, resources are limited and for many websites out there, building and maintaining a parallel mobile site is just too expensive considering the meager improvements for the end-user.

But of course, if the product/service should work differently on a mobile device than it does on a desktop computer – e.g. web apps and sites where special mobile features such as location awareness make sense – in those cases, a separate mobile version is definitely the way to go.

If on the other hand the site should work the same then media queries are a great solution that’s easy to build and maintain.

Jamie, Baymard Institute May 11, 2011 Reply to this comment

I should clarify that by “work the same”, I mean offering more or less the same content / functionality / experience.

Tom Johnson July 11, 2011 Reply to this comment

The goal for any website should be to know your customers in order to deliver them the most appropriate content. This goal is even more important with mobile sites—not only do you need to know your customers, but you need to know what they are likely to be doing on your mobile site, as well as where they’ll be when they’re doing it. Thanks for sharing.

Joe October 20, 2011 Reply to this comment

Hi, great post, appreciate the info. I’m having some issues with the contact field of a QR code landing page I created. Any ideas on how to have the fields auto-delete upon selection? Thanks

Smartech Consultant November 16, 2011 Reply to this comment

Today Every one have a Android Device.So its Compulsary to design a website who is familiar in all type of Screen.Like desktop, Mobile etc.

David at Buy Books November 30, 2011 Reply to this comment

I subscribe to the idea of adding support to make optimized smartphone viewing an option for websites. This is the quickest and most cost-effective way to reach a wide selection of smartphones, without having to develop apps for each smartphone platform.

Chris Lee December 1, 2011 Reply to this comment

Hi there, good post. I found it interesting because as you was saying most websites nowadays are designed for big screens, but because mobile devices are becoming more popular, designs for them need to be considered.

Pavan December 9, 2011 Reply to this comment

though website are accessible through any mediums whether desktop or android device or smartphone the concept of responsive web design is to some extent worth it.

Ontario website designer December 12, 2011 Reply to this comment

Agree Jamie! And, I like your label “responsive web design” too… can I quote you on that?

Though I’ve been slower to accept the usage of mobile devices being used to search the internet here in Canada, it truly is obvious, yes; as we move forward in time, their usage to search the internet will only increase. Therefore I am now implementing your suggestions in order to help local businesses.

Thanks,
Trish

Brightbox Marketing January 11, 2012 Reply to this comment

Totally agree, I think a lot of websites nowadays have both websites for computers and also devices such as iPhones and iPads.

kyle lanning January 16, 2012 Reply to this comment

This approach is great, my only concern is full support of CSS3 and media queries in the most popular browsers being used today. Currently IE6-IE8 is still king, and does not fully support CSS3. Nevertheless, it’s still important to be learning the latest techniques.

Chad@19 Inch Monitor March 12, 2012 Reply to this comment

I’m a web designer, for me the basic rule of it is that, the website must be user friendly, since not all internet browsers are expert surfing the net. Other rules comes next like the content, accessibility and most important is a moderation which provides reply and moderates the operation of the website.

Webworx Web designer March 14, 2012 Reply to this comment

Very important consideration nowadays. If one is developing websites in Wordpress or joomla alot of the templates are light-weight and designed for mobile use so this solves the issue of developing a mobi site.

Cape Town March 14, 2012 Reply to this comment

Very interesting articles. The growing number of mobile users is forcing web developers to re-look at the platforms they develop websites in and how mobile friendly they are.

Greg March 20, 2013 Reply to this comment

I totally do not agree. While I agree that RWD allows you to give “an experience” on a different screen, it does not account for several things well. For starters, users engage with different screens for different things, in different ways. Stated another way – they have different goals with each device. A great user experience starts with what the user wants and how they want to interact with your brand/product. For example, bubbling up critical path journeys on mobile web that take advantage of features of the phone, such as GPS (“Find a store near me”). Also RWD does not allow you to change a journey flow. Do you really want an 8 screen checkout on a mobile device, or would it be better to streamline that critical path journey? There are several other items to think about when considering RWD.
Summarizing – RWD is a good choice for “standard” content only sites. But to create rich, engaging experiences that take full advantage of the device you’re on and offer users the best experience based upon that, RWD is not a great path. Even though it may be possible, it certainly won’t be easy or cost effective. Just my 2 cents.

Christian, Baymard Institute March 27, 2013 Reply to this comment

Hi Greg,

We’re not that afar, as we’ve dicussed in our lates UX column here at Smashing Magazine. For more advanced types of sites, e.g. a mobile e-commerce site, having a stand alone mobile version might make sense, but it is very context dependent. If it’s possible to design for mobile first (thus the responsive mobile view defines the the full desktop view, and not the other way around) then the responsive site can be very good. In practice however, for most large e-commerce sites this is not an option and a dedicated mobile solution is the only right way to go to cover the myriad of nuances and pitfalls you need to account for when designing mobile sites.

punam July 15, 2013 Reply to this comment

I have found so well content on your site as we can say that you have written so good . website design should be well maintain .it should not depends on iphone lappy and any other devices.
<a href="http://www.thenehruplace.com/">nehru place</a>

Bay Area Web Designer July 18, 2013 Reply to this comment

Good work…unique site and interesting too… keep it up…looking forward for more updates…

Craig Smith August 17, 2013 Reply to this comment

Outside of responsive, there are quite a few jquery effects you can apply to your site.
Nice plugin to add to your responsive arsenal.

http://srobbin.com/jquery-plugins/pageslide/

Jess September 5, 2013 Reply to this comment

I’ve been to some big web sites that haven’t been responsive and it’s always confusing for me. It will cost you.

Tony April 12, 2014 Reply to this comment

Now a days all the webpages are developed for working in both the PC and mobile platform. These days most f us use the internet through the mobile phones. If the webpage is not compatible for the mobiles then n one use that page further. So the webpage should be portable for both the PC and mobile. Keep sharing more about the same in the upcoming posts.

BiancaMiller July 20, 2014 Reply to this comment

I’ve notice that this blog was written in 2011 (that was more than 3 years ago). From that time to now, RWD have developed and different platforms have come out quickly like an avalanche. And I do agree with the recent comment above; if your website design is not responsive, users willautomatically just shut you down. No questions ask.

Post a comment!

Close overlay