What happens to a webpage
when the screen size changes?

Provided by the Good News Web Designers Association

Return to Directory of Tutorials or GNWDA home page

   
Q: I'm using Front Page for our web site. My computer has been set up at a screen resolution of 480 X 640, so my website has been that size as well. What will happen now if I change my screen resolution to 800 X 600? Will Front Page automatically change it to 800 X 600 or will I have to change some settings to get it to 800 X 600? ~ Steve

People who have small monitors, especially older models, have no choice but to view everything at the 480 X 640 size. These numbers are the amount of pixels of color that a monitor screen will show, height by width. It's always best to make every webpage look good at 800 X 600 (the most common screen size) while at the same time be able to automatically down-size for people with smaller screens and up-size for those with larger screens. Use our browser resizer to test it out. Those who surf the Internet through WebTV have an even narrower viewing area (about 550). Front Page sometimes does and sometimes doesn't produce webpages that adjust for the different sizes of screen resolutions.

If you are NOT using tables, everything automatically adjusts. Pictures that are wider than the screen will, of course, not shrink. But text will wrap to fit to fit the screen, and the rest of the layout of the page will squeeze or expand according to screen size.

If you ARE using tables, it depends on whether you are assigning a pixel width to the table or any of its cells, as opposed to a percentage width (e.g., width=90%). Go into the tables menu, select table properties.

  • If you do not assign any width, the table (i.e., everything in it) automatically adjusts to fit, if necessary.
  • If you assign a width in pixels it does not adjust.
  • If you assign a width in percent, it adjusts.

It's a good idea to avoid assigning table widths in pixels unless you know it will fit nicely inside the smallest screen. Otherwise, the text or pictures in the table will run off the right side of the window, and the viewer will have to use the left-right scroll bar to see it all. Ideally, the viewer should see everything at one glance (except up and down scrolling), like we do when reading books.

If you want blank space around the table (which is pleasing to the eye and prevents a crowded appearance), specify width as 90% (or some other amount). Then, no matter what size screen a person uses, the contents of the table will always fill 90% of the view.

In most website designing software, you can change the size of a table or cells by dragging the boundaries with your mouse. In Front Page, you can double-click on the right boundary of a cell and the computer will automatically shrink the cell size down to the minimum width needed for whatever the cell contains - neat, huh?. Just make sure the width is narrower than the smaller screen resolution (640).

 

Download this tutorial as a printable Word Document.

EXTRA TIPS

Be sure to test the page layout by viewing it in your browser and minimizing the window to a narrower view (use our test page). If everything adjusts and nothing runs off the right side of the screen, your page is fine!

If you need to assign a firm pixel width to one of the table cells (such as when you are preventing blank space around a picture), use the cell properties dialog box to specify the cell width in pixels, but also go into the table properties dialog box to change the table width back to percent. This will keep the table in submissive obedience to your web designing browser-stretching commands!

Be careful not to fill a wide table with text. It's harder to read text that stretches across the entire screen. Put the text in a table no wider than 500 pixels. We're used to reading in columns; they make quick scanning possible.

 

Return to Directory of Tutorials or GNWDA home page