Site Monitoring

Letting the User choose the Page size

Tip 8 : Resizable pages

This tip is concerned with the layout of web pages. It seems that very many web sites are now laid out in fixed format. The page designer typically uses Cascading style sheets to fix a font size for the text for a page and fixed size graphics. This is the safest option if you want the page to look acceptable on all the available browsers. However if you want to give the end user flexibility this is not necessarily the best option. If the text size is made too small for the user or the display resolution is too high they may want to choose a large text size in the browser. The main text area should be able to be adjusted in this way - to meet the end user's needs.

To give true flexibility a web page size should be able to be adjusted to fit the user's desired screen area. If they don't want the browser to take up the whole screen area that choice should be left to them. If the page content adapts to fit the area then the look is that much more professional.

A browser will normally wrap text to fit a display area, however using fixed size frames and tables prevents this happening. So a resizable page (such as this one) has to be designed so that the HTML TABLEs and FRAMEs columns do not use a fixed width but use the percentage width specifier. It is often the case that a page has a fixed width column followed by a variable width column with text. This can be specified as :

 <table style="width:100%">
  <tr>
   <td style="width:100px"><!-- Fixed width graphics and text in left page --></td>
   <td>This is the text to spread over all of the remaining width of the page... </td>
  </tr>
 </table>

TIP : You can ensure a minimum display width by adding an HTML IMG specifier for the desired minimum width of column, otherwise the rescaling could make the page look ridiculous when at a small size.