The Flow of Mark-up

Back in 1997, when I was 12, I started fiddling with HTML in notepad. Those were the days when Tripod and Geocities webpages were the status quo and Google was nothing more than a blip on the radar. Straight off I had a thing for writing valid mark-up, not having a single clue what it really stood for. Just the fact that the validator sent back a happy – in my mind euphoric – positive validation notice, gave a mini-geek a mini-rush.

Fast-forward to the day that I dropped table layouts in favor for CSS based-layouts. The same day I started caring about creating some kind of semantic mark-up with XHTML. This is exactly when a single question arose: “What is the best way to take on the creation of an HTML document?”

Right now, the power of CSS is greater than it has ever been, henceforth the structure of an HTML document needn’t have anything to do with the graphic display of the page. This means that you can put the contents on a page freely, but where do you put what content? There has to be some common denominators between all those files. There has to be a certain logical structure.

Below you will find my take on authoring content in a website. I am not implying that this is the no. 1 way to author a website and I invite you to discuss in the comments. The header and footer of the website have explicitly been left out because we are talking about the main part of the site: the content.

Theory of Content

Structure of a Newspaper

If we look at a newspaper, it does much like most websites. It puts the the most relevant story for that day at the front. It also references a lot of other stories further on in the paper, and much like a webpage, a paper can also be read in a non-linear way. As with a paper, the most relevant content on a webpage is prominent on the screen (probably above the fold, but that’s a different discussion). So in the thought process of document structure, it should be at a prominent location in the structure. It should be at the top of all of the contents.

Structure of a Blog

Traditional blogs always have blog-posts in a reverse chronological order, with the latest story on top (some blogs deviate from this by putting a ‘sticky’ post before the most recent one, due to its importance. If you would go to a specific page of an article, the content of the article itself would be at fairly the position on the page as the latest article was on the home-page. Yet, whilst on the frontpage you would see a lot of information that’s relevant for the visitor at first, on the page of an article you should get more information relevant to that article. The document structure from top to bottom would then end up in starting off with the header, adding the current article, maybe adding references relevant to that article, and after that inserting information and links towards things that are of less relevance to the article, but of a lot of relevance to the site itself.

Order of relevance

The order of content then is as follows:

  1. Information most relevant to the current page
  2. References to other pages which are of relevance to the current page
  3. References to other pages which are of relevance to the whole site

Case Example: ERGO Life

At Airglow Studios we created the website for a new insurance company called ERGO Life (mind you, the content is in Dutch). The site is currently in its initial version, where all the fundamentals have been laid down, and we are currently at a point where we will be re-iterating specific elements, based on the user-data we are gathering.

The Front Page

ERGO Life’s frontpage has been authored as to start introducing the company in – at most – four sentences. Currently taking a product-centric approach, the most local step was to add excerpts of products on the frontpage. After that – in the document structure – you will find a piece of content that navigates the user specifically to a certain page, and below that you find relevant news and media information.

In visual design, because of the importance of the actionable link menu’s and because of the parallel character that news and media has, they are on the same offset from the top of the page as the most relevant content. In document structure, they are not. The logic in this document structure is:

  1. Introducing the company (information most relevant)
  2. Introducing the products (relevant references to current content)
  3. With the initial information passed, the first call to action
  4. Parallel, peripheral content (relevant references to the site and brand as a whole)
  5. Apart from frontpage content, the user will go to a ‘fat footer’ with more actionable elements, in the form of links and a newsletter-signup.

The Content Page

The biggest part of the ERGO Life website consists of informative, text-based pages. These content-pages are ubiquitous on the web and when you come across them, you will probably find them in a page structure with sub-pages and the likes.

When a user approaches such a page, this page will then consist of some kind of secondary way of navigating to sibling-pages or sub-pages of the current one. In almost any case the sub-navigation elements should be put before the content, for this is actually more relevant to the current page than the actual content. Much the same as why the primary navigation of a website is always in the top of the document structure.

Stop blabbing and speak up

The thing I’m trying to say here is quite simple. The document structure of a page with such sub-navigation element should not be depending on the visual position of the sub-navigation element. If the sub-navigation would be placed on the right, it should still be positioned above the page content in the mark-up. Because – in essence – the structure of the document is more important than the visual styling.

So if you are authoring your HTML documents, look at the flow of the mark-up and see if it’s logical. And with logical I mean, if you would print this, would you have the most useful information on the first page(s)? Would you find relevant information on the other pages – in case your interested? Because if you take on this mindset in authoring your mark-up, you will end up skipping a lot of mark-up debates with yourself and with others. Authoring your document will become a discussion of design, in which arguments and the general story behind the design are the key to its conception.