A few months ago I wrote a blog post highlighting the main drawbacks of the responsive design approach to delivering a mobile-optimised website. Not wanting to be beaten by those drawbacks, we’ve been developing a solution – one that gives us all the benefits of responsive design, but none of those drawbacks.
We’re calling it Informed Responsive Design
Informed Responsive Design is a combination of two existing technologies:
- responsive design
- device detection
The benefits of responsive design are well documented. Not least of which is the ability to have a single page template that automatically adjusts its layout to match the screen of the device you’re using to view the page. We love this – and it’s a core part of our Informed Responsive Design approach. But one of its major drawbacks is that it is the device itself that makes the decision about how to adjust the page. So if a mobile version of a page doesn’t require an image to be displayed, the device hides it. Note…hides it. It still gets downloaded.
Unnecessary items being downloaded just makes the user experience slower than it needs to be. And we all know what happens if a website isn’t as fast as we want…we leave. This is Bad News.
This is where the device detection comes in handy
In the early days of mobile websites, device detection was used to determine what type of device was accessing the website and redirect (yuk!) the visitor to a website that was optimised specifically for that device. Typically, for a mobile website, this was at a different URL (eg http://m.yourwebsite.com) and was implemented using mobile-specific templates & CSS. This technique has a number of issues (including those relating to SEO) which make it a Bad Idea.
Responsive design, tailored by server-side device detection
Our Informed Responsive Design technique uses device detection to prevent unnecessary images (and other superfluous page elements) being sent to the mobile device at all. When the page request is made, the server-side device detection delivers a responsive HTML/CSS payload that is tailored to the device – containing only the elements that are needed for that specific device.
This is Good News
Why? Because we get significantly improved performance over standard responsive design. And of course, we’re not redirecting to a specific mobile URL – the user stays on the same URL whatever the device they use.
We’ve recently implemented our Informed Responsive Design technique on the Cow & Gate website.
We ran some performance tests on the site using both standard and informed responsive design. Different page templates are treated differently between desktop & mobile device on this site – some pages are stripped down more than others on mobile. So the results vary depending on how much of the page the device detection affects. But on all pages, the weight of the mobile page and the number of HTTP requests is radically reduced – and hence the speed of page response is improved.
| Page | Percentage reduction in page weight |
| Home page | 62% |
| Feeding & Nutrition | 44% |
| Your toddler (1-2 years) | 49% |
| Your baby (4-6 months) | 33% |
| Average across all pages | 31% |
As you can see, the results speak for themselves.
With mobile and tablet adoption growing at an ever-increasing pace, delivering a fantastic user experience seamlessly & efficiently across all devices is vital. We think our Informed Responsive Design technique is a winner at doing just that.
We’d love to hear your thoughts in the comments box below…
Comments