Responsive Design Part 3: The seven deadly sins of responsive

18 Jan 2016
  • "The Scream" painting by Edvard Munch shown on an iPhone with a bleak blue filter

In the last couple of weeks we’ve explored what responsive website design is and why you need it, so this week we're going to share with you some of the worst “responsive” stuff we’ve come across in the last couple of years.

This isn’t a name and shame campaign but a 'buyer beware' so you can check your prospective web agency's work before you part with your cash. We've seen countless supposedly "responsive" websites out there making these mistakes. There is no half-way-house with making sure your website works effectively on a multiple devices. Any one of these could be enough to turn your potential customer off, or in the worst case scenario, make it impossible for them to use your services on-the-go.

In order to spare any blushes, we decided to break OUR OWN website to show you these horrendous examples. We had a shower afterwards. Please rest assured that if you visit this site on your mobile device, laptop, or 4K monitor screen, you won't experience any of these bloopers below.

Are you ready for us to dish the dirt? Here are the 7 deadly sins of responsive website design...

1. Making “some stuff” responsive

Three iPhones showing a responsive page and two that are not responsive

Making some stuff responsive is the equivalent of only building one brick wall on a house - you just wouldn’t do it. Except, clearly, some people do because it's rife out there.

We’ve actually seen websites where the homepage does some very basic responding to pass the test, but every single other page of the site wasn’t responsive. Not even the “about” page. Just because the home page passes Google’s mobile responsive test doesn’t mean that the whole site passes. Any page that you add to your site which isn’t responding properly will bring down your overall Google ranking score, even if you're searching using a desktop or laptop. Meaning your nice responsive home page still isn't doing you much good.

All we can say is... just - NO! You deserve better than that.

2. Shrinking the site

A MacBook and an iPhone showing a site that has been shrunk to fit the phone

Placing a width: 100% parameter on the container of your website will make it shrink to fit any device width. This is not responsive design. What happens in this situation is that everything shrinks: the site, the text, the images, the links. Now the site is unusable and it won’t pass Google’s mobile test - so not only will it be useless to humans with tiny fonts and unreadable content and images too small to make sense of, but Google will penalise you in your search engine rankings too.

You could've done a great job re-formatting the content for the screen size being used, making the site easy to read, and really nice and usable... but you just sent your user to pinch and zoom hell.

3. Using ancient HTML

Some HTML table markup

Using HTML tables to create layouts is the practice of dinosaurs. If you’re not a dinosaur (and more importantly, if your customers aren't!) then don’t let a dinosaur anywhere near your online presence.You’ll need a web designer or developer who uses the latest HTML best practices. Using the correct markup you can create proper web components that can float (i.e. move around and 'flow' when screen sizes change), display as block or inline-block (i.e. always starts on a new line and takes up the full width available), inline (does not start on a new line and only takes up as much width as necessary) or even better adhere to a full 'responsive grid' framework (i.e. splits the screen into different numbers of columns of content depending on screen size).

There's also a chance that future versions of popular browsers won't even render your site's old fashioned code properly on ANY device, even desktop screens.

Make sure your web developers are up to speed with the latest coding techniques or you'll spend your money on something that's already gone out with the ark before you've even launched it.

4. Not resolving horizontal scroll

An iPhone showing a website with accidental horizontal scroll

Sometimes there will be a stubborn element somewhere on a given web page that just loves to cause a horizontal scroll. It can be a very frustrating and time consuming task to find the offending element and correct the applicable code to prevent that horizontal scroll which makes your users have to scroll left or right, sometimes away from all the core content of your web page, and into some sort of Matrix-esque white space. Not to mention it looks amateurish, which reflects on your brand. This issue happens to the best of us, but a good web designer spends the time to put it right. A lazy one will pretend they haven’t seen it. A bad one won’t even spot it in the first place. Don't accept this happening on your website - ever.

5. Not using equal heights in grids

Some elements with unequal heights compared with some elements with equal heights applied

Sometimes when creating responsive designs, grids can go horribly awry. Imagine a grid of eight items displayed as four columns and two rows on a desktop display. Item 3 is displayed in row 1 and column 3. However, on a tablet the grid must re-flow using the responsive grid's 'tablet' breakpoint, for the layout to better suit the screen size. A good fit would be two columns and four rows. Item 3 will now be displayed in row 2 and column 1. And this will alter again for a smaller screen size. Without the proper understanding of what is happening we can end up with horrid “stepped” grids which look really nasty! Of course there are intentional uses of the stepped grid such as you see on Pinterest but I can assure you that design has been very well considered and isn’t an accident.

To resolve the issue we use some clever coding which applies equal heights to every item in a given row, based on the tallest item in that row. When a given breakpoint is reached and the grid responds accordingly, the item heights are all immediately re-calculated depending on the tallest item in their new row.

6. Not resolving padding, margin and overlap issues

Some overlapping occuring on an iPad viewing a website

Often padding and margin will need adjusting for different breakpoints. Naughty designers will ignore this and you can end up with a horrible display of uncalculated white space, both inside and between elements. Remember white space is only beautiful when it’s meant to be there.

Overlaps can occur when CSS 'floats' (which are what allow elements to flow around a page at different sizes and breakpoints) break horribly when you switch between breakpoints. What happens is all of a sudden elements lose their height properties and everything inside of them and around them collapses over the top.

What you end up with is element overlap which not only looks really rubbish but also totally screws up the flow of your web page. It's amateurish, confusing, and just plain nasty.

Designers that don’t test for these issues or even worse - spot them but refuse to put them right are just not worth your time or money.

7. Taking away a useful component for smaller screens

A MacBook and an iPad - the sub-menu is missing from the website on the iPad

This last sin is the one which some naysayers might throw at you as an argument for not bothering to have a responsive website. But if you've read the first two parts of this series - you'll know exactly why this is nonsense.

Bad web designers do something very naughty when they have an element they don’t know what to do with at a smaller screen size; they just get rid of it. Delete it.

If there’s a really useful sub-menu when you view your site on a desktop machine or laptop, then it really needs to exist when you view it on your mobile too. Making your website responsive for mobile doesn’t mean making it less usable. The WHOLE POINT is to make your site MORE usable on a smaller device.

So unless an element is truly unusable on a mobile device (such as a landscape map with tiny links on it for example), you really need to keep it in there, somehow. Or display an alternative that solves the same problem the original feature or function does on the larger screen sizes. This is where real skills and experience come in. It’s all about re-working the flow of a page to work on a mobile device; not just deleting elements willy-nilly because you can’t be bothered to think about where things should go.

Basically, if you don’t have a VERY GOOD REASON for deleting it, don’t delete it - re-format it, re-work it, or re-factor it!

Join me next week…

Phew. What a journey we’ve been on. In the last three weeks we’ve covered what responsive is and why you need it, and now you know how to avoid throwing your money away with agencies who can't help you make the most of your site on all devices. Next week is the last part in our responsive website design series and I’m going to be writing about some of the drawbacks of responsive and what we can do to overcome them. Hope to see you next week for that.

If you’ve heard enough and want to start talking to us about your requirements contact us today so that we can help bring real success to your online presence.

Mobile website fail? Then you need this...

A printed copy of the responsive design whitepaper
Download your FREE whitepaper now!