HTML Help: Screen Resolution

There are many fixed width advocates, but it may be better to design for everyone—within certain limits! I've seen screen resolutions as high as 2560 x 1600. It can be extremely difficult reading web pages with a lot of text at that resolution. The rows of text are just too long, making it work to pick up the next line when you reach the end of one line. Besides that, that kind of resolution can make even the best designs look goofy.

It's been estimated that a minimum of 20 percent of surfers don't have their browser maximized to full size when they surf, so the idea of a "most common" screen resolution loses even more relevancy when you introduce that consideration into the debate.

Add to that the fact that Market Share keeps stats on 100 different screen resolutions, and people also access the web using other devices like cell phones and PDAs, and you'll understand how much resolution confusion there is!

I've come to believe using a limited liquid design is the best solution. What that means is designing a website using a liquid design, but using CSS to set a minimum and maximum size.

Whether you design your website using tables or divisions to control the layout, you just need to add the following CSS properties to your table or division controls:

min-width: 640px;
max-width: 1600px;

You'll have to play with those numbers, viewing your design at different minimum and maximum widths to discover where the design starts breaking down or looking bad, then adjust the numbers accordingly.