For me, this blog post deals with something I once considered web design anathema: design a page with absolutely no header. “Wait a minute!” my web design instinct cries. “Where will all my nifty page branding and my attractive page image go? What will I do instead?”
Simple: put it all into a sidebar.
Why Bother Going Headerless?
I suggest this layout style because more and more Web browsing is being done with mobile devices, and headerless designs simply load better on such devices. For instance, I’ve been using my iPhone at home for faster web browsing (we have dialup at home :C), and I’ve noticed how header images get distorted or just don’t show up in mobile browsers.
Keeping this in mind, trying a headerless design might just be the way to help our mobile users access the most important bits of our site without losing visual impact. Not to mention that the following design style effectively combines your sidebar into your header for a simpler and yet more elegant layout, leaving you with fewer sections to code and less for your browser to have to arrange. See below:
Sidebar: Your New Header
This is just a quick sample I put together of what a headerless design could look like. See how the page content lies right up at the top of the page, so that the user does not have to scroll down to start reading? The same logic applies for the sidebar–all the pertinent information loads right at the top of the page, for ultimate convenience.
How to Make a Headerless Layout
The way I put together my example uses a 2-column layout design, with the sidebar div set at a fixed width and the content div set to a percentage of the page width. (Unfortunately, mine doesn’t exactly do everything that I wanted, such as scaling correctly when the page resizes, so I’m not showing my [shameful] code here. LOL!) This style seems to be the best way to make a headerless design at the moment, however.
However, this concept has been tackled and solved by several webdesign whizzes–check out their tutorials to learn how to incorporate the headerless look for yourself!