Some Basic Layout Ideas
Let me ask you a question: "Do you want to build a user-friendly website ?"
Well, I believe: YES. So what ?
The sad truth is that many website owners not only present their websites in different annoying ways (like lots of flashing banners, blinking text, font colors similar to background colors, etc ...) but they also make it hard for users to navigate through their websites to find and read the content of interest.
Also, when the website layout uses too large tables, visitors who have smaller computer screens will be forced to scroll from left to right, which really sucks.
But hey, I can´t blame them, because the websites they´ve designed might look quite good on their system but poor on others. Unfortunately, you as a web author are confronted with many different types of computer operating systems, web browsers and computer screen sizes / resolutions.
So the purpose of this lesson is to show you how to design simple and user-friendly website layouts that fit well for nearly 99% of browsers and computer screen resolutions and make it easy for your visitors to browse through your website.
According to the access statistics of several websites I own and operate, the most commonly used browsers today are Internet Explorer (versions 5 and 6, together about 75%), Netscape 5.0 ( 20 %) and AOL 9.0 ( 4 %). This means that you can savely use the HTML elements and CSS styles you´ve learned in this guide and also find in 1stPage2000´s reference as over 99% of current web browsers support them.
Knowing the screen resolution, especially the screen width, of your visitors´ computer screens is important because you want to build webpages that fit well into the horizontal space on their screens. Today´s most commonly used screen widths are:
- 640x480 pixels 0%
- 800x600 pixels: 14 %
- 1024xx768 pixels: 54 %
- Higher Resolutions26%
Display Resolution*
The current trend is that more and more computers are using a screen size of 1024x768 pixels or more:
| 2007 | Higher | 1024x768 | 800x600 | 640x480 | Unknown |
| January | 26% | 54% | 14% | 0% | 6% |
| 2006 | |||||
| July | 19% | 58% | 17% | 0% | 6% |
| January | 17% | 57% | 20% | 0% | 6% |
| 2005 | |||||
| July | 14% | 55% | 25% | 0% | 6% |
| January | 12% | 53% | 30% | 0% | 5% |
Web developers be aware: Many users still have only 800x600 display screens.
Ergo: when you create your website template you should make sure that your pages fit well into screen widths between 800 and 1280 pixels.
Draw some sketches
No joke - grap an ordinary pencil and a piece of white paper and draw sketches of some different webpage layouts, dividing the available space into different sections such as a header, sidebar columns, main content area, navigation bars, a footer, etc... Try different layouts, then choose the one you like most and translate this into HTML.
I have drawn sketches for some different simple and user-friendly webpage layouts and I´m going to explain them to you in the videos and also show you how you can translate your sketches into HTML.
Example 1: header, footer and two columns; navigation on the left side
This one is a pretty simple layout. It has a header that contains the logo, followed by two columns, a narrow left column for navigational links / buttons and a wider right column for the main webpage content. Finally, there´s a footer, which may contain a copyright note, contact information, links to the most important pages of your site or even some advertisements (banners, text links).
Example 2: header, footer and two columns; navigation on the right side
Same as above, only with the narrow column on the right side and a simple site navigation (path to the current document) on top of the main content area. The navigation is especially useful when you have a large website with many categories and subcategories.
Example 3: header, footer and two columns; main navigation inside header
Similar to the first example, but now with navigational buttons to the most important pages of your website inside the header, right beside the website logo.
Example 4: header, footer and three columns
Similar to the above examples, but now with three columns between header and footer and if you want it to fill the whole screen width, you´d use a 100% width and set the border margin to 0. This one is my personal favorite, as the two sidebars give me more space for more links to internal pages of my own websites and also for advertisements like small square banners, skyscraper banners and text link advertisements.
* Display resolution data source: http://www.w3schools.com/browsers/browsers_display.asp