Just in case you've been island-hopping the moons of Jupiter for the past few decades and missed it, MVC stands for 'Model-View-Controller'. It's a fairly well established paradigm for separating the persistence and interaction of data, allowing for multiple, potentially different, views of the same data, or models. The controller simply mitigates the interaction between the two.
MVC frameworks are widely used in every language, on every platform on the web. Yet, when it comes to solving traditional Responsive and Adaptive design problems, we seem to be ignoring one of the basic tenants of MVC - the ability to provide different views for different reasons. Instead, blessed out by the W3C as OneWeb, we implement a single response with every view imaginable, thereby indiscriminately leaving it to be sorted by whichever device it lands with. The result is potentially unsustainable levels of bloat, especially in the mobile world.
One particularly egregious site I discovered, without naming names, was a 31MB responsive site for a leading beer company. As Guy Podjarny discovered in a study of 341 responsive sites, 86 per cent downloaded content for the full website, regardless of how this looked on a small screen. And of course, they were painfully slow as a result.
"We've made the internet in our image... Obese." Jason Grigsby
And bloat is a genuine concern that should keep you in an anxious state of nail-biting hypertension. By the three-second mark, 57 per cent of users have left your site completely, and by five seconds you've lost 70 per cent of them. At that rate, by seven seconds you might as well skip mobile altogether and spend time perfecting your Piña Colada recipes instead.
The W3C recommending One Web is akin to the USDA recommending obesity, it's the worst possible solution imaginable. Images are a particularly obvious example of the need for devices to dictate the specific dimensions needed. Why do I have to download a 15MB desktop background image if it's going to be displayed on a tiny five-inch screen? So much so that the purveyors of One Web have recognized the straitjacket-buckling insanity of using the One Web for images and broken ranks with a Working Draft for Responsive Images. This suggests that on one hand the W3C would like the same services and data available regardless of the device being presented, but on the other, as soon as this becomes intolerable, go ahead and forget about it.
So I wouldn't have dragged you this far without offering up some sort of solution, regardless of its status with the aforementioned recommendations body. The User-Agent header contains a freeform string that should uniquely identify the type of device making the request. Since this is not standardised in anyway, it requires an existing database of User-Agent strings.
Fortunately, there are a few options to make these determinations easy; from commercial offerings like Infuze, that integrate the specifics of the requesting device right into the server, to a variety of open source options depending on your needs such as User Agent for Ruby, to HTTP Agent Parser for Python, etc.
Using these tools helps to provide the relevant view, whether it's completely separate HTML in some cases or just separate CSS in others, not all possible views at once. Leverage the V in your favorite MVC framework to send back the specific view for the type of device that requested it.
Words: John Bresnik
John Bresnik is senior developer at The Barbarian Group.
Liked this? Read these!
Got a great tip for responsive design? Share it in the comments!
