Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

How to design for different resolutions?

Dreamweaver and Frontpage

4:03 am on Jun 24, 2006 (gmt 0)

New User

10+ Year Member

joined:Feb 1, 2006
votes: 0

I just finished designing my first page in frontpage and it looks great in my native resolution of 1600 by 1200 but spills off the screen horizontally for any other. What's the best way to make the site compatible with all common resolutions? I also have Dreamweaver I can use and basic HTML skills.

FWIW, I did try to make a table and set the width to 100% but that didn't seem to work while using frontpage. I had three layers where there were two navigation bars on the left and right of the screen and the body in the middle. The right navigation bar went outside the table when I viewed the page in firefox but didn't do that in frontpage. I'm thinking about giving up on frontpage and redesigning the entire site in dreamweaver but I don't know if that will help. I think I am going to run into the same problem.

Please help this n00b out! What's the best way to tackle this problem?

4:14 am on June 24, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member jimbeetle is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 26, 2002
votes: 9

1600?! Wow, you must have good eyes. I need a magnifying glass to read anything on my screen at that rez.

First things first. If you aren't going to do a fluid, scalable design, you might want to design for 1024. There are still some folks using lower rez and some sharp-eyed folks using higher, but that appears to be the sweet spot right now.

As for Frontpage, it will do exactly what you tell it to, no more, no less. The first thing you have to do is tell it what you want.

Go into Tools > Page Options and choose what settings you want for your site. Pay particular attention to the Authoring tab and set what technologies and which versions of CSS, if any, you want it to support. Roam around the other tabs and try to figure out what they do, play around with them, and set them as you think you should.

Backing up a bit, before telling Frontpage what you want it to do, you have to decide what you want. First determine a Doctype [w3.org] and make you Page Options settings in FP based on that.

Now that you've got it all set up, keep in mind that, aside from its site management features, Frontpage is basically just a nifty code editor at heart, it really doesn't do anything. So it sounds like you're making some fundamental errors either in your html or css declarations. The best places for help on this are WebmasterWorld's CSS [webmasterworld.com] and this HTML and Browsers [webmasterworld.com] forums. Try to keep your questions concise and, if you post code examples, first try to boil them down to the exact parts that are causing the problems.

2:48 am on July 2, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:July 8, 2004
votes: 0

What's the best way to make the site compatible with all common resolutions?

Use the lowest-common denominator resolution (800x600) as your maximium width, even if fluid. In other words, the maximum width of your fixed content (i.e. any graphics, flash, etc) should be no larger than 750 px. wide. You can make it LOOK like a 1600 px. wide site by using %-width divs rather than fixed width, that will expand out to the edges of the brower, but if you condense the site down to 800, it will still all compress nicely into a nice no-horiz. scroll site.

If you have a 1600px banner, you'll be getting a horizontal scroll for the great majority of your users.

I hope that makes sense.


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members