Making Your Website Look Good for Any Audience

I was a computer programmer before I was a web designer, so I value speed, functionality and relevancy over beauty in a website. Of course, looks are important to those who can see. There are visitors who use text-to-speech software to hear the contents, becuase they are visually impaired. Other visitors may be using a text browser for a PC, handheld or phone. But for those who are viewing your website on a computer desktop or laptop, we would like them to see the website as it was designed.

Web designers usually use the most commonly used Internet browser and screen resolution to create a website that looks good. You may have seen a message on a website that says This website is best viewed with Internet Explorer at 800x600 screen resolution. If your visitor is using another screen resolution, he or she must right-click on the desktop if using a PC (different for Mac), select Properties, then select Settings, and slide the slider to adjust the screen resolution. If your visitor is using another Internet Browser such as Netscape, he/she may try his/her luck or simply leave the website.

Since your visitors may be using a PC or a Mac, relative font size instead of absolute font size is recommended. Mac fonts appear smaller than PC fonts. And the visually impaired can adjust the Text Size in the browser to a larger size if necessary. Program a list of common fonts that work for different computers. Using font face="Arial, Helvetica, Sans-Serif, Geneva" instead of just one will allow the browser to choose another font if one is not available on the computer.

Macs also require compatible plugins for multimedia. Inclusion of Flash, audio, video or other media should include a link to a website where downloads are available. Do not assume your entire audience has the same plugins or computer as you do. You want to keep every visitor you can get. Don't include multimedia unless it truly enhances the website.

At least half of the Internet users still use 800x600 screen resolution which works on most monitors and is easier to read than higher resolutions. But if your audience is using a higher screen resolution, your website should fill the screen and not appear in the upper left corner or centered at the top of the screen, surrounded by empty space. This is why I always stress liquid design or fluid design, named such because it fills the screen. Remember that you can choose to make alternate web pages for handhelds and Web TV viewers which have a much smaller screen size and cannot handle multimedia the way regular computers do.

To design websites that will fill the web page for any screen size, you should design one web page to use as a template for your website. Place the content in tables, not frames, since frames are a search engine disaster. Your table width should be specified in relative size (percentages) instead of fixed size (pixels). Create a table for the header (the business or website name or logo), the navigation menu (if horizontal), the main contents of the web page, and the footer (copyright info). Once the web page looks the way you want it, copy and save the web page as the name for the next web page and just change the main contents. Complete the website, before testing fluid design since contents are different on each page.

Once you have created your website using fluid design, view it using different Internet browsers. If it looks good in Netscape, it will look as good, if not better in Internet Explorer. These are the two major browsers to tackle, then you may decide to test other browsers such as Mozilla and Opera. You may also check Web TV or MSN TV, which is popular for those who don't use a computer, but want to surf the Internet or send email. Note that TV colors are limited, unlike computer monitors.

Now change your screen resolution to see if there is horizontal scrolling at 800x600. If you used fluid design, the only way you would have horizontal scrolling is if there are contents on the web page such as images which are of fixed size that force the screen width beyond 750 pixels. Remember that a screen width of 800 pixels includes the vertical scrollbar of the browser window, so 750 pixels is your goal To fix this problem, resize your images by removing the height attribute and adjusting the width attribute in the img tag. Once you find the correct size, resize the image using image editing software for smaller file size and quicker load time. Then include the correct height attribute in the img tag.

So remember to use fluid design when creating or redesigning your website. It is much better than having a website that only looks good for visitors using a specific computer set at a specific screen resolution using a specific web browser. Do not limit your target audience. If your website looks good for any audience, your website will be more successful.

Yvette Kuhns, Power Pages Web Design, May 30, 2003

Printer Friendy Version. If this article helped you, please donate any amount via PayPal. Thank you!

If you have any questions or helpful hints to share, please email me.

Please view our list of past articles for more useful information.