HTML page layout

One of the biggest challenges in creating web pages is deciding what they will look like. You may see a webpage on the web and think to yourself 'wow, that's incredible, I wish I could make a webpage that looks like that' Well, you can! But before your masterpiece comes to fruition, you need an understanding of some fundamental ideas of how webpages are layed out.

This lesson focuses on:

Tables vs. CSS
Two column layout
Three column layout
Fluid vs. fixed
Template vs. brand new design
Layout scheme
Browser compatibility
Screen resolution

Tables vs. CSS

The first issue when thinking about laying out web pages is what mechanism will be used for this purpose?

In the past, the popular practice was to use tables. However, tables have been superceded by CSS. If you are not familiar with how to use tables, read our lesson on HTML tables.

Using tables for layout

Tables are used to display data in a tabular fashion (like a spreadsheet). Tables organize things in rows and columns, so it was thought that tables can be used to organize an entire webpage and can therefore be used to build out its layout. In the past, everyone was building page layouts using tables, but then people started thinking that maybe this is a bad idea.

It was understood that HTML is used to set the logical organization of a webpage and what elements will appear on it, but not the styles of these elements. Because of this, it was realized that tables are used to display data in a tabular fashion, and should not be used to layout a webpage. To style the elements of a webpage, another language called CSS is used. And yes, the styling of a webpage also includes its layout.

Technically, you can use tables to build page layouts but doing so will result in slower loading, less search engine friendly, less flexible pages that will be confusing to edit (think of all the nested tables), and will sometimes require workarounds to make things look right (those familiar with page layout using tables are probably thinking of spacer gifs right now!). Besides this, using tables for layouts will also make you look less professional as the modern standard for layouts is CSS, and not tables.

Using CSS for layout

So then what is this CSS that can be used for layouts? What is so great about it?

CSS is a styling language that is used to set the appearance of elements on a webpage (things such as text color, page background color, borders around elements) as well as a page's layout (how many columns, width of elements, margin and padding of elements).

Using CSS for layout, you can edit a separate file that contains the commands for the layout rules of a webpage. By doing so, you can set a set of layout rules for all of the webpages on a website (whether you have just 2 pages or 500), and then you can change those layout rules in just one place and the display of all your pages will change.

What is great about using CSS for layouts is its flexibility. With CSS, you can do things like change the location of page elements in source code and still have a page display the same way. This might sound trivial, but it is important if you want search engines to read certain content first (search engines don't read webpages like humans do, they read the source code). You can also do things like instantly change the position of certain elements relative to each other by using a CSS mechanism called "floating".

Learn about CSS in our CSS section.

The choice is yours

Tables or CSS, the choice is yours, but the advantages are clearly on the side of CSS.

Two column layout

Almost everywhere you go on the web, you will see page layouts in columns. For example, you will see a layout where the navigation is on the left side and next to it is the content. This is a two column layout. You should use a two column layout if there are not many items in your navigation menu. If you can fit it all on one side without confusing the user and without making things look cramped, then a two column layout is the way to go.

Navigation on the left side or the right side?

If you decide to go with a two column layout, the next question you should ask yourself is if you want to have the navigation on the left side or the right side. Generally, the best way to go is to have the navigation on the left side. This is how the majority of websites have it, so this is what most people are used to.

Three column layout

If there are so many items in your navigation or if you feel that three columns provide for better organization, go for three columns.

Navigation on the left side or the right side?

If you decide to go with a three column layout, the next question you should ask yourself is what goes where? You should always keep your content in the center. It should be navigation - content - navigation. The question is which navigation on which side. You should put the more important navigational items on the side that the majority of your visitors will look at first and the less important navigational items on the other side.

Template vs. brand new design

Once you have some idea of what you will use to layout your pages (tables or CSS) and how they will be layed out, the next thing to think about is if you're going to use a ready made template or a brand new design.

Templates

There are many free ready to use designs on the web that you can download and use on your own site. If you do not want to build out a brand new design and you find a template that fits your page layout vision, then you can just use that.

There are many free template sites on the web. The websites www.oswd.org and www.styleshout.com have some good free templates.

Brand new design

Why go with a ready made template when you can have your own design? Why use someone elses work when you can build something from your own imagination and be proud of your efforts once it materializes! As said in the beginning of this lesson, one of the biggest challenges in creating webpages is deciding what they will look like. Use your page layout vision as a starting point, and try to think creatively. Good ideas will come if you try, they really will.

If you want to get inspired for some creative ideas, check out www.csszengarden.com, www.screenalicious.com, www.stylevault.com, or www.cssmania.com

Layout scheme

One important thing to keep in mind is that not any website can have any layout scheme. The layout scheme should be according to type of site/industry. For example, if you are building a website for a small business that processes credit card orders, you don't want it to be flashy like www.mtv.com. However, if you are building a website for a small business whose industry is entertainment, then it should indeed be flashy.

Browser compatibility

Once you have your design and you're ready to build some pages, you should test it in different browsers. Not all browsers automatically render the same way, and sometimes things don't look right requiring some editing. The browsers you should test on include Internet Explorer 6, Internet Explorer 7, Firefox 2, Firefox 3, and Safari. These are currently the most popular web browsers. As times change, so can the lineup. You should also keep up to date as to how the browser market is changing to know which browser is the most important one to test for.

Why don't browsers render the same way?

Ideally, all browsers would render exactly the same way and web developers would never have to test anything knowing their pages look the same everywhere. This is however, far from reality. There are several reasons for this including the fact that different browsers use different layout engines. For example, Firefox uses the Gecko layout engine, while Internet Explorer uses the Trident layout engine. Another reason for this is that no browser fully follows the standards set forth by the W3C.

Browser testing can be a tedious and time consuming task, but it is something that always must be done.

Screen resolution

Another issue besides browser compatibility that might come up is screen resolution. Web pages may look different on different screen resolutions. Currently, the most popular screen resolution is 1024 x 768. Before that it was 800 x 600, but few people use that resolution size anymore. You should test a design for several screen resolution sizes including 800 x 600, 1024 x 768 (focus heavily on this one as it is the currently most popular screen resolution), 1152 x 864, 1280 x 768, and 1280 x 1024.

If you're like most people, you probably don't have 6 or so computers to perform all this testing. There is a solution for this shortage and that solution is the website browsershots.org. This website lets you see (in the form of screenshots) how a design will look like on several different operating systems, web browsers, and screen resolutions. The only downside to it is the sometimes long waiting time if you ask for a big workload.

Fluid vs. fixed

Do you want the content area of your design to be of a fixed size or do you want it to stretch across the whole page? Both have their advantages and disadvantages.

Fluid layout

A fluid layout is a layout that stretches across 100% of the screen width no matter the screen size. With a fluid layout, your content will always fill up 100% of the users screen.

Advantages

More content seen at a time
Since the content fills up 100% of the screen, more of it will be seen at a time. This results in less scrolling for the user.
Maximum use of space
The fluid layout uses the maximum space available. This means that you will not have empty areas on the screen that contain just a background and no content like you would with a fixed layout.

Disadvantages

Things may not look right on a screen thats to big
If a user is using a really big screen, then things may look to stretched out.
No 100% control over layout
If the layout gets stretched for bigger screens, sometimes elements may not appear as you intend them to, relative to other elements. For example, an image may not be aligned correctly with a paragraph.

Fixed layout

A fixed layout is a layout where the content area stays the same size no matter the screen size. With a fixed layout, your content will always fill up a fixed area of the users screen no matter their screen size.

NOTE: Landofcode.com uses a fixed layout

Advantages

Alignment is up to you
With a fixed size layout you can align the content area of a design to the left, center, or right of the page. The remaining space will be a background that you can choose to be a certain color or contain a background image.
Elements appear as intended
With a fixed layout, elements will always appear as intended unlike with a fluid layout where elements may get misplaced due to stretching of the content area.

Disadvantages

Content area may look dwarfed on a really big resolution
When viewed on a really big resolution, a fixed layout may look dwarfed. That is, too small. This may give the impression that the webpage is floating on the screen.
More scrolling
Since the design will be of a fixed size, there is only so much room for the content of the page. This will result in more scrolling for the user (especially users with big screen sizes).