Bringing a Shotgun to a Web Fight

I know you think that you kill zombies with shotguns, or maybe even a nice baseball bat to the brainpan, but that’s all Hollywood smoke and mirrors. What really kills zombies 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 shapeshifting 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.