The buzzword in web design at the moment is Responsive Web Design, but what is it?
Basically, it is designing and building a website that can detect the type of device it is being viewed on and providing the best experience for the user in terms of navigating and readability.
Why the trend?
The way we browse the web is changing – and probably more quickly than we think! Mobile browsing is expected to outpace desktop-based access within five years (Reference site).
I can understand this from personal experience – I have had a smartphone for about a month now and I very rarely turn on the computer to check my emails, news, or weather.
Why would I, when I can quickly browse through my phone from the comfort of the couch?
How does it work?
There are a number of factors which go into building a responsive website, but just briefly…
- The site must be designed as a flexible grid, so this means instead of your site being a fixed pixel width, it is built using percentages.
- The site’s font size is defined using ems (percentage units), which means that the text size remains relative to the body size of your site.
- The site uses flexible images – this could mean having multiple versions of an image that can be called on depending on the device or using CSS overflow property for cropping dynamically. Your designer and developer come up with what will best suit the type of content you wish to display.
- Custom CSS styles for mobile.
Do you need a Responsive Web Design for your site?
Throughout my reading on this topic, I believe some sites can benefit from having one version which can work effectively with all types of devices, but there is also benefit from having a full website and a separate version catering to your mobile audience.
It’s a matter of spending some time determining what sort of information your audience would be accessing from a mobile version of your site vs. the full website.
Where will they be when they are using their mobile phone, and what information is most important to them at that time?
Keeping in mind the cost of mobile data is also relevant in New Zealand, so visitors are unlikely to want to scroll through lots of data heavy, slower loading content like images on their phones.
A good example of this is a restaurant or café website, where desktop users generally like to view the menu, images of the dishes and possibly reviews, but mobile users enter the site to find the address or phone to make a reservation, or your opening hours/days.
What does Google think?
According to this recent article, apparently Google loves many aspects of responsive design, particularly because it means that a website has just one set of pages, rather than a separate mobile domain. That makes it easier for people to link to and share just one URL, no matter if they are on mobile or desktop devices.
Pros and Cons
We believe there are benefits from both perspectives, and to some extent it will depend on your budget, whether you already have a full version of your site you are happy with, or if you are about to build a new site and would like to also optimise it for mobile.
If you want to explore the options further, feel free to give our team a call – we are happy to give our perspective on what would work best for you.
Good concise summary of RWD! Thanks Melissa!
Two thoughts:
1. Many are predicting that in the next few years there will be more web traffic from mobile devices than from desktop computers. One of my clients already has 20% traffic coming from mobile.
2. Responsive Web Design works best with a “Mobile First” approach – building sites with mobile users in mind first and foremost, and then adding stuff as the screen size gets bigger. As @lukew points out, “Mobile First” is often good for desktop surfers too, as it cuts to chase of the important stuff and culls out the crap that’s not that important.
Luke – Vision Mobile
Thank you Melissa for a summary of RWD
your post contains so much of the useful information…