The web page layout should make visitors want to continue looking at your web site. Each page of a site should be similar so the visitor finds it easy to navigate. It should impart information as efficiently as possible. Look at other web sites, then don't design your web site too weirdly.
The example to the left is just an example (not absolute), but it does contain some crucial elements. Never assume you know how they got here. If you've done good Search Engine Optimizing (SEO), any page could be a landing page. A page should not start in mid-sentence. A good web page layout includes a way back to the rest of the site. Your web page may be seen all by itself. Does it make sense by itself?
The header introduces the page to the reader. A title and possibly a logo image is all we really need here. I would advise you to be consistent on every page.
I use a footer for reference. If someone prints the page for a friend, they should be able to contact you based on the information on the page. Can they find you again? A proper footer ensures this. Always include an email address. A phone number helps too. A real street address is good too (instead of a PO Box). You can also include applicable copyright information.
Great content is a must. Why make a web page if it doesn't serve some purpose? The text should convey whatever you need to say. The spelling and grammar should
be correct. Computers do have spell checkers and everyone knows it. I usually have an editor (my wife) proof read my content. After you look at a document long enough, everything seems right. Another person can spot errors that you have become accustomed to.
Graphics should be appropriate. If the purpose of your web page is to display pictures of the Grand Kids, then obviously the photos are indispensable. Graphics should have some purpose, otherwise they are a distraction from your message. Animation can be cool, but it can pull attention from things you want the reader to be looking at.
Let's start with your first page (index.htm). At this point you should be ready. You know exactly what your subject is and have a pretty good idea what you are going to write about. You might want to sketch out your page first. You could even do it in your word processor (they often have HTML conversion utilities). It may seem difficult at first, but it is really easy once you've made a few.
If you are not familiar with the HTML language, take a few minutes to go through the HTML Tutorial. This will walk you through step by step. You can create a web page. As you write, you might want some information on syntax (specific details for writing), then check out the HTML Reference.
Site Overview
How do we organize our site? Let's get our strategy lined up first. This is the part that is visible to your visitor, so it needs to flow nicely. There are several ways, each quite a bit different from each other. No single way is correct, but one should fit your topic better than the others. If your topic is complex, you might even use a combination of these techniques.
by Time
- Start at the begining and work toward the end. This is how most novels are written. Sometimes separate character stories take turns throughout the reading, then, eventually come together before the story ends.
by Topic
- Explain one complete topic at a time. This is the way an encyclopedia or dictionary is written. Many technical specification books do this.
by combining simple parts into complex picture
- Explains simple parts first, then combines them into a more complex picture. Once we understand the simple parts, the complex picture is better understood. This structure is often used in a sales message.
by overview with options for detail
- Shows the big picture with options for the details. This method is well suited to explaining complex subjects on web pages. The nature of the HTML language and linking allows you to give the simple explanation up front with links to various details. This way, the document can be written clearly for nearly infinite levels of skill.
Your web page layout should suit your needs.
These are examples of flow charts. They can be a very helpful tool for planning your web page layout. This is a lot like doing an outline or tree diagram. Each page is represented and the shortest path from the home page is drawn. You want to keep the page depth less than about 4 or 5 layers (2 or 3 is better). Some search engines ignore any pages beyond that point. It gets a little tough on humans too.
If you link back and forth between pages, don't drive yourself crazy trying to map all this. This is just something to give you a little structure to work with. Keep it fairly simple. If you are confused, then you are more likely to confuse your visitor. They'll probably leave and won't return!
Easy for your visitor = increased return traffic.
Directory Structure
This is the part that is invisible to your visitor. This is the way you organize your files within your web site. If your site is small, this part isn't going to be important. If your web site is huge.... read carefully.
The directory structure for your web page files should be simple to follow. If you only have a few pages in your site, just put them all in the main directory with the index.htm file.
If you have tons of pages, you might want to use sub-directories to help organize them into categories. I especially like to use this method for areas that change frequently. If you sell one of a kind items on your web site, put these items in a directory of their own. This can make changing and deleting much easier.
I like to put all my graphic files in a directory called pics. There's really nothing magic about the name. Some folks prefer images. I just like using something short and descriptive.