You may have heard about responsive design and wondered what it means and why it’s important to your website, or whether it’s just jargon designed to make you think your current website is inadequate. In this post we’ll cover the definition of responsive design, why it’s important and how to add it to your existing website.
What is responsive design?
Responsive design is a method of making websites more usable for different screen sizes, particularly users of smartphones or tablets. It makes use of some advancements in internet browsers that returned the size of the screen (CSS3 media queries), allowing web designers to build websites that adapted to whatever screen it was being viewed on. Most modern browsers now support these changes including Firefox, Chrome, Safari and IE.
Responsive web design (also shortened to RWD – because everyone loves another TLA!) has grown to include a lot of different design and web coding disciplines that focus on making websites more adaptable to the growing number of different devices and screen sizes that are now accessing the world wide web.
Why is responsive web design important?
Responsive web design is not just a passing fad, mostly because it’s done for a good cause: to improve the website visitor’s experience.
No more do mobile users have to pinch and zoom, side scroll endlessly left and right, get sent to a completely different website (m.example.com) or, gasp, get sent back 10 years to use a WAP site. These poor user experiences often meant you would only access a website on your mobile device if you were absolutely desperate and it couldn’t wait until you got home to your 17″ desktop PC!
But with tablet sales overtaking laptops, more and more people are using a smaller screen as their default device so it’s up to web designers to start building their websites to accommodate this trend, which appears to be one of the big trends in 2013.
The second reason why responsive design makes sense is because it means less work for website developers. Instead of creating separate websites for different devices, which creates a lot of maintenance overhead, they just build one flexible website. It’s also Google’s recommended approach for building mobile-friendly websites.
It also saves building a brand new website every time a new device gets released or screen size becomes standard.
How can you make your website more responsive?
There’s two ways to tackle the problem of making your website more responsive.
The first is the easiest – ask us to update your website’s design and we can take care of it. We’re already rolling out a new range of responsive websites that automatically adapt to different screen sizes.
One example is a website we built for Brian Carr, a Christchurch-based plasterer. His website automatically adapts to smaller screen sizes, either resizing elements, making sections vertical instead of horizontal or creating a drop-down menu (also known as the Hamburger menu due to the symbol commonly used to identify it). You can test it for yourself by either viewing it on your smartphone or tablet, or simply reducing the window size of your browser. As we discuss below this is because the website is responsive both to the device width as well as the viewport (or window size) of the browser. The two images below compare the website viewed normally with how it displays on a smaller screen.
As an aside we built Brian’s website for under $300 so it’s proof that responsive design doesn’t need to be an expensive exercise.
The second option is to make the changes yourself if you’re able to edit the style files of your website. Responsive design is one of those things that you can do as much or as little as you like. So, if you’re stuck for time then you can get away with just the minimum by catering for some standard sizes and resizing your layout appropriately.
Copy and paste the code below into your CSS style file and add your own changes for different widths in each section (such as hiding elements, reducing widths or increasing font size). You’ll notice both min-device-width and min-width are shown below – what’s the difference? It can get confusing but it’s best to use min-width (or max-width) since it’s more flexible (responding to smaller browser windows) whereas device width is really only used if you are specifically targeting mobile users. This article explains it in more detail.
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ———– */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ———– */
@media only screen
and (max-width : 320px) {
/* Styles */
}
Responsive design tips
- To deal with the iPhone or iPad automatically scaling your website to fit on the screen, add this meta tag to your header:
< meta name="viewport" content="width=device-width; initial-scale=1.0" > - Test your website as an actual user – fill in a form, try to purchase something – jot down anything that could cause problems or frustrate the customer.
- Look into using Twitter Bootstrap – it has styles designed for different screen sizes right out of the box using smart layout grids (known as scaffolding).
There is a lot to learn about responsive design, suffice to say we’re just getting started but it’s welcome evolution to smarter websites that are friendlier for the growing number of people accessing them on smaller screens.
If you need any help with responsive design, or would like a mobile-friendly website that has responsive design built in, then you can get one, like Brian did, from the affordable business website guys – us!