Responsive Web Design and Mobile Devices
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?
User experience research, delivered twice a month
Join 25,000+ readers and get Baymard’s research articles by RSS feed or e-mail:
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
Related Content
- A List Apart’s introduction to responsive web design
- Mobile: Venturing Into Responsive Design
- Serbo-croatian translation of this article by Jovana.
- Our year long research study on mobile e-commerce usability can be found here: Mobile E-Commerce Usability
3 Sites With a Responsive Design
More E-Commerce Research
Free Research Content:
- Popular Articles · a listing of our most popular research-based articles on e-commerce UX
- UX Benchmark · benchmark with case studies of 123 major e-commerce sites ranked by e-commerce UX performance
- Page Designs · navigate 9,200+ manually annotated full-page screenshots categorized by page type
Products & Services:
- Baymard Premium · full access to all 618 research-based design guidelines, UX case studies, page designs, and review tool ($720-$3,000 / year, based on plan)
- UX Audit · get an in-depth analysis of your site’s UX, conducted by a Baymard researcher ($1,900-$9,700 based on scope)
Comments
Premium Research
Get full access to Baymard’s 78,000+ hours of research and empower your UX team and decisions.
Audit Service
Get Baymard to audit your site’s UX performance, compare it to competitors, and identify 40 areas of improvements.
Linda BrillanteMay 9, 2011
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 InstituteMay 11, 2011
Exactly :)
Jack OscarJanuary 10, 2020
Mobile Users specifically have limited ability to focus. Studies show that portable guests will in general relinquish website pages that take longer than three seconds to get done with stacking. On the off chance that a site isn’t improved for cell phones and tablets, it will likewise set aside more effort to explore, which can baffle clients to a point of no arrival. Guaranteeing that your responsive site utilizes current execution methods, for example, reserving and responsive picture show will help improve your website page’s stacking speed.
MikeMay 11, 2011
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.
MikeMay 11, 2011
In the second sentence I said “web version”, i meant “mobile version”
Jamie, Baymard InstituteMay 11, 2011
Hi Mike,
Check the reply I wrote to you and Elion below.
ElionMay 11, 2011
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 InstituteMay 11, 2011
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.
ElionMay 11, 2011
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 InstituteMay 11, 2011
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:
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 McCollinMay 11, 2011
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 InstituteMay 11, 2011
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 InstituteMay 11, 2011
I should clarify that by “work the same”, I mean offering more or less the same content / functionality / experience.
Tom JohnsonJuly 11, 2011
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.
JoeOctober 20, 2011
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 ConsultantNovember 16, 2011
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 BooksNovember 30, 2011
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 LeeDecember 1, 2011
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.
PavanDecember 9, 2011
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 designerDecember 12, 2011
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 MarketingJanuary 11, 2012
Totally agree, I think a lot of websites nowadays have both websites for computers and also devices such as iPhones and iPads.
kyle lanningJanuary 16, 2012
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 MonitorMarch 12, 2012
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 designerMarch 14, 2012
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 TownMarch 14, 2012
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.
GregMarch 20, 2013
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 InstituteMarch 27, 2013
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.
Bay Area Web DesignerJuly 18, 2013
Good work…unique site and interesting too… keep it up…looking forward for more updates…
JessSeptember 5, 2013
I’ve been to some big web sites that haven’t been responsive and it’s always confusing for me. It will cost you.
TonyApril 12, 2014
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.
BiancaMillerJuly 20, 2014
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.
Stephany RobMay 16, 2019
Great Article! Very useful tips for the web design mobile responsive. Due to increasing mobile usage all of them using internet through mobile, so, if you didn’t create your website as response you can’t able to reach more peoples. Responsive web design helps to increase our audience in a good way.
matrixNovember 30, 2019
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.