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.
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.
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.
(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.
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:
- 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.
- 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
- 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
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.
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.
Foundation is an advanced front end tool for creating lightning fast responsive websites.
Intention is tool to help you restructure your coding to increase responsiveness and simplify the demands on your browsers.
Menu-Aim helps you create responsive menus so you don’t clog up the viewpoints of small mobile browsers.
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.
- Brad Frost has selected his top 25 responsive design tools.
- Tutorial Zine have a list of 50 more resources,
- ResponsiveDesign.is have another 15 tools for you.
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.