Designing Professional Web Pages
If your Web site doesn't project a professional and polished image to your visitors,
your credibility and that of your products and services will suffer. Image is
everything, especially online where your competitor is only one mouse click away!
Before your first HTML code is written, you will need to consider your Web site's
navigational structure, color scheme and page layout. Is your content developed? If
not, who is going to write it?
Once you have done the necessary pre-planning, then the fun part begins - coding your HTML pages.
Following are some steps to consider when laying out your Web pages:
1. I highly recommend that you try to get your home page to fit on one screen.
Ideally, people shouldn't have to scroll down to see what your site has to offer. You
may need to make your graphics smaller, but that's okay. Smaller graphics mean a
quicker download time.
2. Be sure to check your pages at all the various screen resolutions. Although only
a small percentage of users have their monitors set at 640x480, you will want to make
sure your site looks good at that resolution. I design my Web pages at 800x600, which
is the average resolution. However, more and more users have their computer monitors
set at higher resolutions, such as 1024x728. You will see that your pages will look
radically different depending on the resolution. I personally have been horrified at
how ugly my "beautiful" pages look on different computer screens.
3. Browsers are another very important consideration. Netscape and Internet Explorer
both perform the same function - display Web pages - but the way they do so is strikingly different.
Your code needs to be very clean and pretty much flawless to display correctly on
Netscape. If you miss even one table tag (e.g., you forget to close a <td> tag),
you will be mighty surprised when you get nothing but a blank page on Netscape. Internet
Explorer is much more forgiving. It "assumes" what you meant to do. Netscape, on the
other hand, is unassuming. If it doesn't understand your code, it simply will not display it.
NOTE: An excellent site to check your HTML code for browser compatibility, as well as
screen size, is Anybrowser.com
both functional and cool. However, those technologies work better on Internet Explorer
than they do on Netscape. Many of the scripts that you can grab for free at sites like
Dynamic Drive DHTML and
exclusively for Internet Explorer, so you will need to be very careful when deciding
what to use on your Web site.
5. The titles on all of your Web pages need to be consistent -- not only in font style,
size and color but also alignment. Make sure the spacing between the title and the first
paragraph is consistent throughout your site. Make sure your spacing is uniform on all pages.
6. If your navigation is dependent on graphics (e.g., image maps, icons, buttons,
if their browser doesn't display graphics, or if they've chosen to turn graphics off
on their browser settings for faster surfing. It is extremely important to provide
text links in addition to graphic links. All of your users will see your text links,
plus text loads faster than graphics.
7. It is an excellent idea to make your logo a clickable link back to your home page
from all of the pages of your Web site. Many visitors expect to be able to use the
logo to go back home. Don't forget to also include a text link to your home page.
These are only a few considerations in designing your Web pages, but they are very
important. Don't let your beautiful pages look ugly on your visitor's computer screen.
If you are like me, you will find these issues among the most challenging aspects of
designing professional Web sites.
Joanne Glasspoole is the editor/publisher of CYBER QUEST. Each issue is jam packed with
original reports, news briefs, cool Webmaster tools, and more. To subscribe, send email to
Majordomo@lists.kdv.com with "subscribe cyberquest" in the body of your message. Visit
Joanne's web site at [glasspoole.com redircted to LinkedIn log in].
More General Web Design:
• Choosing the Right Colors for Your Web Site
• Ten Important Points to Consider to Launch Your First Ecommerce Website
• Five Ways to Enhance Your Website User Experience
• Web Site Design Layout - Five Common Elements
• How Adsense Changed the Internet
• Separation of Layers of Webpage Code
• How to Learn the A to Z of Web Design
• Web Application Development Tools - What is a Web Application Stack?
• Seven Steps to a Money Making Website
• Creating an Effective Web Site