Lesson 11: Planning Your Website´s Layout  

Related Links:
Website Templates     Site Layouts    
SEO     Website Optimization    

     Some Basic Considerations     

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:

• 600 pixels and lower: <0.5 %
• 800 pixels: 20 %
• 1024 - 1125 pixels: 60 %
• 1280 pixels: 15 %
• 1440 pixels and more: 4.5 %

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).

Click on the thumbnail to see a larger screenshot of this sketch.

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.

Now watch the videos and see how I translate the above four examples into HTML step by step. Then do the same with the layout sketch you have drawn for your website and save the document as template file for your website.

We´ll be using HTML tables to devide a webpage into the different sections, a quite easy and common practice for the webpage layout, but you should be aware of the fact that the content of a table is only displayed on your visitors´ computer screens after it has been completely loaded into their browsers. So I recommend you don´t put the whole webpage into one table, especially when you have a lot of content and images on it, because it might take too long for the page to load and your visitors might leave before they see anything, thinking that there´s a problem with your website.

1: Translating Layout Example 1 into HTML.


Video button not working ? Click Here

2: Translating Layout Example 2 into HTML - this can be done with a simple change to the first template - moving the sidebar´s table data cell below the table data cell of the main content. This video also shows you how to change the layout.css file to use relative widths for the tables in order to make your website perfectly fit into all computer screens.


Video button not working ? Click Here

3: Translating Layout Example 3 into HTML. The only difference to the first example is the sample logo and the buttons in the header, so the video shows you only how to adapt this part.


Video button not working ? Click Here

4: Translating Layout Example 4 into HTML. Based on the first example, simply add one more table data cell to the center table and also add a new style class for this table cell to the layout stylesheet.


Video button not working ? Click Here

In addition to the 300+ website templates which are included on the HTML Tutorial CD ROM, I´ve also included some very basic templates like the ones above which you can use and edit as you please. These pages load fast and the layout is also optimized for good search engine rankings. Simply add your logo and your buttons to these templates, change backgrounds and borders as you please to make these templates unique to your website.

BTW - you´ll find these simple templates here.

Alright, now that you have designed the layout of your webpages, you should find a name for your website before you can create a website logo. The next lesson gives you some tips for choosing a good name for your website and how to register this name as domain name for your website, so people will be able to find your website on the internet at an URL with your website´s name - something like http://www.yourwebsite.com