Most websites using responsive design are using it incorrectly, which leads to problems. The general approach to responsive design is a lazy one, and if you take that approach, some of your responsive sites will work absolutely flawlessly, and many of them won't. For those that do work perfectly, it will probably come down to a matter of luck.
The concept of responsive design is simple, but its very simplicity is what leads people into making mistakes so easily. Designers with years of experience has become accustomed to designing for the desktop, and so they'll usually plan a design based on a desktop layout.
Desktop layouts differ from tablet layouts and mobile layouts because they're normally multi-column, normally include huge amounts of white space, and everything is just “big”, for want of a better word. If responsive design techniques are used, this multi-column layout is supposed to break down into a single column.
If that's all your responsive design actually does when it's viewed on a mobile device, you may have a problem. How much of a problem depends on your attitude, but good designers care about good UX. They care even more about bad UX. If your site has bad UX and you want to be a good designer, then you need to fix it.
This problem with collapsing a multi-column layout into a single column is that it doesn't work on a proportional basis. If you have to shrink something horizontally and you don't make any other changes, it is obviously going to expand vertically.
Pour water from a short fat glass into a tall thin one, and the water takes the shape of the tall thin glass, while the volume of water stays exactly the same. What designers need to understand is that with a website, we do need the volume to change. It's not normally a good idea to change the shape but keep the content exactly the same. Something's gotta give.
Somebody who really has earned the title of designer will understand that this represents a problem to be solved, and what designers actually do is find solutions for problems. Therefore it's the perfect job for you to find the best way to deliver the core content of the site without turning the user experience into a frustrating scroll-fest. Here are a few of the things worth considering when breaking down a desktop design into a mobile design:
1. “Mobile First” is moronic
Sorry, but it is. Everyone is parroting this, but as a concept it's not very helpful because if you truly design “mobile first” then it will be nightmarish trying to scale it back up to a desktop design unless you are sticking with a purely single column layout all the way up.
The best approach is to physically design at least three (and up to 11) different layouts. The minimum ones you can consider include:
- Landscape Mobile
- Portrait Mobile
If you want to be a bit more thorough, you should also consider:
- Landscape Tablet
- Portrait Tablet
And the full list, if you want to be absolutely complete would be:
- Huge Desktop
- Ordinary Desktop
- Large Landscape Tablet
- Large Portrait Tablet
- Small Landscape Tablet
- Small Portrait Tablet
- Large Landscape Mobile
- Large Portrait Mobile
- Small Landscape Mobile
- Small Portrait Mobile
- Tiny / Wearable
With so many different possibilities, it's obvious why a lazy “one-size-fits-all” approach is so tempting, but it's also obvious why there are so many ways to ruin it.
2. Tame that sprawling page footer
The desktop design includes one of those huge chunky page footers with loads of internal links? Great, that will probably be very handy on a desktop. On a mobile, it looks ridiculous, and is more than just a touch annoying. You can design completely different page footers for each device break point. Just make those footer links available in a modal dialog and everybody wins.
3. Accept some minor quirks on obscure devices
If a particular device is not common, then it's not so bad if there are a few quirks in the design that appear only when viewing on that device. The more popular a device is, the more you'll have to work at getting rid of any quirks that appear on it.
4. You can hide content that doesn't contribute to the core message
The most important part of a site is the core message. Yes, on some sites, the most important part is the advertising and they only exist to deliver that advertising, but if you have to choose between showing the core message or showing the advertising, choose the message. Google is more likely to regard you as persona non grata if you hide core content and then serve up a bunch of ads. It's because that core content is what Google indexed you based on, and when that content is not shown, Google looks at that as deceptive.
Additionally, things like images that are purely decorative or aesthetic, but which don't contribute significantly to the core message, are candidates for reduction or hiding altogether.
Some people have proposed that hiding content is “punishing” mobile users, but this is a bit of an absurd notion. The reality is that you're hiding the content because it's there to enhance the desktop experience, but doesn't sufficiently contribute to the core message of the site for it to be necessary
5. You can use alternative backgrounds
Recently I was given a ridiculous assignment where the site owner had paid for a particular background and wanted all the content to be tailored to fit that background. Bullet point items had to be a very exact number of characters, the total number of lines had to be exact, and so on.
This is definitely bad practice in web design, because you should never design content to fit a layout. The layout should always be designed to hold the content. If for some reason the layout can't hold the content, then the layout should be redesigned, not the content. It's quite possible to use different backgrounds for different devices. You're a designer. Use your imagination.
Content is the life-blood of a website, and to modify it or restrict it based on the constraints of a layout is a clear sign of amateurishness on the part of the site owner, and a sign that the layout was poorly designed in the first place. Stand by your principles, because that client is going to be trouble if you acquiesce.
The customer is always right, except when that customer is a web design client. Clients rarely know what is best for them, and it's important to assert yourself as a web designer who knows how to deliver the right result for the client. Otherwise you risk creating yet another website abomination.
6. Manually control the collapse order (or avoid spatial references within content)
This is a complex problem. The collapse order of a site depends on the order in which the divs are stacked. You need to stack your divs in the correct order so that they'll collapse in the correct order.
One of the problems that comes from drag-n-drop WYSIWYG website builders is that you can't normally dictate what order the divs get stacked in, and in the very rare instances where you can do that, your hard work gets undone every time you make the smallest edit, and you'll have to go back in and hack the source code again.
If you don't control the collapse order, this image explains clearly what can go wrong. Also you should avoid making spatial references (like “in the column to the left”) as on a mobile whatever was on the left or right may be been shifted to above or below, plus if you make the reader think it's important enough to scroll to see, then they'll have to scroll back again, and that's not cool.
7. You may need different font sizes for different layouts
It's easy to control font size with CSS and you can set different font sizes and even different font faces (if they'll look better) for particular sizes of display. You can find the display size with CSS media queries, and then you modify the font size or font face to be at values that would display the content to maximum advantage on the device type you're targeting.
8. It's best to use responsive images
All images should be responsive whenever possible. This brings with it that sometimes the detail of an image can be lost if it is scaled down too much. A solution to this problem is to make the image clickable so the user can view a zoomed in version of the image separate to the content. The normal way to do this is via a modal dialog box.
header image courtesy of