In the latest of our ‘introduction to’ series, we’ll be taking a look at responsive web design (RWD) and why it’s the recommended approach to design in 2014.
So what is RWD? Essentially, it’s a way of designing a website so that ‘one size fits all’. As we move further away from working and browsing on desktop computers and onto devices that can vary widely is size, it’s necessary to ensure that your site is performing at its peak across all of these.
RWD addresses this and according to Google, if you’re designing with mobile in mind (which you really should be), then RWD is the best way to go about it.
How Does RWD Work?
Responsive design uses fluid grid layouts and media queries to deliver content to various devices. It allows the layout of a site to be displayed as you would expect it to on a desktop and is more carefully designed to ensure that the site displays well proportionately.
Media queries involve CSS3 and this is pretty well supported across most modern browsers now. These work by gathering data about the target device and then applying a style sheet to ensure that display is appropriate. There are numerous frameworks available from the open source community to allow designers to properly sketch out mock-up grids and test how they will appear on different devices.
Is Everyone Using it?
No, not yet. Despite the idea that RWD is the best modern approach to design becoming firmly entrenched in developer communities, many businesses still haven’t taken it up. There could be a couple of reasons for this:
- Capital expenditure
- Client not recognising the benefits
- Concerns surrounding performance
Whilst the latter is less of a concern now than it was, in the early days of responsive design, when it was found that RWD could impact the speed of a site negatively. This was because many sites that used RWD were designed in such a way that delivered the full desktop content model to a mobile site, even if it was hidden from the end-user.
The above image shows how the different elements that make up the average RWD site in 2013 and how they contribute to page size. The larger the size, the slower a page will load, so it pays to create sites that are light.
However, with the increasing use of HTML5 and how the new canvas element, WebGL and SVGs can be used, these can easily address the size of images, as these make for the largest file sizes. With canvas for example, you can ‘draw’ an image directly in the browser using JavaScript and you can also do this for video too.
However, there are also ways to overcome this using media queries and tools designed to ensure that designers and developers have plenty of options when it comes to creating a site that looks and performs well.
Why Speed Matters
Most users will leave a site if a page hasn’t loaded within 6 seconds and this is even more the case with mobile users. People want to take as few steps as possible to get to where they need and the more fiddly or slow a site is, the more likely someone is to abandon it.
The bottom line here is that having a slow site affects profit. Sites that load slowly or require a lot of form-filling are not for modern times. According to a study carried out for US shopping giant Walmart, “for every 1 second of improvement they experienced up to a 2% increase in conversions” and “for every 100 ms of improvement, they grew incremental revenue by up to 1%”.
What this means is that for every millisecond that can be shaved from your site’s load times, you can make more conversions. Walmart weren’t the only ones to carry out this test and prove this theory, others such as Shopzilla found that speeding up load times from 6 seconds down to 1.2 seconds gave an increase in revenue of 12%.
Clearly, speed matters a lot to the profitability of your business and if you gain any revenue from your online presence, then you need to make the most of it.
Content Delivery Networks
Another tactic is to employ the use of a Content Delivery Network (CDN) to deliver content to different regions. This is the use of distributed servers that deliver pages to a user based upon their geographical location. Whilst these may not be the answer for a small local business, for those that sell globally, it’s a good solution.
This works thus:
- The user requests a page/site
- The servers that are closest to the request respond
- The CDN copies the page/site to a network of servers located elsewhere, caching the pages as it goes
- These are then delivered to the user from the closest server, which also requests any additional, un-cached information
Of course these aren’t for everyone and for most SMEs, having a site built using a ‘mobile first’ approach is the best bet. A good developer will be able to create clean code that delivers what it should and use the latest techniques to ensure that the site performs well across device.
For businesses, it’s important to understand that in order to compete in what is becoming a more competitive playing field on a daily basis, it’s vital to have a web presence that will be easy for users to get around, read and ultimately buy on.
Internet consumers are impatient, they want to do as little as possible, they want to be directed visually and with great design, navigation and calls-to-action and they want it now. They are, in short, an impatient lot and most of us, in the business of web design or not, are just the same.
By choosing RWD and an excellent designer, the investment you make into your online presence will more than definitely pay off.
Leave a Reply