Web Page Layout Tips
Types of Web Page Layouts
When figuring out a site's layout, it is best to sketch out on paper what you want the site to look like. I sketch out every site on paper before beginning the actual code because it is far easier to arrange everything on the page when you have a clear layout. None of the site's I develop end up looking exactly like the sketch, but the layout tends to always be the same.
There are usually four main parts to the layout:
- Header
- Sidebars
- Main Text
- Footer
The nice thing about creating web sites is that your imagination is really your limitation in your design and layout. You can have all of these items in your page layout or maybe you just want a header and main text. The single most important aspect in your layout is your navigation system. Be sure to have a crystal clear navigation system in place. If you don't, your visitors will get lost, confused, and leave. Place your main navigation above the fold. The fold is the area of a web page that separates the visible part of a page from the non-visible part of the page that has to be scrolled to in a browser window. Visitors like to get where they are going quickly, so if you can provide them with the most relevant links at the top of your page you will do two things.
1. Enable your visitors to quickly navigate to the page they want to get to even if the page is loading slowly.
2. Enable your visitors to quickly jump to pages without having to scroll through the page.
Which Layout is Best
There is no real "best" layout for a web page. The most common for a larger site is a header with the main navigation, a sidebar with sub-navigation on either the right or left side, and the main text. On smaller sites, the most common is a header and a sidebar with the main navigation in the header or in the sidebar. You can be as creative as you want with these seemingly simple layouts. Once you start adding your graphics, text, and menus, you can quickly differentiate your layout from everyone else's.
Do's and Don'ts of Layouts
DOS:
Do make your layout expandable. You will be adding and deleting pages from your site, so you will want to make your layout easy to edit when you do add or delete a page.
Do keep it simple. This goes along with adding and deleting again. Your layout should have "main components" and those can then be broken down further if need be. Here is an example of this sites layout:
So there are five main parts here. The right sidebar and footer are purely optional depending on the page and what I want on it. So I have five main components for each page on this site. I have each section encapsulated so as to keep the components separate if I want to change something. I further break down each component into sub-components. Here is how the header breaks down:
With this header, I can change things around quite easily without having to reorganize the entire layout. I could swap the main navigation and logo and only need to change the graphics in the header. It looks a bit trivial, but as your page becomes more complicated, the advantages of compartmentalizing become apparent.
A lot of times you see graphics, text, etc. that seem to reach across many components. This can still be accomplished because you designate specific areas of the affected components for the graphics, text, etc. Another way to achieve this is by using divisions and CSS.
DONT'S:
Don't forget about white space. Make sure you have ample space between paragraphs, links, images, et cetera so the page doesn't look cluttered. Clutter makes a page hard to read and generally raises people's blood pressure... not a good thing.
Don't use frames. Well, if there is no other way around it or if you you need frames for aesthetics or navigation then go ahead. Search engines have a difficult time indexing your pages if they use frames and some browsers can't read them. If you don't care, then by all means frame away. I have never come across a situation that required using frames myself. There are always alternatives.
Spider Friendly Layouts
If you want to rank high in search engines, you want your layout to be friendly to search engine software programs known as crawlers or spiders. In short, the less garbage, the better. You want your main text as close to the opening <body> tag as you can get it. This becomes a bit of a challenge if you have a lot of pages and need a lot of links to those pages. In this case, if you create a layout with the bulk of your links in a sidebar, you can still get your main text quite close to the opening <body> tag. If you have to put the links before the main text, that's OK. You'll notice I have done exactly that on this site. You mainly just want to have the least amount of code possible between that opening <body> tag and your main text. If you just keep this in mind when building your pages you will be fine. You don't end up plummeting in rankings because you have an extra image or hyperlink before your main text.
Spiders love to gobble up web pages that don't have a lot of extra "weight" in them. The best way to put this is that the higher your ratio of actual text to code is, the better positioning you will achieve in search results. If you were looking for web development tips, you wouldn't want to go to a site that had a small paragraph about web development and 100 ad banners flashing at you right? It is by this logic that search engines give higher relevance to pages with a higher text to code ratio. I use the word code a bit loosely here. When I refer to code here, I am referring to anything on a web page besides readable text.