Blog Post

Responsive Design book on a bookshelf

Excerpt – Responsive Design: An Undead Introduction to Mobile Web Development

Bringing a Toothpick to a Web Fight

I know you think that you kill zombies with a nice baseball bat to the brainpan, but that’s all Hollywood smoke and mirrors. What really stops the zombie hordes is websites.

Websites communicate information, entertainment, inspiration, art, beauty, and all that is good in humanity’s soul—everything zombies hate.

Your mission: build websites that break zombies out of their need to feed on others and push them to contribute to society, move out of their moms’ basements, and fight for truth, beauty, and love. High-minded ideals for a web developer? You betcha. Let’s go.

Mobilizing the Web

More and more web traffic happens on mobile and handheld devices. If you want your site to fight zombies wherever the horde might gather, you’re going to need a website that has a solution for any device, whether it’s a desktop, a smartphone, or Uncle Fred’s basement refrigerator.

Responsive design lets your site be that shape-shifting solution.

Ethan Marcotte, in his seminal 2010 article, laid out responsive design as an approach that uses a set of rules and code to morph websites between contexts (the aspects of a device/browser window such as size, screen density and more). Yet these sites still feel natural. You can automatically change the look, feel, and functions of a site based on the size, configuration, context, and the amount of zombie contagion in the air around a device that’s loading that website (okay, maybe not the contagion amount—yet—but you get what I mean).

Let’s take a moment to see this in action. Load your favorite Internet browser, and check out bostonglobe.com. If you’re on a desktop, grab the side of the browser window and move it left and right to change the width. (If you’re on a mobile device, switch back and forth between landscape and portrait orientations for a similar effect.) See how the layout changes? Columns are added or dropped, images change size, and the width of text columns narrows or widens. (On a mobile device, the contrast between the two may not be as sharp, depending on your device’s size and aspect ratio, but, if nothing else, you should see the content spreading the width of the screen whichever orientation you’re in.) Welcome to the fine art of browser squishing. You’ll need this skill when you start building responsive sites and testing how they work.

The Mobile-Solutions Cage Match

Responsive design versus other mobile solutions. Who will win?

Corner #1: Stick Your Head in the Sand and Wait for the Zombies to Get You

Your site has been online since 1994. It worked then, and it works now. You don’t want to hear anything else about this.

Well, by all means, stick your head in the sand and wait out the apocalypse. If you haven’t seen a drop in traffic already, it’s possible you never will, but you’ll also never see a spike. This is by far the cheapest option, but unless you’re Craigslist—and even they have a mobile-optimized version now—this is probably also the riskiest. In 2016, smartphone and tablet traffic accounted for 51.3 percent of worldwide Internet traffic. If more than half of your customers don’t get a website that looks great on whatever device they’re using, do you think they’ll stick around?

Corner #2: Native App Warships

Native apps, the fancy title for the applications you have installed on your phone, provide full access to everything your device can do (GPS, camera, accelerometer, etc), and, like most nautical warships they can cause some heavy zombie damage. Warships can’t hit a target too far from the shore, though. They can’t hit the zombies where they are, only if the zombies come within range. Your user has to actually know about and want and download your native app.

How many times have you been fighting the good zombie-resistance fight, doing some research on your phone or tablet, and, instead of getting the site you want, you get prompted to download an app? You just want to access the razza-frackin’ information. I do not want to download some stupid app of stupidity that is stupid personified in stupid app form! You’re probably far less colorful in your reactions, but probably not so different.

The other downside is that the web is gaining more and more device capabilities, and native apps are losing their edge. While a web app (an application run in your web browser and found on a website instead of an app store) will never be as fast as a native app (though the speed gap is closing), the frictionless loading of a web app in the browser makes the finding, downloading, and initial experience of the native app feel cumbersome. Unless you have specific and/or special functionality that only a native app can provide or penetration that’s the envy of your competitors, a native app by itself—aircraft carrier though it may be—probably isn’t the right choice.


To see the other two corners, pick up Responsive Design: An Undead Introduction to Mobile Web Development