Add Focus To Your Conversion Insights
Get 14-day free trial

The Essentials of Responsive Website Design 11 June 2015 | Nathan Thomas

Responsive website design is about creating a website that reacts appropriately to the device people are browsing with. Your website should appear and behave differently to a mobile user with a 4 inch screen than to a desktop user with an enormous display.

Once upon a time optimizing your site for mobile users was an optional aside; something to think about ‘when you get the chance’ but never your number 1 priority. Lately this has changed big time.

Research from KPCB has underscored the importance of mobile internet users, a trend which seems to be steadily growing. Today the majority of digital media usage now takes place on mobile apps.

But if that’s not enough to convince your CEO or your clients to make responsive design a priority, you should remind them that in April this year things Google unleashed its much discussed “MobileGeddon,” promising to heavily penalise sites which are not mobile friendly.

(Hint: if you noticed your search engine traffic disappear overnight on April 21 this year, than that’s probably the reason why).

If you’re still not sure if your site passes Google’s mobile friendly test, here’s the tool you can use to find out: Test your site here.

Screen Shot 2015-06-10 at 12.20.18 pm

We passed!

Responsive design is now essential for creating a website that is found on the search engines and accessible by the majority of internet users.

The Concept of Responsive Web Design

One of the great things about the internet is that it need not be static. Unlike a brick and mortar building or an image with ink on paper, your website has the freedom to morph and change to best suit the equipment your prospects are using.

Responsive design means you should create a dynamic website that flows like liquid to take the shape of it’s container. Trying to cram a desktop website into a mobile screen 10% of the size looks crazy. Instead your website should reinvent itself for the mobile user.

Here’s a wonderful article by Ethan Marcotte on the theory of responsive web design, in the context of broader design themes. It’s a lovely piece that even quotes the famous British architect Christopher Wren! Read it here: Responsive Web Design

From Marcotte’s article:

“Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.”

Here Are the Essentials

If your website is not already responding to the scale of the device it is being read on then we need to change this fast. Here’s a basic coding tutorial that will give you the script for fixing this. Of course, this is the bare minimum of responsive design; we’ll get to the fun stuff in a second.

Screen Shot 2015-06-10 at 12.21.28 pm

(Image from: http://www.w3schools.com/html/html_responsive.asp )

Now let’s look at how the idea of responsive design can work across different layouts. The size of the screen affects not only the look but also the function of the website; including how people scroll, the behaviour of objects, and what elements are loaded or stalled.

Elements that are fine on a desktop browsers could crash your iPhone, and of course a 4inch website will look ridiculous on your desktop screen. Here are a bunch of useful GIFS which how different aspects of your page can be modified to suit various layouts. The visual display should make it easy for you to get a grasp of this idea in action.

01_Responsive-vs-Adaptive

(Image from: http://blog.froont.com/9-basic-principles-of-responsive-web-design)

Smashing Magazine has an indepth article which, although now a few years old, still contains relevant responsive design principles that every webmaster should be applying. There are scripts to use, as well as photographic examples to help you see how these results come off in the real world.

Google also has their own responsive design guide which will help you get a firm grasp of the fundamentals.

How to Optimize Images

So your website now adjusts to the size of the screen your browsers are using. The next thing to focus on is optimizing your images. Unoptimized images can really mess up the responsiveness on your website; a large image built for the desktop view won’t sit comfortably on a small mobile screen.

A little while ago we published a blog post on three useful strategies to implement images in responsive design. You can read the full post here.

The three key things to keep in mind when using images in responsive design are:

  1. User vector graphics instead of pixels. Rather than fixed sized images, vector graphics can adapt to fit the screen size of the user. They are scalable, so should maintain their quality across different sizes.
  2. Use icon fonts instead of images. Instead of using images which slow down load time and can be complex to integrate, as much as possible rely on icon fonts as an image substitute. It’s amazing how many options there are once you start looking into it. Here’s a useful resource for creating icon fonts
  3. Use CSS3 gradients for backgrounds. This helps create backgrounds which can be  scaled across different layouts without demanding additional time consuming HTTP requests.

For developers, ResponsiveImages.org has a bunch of useful resources for creating response images for your clients.

Examples of Great Responsive Design

If you’re looking for inspiration, the AWWWards – awards for design, creativity and innovation on the Internet have collected some great case studies of responsive websites.

Screen Shot 2015-06-10 at 1.40.10 pm

Responsive Design Tools to Get Started

Webflow is a useful tool to start building your responsive websites from scratch, including a bunch of great looking templates.

Screen Shot 2015-06-03 at 11.10.09 am

Froont is another solution for building a responsive site, including elegant themes and a user friendly interface with both mobile and desktop users in mind.

Screen Shot 2015-06-03 at 11.10.39 am

Foundation is an advanced front end tool for creating lightning fast responsive websites.

Screen Shot 2015-06-10 at 12.26.54 pm

Intention is tool to help you restructure your coding to increase responsiveness and simplify the demands on your browsers.

Screen Shot 2015-06-10 at 12.29.33 pm

Menu-Aim helps you create responsive menus so you don’t clog up the viewpoints of small mobile browsers.

Screen Shot 2015-06-10 at 12.31.23 pm

Or if you want to do it yourself, here’s a detailed tutorial on how to create a responsive website.

Bonus: 80 More Responsive Design Tools

If you’re developing a responsive design obsession, here are some compilations of useful resources.

Responsive design is essential to the success of your online business. With these tools and guidelines you’ll be able to take steps to improve the design of your website and build new, dynamic pages. This means that you’ll capture and maintain the attention of the full range of internet users, not just the rapidly dwindling percentage of us who use large computer screens.


Nathan Thomas

Written by Nathan Thomas

Nathan started his first online business whilst still in high school. When he's not helping companies reach more people on the internet, he enjoys exploring the world and writing about travel on his blog, Intrepid Times


  • Matt Saunders

    haven’t read the article but your “Today more people access the internet on mobile apps than they do on computers” tweet needs backing up with some evidence otherwise you’re just propagating nonsense. it might be true in some contexts but completely false in others.

  • http://www.interfaceplanet.com/ Interface Planet

    I was somehow familiar with the term “Responsive Web Design” but, came to know some more by the help of your blog. Well, Thanks for sharing such a informative content with us. This is really useful.

  • Yogopa

    Thanks for sharing so nice information
    with us threw this blog really its very useful and informative one. For more
    information about Website
    Development
    kindly visit our website

  • Andrew Paul

    Hey!

    Thanks for the information.
    If you want to know about some tools of responsive web design then follow the link below:
    http://www.bestdesigntuts.com/5-helpful-tools-for-responsive-web-design

Ready to empower your website's potential?