 |
JR's HomePage |
Markup |
Site Map | Page Bottom HTML Syntax | Content vs Style | User Friendliness Navigation | Feedback Mechanisms | Ref Material |
HTML Implementation Notes
Quality web page/site implementation implies that the author has a solid knowledge of HTML markup syntax. It also requires the author to pay attention to the individuality of each user, especially those with special needs. The implementation process can be broken into several phases such as:
Technically Correct HTML Syntax
HTML syntax must be correctly formed according to the World Wide Web [W3] recommendations and verified either on-line or with a system utility. Reference material is at W3 Language Specs, Quick Reference Guide and Web Design Group Help. Implementers may wish to broaden their knowledge by learning about the history and the future of the HTML markup language.
Separating Content From Style
It is essential that the implementation process separate page content markup from presentation style markup. Content markup defines paragraphs, lists, tables and forms while style markup indicates how those paragraphs, lists, tables and forms are drawn on the screen (ie. fonts, positioning, and colors) or in other media. This separation allows the function of content provision to be separated from designing the overall appearance of the page or site. Altering one should not require adjusting the other. Stylesheets are used to provide the presentation component.
One important aid to consistent style within a web site is the use of CSS stylesheets. These allow a single file of formatting instructions for layout style to be set up and used by all the pages within that site. This is similar to the concept of style guides or templates in word processors. You should read my notes on style and consult other author's CSS guides and tutorials before including style sheets in your HTML documents:
Web page authors should always validate their stylesheets to the W3.org CSS recommendations using a stylesheet checker either online or with an offline system utility. Authors should also view their page with SEVERAL browsers to note whether what they see in their design environment is the same as what their clients view.
NOTE: A consistent style of HTML markup code formatting should be maintained in the material not normally viewed by the user to allow easier amending by the author.
User Friendly Implementation
User friendly implementation implies that the needs of the reader are paramount. Each decision is made so that the largest audience benefits and that ease of use, flexibility, and alternate ways of doing things are possible. Some of the major signals of user friendly implementation are:
- Consistency in layout and form is maintained across the website. This allows familiarity, comfort, and predictability.
- Pages are viewable on all browsers, including text-only and aural output browsers. Not everyone is picture oriented!
- Layout is structured to be independent of window size. Avoid setting width attribute in tables (unless in %)!
- Pages contain lots of navigation links and menu choices.
- Contact spots are provided for sending feedback and corrections to the author.
- Forms provided for user feedback are logically organized and graphically pleasing.
- A 'sitemap' page is provided which gives details or 'maps out' the entire website.
- An 'updates' or 'recent changes' page is provided to allow frequent viewers to jump right into the new material at the site.
- A site 'search engine' (either using dropdown menus or better yet string input) is provided for easy access to important material. The search engine can be implemented using either CGI scripts (requires cooperation of the service provider [ISP]) or a JavaScript utility (requires the viewer to have a recent browser).
- All pages are compact for loading speed and graphics are only used when relevant.
- Audio, video, and high resolution photos are sent only on user request.
- Blinking messages and scrolling banners are non-existent.
For some examples check the following list:
- jgsoft is an example of a simple but clean commercial site design.
- The Miniatures Page is an excellent example of a hobby centered page. Lots of options are available for designing your own view as all pages are composed from a database on request. State of the art coding except for no stylesheets to separate presentation from content.
Navigation
Navigation bars can be located as headings, fixed sidebars or scrolling frame sidebars. Each is implemented in its own way.
Headings can be easily set up as a straightforward list of hypertext links such as I use in this page. They can also be spiffed up by using an imagemap with appropriate hotpoints. This approach requires more effort but the overall look is very attractive!
Fixed sidebars look great but are more difficult to maintain on dynamic or growing sites as the sidebar content requires coordination through all the pages. Solutions include dynamic content using JavaScript and text inclusion utilities.
Scrollable sidebar menus require the use of frames which are not implemented on some browsers. They are easy to maintain as only one page needs updating when a new link is added. Check your manuals on how frames are constructed or use my site source code to grasp the fundamentals.
SiteNavigation.net maintains a comprehensive listing of utilities for managing navigation issues. The sites include JavaScipt tree menus and generators and solutions for generating sidebar menus easily.
Feedback Mechanisms
The first and most important feedback mechanism is the contact or mailto link to the page owner. It is implemented as an anchor link to the owner's e-mail address. A sample format is:
<a href="mailto:VE3LL@COGECO.CA?Subject=[htmlimpl.htm]">Comments</a>
Note: Mailto links are routinely harvested and used as sources of SPAM addresses. Several forms of defense can be taken.
- Display an image of your email address. This requires viewers to retype your contact address in his mailer but the information can't be harvested by SpamBots.
- Replacement of the @ symbol by its entity @ This stops the most primitive form of SpamBot harvesting ie. 'literal' searches. But more sophisticated SpamBots are well aware of this trick.
- Hide the address using a JavaScript technique.
- Use more elaborate encoding techniques. Utilities and ideas can be found by googling Email Protector or similar search patterns.
A second feedback mechanism used on many corporate sites is a customer profile form, survey form or order submission form. Implementation of these forms is discussed on the HTML forms page.
One popular site add-on is Guest Books. These allow viewers to sign in and offer suggestions or comments. A down side of this can be negative feedback is viewable by other readers. The other downside is that Guest Books must be done through a server providing a 24/7 Internet connection. This implies making arrangements with your isp to host this service or hooking up to another provider who may either charge or place advertising on your Guest Book. If you need a guest book you may want to try Bravenet.com
Personal, hobby or educational sites may want to generate discussion among viewers. These multiparty forums can be supported using either e-mail lists (eg yahoo groups) or forum utilities. Before setting up a list or forum, remember that they are high maintenance items requiring daily TLC.
Tutorials and References
Although books are the most efficient way of learning, some find that new concepts are hard to understand or remember until they actually try small examples for themselves. Tutorials offer the opportunity for directed self study. The best tutorials for HTML coding are offered by W3Schools and Maricopa College.
References come in two forms; definitive works such as that of the W3 Consortium, and guidelines for consistent site development such as the following: