Front-end technology best practices change almost on a monthly basis. What is in today may be bad practice tomorrow. New technologies replace old ones and hacks are replaced by shiny new standards. But some ideas, solutions and concepts seem to withstand the test of time.

content vs sub navigation

June 13, 2013

When talking about html people often forget that it's not just semantics, it's also structure. And when talking about structure, people tend to forget it's not just wrapping stuff, it's also about logical order. Even though things may appear in a different order on screen, it's the responsibility of the html guy to provide a logical order for all elements in the source code. Afterwards the css guy will take care of visual order.

When talking about logical order a handy little trick is to imagine how a screen reader would go through your page (from A -> Z mind, not with all the built-in skip features). Or just imagine what your page would look like when someone disables the css.

One of the oldest examples that separates logical order from visual order is the bond between content and sub navigation. Traditionally sub navigation is shown in a smaller left column while the content sits in the bigger right column. From a visual (css) perspective, it makes more sense to put the sub navigation first, then set the content. But from a logical perspective this makes very little sense at all. You'll be presenting the sub navigation (a means to dive deeper into the content structure) before the actual content of a page, inviting the user to navigate before even getting to the actual content (and thus making a proper judgement if he needs to drill down even further). Additionally, from a responsive point of view this would mean that the sub navigation would come before the actual page content on mobile. Not good at all.

Luckily css can turn things around. First though, let's make sure the content comes first in the html:

<div class="grid"> <div class="content">....</div> <div class="navigation">....</div> </div>

This simple setup is all we need, now for the css:

.grid {overflow:hidden; padding-left:[X]px;} .grid > .content {float:right; width:100%;} .grid > .navigation {float:left; width:[X]px; margin-left:-[X]px;}

And that does it. The content comes first in the html, the navigation sits underneath the content on mobile and sits in the left column on desktop. Easy enough.