Expression® Web Design

Website to Fill Screen

Tuesday, January 06, 2009
New users are constantly running into the hurdle of wanting their website to fill the screen, yet also maintain some type of layout.  That is usually near to impossible since resolutions can vary, starting from 640X480 and go upwards of 1920X1200 to much higher.

For this example, I will the source code for tables and show you some different images of the same website in different resolutions so that you can get a good idea.  I will also rely on the HTML 4.01 Transitional DOCTYPE.  I will rely on a header, a left navigation with content on the right, and a footer.  I will also use server side includes for the navigation and content areas to help maintain consistency so you will be able to see the difference in your resolution as well as with some screen shots.  I understand that CSS should be used, but I also understand that a lot of new webmasters use and rely on tables instead of divides for laying out their website.

Liquid vs Fixed Layouts

Usually this is the first debate, is it better to have a fixed or liquid layout?  Having a fixed layout will usually mean that you are going to rely on your content to be in a certain amount of pixels.  Some will have their main divide set to 770 pixels to make sure that users that have 800X600 resolution will not see a horizontal.  However, this might mean that a lot of real estate might be lost if most of your users have a higher resolution browser. 

Setting the table at 100% however might cause some problems with your layout.  Images might not line up as you would like, or your text might be moved up to cause other problems.

I created a web page with the same text and image using 100% width and then with fixed widths (770 pixels, 985 pixels, 1220 pixels, and 1550 pixels) for various resolutions.  This should help you see the difference(s) on your monitor.  I was also able to take a screen shot of the four different resolutions.

800X600 Screen Resolution

For users that still have an 800X600 screen resolution, these screen shots will give you an example of how each page will be seen (gifs will open in a new window):

1024X768 Screen Resolution

For users that still have an 1240X768 screen resolution, these screen shots will give you an example of how each page will be seen (gifs will open in a new window):

1280X1024 Screen Resolution

For users that still have an 1280X1024 screen resolution, these screen shots will give you an example of how each page will be seen (gifs will open in a new window):

1600X1200 Screen Resolution

For users that still have an 1600X1200 screen resolution, these screen shots will give you an example of how each page will be seen (gifs will open in a new window):

Other Issues with Fixed Layouts

You might have noticed that I put maximized at the end of each hyperlink above.  This is because now it is assuming that if the user has a 1600X1200 screen resolution - the user has the browser maximized.  The user might have it set at 1280X1024.  For example, my screen resolution is 1920X1200, but my browsers are set at 1280X1024 to display websites. 

Another problem could be toolbars that are opened.  If the history or favorites is opened, you might lose around 300 pixels.

There are JavaScripts to help detect screen resolutions, but they will not help you in my case.  The JavaScript will detect a 1920X1200 screen resolution, yet I am viewing the website at 1280X1024.  And the JavaScript will not be able to help you with the toolbars that are opened.

So what is a webmaster to do?  Building a website for 800X600 screen resolutions, you probably are losing a lot of real estate on most monitors.  There are pros and cons to using a fixed or fluid layout.  I have started using a fixed layout, but build more for a 1280X1024 layout.  Yes, I know that is someone has a smaller resolution, they are going to be seeing horizontal scrollbars, but honestly, chances are they are pretty used to that since most websites cater to the higher resolutions now. 

And then of course there is the other issue of having the website flush to the left or centered in the browser.

DeliciousDigg This PostNewsvineRedditTechnorati

Posted by Corey Bryant at 4:35:03 PM in Miscellaneous (34) | Comments (0)

Comments

Name
URL
Email
Email address is not published
Access Code secureimage
Please enter the access code
Remember Me
Comments

RSS Feed









Feeds