“Our Mission”

The subtitle of this post could be “how to get people to read your statement of philosophy” or “how to introduce yourself to a new user”.

Frequently, clients want to include a page on their website that both welcomes the new user into their world and also expresses their mission and philosophy in detail. They also often want this page listed first in their main navigation, which is tough from a user-focused perspective. I usually advocate putting the things first that your users are putting first, and reading a lengthy essay on how your organization views the world is almost never their primary goal when visiting your website.

But I was recently disarmed by just such a main navigation point, and it had everything to do with the language.  The link said, “Hello”.  As a human, my immediate impulse was to say “hello” back, and the only way I knew how to do this in the context of visiting a website was to click the link.

That transaction amazed me, not least because once I got to the page I realized it was just the usual four paragraphs of abstract corporate purpose.  I had unwittingly clicked through to a mission statement!

Not to put too fine a point on it here, but the words we use in the context of applications matter (and not just for SEO).  A door that says “pull” is very different than a door that says “push”.  A link that says “hello” or “start here” or “read me” feels very different than a link that says “our mission” or “our philosophy” or “who we are”.  Had this nav point said one of the latter, I almost certainly would not have clicked it.

But really the lesson of my amazing experience is that even if you do manage to get a user at “hello”, you aren’t guaranteed a relationship with that user until you give them something worth clicking to.

“Our Mission”

Anatomy of a Web Page: Inline Tabs

The graphical conceit of tabs is a prevalent one on the web, and that fact is not without justification. Hyperlinks are like little doors suggesting treasure troves behind, tabs marked “top secret” in an FBI agent’s filofax. One can find unordered lists of main navigation links marauding as file folder tabs all over the Internet.

Which is all well and good, but what happens when tabs are not merely hyperlinks to other pages, but are rather intended to show and hide information without a page refresh?  The problem of how to semantically mark up such inline tabs has troubled me for years. Yes, years.

I started out making them their own unordered list of links, connected only by JavaScript to their corresponding content further down the page.  But this created a semantically empty set of links that were useless to users browsing without JavaScript.  To solve that conundrum, I even went so far as to generate the HTML for the tab links on the fly using JavaScript.

My next generation thinking on this problem led me to all kinds of fanciness involving definition lists (one of my favorite browser elements) and absolute positioning.  The idea was to have each tab be the DT of a corresponding DD — a semantically sound idea, but a very difficult structure to transform into graphical tabs with only CSS and a little JavaScript.

At long last, about a year ago, it occurred to me — something so fundamental to the Internet, I couldn’t believe I had overlooked it for so long.  Of course there was a deeply semantic way for me to link a list of hyperlinks at the top of a page to corresponding set of content further down: named anchors.  Duh!

All I had to do was write a quick JavaScript to hide my inactive tabs on page load and then convert links to “#divName” into a show/hide function.  So easy!  So obvious!  Now my inline tabs not only degrade nicely for users browsing without JavaScript but are also extremely friendly to search engines.

Anatomy of a Web Page: Inline Tabs