In the first of our series “Explained”. We look at Responsive design in websites. Now responsive design isn’t new. But it’s become essential with broad-data analysis suggesting over 1/3rd of all web traffic now regularly visits from a mobile device. And more recently more people now visit e-commerce sites on a mobile than from a desktop computer. With shoppers comparing deals and checking out costs on the go.
Animated GIFs put together by the guys Froont
Adaptive design uses one website design but displays the content into different fixed templates depending on the device it’s being viewed on. On it’s most basic level the design may have a multi column desktop version, a simpler tablet version, and a basic phone one. With typically fewer columns on each device.
More complexity has recently been added by trying to design for not just the size of a screen, but pixel density too.With Apple’s new Retina Displays on Macbook Pro’s and iPads, you’d need to increase the font size as the smaller pixel size would result in text too small to be comfortably read.
Adaptive design is an easy way to get website to look their best on devices you specify – but that is also it’s main downfall – you simply can’t design for every screen resolution, every device, and ever browser window size someone might have open (some people open their browser in a smaller size for example.
This is where responsive design is king…
The simplest and best type of responsive design is called fluid design. The page is divided up into grids of ratio or percentage, so a two-column grid would be split 50:50 or 70:30 no matter what the screen size would be. Then the text, images or video would resize automatically based on that rule.
But therein lies another hurdle for us – fluid design rules by themselves don’t work. A site based on a three-column grid will likely be unreadable and unusable on a mobile phone due to it’s narrow width (Argh!!).
Truly responsive design is both fluid and adaptive. This means you’d have a series of adaptive templates based on different devices.For example you’d design a fluid template for:
- a smartphone held upright and landscape
- a typical tablet device in portrait and landscape
- and then a desktop shape.
Each of these templates is fluid to allow for differing resolutions, screen sizes and pixel density between an iPhone 4 and a 5 and a Samsung, a Nokia etc etc.
Whilst this has added to the time, cost and complexity of digital jobs, it ensures that your website uses only 1 Content Management system, but is able to adapt to the myriad of devices which are not only on the market, but ones which are yet to be launched. Future Proof!… well until they invent something new entirely. Or you rebrand… which we’d not usually advise in such a revolutionary way. But that’s another article for another week.
If you’d like to speak to us about a fluid, responsive or adaptive design for your website, or a mobile version of your current website. Call Graham on 07790 829 050