Designing a Web PageBy Ernest Ackermann and Karen HartmanErnest Ackermann and Karen Hartman, co-authors of Internet Today!. Download the PDF file for this article.A web page is an electronic publication. It’s a means for communicating ideas and providing services on the Internet. Creating an effective web page — one that makes an impact on a reader and communicates your message — involves coming up with appropriate content, suitable two-dimensional design or layout, and appropriate use of multimedia. And these components need to go together in a way that takes into account that someone will be viewing and using your information with a web browser on the Internet. This means you also need an understanding of the technical issues related to the Internet and the ways a browser displays information. Here are the major points to consider when designing a web page. Some Technical Issues Affecting Web DesignOne difficulty with designing a web page is that a number of technical conditions that affect the way a page looks can’t be controlled, including the size and type of font set by the user, number of colors displayed on a monitor, and screen resolution of a monitor. Fonts. Preferences can be set on a web browser controlling the type and size of font used to display text, so text that looks “just right” in terms of size and placement to the author may appear differently to different users. Colors. When you design you have control over the type of monitor or display used to view a web page. Some monitors will be set to display 16 colors, some 256 colors, and some millions of colors. An image that looks great on a display capable of displaying lots of colors may not look very good when fewer colors are available. If you’re designing for a general audience then stick with the 216 colors that both Navigator and Internet Explorer use (those colors are both displayed by Macintosh and PC computers).
Screen resolution. The screen resolution or number of pixels in the viewing window affects the way the web page appears. Images and text have their dimensions ultimately specified in terms of pixels regardless of what’s being used to view them. The greater the number of pixels, the finer the resolution. An image on a screen with a resolution of 1024 by 768 pixels will generally look better and be sharper than an image on a screen with a resolution of 800 by 600 pixels or 640 by 480 pixels. So an image that’s 300 by 400 pixels, say, will appear much smaller on a screen whose resolution is 1024 by 768 pixels than it would appear on a screen with a resolution of 640 by 480 pixels. Furthermore, the size of the browser window can be changed by the user. So as you design a page you need to think about what it will look like on different types of monitors and with different user configurations. A middle-of-the-road approach would be to design a web page so it looks good on a monitor that displays at least 256 colors and has a resolution of 800 by 600 pixels. Compromises have to be made, because it’s impossible to predict the type of monitor used and the way the web browser options are set. Design ConsiderationsThere’s no substitute for planning and design. Take the time to think about what you want to do and how you can accomplish it. Virtually everyone who writes about web page design stresses the importance of developing and including good content. Some people may be attracted by a flashy web page, but they’re not likely to come back unless the page has the content they need. We’ll consider several design considerations here. Develop a clear statement of the purpose of the web page or web site. What do you want to accomplish through your web page? Do you want to write a personal web page, provide information about a topic, describe a concept or process, serve as a gateway to other information, sell a product, or advocate a cause? These aren’t the only things you may want to accomplish. What’s important is that you spend some time coming up with the purpose and objective of a web page. Identify your audience. Identifying the audience helps
you to develop the proper content and design. Do you expect the
page or topic to be appealing to people in a specific age group?
Will the readers likely be experienced Internet or computer users?
Can you make any assumptions about the type of network or computer
equipment your readers will have? These are just some of the
questions you’ll need to consider. In some cases it will
be easy to identify the audience and their capabilities. For
example, suppose the topic is International Trade Agreements.
If the target audience is people in the banking industry then
the web page or web site designed for a group in the banking
industry would probably be markedly different than one designed
for high school students.
Identify the material you will use to accomplish your purpose. Focus on the content you’ll be providing on the web page or web site. Develop an outline for the web page. Think about the major topics, images, or hyperlinks. Then develop each of these to enough detail so that they can be completed after making final design decisions. Establish the layout or format of the web page. Adopt a uniform and appropriate style for a single web page and for all the web pages in the web site. Think about the structure of the web page. If the page can’t be displayed in one window then you’ll want to give important information a prominent position at the top of the page, and you’ll probably want to provide a table of contents or links to other parts of the document, or other pages in your site. See, for example, the web page that accompanies the book Internet Today!, http://www.webliminal.com/internet-today.html Include an email address for comments, the name of the author/designer/producer, the URL for the page, and the date the web page was last modified. These items are usually placed at the end of the web page. The email address is there in case someone reading the page has a question or suggestions about the web page or its content. web pages ought to contain the name(s) of the person(s) responsible for developing the web page. It gives credit and responsibility where they are due. The URL for the page is included so that someone reading it will know how to reach it on the web in case the page is printed or reproduced in some other manner. Knowing when something was changed last is helpful for readers to keep track of the most recent version of a document, and it also gives an indication of the timeliness of the content of the web page. Consider drawing a design or diagram that shows the layout of the pages. In any case, keep the design simple. It will be easier for you implement it and it will be easier for your readers to deal with. Use relatively small images and limit the number of images in a web page. The issue here is the amount of time it will take to retrieve the web page. Think about the type of equipment that your readers will be using to view your web page. It usually takes many more bytes to represent an image than text. That means it may take a relatively long time for someone to view a web page that has a number of images or a large image. We’ll calculate how long it would take to display an image whose size is 54K bytes being received on a computer that’s using a 33.6K (bits per second) modem to connect to the Internet. The modem can receive information at a rate of roughly 33,600 bits per second. Since each byte consists of 8 bits, the modem can receive information at 33.600/8 = 4,200 bytes per second. Since the size of the file holding the image is approximately 54,000 bytes, it take 54,000/4,200 or approximately 13 seconds to deliver the image to the browser. Notice we’re also ignoring any delay due to Internet traffic. Some, but not all, folks might be willing to wait that long for the image. If several images that size are on the page, the wait becomes unreasonable. One thing to do is to represent the image on the page by a small version called a thumbnail. Another possibility is to reduce the number of colors in the image (this is also called reducing the color depth) so the image can be represented with fewer bytes. Either can be made into a hyperlink to the full image. This gives access to the image in all its glory, but doesn’t necessarily delay viewing the entire web page. Use proper spacing and emphasis. Let the spacing reflect the organization of the text and content of the web page. If the page has several distinct sections, separate them with a shaded bar (<HR>) or blank spaces. Use bold or italic font appropriately. Section headings ought to be emphasized as well as important subsections or words. On the other hand, don’t overdo the use of spacing, shaded bars and emphasized text—just because something can be done doesn’t mean it has to be done. Use features that most browsers can deal with. You’ll find that some HTML or other features used in developing web pages are treated differently by different browsers. Try to stick to the HTML and features that most browsers support. Most browsers support many of the tags that make up what is known as HTML 3.0, but there are differences and no universal agreement on which version of HTML to support. Also, you’ll find that different types of computer systems—PC, Macintosh and Unix—have different ways for rendering colors and other components of web pages. The web site “The Compendium of HTML Elements,” http://www.htmlcompendium.org/0frame.htm, includes a description of all HTML tags and a table that tells which version of the popular browsers recognize the tag. The HTML you use in a web page ought to be chosen to give the page the format you’d like and be viewable in that format by most web browsers. Use the information in the compendium mentioned above to help you choose appropriate HTML. A professional designer will then view the web page with several browsers on different types of computers to check the design. Use proper grammar and spelling. You want your page to be effective and well received. Grammatical or spelling errors don’t give a good impression of you and can turn off a reader pretty quickly. Go over all the previous items, think more about your purpose and improve your design. In some sense the design process goes on and on. The initial design will be implemented as a web page that can be viewed as a file on one computer system, or perhaps a team on a local network will review it. Use the opportunities you have to revise and improve the design. Eventually a version is placed on the web, but there is still chance for revision. Some people put icons or images on their pages that state the page is “under construction.” The truth is that most pages are often modified and adopt a different design. Plan to revise and reevaluate your work. Have other people try your web page or web site. Your friends will probably say your web page looks nice, but be sure to watch them as they try to use it. Then talk with them about what they found useful or entertaining. Ask them to describe any confusing or distracting elements of the web page. Designing a web page can be rewarding and enjoyable. To get good results you’ll have to put some work into it. Just like writing a program, a paper, completing a drawing or painting, recording a song, completing a wood working project, or cooking a great meal—take the time to plan and design before you start. FYI—Guides to Web DesignThere are several excellent guides to web design freely available on the web. You may want to set a bookmark to these and refer to them often during any web project.
|