Jesse, we need to code: Parallels between Meth and Mobiles.

09 June, 2015 by Ed Greig | Mobile WebUser ExperienceWeb

Viewers have loved AMC's Breaking Bad, for the writing, the acting, the visuals, the cookery tips, and now the climactic 8 episodes are coming to an end. What many people don't know is that Vince Gilligan's tale of a suburban chemistry teacher's descent into violence and criminality is actually a commentary on the moral maze of modern web design. Let us explain, but before we do be warned that if you haven't seen the series and are planning to (you should be), there may be spoilers ahead.
Jesse, we need to code: Parallels between Meth and Mobiles.

Text by Ed Greig, Artwork by Graham Wood

Leading a double life

In the beginning there were just words and people weren't too fussed about design . In the middle ages of 640 x 480, 800 x 600 or 1024 x 768 for the high rollers, web design paradigms were still pretty basic. You had one design story that you told every user, because there only needed to be one layout with one design. In the past Walt had one story to tell as well, he was a high school chemistry teacher with a wife and son, living in Albuquerque, NM . Simple.

However the world got complicated. Big screens got bigger and then small screens, previously only good for little more than text, started displaying imagery and styling.Phones had new browsers with different capabilities to join the growing number available on desktop, each with a lengthening list of versions .

Walt's life got more complicated too and in order to deal with it he had start a new life alongside his old one, making up the new story of Heisenberg for the world of crystal meth production while still telling a version of the old story to his family and friends.

On the web some companies choose to tell completely different stories to different sets of users, like Walt, they've started leading double lives. They have one version of their site for desktop users and another, an 'm.' or 'mobile.' subdomain perhaps, for their customers using small screens.

Scraping by

Some companies employ third party mobile site optimizers to help them maintain these two stories, the Saul Goodmans of the online worldThey will take content from your site and fit it into a mobile template (That you can design and customize) and then show this on the mobile subdomain that users are redirected to when these a mobile device is detected. This is a form of screen scraping known as transcoding and like Saul it promises an easy solution to your mobile "problem."

Leading a double life is hard though, as Walt has found to his cost. It seems simple enough but you have to keep track of a thousand little details... How many mobile phones you have, where your money is coming from, what colour scheme you're using for your primary navigation and why you were found wandering naked in a convenience store. It's easy to slip up (While under the influence of a general anesthetic in Walt's case or too much caffeine in the case of web designers) and if you don't keep up with the changes on both sides they can easily get out of sync and the multi-channel users like Skyler, who sit between the two, can end up having a jarring experience .

DEA Agent Sniffing

Uncle Hank is different from Walt. He's trying to find and tell a single version of the truth but he's also facing complex circumstances. In a show that firmly believes in the strong correlation and/or causation between your head of hair and your penchant for violence,Uncle Hank came up against two of the baldest characters so far and barely got out alive (Luckily for him he also doesn't have much hair and can therefore handle himself). Uncle Hank adapts to the person and situation that he faces. With Marie he's monosyllabic, morose and only interested in rocks minerals but with Walt and his colleagues he's all smiles and laughs (Though he's still pretty keen on his rocks minerals).

Websites used User Agent Sniffing to try and detect what browser or device is viewing the site and then serve up different styles to each one, whether that be IE or Chrome, iOS or Android (Do you still get notices saying YOU"RE USING AN OLD BROWSER? That's User Agent Sniffing. Oh and if you are using an old browser please, please upgradeif you can).

Uncle Hank has been fooled though, Heisenberg has beensitting right under his nose all along (Who could that W.W. be?). This kind of confusion can happen with User Agents too, as it's very easy for a browser to say it's something it's not. But the real problem occurs when the site faces something new that's not on its list, as it will not necessarily know what to do based on User Agent alone. A similar thing happened to Hank when he was thrust into the tortoise eat tortoise world of the Texas DEA and his New Mexico banter just didn't cut it before he was nearly blown to smithereens.

Detecting features

There are more elegant ways of querying the device, asking not "Who are you?" but "What can you do?" which allows you to adapt more efficiently. Modernizr, the most popular feature detection library, allows you to adapt effortlessly to any company, much likeGustavo Fring gliding effortlessly between police fundraisers, cartel meetings and the counters of the tastiest chicken chain in the tri-state area. Sadly for Gus, post season 4 he has far fewer features to detect (Literally).

Good Intentions

Sometimes we try and stay on the straight and narrow but end up doing something morally questionable. Like Skyler: hiring heavies to rough up an ex, laundering money and even to smoking around an infant . She started down this road with good intentions, as do front-end developers who use IE conditionals in order to add an IE specific stylesheetor an IE hack to make something stay where it should. She wanted to protect her son and daughter, developers want to give users a consistent cross-browser experience. But once again these double life shenanigans are harder than they look and this separate version of the truth you've tucked away is bound to come back to haunt you.

The moral of the story: Responsive design

The easiest thing to do, and the moral of the Breaking Bad web design fable, is to have a single version of the truth and stick to it . Walt Jr presents one face to the world and tells it like it is . He has made design changes now and then, with the car and with the whole Flynn thing, but he kept this consistent across all users. In the world of web design this means you can have a single set of stylesheets and adapt the design to different screen sizes using media queries. Using one of the CSS extensions or pre-processors as they are sometimes known, SASS or LESS, you can make you design story even simpler by putting variables in one place that only requires a single change (As well as tonnes of other benefits). Your design will be more consistent, your user experience for mobile and multi-channel customers will be better , your site will be easier to maintain and more future-proof. Telling a single version of the truth may seem like hard work at first but with the character of Walt Jr, Vince Gilligan is clearly saying that when it comes to creating a responsive website he prefers to keep it simple, preferably with a single set of stylesheets controlled by CSS Media Queries. Given the violent nature of what's evidently going on his head I don't want to disagree with him.