Most new websites built in this era are "responsive". Today's blog post seeks to explore exactly what Responsive Web Design (RWD) is, and why I believe it is important and beneficial.
Firstly, the world's favourite website (Wikipedia), defines "Responsive Web Design" as:
"...a Web design approach aimed at crafting sites to provide an optimal viewing experience-easy reading and navigation with a minimum of resizing, panning, and scrolling-across a wide range of devices (from mobile phones to desktop computer monitors)."
A responsive website will adapt its layout according to the viewing devices display size/resolution. This means every device from a 50" plasma TV to a 55mm Blackberry smartphone will render the same website differently, for optimal performance and display.
There are some issues with having a separate mobile site:
Now imagine having one super site that caters for all devices. You only have to upload/enter your text & image content once and you don't have to worry about duplicate content. You also don't have to worry about keeping up with the latest miniature devices. It is all possible with responsive coding. A site designed with responsive coding will cause the layout of the website to adapt itself to the viewing environment using fluid, proportion-based grids, flexible images and CSS3 media queries (an extension of the @media rule).
The "fluid grid” concept calls for the sizing of elements on the page to be displayed in relative units such as percentages, instead of absolute units such as pixels or points.
Images become flexible as their sizes are also commanded as relative units, thus preventing them from displaying outside of their containing elements.
Media queries permit your website's page to utilise different CSS style rules based on the characteristics of the device visiting your site; most frequently, the width of the browser.
Server-side components (RESS) in conjunction with client-side components can produce quicker-loading websites for access over mobile networks and deliver richer functionality/usability. This avoids many of the pitfalls of device-side-only solutions.
It is now possible to validate and test RWD websites using mobile emulators, mobile site validators and simultaneous testing tools such as Adobe Edge Inspect. The Mozilla Firefox browser and Google Chrome console offer RWD viewport resizing tools, as well as some other third parties.
Bespoke RWD obviously comes with a price due to the sheer amount of time spent refining each individual element and creating several CSS style rules. However, more and more of our customers are requesting it. Higson Media have already converted two non-responsive websites into RWD recently and we have built many more from scratch.
In short, yes. If you look at your website visitor statistics via Google Analytics or any other online stats software, you will see that more and more people are using mobile devices such as smartphones, tablets, Kindles and iPods to access your website. In a few years, RWD will be standard. More and more devices are now being built with web browsers & internet functionality. What's the bet that Sat Nav's will be next? Or perhaps the dashboard in your car!
Click here to contact us for a quote on converting your existing website into RWD.