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.

Here to the left, we see a close-up view of the sidebar–at the top, loading first, is a quick page summary, for people who don’t know anything about your site and are assessing your site to see if it’s something they want to browse. (Your “About the Author” section is for a similar purpose, especially on a blog.) Next, we have social media and navigation; your social media links can be formatted to be much more compact with icons. You could also flip the positions of the Navigation and Social Media sections if you want the navigation closer to the top of the page. You can definitely play with this sidebar style, but this is a pretty bare-bones representation of how to make your sidebar into your “header.” (Additionally, you could put in a few small images to make your sidebar even more visually attractive, such as a picture of yourself beside the “About the Author” blurb.)

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!

Fluid Width with a Fixed Sidebar Demo @ StuGreenham.com
Fixed-Width Sidebar in Responsive Design: Discussion @ CSS-Tricks.com
Make a Layout with Fluid and Fixed-Size Columns @ RadiatingStar.com