Responsive Web Design – Good Design vs. Bad Design

Don’t Just Make Your Site Responsive; Make it a Quality User Experience!

On April 21, 2015, Google updated their algorithms to favor responsive web design and include mobile friendliness as a ranking signal. Since then, the majority of chatter has been surrounding the need to make websites responsive in order to maintain search rankings.

In this post, we’d like to take things a step further and highlight what makes good responsive design and what should be avoided.

First, to build a site with responsive design, there are two approaches:

  1. Create an adaptive website with multiple fixed width layouts based on common devices. (Note: This approach can be challenging due to changing device sizes).
  2. Design it using multiple fluid grid layouts to create a truly responsive user experience.

Regardless of which path you choose to make a website responsive, we want to ensure you’re not forgetting one fundamental element: user experience.

Ultimately, responsive design on its own isn’t the key to conversions; it’s also the quality of your website from the user’s perspective. Ranking in the top of search results won’t do you any favors if a viewer clicks to your site and immediately leaves due to poor design.

With that said, check out these DOs and DON’Ts of good responsive design vs. bad responsive design.

Don’t: Make an exact replica of your desktop version.

Do: Include the key elements of your site and leave out the ones that aren’t necessary. Users don’t expect a carbon copy of your desktop site. In fact, it would be overwhelming!

Don’t: Use a generic, pre-made design.

Do: Maintain your branding throughout. Ensure each page reflects your brand at all screen sizes. Use elements smartphone users are accustomed to seeing. Also, be sure to preserve padding and white space to keep the design clean and easy-to-read.

Don’t: Put all of the content on one page.

Do: Incorporate a clear menu with access to secondary pages. Place your call to action on your main page and ensure the rest of the mobile site is easy to navigate.

Don’t: Use different images for different devices.

Do: Use images that resize within the confines of a fluid grid. This is done using CSS code and will ensure the images on your site don’t look stretched or pixelated.

Don’t: Design your mobile site as an afterthought.

Do: Think mobile-first. Why? Mobile web browsing on smartphones and other devices is replacing desktop traffic at an increasingly rapid rate. If the majority of users are accessing your content on a non-desktop device, make it function in a way that follows mobile norms and touchscreen patterns.

Don’t: Expect to get it perfect on the first attempt.

Do: TEST! Share your site with friends, family members, or test-group customers. Get their feedback. Know what they’re immediately looking for when they access the mobile page and display it prominently.

Keep these tips in mind when building your mobile-friendly website and you’re on the right track to providing a true quality user experience regardless of the device.

Still not convinced you need to make your website responsive? We recommend reading our previous post: Responsive Web Design is Now Necessary to Succeed.

Embrace new technology and step ahead of your competition!

Do you have any design tips for responsive web design?

Share in the comments below!

21 Comments »


1
Bellaisa writes:

I was just thinking about this today. While I want my posts to look good on people’s desktops – I would rather they look good on mobile. Over 70% of my traffic is mobile, and missing important elements on their screen is going to hurt my blog more.

Comment provided May 7, 2015 at 3:06 PM

[Reply]

2
David Croucher writes:

A good starter list. Thanks.

I’d like to emphasize your point that a lot of (unprofessional) professional designers seem to hate: ON A WEBSITE THAT YOU WANT PEOPLE TO KEEP VISITING, DO THE EXPECTED!

It’s like driving a car. Drivers who love the ‘different’ and ‘unexpected’ tend to catch out the other driver. Result? A lot of near misses and the occasional fender-bender. Occasionally a nasty crash. It’s just the same with websites. Your visitors DO like innovation, neat ideas and a rich experience. But they like the FAMILIAR a lot more. They want to find the navigation cues they know where they expect to see them. They want to see what you’ve got in outline without a lot of stuff hiding the meat. They want to find your call to action easily, but also to see where to get more help without having to hunt for it. Above all, they NEED text they can read: plain font, right size.

A desktop/laptop layout does this one way; a small screen device does it differently – they have to be different because their parameters are necessarily in conflict. Your design must do both of these well whichever method to go responsive you choose.

So search out the 10 best sites you can find which have this balance right and learn from them. My favourite right now is the fully-responsive Transport for London site, which covers all the bases superbly well, and you can see all options on a desktop live just by varying the frame width. It’s at http://www.tfl.gov.uk/

Comment provided May 7, 2015 at 3:11 PM

[Reply]

David,

Great tips! You’re completely correct. Visitors will want and even expect to find familiar navigation cues. Looking at sites who are doing it well is a great way to get ideas to balance your content on a mobile site vs. desktop site. As you said, “do the expected!” :)

Thanks for sharing!

[Reply]

3
Adarsh Shankar writes:

One of the best practice is good user interface. We have a very good example of Wikipedia. It have quality content with best internal linking structure on each relevant term in each page.

Comment provided May 8, 2015 at 12:23 AM

[Reply]

4
elevator writes:

Thank you for this topic and your hints. But do Google itself have responsive template on their Blogger package? because I use one of their templates for my blog but still when I run my sites on their testing medium sent to me; it fails on two occasions I have tried. Though I found one of my articles ranked on page one via Google plus yesterday.

Now what can we do to pass the test? For I know this same problem applies to other bloggers.
Thank you once more

Comment provided May 8, 2015 at 12:54 AM

[Reply]

David Croucher writes:

You’d think so, elevator! Someone at Google needs a kick up the pants to arrange that a Google website follows Google requirements. A few thousand Blogger bloggers telling them so will be the best way to do that, so get onto them now!

[Reply]

5
Papa writes:

i also make my site responsive and you know Google hardly ever broadcast big improvements with this much enhance discover, so it is really kind of apparent when Google is forcing an agenda vs. an algorithms.

Comment provided May 8, 2015 at 1:04 AM

[Reply]

6

Thanks indeed for clarifying some of the important Dos and Don’ts that one has to be mindful during web design.

In fact, I have had some of my visitors saying that they couldn’t access one of websites with certain mobile devices.

Once more thanks

Comment provided May 8, 2015 at 3:06 PM

[Reply]

7
KB writes:

KB
The information you have given are very informative and usefull
Thank you

http://www.mindprocess.co.uk

Comment provided May 11, 2015 at 7:58 AM

[Reply]

8

Highly imformative and useful post written ion simple language . Thanks, Courtney.

Comment provided May 11, 2015 at 10:38 AM

[Reply]

9
Andy Simons writes:

Nice one, thanks for great tips.
I would stress on eliminating unneeded parts of the original design (especially scripts), avoid loading unneeded scripts and styles, and making general content shorter by using collapsible tabs, hidden menus etc.
Plus mobile first approach in CSS helps to reduce the code size if it is done correctly. Think Bootstrap or Foundation frameworks.

Comment provided May 13, 2015 at 8:52 AM

[Reply]

10

Thanks for this articles. But one thing there is no responsive web support package from Google. The template we are using are not so convinced that easy for a responsive site.

Comment provided May 17, 2015 at 6:57 AM

[Reply]

11
Sara Martin Smith writes:

Thanks for this guide, its really informative and helpful, specially for newbies. Thumbs up for you.

Comment provided June 2, 2015 at 5:07 PM

[Reply]

12
Siddartha writes:

Thanks for your precious article. Actually i was in search of this information that how to make our website responsive because after 21st April Google updated their algorithms to favor responsive web design and include mobile friendliness as a ranking signal so it was necessary to know about google guidelines. Thanks for sharing this article great job..

Comment provided June 11, 2015 at 5:09 AM

[Reply]

13
varunkashyap writes:

when you are designing a responsive website for your business you have to keep two thing in your mind. #1 is don’t make a mobile site and #2 is make your website responsive for all the different sized devices

also you have to remember that picture which you use for your website their size was not larger than your website needs. These type of images make your website loading time is higher.

Comment provided June 13, 2015 at 2:50 AM

[Reply]

14
MarianHJones writes:

This sites gives me intellectual analysis on our studies. Thank you so much for this wonderful site, it helps me a lot.

Comment provided June 19, 2015 at 10:40 PM

[Reply]

15
foduu writes:

Real treat to read a genuinely good article. You have covered almost all the points with deep research to create beautiful and effective website designs compare then bad web design. What you wrote makes sense. But most internet marketers and unprofessional web programmers make same mistake. Love to read it and definitely will share it in my developers team.

Comment provided June 22, 2015 at 4:36 AM

[Reply]

16
Simon CL writes:

Hi, actually after Google’s announcement on responsive web design, I was thinking to draft an article on it based on Google’s inputs, but I thought to get more ideas for better output even though I am a designer.
This post boosted me with good inputs to draft my article.
Thanks for the post.

Comment provided June 23, 2015 at 6:09 AM

[Reply]

17
N Jahangir writes:

An informative and timely article, thanks Courtney and the commenters.

I was browsing responsive Blogger templates and found quite a few of them. I am yet to check them myself. Will get back to you once I have done it.

Meantime will appreciate your comments.

Comment provided August 31, 2015 at 5:07 PM

[Reply]

18
Fabne Jnr writes:

True talk Courtney, thank you very much for the advice. i will take this into consideration.

Comment provided September 4, 2015 at 5:06 PM

[Reply]

19
FSC India writes:

A very informative article both for the initiated and the uninitiated. Responsive Web Design is what matters the most today. If the experience of using a site isn’t good then there is hardly any chance a user will prefer staying for long on it. So almost everything related to Responsive designing is astutely put.

Comment provided November 16, 2016 at 1:02 AM

[Reply]

RSS feed for comments on this post.

Leave a comment

Please read our comment policy before commenting.