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 Keep It Simple (KIS), is the highest design principle. Simple design techniques should be emphasized. Simple presentations are often the most effective. The idea is to inform not dazzle. The focus is to provide information not entertainment. The goal is to present substance instead of flash. This paper describes a functional, minimal, simple website or webpage. I have always used simple, minimalist design techniques. I used extreme minimalist web design techniques in my first web page in 1996. I never stopped the focus on extreme and continued to refine the technique. If you want your website to be 'cool' or you are trying to impress or entertain then these principles are not for you. These design principles apply specifically to the Simple Informational Website (SIW). My extreme focus on simple and informational includes the requirements of no advertising, cookies, JAVA, Active-X, frames, style sheets, DHTML, FLASH, or any other "cute" tricks. I rarely even use JavaScript. I use only minimal graphics. This is out of touch with the modern world where people seem to read very little. They primarily look at the pictures. HTML is ideal for word processing of SIW presentations. The principles I describe are designed to use simple HTML functionality. I use HTML version 3.2 functionality almost exclusively. Later versions mostly introduced excessive complication. Website design is to be compatible with all browsers. Using simplicity makes direct coding of HTML reasonable. I use NotePad exclusively to write my HTML websites. 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 speed. Every page should begin displaying within seconds. If you must use special processing techniques, design to avoid delaying the beginning of the page display. Design for slow connections and overloaded networks. There are numerous reasons why bandwidth may be limited. This may seem silly in the age of Gigabit connections but not everyone has a high-speed connection and they don't always operate properly. Many people are on a shared connection where someone else might be streaming HD video. Plan for low throughput (32kbps - dialup) as the worst case. 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. This has become more critical with the mobile revolution. Plan to be viewable in a 640 by 480 pixel window. Leave room for scroll bars, status lines and such. I use a typical width of 576 pixels, which translates to 6" at the 96 dpi common to many displays. Test for layout problems in a 1920 by 1080 pixel window or the maximum available. Beware of text 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 should fit horizontally in a 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 should fit in the small window. Graphics designed to be full width should be less than about 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. Be careful to avoid requiring excessive bandwidth by excessive use of graphics. The goal of a simple website is to inform and not to dazzle with fancy graphics. Avoid the use of multi-column formats to fill up the screen or attempt to squeeze too much information in one place. You don't want to overwhelm the reader with excess information. !Warning! Common display resolution and sizes have become so big it has become necessary to modify the preceding design goals to restrict the width of text on your web pages to keep it readable. The customer does not always exercise the ability to make the window size an easily readable width. Therefore, it becomes important to become concerned about line length with the increasing size of windows and displays. This was irrelevant with the old 12" (or less!) displays at 640 by 480. A maximized window in a 24" display with 1920 pixels produces a line length which is impossible to read quickly as a paragraph. A short line length is easier for the eyes to follow. A newspaper column is one extreme in short lines. I have chosen to design content to display at a width of about 6". This is about the same as a typical book. This modification is particularly needed for the SIW format. The SIW format often is similar to a book or pamphlet. The emphasis is often primarily on words and especially paragraphs. The simplest way to achieve this width restriction is to use a TABLE command. I usually begin the table after a paragraph begins or with a paragraph command before a heading. These table groups need to avoid being too long since they will not display until the entire table is received. I try to keep the table length about the size of a book page or about 20 to 40 lines. The next table begins immediately after the previous table ends. Example: </TABLE> <P> <TABLE ALIGN=CENTER WIDTH=576 CELLPADDING=0 CELLSPACING=0><TR><TD> 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 and especially search engines. 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. Websites can unexpectedly change their home page to a different type. Example: <A HREF = "http://www.domain.com"> Instead of: <A HREF = "http://www.domain.com/index.html"> I have learned to place some pages with extremely valuable content on my website because I have seen many interesting websites go away over the years. 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 Do not change the names and locations of pages on your website unless you can use something like an .htaccess file to redirect your changes.

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. You can only control the links on your website so also avoid changing titles, heading, and wording potentially used by other websites. Careful planning and organization is important. 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.

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 (dot) com" Publicize your web page. Word of mouth publicizing. Newsgroup announcements. Links from similar websites. Search placements. Design for search placement. Web search using a website like http://www.google.com 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 heading are the first source for your keywords. After you define your keywords the title and heading may need to be revised to match your target keywords. Remember that each page on your site can have a different set of keywords. Ideally, your domain name should have been selected using your high-level 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 heading. The page title will become the search title of your site. The heading information will become the description 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. Remember, it will take 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. It is sometimes effective and desirable to name the starting web page the same as the domain or other keywords to increase page ranking by search engines to a higher position. Example: http://www.domain.com/domain.html This requires custom settings on the website. This is an example of the .htaccess file for Linux websites using the Apache webserver software. It also makes sure 'www.' is always prepended which helps some web statistics programs. RewriteEngine on RewriteCond %{HTTP_HOST} ^domain.com$ RewriteRule ^(.*)$ http://www.domain.com/$1 [R=301,L] RedirectMatch permanent ^/index.htm$ http://www.domain.com/domain.html

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 waste your time with 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 easier to distinguish when 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=utf-8"> <!"-- 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 (dot) 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=utf-8"> <!"-- 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 2015-07-19