Bringing a Shotgun to a Web Fight

20.06.2017 |

Episode #1 of the course Responsive design: An undead introduction by John Rhea

 

I know you think shotguns are what kill zombies 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 anathema to zombies.

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 mom’s basement, and fight for truth, beauty, and love. High-minded ideals for a web developer? You betcha.

This course’s website weapon: Responsive Design.

More and more web traffic is happening 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 a zombie can throw at it, whether it’s a desktop, a smartphone, or Uncle Fred’s basement refrigerator.

Responsive design lets your site be a shapeshifter.

Here, it’s a baseball bat.

Here, it’s a shotgun.

And here, it’s your Aunt Myrtle screaming like a banshee and swinging a crowbar.

The unstoppable robot ninja warlord himself, Ethan Marcotte, in his seminal 2010 article, laid out responsive design as a design approach that uses a set of rules and code to morph websites between contexts. Yet, these sites still feel as natural as a lead pipe in the hand of an apocalypse-surviving accountant. You can automatically change the look, feel, and functions of a site based on the size, configuration, context, and weather around a device that’s loading that website (okay, maybe not the weather—yet—but you get what I mean).

Let’s take a moment to see this in action. Go ahead and load up 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 content changes? Columns are added or dropped, images change size, and the width of text columns narrows or widens (if you’re on mobile, 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 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.

In Responsive Design’s first iterations, web developers mostly looked at size contexts. As we’ll see throughout the course, though those are super important, they’re just the first walker in a horde of undead the size of San Antonio.

In the next nine zombie-stomping days, you’ll witness “The Mobile Solutions Cage Match,” where we discuss mobile solutions. We’ll study “Hand-to-HTML Combat and Other Prerequisites” for responsive design. You’ll “Suit Up for Your First Zombie Fight” and learn about “Flexible Layouts: A Vice around a Zombie’s Head.” After that, we’ll be “Hitting Zombies in the Break Point” and figure out how to “Squash & Stretch (the Zombie’s Face).” We’ll look at the “Human Resistance Manifesto (or Best Practices in Responsive Design)” and help you avoid “Pitfalls and Zombie Traps.”

Finally, we’ll discuss “Leaving the Horde Behind” and where to go after the course.

 

Recommended books

Responsive Web Design by Ethan Marcotte

The Zombie Survival Guide: Complete Protection from the Living Dead by Max Brooks

 

Share with friends