Two column layout (can be reduced to one, could be thought of as three if you count the vertical toolbox on the right) that provides simple presentation with extensive customization; not just for the developer, but for the user. The toolbox showcases the power of stylesheet switching. Users can pick their own color, font type, font size, and even dictate what style of layout they view your web page in. Navigation is kept brief and easily accessible at the top of the page, allowing for a wider area in the content region. A min/max width allows you to control your layout, but remain flexible for low resolution users.
Web page navigation. It's a key component of any web site. Perhaps the most common form of navigation is the list. Typically this list comes in the form of a vertical list on the left-hand side of the web page. This is done for a few reasons, most important of which is the (theoretically) infinite amount of vertical space available to the developer. Vertical scrolling is well accepted by web users so building a vertical list makes sense. A horizontal list might require the user to scroll horizontally, not something they're probably use to.
But there's a problem with this!
Horizontal real estate is very valuable. Our vertical navigation could wind up consuming nearly one-fourth of our vertical space. On very narrow viewports it might go up to as much as one-half. This is bad. Why? Your content is spread out vertically. Now the user has to scroll just to read a single paragraph. Usability of your website has gone from "typical" to "annoying".
How can we fix this? Simple, get rid of the vertical navigation element.
How? Well think of Windows, specifically the start button. One button to access all the content on your computer. Can we do something similar for websites? Absolutely! And that's what we're doing here. The key is the horizontal menu up above. It should be limited to no more than 5 or 6 menu items. None of the items should be very long in length. The long, complext menu items should come underneath as a drop-down menu.
Things you've seen before simplified and reworked for better efficiency. A narrow right-hand toolbar is used to place various bits that users may find useful. For example the dynamic font-size buttons which will resize the text within the layout. The colored square buttons provide a quick means for users to customize the layout to their liking. But it need not rely just be colors! You might include stylesheets that change the font type or width of the columns, perhaps even hide the right column entirely! The style switcher provides you with an endless array of options.
A highlight of past layouts found here, but not in this one! There is no background color to give a visual definition of columns through the full height of the page. The reason for this: keep the layout simple. None of this "inside-container" "outside-container" nonsense. It just clutters things up and creates more places for browsers to break the layout. It should also prove easier to manage for the novice web developer. (Although the CSS is sure to give you headaches.)
You probably have already noticed that I've placed each section of this column into its own block. In fact the right column can be done up the same way. It's a bit blogish in style, but that does seem to be the "in-thing" these days. However you need not go to such lengths. One block in each column will surely suffice. It's yet another option you have in managing the design of the layout.
Like most layouts there are a few "issues" worth mentioning. The most important with this (and most other layouts of mine) is that dropdown menus like the one used in this layout are not accessible to most screen readers. I'm specifically covering this problem here because this layout is designed to heavily rely on those dropdown menus. It allows the horizontal menu up at the top to be the only navigational element on the entire page. It allows you a deep menu system without cluttering up the web page, leaving more room for content. This is a key feature and a key problem with the layout. As a result you must assume not every user will have access to the dropdown menus. This means each top-level menu should link to a separate page which contains the same links as those found in the second level (and beyond) of your menu system. Otherwise you wind up blocking some users from accessing the full content of your web site.
The themes created for this layout are extremely basic. Even if you're new to CSS I would strongly suggest you take the time to tweak the themes a bit to make them more presentable.
It should be obvious, but just to drive home the point; those items in the toolbox are all driven by javascript. If a user does not support javascript then that area becomes completely useless. It doesn't take up a lot of space, the functionality is not critical to using the web site (at least as I've designed it) so I do not consider this a big issue. However, should you add style swtich buttons which enable or hide certain page elements that contain content you must first ask yourself, "If a user can't use that button will they miss something important?"
As with all of my layouts I must include a shameless plug for Gargoyles; An animated television series produced by Disney back in the mid 1990s. It's drawn a cult following that's lasted for the last 15 years and will continue into the foreseeable future.
So strong is the fan base that Disney opened up the property after 10 years so that comic books about the series could be produced. Not just any comics either. These comics are written by co-creator Greg Weisman. The comic picks up just after the end of season two and contain all new stories including an exciting story arc in which the breadth of the Gargoyles universe is expanded as we learn of the existence of new clans!
The first six issues of Gargoyles have been published as a trade paperback for your convienence. You can pick up the TPB as well as current issues of the book from the the publisher's web site or through amazon.com.
The comic has already proven successful enough to warrant it's first spin-off, a six-issue miniseries titled Bad Guys. In this series several of the villians within the Gargoyles universe are forced to work together as a sort of penance for their past crimes. The comic is available for purchase online through the publisher's web site.
Each comic is produced on a bi-monthly schedule opposite one another. That means there's a brand new Gargoyles comic every month!
If you're a fan of the series this is a can't miss. If you're not a fan, but would like to support my work I'd humbly ask that you pick up a copy of the comic. Who knows, you may just find yourself enjoying it!
Confirmed to work with Win/IE 5.5 and later (should work in 5.0, but not confirmed), Firefox 2, Safari 3, Opera 9, iCab 3.02 and later, Mac/IE 5, Netscape 6 and later
Old browsers (IE version 4 or earlier, Netscape 4 or earlier) should only see a text-based page which, while not the prettiest option, is still entirely usable.
Like other layouts, there is a ZIP available for download here will give you everything you need to start using this layout.
If you're new to CSS I suggest opening up the stylesheets and playing around with various rules and values to get a feel for how the layout works and what bits of CSS do what. Figuring things out in this manner will help both learn CSS and become proficient in solving compatibility issues with this and future layouts you develop yourself.