Web Page Design

Simple Principles and Concepts
for simple informational websites.

/Home /Professional /Papers /Web Page Design

Contents Introduction Definitions Mechanical Principles Visual Principles Search Principles Coding Principles Example Home Page Example Web Page

Introduction KIS, Keep It Simple, is the highest design principle. Simple design techniques are to be emphasized. Simple presentations are often the most effective. The idea is to inform not dazzle. The goal is to present substance instead of flash. If you want your website to be 'cool' or you are trying to impress or entertain then these principles are not for you. HTML is ideal for word processing of simple presentations. These principles use HTML version 3.2 exclusively. Later versions introduced excessive complication. Website design is to be compatible with all browsers. Using simplicity makes direct coding of HTML reasonable. Word processors have a tendency to be excessively complicated and encourage outrageous presentations. There is also danger in becoming obssessed with excessive attention to the minute and unimportant details of style.

Definitions Audience The people you want to see the information on your web page. Customer The person who will be viewing the web page. Home Page The first web page of a domain URL. An example of a domain URL: www.domain.com This page is usually named 'index.html'. Website A collection of web pages available from a domain name. Web Page A single HTML file. This page may or may not be the home page. Window The visible display area of a web page. The web page content may not all be visible at one time. Additional content may require vertical scroll. The size of the window is a customer selected preference. Text Size The size of the characters in the window. The text size is a customer selected preference.

Mechanical Principles The primary principle is to make the website and pages operate as smoothly and quickly as possible. There are some mechanical principles of web page design that are often overlooked. Design for slow connections and overloaded networks. There are numerous reasons why bandwidth may be limited. Plan for low throughput (32kbps - dialup) as a worse case. Every page must begin displaying within seconds. Use text where possible. Beware of large tables near the start of the page. Large tables might not display until the entire table is loaded. Minimize graphics. Minimize the size of graphics. GIF is usually more compact for drawings and cartoon like pictures. JPEG is better looking and usually more compact for photographs. PNG is appropriate for highest quality high resolution pictures. Don't put a whole book on one web page. Avoid creating huge web pages. More than about 10 vertical page scrolls is excessive. Create multiple pages that link to each other. Design for a wide range of window sizes. The presentation must adapt to large and small windows. Plan to be viewable in a 640 by 480 pixel window. Leave room for scroll bars, status lines and such. Test for layout problems in a 1280 by 960 pixel window or the maximum available. Beware of size assumptions. The font size of text is variable depending on customer selection and DPI setting. Don't try to squeeze everything you can into a small window. Don't try to fill all the space of a large window. Do not force a wide column width on text and be careful with multiple columns which require a wide window. The customer will size the width of the window to their preference. Word wrap is your friend. Allow for it. Plan for it. Depend on it. Don't force word wrap to meet any specific column width. Especially don't use 'P' or 'BR' improperly. Beware that left or right align might look awkward with a large window. Complete testing with small and large windows will avoid these and most other similar problems. Avoid horizontal scroll like a plague. Your design must fit horizontally in the small window. Stack items vertically when needed. Vertical scroll is your friend. Allow for it. Plan for it. Depend on it. Don't try to force it. Don't ever insert excess vertical space. Double space is the most that should ever be used. The maximum separation is blank line, ruler, blank line. A graphics size must fit in the small window. Graphics designed to be full width must be less than 600 pixels wide. Graphics designed to have text flow on a side should be about 300 pixel's wide. Graphics should be about 400 pixel's high. Graphics must not look lost or misplaced in a large window. This is likely to occur with a full width graphic that is not centered. Design for a stable web page. Avoid problems with your website because of changes in other websites. Avoid changes in your website that will break links from other websites. Avoid referring to graphics on a different website. You can't control or adapt to off-site changes. Place a copy of the graphics on your website. Refer to the pages of other websites with the simplest URL possible. Example: <A HREF = "http://www.domain.com"> Instead of: <A HREF = "http://www.domain.com/index.html"> Place high-level web page groups on your site in a separate directory accessible by only naming the directory in the URL. Example: www.domain.com/About/index.html Instead of: www.domain.com/About.html

Visual Principles The primary principle is to make the website and pages as easy to read and understand as possible. Duplicate the title of the web page with an identical heading. 'H1' and centered is most appropriate. Make sure the title and heading match the text of the link that references it. Include site navigation links under the heading. You might choose to duplicate these at the bottom of the page. The minimum link is a return to the home page. A link to every page in a chain back to the home page is good. A link to next and previous pages when in a series is good. Some series of pages are designed to be read one after another like chapters in a book. Use the default font face as much as possible. Don't force your font selection on the customer. This is also not part of the HTML version 3.2 standard. Do not change the 'BASEFONT size'. Use the default font size as much as possible. Don't force your font size on the customer. If it is at all appropriate, use heading commands instead of font size changes as much as possible. Avoid changing the color scheme in the 'BODY' tag. Don't force your color scheme on the customer. If you do change it, then you should change all the settings to make sure they stay visually compatible. A bright color background is usually appropriate with the default black lettering. Color scheme compatibility is a complex subject. If you select a background image, be careful to minimize the associated problems of color incompatibility. You may need to change all the settings to make sure they stay visually compatible. The colors of the image should be chosen to be either very bright or very dark with only a small variation in the range of colors. This is necessary to distract as little as possible from reading the text. This is especially a problem with small text sizes. Because large screen sizes are so common it has become necessary to restrict the width of text on your web pages to keep it readable. The customer does not alway exercise the ability to make the window size an easily readable width. Therefore, use a table to restrict the text line width to an appropriate amount. Look at the source of this web page for an example which demonstrates this technique.

Search Principles One of the purposes of creating a web page is to make information available. There are several ways to reach your audience. Unfortunately, there is one group you don't want to be able to search easily. Spammers. You might choose to avoid placing a mailto or recognizable email address on a web page. Possible substitute: "Webmaster (at) Domain.com" Publicize your web page. Word of mouth publicizing. Newsgroup announcements. Links from similar websites. Search placements. Design for search placement. Web search is a common method your audience will use to locate your information. These are some simple design step by step methods. Keyword design is the most important thing to do. Keywords are what your audience will use to locate your information. The web page title and subtitle are the first source for your keywords. After you define your keywords the title and subtitle may need to be revised to match your target keywords. Remember that each page on your site can have a different set of keywords. Test your keywords in several search engines. Use several combinations of your primary and secondary keywords. Make sure the keywords turn up sites related to your information. Look at the source for the web pages and note how the keywords are incorporated. Study how the search engine displays the site. Code the keywords into your page title and beginning headings. The page title will become the search title of your site. The heading information will become the descriptions of your site. Submit your site to search engines. This will require research to determine how and what to submit. Search regularly for your site. When you find your site be sure to select it and don't go back to the same search engine until after you perform a search through another engine. Remember that it takes days and maybe weeks for your site to appear. Use various keyword combinations. Don't search the same engine with the same keywords too often in the same day.

Coding Principles The primary principle is to make the HTML code as easy to develop, read, and maintain as possible. Only simple and minimal codes are used so it is often easiest to write manually. I often use NotePad to write HTML code. Word processors create excess and unnecessary code. This results in code with problems and poor performance. Browser incompatibility is the worst problem. Do not use optional tags described as unnecessary by the standard. Examples: HTML, HEAD, BODY, /P, /TR, /TD, /LI... Most browser tags are placed on a line by themselves. The end tags for the font style and phrase elements often must appear immediately after the text. This avoids the appearance of an extra space. Block browser tags are entered after a blank line The element names in browser tags are capitalized. Place the name and intended location of the file in a comment at the start of the code. Good self-documenting code practice. It will reduce problems and confusion.

Example Home Page <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <META HTTP-EQUIV="Content-Type" Content="text/html; charset=iso-8859-1"> <!"-- http://www.Domain.com/index.html" --> <TITLE> Example Home Page </TITLE> <H1 ALIGN = CENTER> Example Home Page </H1> <HR size = 3 > <P ALIGN = CENTER> Person (at) Domain.com <BR> <A HREF="http://www.Domain.com"> www.Domain.com </A> <HR> <P> <TABLE align=center> <TR> <TD> <A HREF="Example.html"> Example</A> Revised 2004-02-27 <P> <A HREF="Page2.html"> Page 2</A> Revised 2004-02-20 </TABLE> <P> <HR> <P ALIGN = CENTER> This website is designed to be compatible with all browsers having HTML version 3.2 support. <BR> WebMaster: Web Designer Name <BR> WebMaster (at) Domain.com <BR> <A HREF="http://www.Web-Designer-Site.com"> www.Web-Designer-Site.com </A> <HR> Revised 2004-05-05

Example Web Page <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <META HTTP-EQUIV="Content-Type" Content="text/html; charset=iso-8859-1"> <!"-- http://www.Domain.com/Example.html" --> <TITLE> Example Web Page </TITLE> <H1 ALIGN="CENTER"> Example Web Page </H1> /<A HREF = "index.html">Home</A> /Example <HR size = 3 > <P> Informational text on a website page. <P> <HR> Revised 2004-05-05

Revised 2011-09-09