Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How do I get my site to look good in multiple resolutions?

Web Site Layout Techniques

How do I get my site to look good in multiple resolutions?

by  MikeBarone  Posted    (Edited  )
Welcome to the largest lesson you will need to learn about web development!

There is a lot to be said for your targeted audience but for the most part people develop sites for the entire public audience.

With this in mind you need to keep a few things in mind.

1) 85% of the users will use Internet Explorer (IE) and the remaining will use Netscape (N).

http://www.thecounter.com/stats/2001/January/browser.html

2) 84% use 800x600 or higher screen resolution. 54% use 800x600. I recommend you target to 800x600 and make sure it does not look lame in 1024x768. Centering the entire site in the browser helps a lot.

http://www.thecounter.com/stats/2001/January/res.html

Now with all that in mind you need to make sure you do not make uneducated decisions. Some people make the mistake of saying they will only develop for IE and Ignore N altogether. This is a huge mistake. You will find very quickly that the limited number of users that still use N are just as important as the rest. Remember that each person that looks at your site and likes it might tell someone else. A N user that might have told 1000 people about your site won't if your site does not accommodate them.

Screen resolution is important as well. I recommend you develop the site to fit in 800x600 minimum and as long as you fill the screen it won't look that bad in other resolutions.

You can implement tables that span 100% and background images/colors to make the site span any resolution but this requires some advanced practices that you can't do with Photoshop 5.5 (PS) and Image Ready (IR) by default.

What I do is develop the site in PS/IR and export the HTML and Images to a folder. Then open the folder in FrontPage 2000 (FP) and edit it.

Using FP (or fav editor) you can manipulate the tables to make them expandable beyond 800 wide. If you set the main graphics in upper right of table and use upper left/top justification you can open the table to 100% and it will fill larger screen resolution.

I make this sound easy but it isn't, it requires a lot of practice and pre-planning in order to make the design work.

For example, if the graphics set you are using to develop the site does not allow for expandability in the table then all bets off.

Look at one of my client sites for an example of expanding tables and background color/images:
http://www.portdetroit.com/history/index.html

many of my other client sites implement this too:
http://4ward.net/client_list.htm

Hope this helps!
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top