Behind the Veil: Hidden Messages and Responsive Design

written by dan


Seeing as this post is one of my first, a quick introduction is in order. I’m Daniel Lamb, Manoverboard’s in-house designer/developer. Over the last six months, my web design energies have been focused on two areas: using WordPress as a platform for user-maintainable websites, and making those websites responsive.

I have to admit it’s the responsive bit that excites me the most. About nine months ago, I decided to take my first crack at responsive web design and I have been loving it ever since. Naturally I used my personal portfolio as a safe sandbox to play in. What once was a static, fixed-width website is now a highly responsive, WordPress powered one

If you’re two paragraphs in, and you’re asking yourself, “what is a responsive website,” I would encourage you to read Andrew’s previous blog post, Responsive Web Design Toward. Andrew recounts a talk he gave for New Media Manitoba back in May of last year which will serve as a good primer.

Responsive Always Wins

When you start developing websites that need to function on tiny devices, you quickly realize that you can’t fit a whole lot on a screen the size of your hand. Things like sidebars and widgets, and other “junk” go right out the window. Big banner images take up way too much space. More than one column of readable text becomes a luxury you likely can no longer afford. You begin to feel like a cartoon mechanic under the hood of a car, throwing parts of the engine over your shoulder while saying, “We don’t need this, or this, or this…” and so on.

It’s important to remove only what you have to, and reconfigure or rearrange the things you can save. The early wave of m-dot websites, while good intentioned, made one critical mistake. They believed that people on mobile sites would want to do a different set of things on their mobile device than they would on a desktop. In reality, people using smartphones and tablets expect to be able to do everything they can do on a desktop, and if you hide content or functionality from them, they will feel confused, cheated or even angry.

Once you’ve made all your decisions about what you need and what you can live without, the first thing you’ll have to deal with is the main navigation. The approach that I prefer lately is something I first saw while visiting on an iPod touch. If you don’t have a smartphone, that’s okay—me neither. To see the same thing, you can just scale your browser window until it’s really really narrow. As soon as your window drops below 600 pixels wide, the normal navigation at the top disappears, and is replaced by an unfamiliar icon.

Three horizontal lines.

Simple and elegant, it is both representational of a list, and vague enough to represent a menu of any configuration. After a bit more research it turned out that it’s not just Starbucks taking this approach, it’s everywhere (in a variety of flavors, which is appropriate given that the icon is sometimes called a ‘hamburger’), and is fast becoming an accepted standard. Smashing Magazine is calling it the Semantic, Responsive Nav Icon.

In a matter of months, this will likely become widely accepted and understood to represent a menu, just as its iconic predecessors like the floppy disc and trash can are forever linked with the hidden meanings they carry in a digital context.

But, this technology is still new—and still very much in a state of flux. There might still be a few straglers who look at on their phone and say, “Hey, there’s no menu. How am I supposed to get around on this site?”, a little hand-holding couldn’t hurt right?

On a website we just finished, CJNA Architects, I put an info box on the homepage explaining that the icon at the top will open a menu. On larger displays, the message is hidden because it is no longer relevant—which is interesting because it’s usually the small display where we hide things.

This little helper message is a small touch, but a considered one. This message is probably only going to help a small handful of people but if one extra line of code is the difference between some visitors “getting it” or “not getting it”, then why not right?

If you have moment, visit CJNA Architects.

As a member organization of 1% for the Planet, Manoverboard gives the equivalent of one percent of all revenues to select nonprofit partners that are benefiting the environment.

Manoverboard is a Certified B Corporation, which means that we meet ongoing, rigorous standards of social and environmental performance, accountability, and transparency.