Pitfalls and Zombie Traps

20.06.2017 |

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


As the zombie horde marches toward you, it’s important not to be caught without your baseball bat—or while doing any of the following.


Deleting Useful Things

In the rush to get everything to fit on a smaller screen, it can be tempting to outright delete things that don’t fit or cause visual blight. But tread carefully. If the elements you remove are largely visual or have another access path or are replaced elsewhere, you can probably move ahead without fear of zombie retribution.

Users are pretty savvy, though, and will access a site from multiple devices. There is nothing more annoying to a user than being able to get at information they want on one device but not when they’re on the go or using a device with a smaller screen. Delete content (and useful things) at your peril.


Using Giant Images

Large, fullscreen images are taking down zombies left, right, and center on desktops all over the world, but if you just scale down those same giant images to display on a mobile device, it’s like having your shotgun jam as a zombie reaches for your neck. Scaling down an image only changes its physical size on screen, not its file size. Mobile devices often have slower and/or shakier connections, making your 6Mb dancing emoji face a backdoor for zombie domination, as the site takes till after the second apocalypse to load.


Hovering on a Touchscreen

Since time immemorial on the internet (aka the late ’90s), sites have used fancy hover effects to reveal information, perform animations, and add other frills and whirly-doos. But most mobile devices are touchscreens, and a hover state is largely impossible for them. Hover states can still be useful, you just have to make sure they are not required for a mobile user to understand and/or use the site (or that you have an alternative for those users).


Using Stepped Design

Less common now than in the past, these are sites that have general break points where content doesn’t change between one break point step and another—i.e. when it crosses a media query boundary, it makes changes, but the site is static until it crosses the next boundary. While there’s nothing inherently wrong with this approach (just the people who use it), it usually doesn’t include flexible layouts and tends to be rigid and ill-fitting for devices other than those close to the break points chosen. (I call these people out because this is how I made several of my first forays into responsive design.)


Making Every Site Respond the Same

Different sites call for different approaches and different ways of handling things. Let the site you’re working on respond in the way it needs to. This will increase user engagement and decrease users running for the hills.

Now that you’ve found the zombies waiting around the corner and you’ve got your site responding to a zombie’s device size, you can go home and sit out the rest of the apocalypse, right? Hardly.


Recommended book

Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability by Steve Krug


Share with friends