PC Services

"From Payroll to Body Scanners"

Some PHP Tips and 'Tricks'

Thinking beyond each page and DESIGNING your web site

Image Buttons

The biggest problems with images for buttons are

• User cannot see which pages they have been to or which ones they have not yet seen and where they currently are
• Images that change with mouse point rollover, means more images to load!
• Designers rarely use an image for this is the currently selected page
• Images do not SCALE with different screen resolutions and browsers

Consider this the designer creates a button to go on your web page as part of a menu that is 100 pixels wide x 50 pixels high, using text in the button that is 30 pixels wide x 30 pixels high. When viewed on different screen resolutions the button will appear as smaller and smaller and more unreadable as the screen resolution increases. As shown by the table below -

Notice how quickly the button changes from eighth of the screen width to twentieth of screen width reducing the text size and readability.

The last two sizes are common formats (as of 2010) for WIDESCREEN format laptops and computer monitors, thus making your wbe pages more difficult to read on newer computers. making the button larger to start with has the opposite effect of making the image more difficult for smaller screen sizes as the button and text appear larger, and will no doubt mean having to scroll the web page to get to different parts of the image.

Using text generated by the browser using its default sizes or 'points' is much more likely to size correctly and be viewable.

The same is true of any image displayed on the page, appear to change size on different screen resolutions.

Any fancy software to resize images and buttons, suffers from the same software problems as popup menus, and is not guaranteed to work on all browsers.