Over a million developers have joined DZone.

Order: Content vs. Sub-Navigation

DZone's Guide to

Order: Content vs. Sub-Navigation

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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> 

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.

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}