EchoEcho.Com
COMPLETE TUTORIALS

THIS PAGE HOME  TUTORIALS  DESIGN  LAYOUT  FIXED 800x600 DESIGN         

EchoEcho.Com
TOOLS & RESOURCES
 HOME 
 
 TUTORIALS 
 
 RESOURCES 
 
 TOOLS 
 
 DOCUMENTATION 
 
 NEWS 
 
 SITEMAP 

 
  SEARCH THIS SITE

Tell a friend about this site
SUGGEST THIS SITE      

ON THIS PAGE


 VERTICAL DIVISION

 HORIZONTAL DIVISION

 TOP MENU/BANNER

 SIDE MENU

 SAMPLE PAGE

 CONCLUSIONS



 

Fixed 800x600 Design

By the term "Fixed Design" we mean a page that does not change any alignment/spacing no matter which window-size it's viewed with.

A page layouted with a "Fixed 800x600 design" is a fixed designed page that does not have a horizontal scrollbar when viewed in a maximized window on a 800x600 pixel screen.

The focus of this page is to show how an 800x600 pixels fixed page can be designed to work even at the lower resolution of 640x480 pixels.

The advantages of this design are
  • that it allows complete pixel-control of the pagedesign.
  • that the design is optimized for the majority of surfers on the web (arriving with an 800x600 pixels screen-resolution).

The disadvantage is
  • that it requires that a minority of visitors viewing the page on a 640x480 pixel screen use a horizontal scrollbar to switch between the left and right side of the page.


 


IN THIS SECTION



ENVIRONMENT

 SCREEN-RESOLUTION

 SCREEN COLORS

 GRAPHIC STANDARDS

 FONTS

 LOADING TIME

 OPERATING SYSTEMS


DESIGN TECHNIQUES

 TABLE CONTROL

 FRAMES CONTROL

 BROWSER CONTROL

 PRECISION DESIGN

 DYNAMIC DESIGN


LAYOUT

 VARIABLE DESIGN

 FIXED 640x480

 FIXED 800x600


STYLES

 NO-SCROLL DESIGN

 FLAT DESIGN

 DEPTH DESIGN

 TABLE DESIGN

 COOL DESIGN

 FUTURISTIC DESIGN



 
Vertical division
As it was discussed in the article about screen-resolution the visual height of the page varies both with screen resolution and customized browser-toolbars.

This brought us to the conclusion that:
The navigation structure of the page should be kept at the upper 300 pixels of the page.
(Actually the upper 294 pixels to be very precise).

This is still true even though an 800x600 pixel screen-resolution actually has a visual page-height of 414 pixels (the rest of the screen being used by the browser-toolboxes etc.).

As you will see later on this page, limiting the navigation structure to fit the visual height of 640x480 pixel screens but not to fit the width, does not necessarily ruin the page - even if it's viewed at a 640x480 resolution.

In the samples below this area is shown in a dark gray color.

640x480
800x600
1024x768


This is our first logical division of the page: Into the upper 300 pixels and the rest!

Top of page



Horizontal division

Many webdesigners suggest that the entire page should be viewable even on 640x480 screens.

This is certainly true as gar as the main navigation structure of the page is concerned.

However the main navigation structure and the main content of the page can be kept within the visual dimensions of a 640x480 pixel screen without limiting the entire page to a width of 640 pixels.

In a 640x480 pixel fixed design the remaining part of the screen (when viewed at higher resolutions) is left empty. However this area can easily be used for secondary navigation options, secondary banners, secondary links etc. without ruining the page when viewed at the lowest resolution of 640x480 pixels.

The first thing to realize is this: If a page needs a scrollbar there aren't 800 pixels available!
The scrollbar itself will take up 20 pixels, leaving only 780 pixels for the page
.

Look at these examples:

640x480
800x600
1024x768


Unlike a fixed design at 620 pixels the empty space that appears on 1024x768 screens are not ruining the design completely.

The effect can still be limited even more by centering the contnt.

Look at this example:

640x480
800x600
1024x768


Centering the content definitely makes the unused space less obvious. (However, it is not as dramatic as in the case of a fixed 640x480 design).

The conclusion is:
if you decide to design for 800 pixels width you might center the content, but it is not strongly required.

Top of page



Top menu/banner
Now let's proceed to look at further divisions of the page.

It is obvious, that since the visual height of the page is so limited, one should be very careful when using it.

If you want to add a top-menu or banner it should be as limited in height as possible.

This fact should not lead to the conclusion that a top-menu is a bad idea.

Since the top of the page is very easy to jump to, it is an obvious place for a menu. Just keep in mind, that it reduces the space you have for the rest of the visual page.

In general a top-menu should be max. 60 pixels high.
(60 pixels allows graphic objects of the same size as full and half banners as well as button 2's. See the Graphics Standards article for more)

Top of page



Side menu
Despite a top-menu, another obvious place for a navigation menu is at the upper side of the page.

You might consider adding either a single or two menus at the sides of the top of the page.

If you choose to have only one menu, the content of the page will require horizontal scrolling if it's read on a 640x480 screen.

This is almost impossible to do - and certainly difficult enough, to force these visitors to go to other sites.

You might argue here, that you really don't care if this minority of your visitors can't read the content without scrolling. Fair enough. But there is another side-effect you should consider:

Readability.

It is hard to read text that spans over an entire page. When moving the eyes from the end of one line to the beginning of the next line, the reader easily looses track of the line.

Usually this problem is solved by writing text in columns.

A good point is here, that if you're going to write the text in columns anyway, why not keep it in a single column that can span all the way down the page?

As we shall see now, reserving the center 470 pixels for the main content, allows us to create a very sophisticated design with a primary menu to the left and a secondary menu to the right.

Unlike the case with fixed design for 640x480 screens, when designing for 800x600 one specific horizontal division is way more obvious than any other ones.

Consider this example showing a layout with two 150 pixel menus and a 470 pixel main content column:

800x600 Screen

Hey Joe!
   1024x768 Screen

Hey Joe!


The layout works fine on both resolutions. The amount of unused space when viewed on a 1024x768-screen is not as drastic as in the case with a fixed 640x480 design.

However, the most interesting aspect of this design is how it appears when it's viewed at the low 640x480 resolution.

First off, no matter where the horizontal scrollbar is placed, the entire main content column is visible.

640x480 Left Side

Hey Joe!
   640x480 Right Side

Hey Joe!


The reason can easily be calculated.

Let's say the scrollbar is dragged all the way to the left.
In this case you will see the left 620 pixels of our page.
The summarized width of our menu (150 pixels) and the main content column (470 pixels) is exactly 620!
This means that when you move the scrollbar either all the way to the left or all the way to the right, the screen cuts the page exactly where the main content column starts/ends.

The important aspect of this is that the design actually maintain complete readability even on 640x480 screens while at the same time, allows you to have a secondary menu at the right side of your page.

Furthermore the main content column is wide enough to allow even full banners.

Finally the menus are big enough to allow all other standard graphics except the full (468x60) and half size (234x60) bannerstandards.

If you place all primary navigation-links in the left menu and use the right menu for secondary links and graphics, the design will work perfect on all screens.

Top of page



Sample page
We have created a sample-page for you.

Since the sample-page has the rather complex tables required to keep the layout fixed, you are encouraged to save the samplefile for your own design.

All you need to do is delete our dull sample-text and you have a general skeleton for a 800x600 pixels fixed design.

Note: The page uses a 1x1 pixel transparent GIF-image named "pixel.gif".

Click HERE to see the samplepage

Make sure to change your screen-settings to different resolutions in order to see how the page acts.

Top of page



Conclusions
The main conclusions to draw from this page are:
  • Webpages can be designed with pixel precision.
     
  • The main tools to do this are advanced tables and a 1x1 pixel transparent GIF-image.
     
  • It is possible to layout a page for 800x600 pixels that is not ruined when viewed at 640x480 pixel screens.
     
  • If you're not the king of table-design you can use our samplepage as a general skeleton.
     
  • No matter how fixed your design is, if you place an object that exceeds the available space it will stretch the design. You can't place a 300x300 pixel image in a fixed menu-cell designed for a maximum width of 150 pixels.
     
  • Before choosing to layout your page with an 800x600 pixel fixed design you should consider a 640x480 pixel fixed design as well as a variable designed page.

  •  
  • If you want to add to the techniques mentioned here for a pixel-precise and flexible design you should consider adding cascading style sheets to your skill-toolbox.
 





EchoEcho.Com
COMPLETE TUTORIALS
 HOME 
 
 TUTORIALS 
 
 RESOURCES 
 
 TOOLS 
 
 DOCUMENTATION 
 
 NEWS 
 
 SITEMAP 

EchoEcho.Com
TOOLS & RESOURCES


(c) Copyright 1998-1999 NetKontoret - All Rights Reserved         Last modified on: 08/21/1999 11:23:57




Tell Your Friends About EchoEcho.Com!
Your name and e-mail-address will appear
as "sender" in the mail sent to your friends.

Your Own Name:
Your Own E-mail:

Friends E-mail 1:
Friends E-mail 2:
Friends E-mail 3:

Your Comment:


PRIVACY STATEMENT:
This Tool Sends Out One E-mail To Each Friend
The Information Will Not Be Used For Any Other Purpose.

Click Here!