Making your website fit different screen resolutions

 

A Common Question

One of the most common questions I'm asked on the Pegaweb forums is "How can I make my site look the same on different screen resolutions?"

The simple answer is—you can't. There are no snippets of code or special settings that allow your images to stay the same size, relative to the screen (without making your images look really bad.) You just have to design your website to look good on any screen resolution, even though it will look different.

 

Design for 800x600 Users

It's still the case that the majority of people use 800x600 resolution, but it's now only just more than the number who use 1024x768 resolution. The number of people using 640x480 resolution has dropped so low now that they're not worth worrying about. Those people will be very used to using their horizontal scroll bar, so they won't be too irked by your site being too wide for their screen.

Make your images no more than 779 pixels wide. This allows space for the scroll bar and borders on an 800x600 screen.

 

Fixed-Width Pages

The easiest and most common option is to design your page at a set width. You set the width of your main table to 779 pixels, and put everything inside that (remember to set all the page margins to 0.) If the user is viewing the page at 1024x768 resolution or higher, there will be white space at the right of the screen, but that's okay. Everything will just look a bit smaller to them.

 

Slivers

A "sliver" as I call it, is a thin piece of your image that you can repeat endlessly to fill up space, so that your web page fills up the whole width of the screen.

To make a sliver, just take a one-pixel vertical slice of your image, and save it separately. If your image is a photo, or other complex image, you may have to take a wider slice, and edit it to make the ends match up. (With some images this won't work at all.)

Make a table, of width 100%. Put your main image in the table, and set your sliver as the background image for the table. It will then repeat itself as many times as is needed to fill up the table—and the table will be as wide as the screen.

 

Discuss this article on the Pegaweb Forums