Clickable image links to references
and information
STARTING OFF - THE UNDERPINNINGS
I think that all aspiring Web authors should at least start off coding Markup by hand - it is the only way to truly master the language. I also think that validating Markup and Style Sheet coding is very important for producing fully interoperable and standards compliant web pages.
The essentials:
- Employ standards compliant HTML Markup Ref: W3C HTML 4.01 Specification
- Use a Text Editor and Code Markup by hand Ref: HTML Editors
- Use Strict Doctypes (DTDs) Ref: Activating Browser Modes with Doctype
- Use HTML in preference to XHTML Ref: Problems serving XHTML 1.0 Web pages
- Check and correct Markup syntax constantly Ref: TIDY Utility online
- Structure pages correctly Ref: The global structure of an HTML document
- Use Header elements (H1 -- H6) correctly for Creating Semantic Structure
- Avoid using Tables for page Layout If you must, check Accessible Tables for layout
- Use UTF-8 character encoding Ref: HTML Document Representation
- Include meaningful ALT text for all images Ref: Appropriate Use of Alternative Text
- Use W3C Markup Validation Service to insure correct function in all User-Agents
- Use externally linked Style Sheets for page layout Ref: W3C Cascading Style Sheets
- Use W3C CSS Validation Service to insure correct page display and function.
- Be prudent in the use of scripting languages - use them to manage content rather than for presentation effects. Client-side scripting in particular slows down page loading.
In my opinion the W3C's Getting started with HTML by Dave Raggett remains an excellent introductory tutorial.
Validation:
Validation enhances Interoperability -- correct rendering in all user agents. However, web pages can, and do, fail validation and still display pretty much as expected in graphical Browsers anyway due to their built-in Markup discrepancy compensation -- thereby relying on the often unreliable error correcting properties of individual graphical Browsers. Validation does catch many easily corrected Markup errors and the resultant code is consequently easy to maintain or change. Pages containing invalid Markup may not display or function correctly in Screen Readers, BRAILLE interpreters and Textual Browsers or when incorporated into other applications. As we move toward the Semantic Web, the rigors of XML will result in a greater requirement for Valid Markup. Valid and well formed Markup also bespeaks careful craftsmanship and that appeals to many web authors.
Remember that it is the quality and usefulness of the content and the ease of navigation through it that are of the greatest importance to most web page users.
Additional References - Visit and read:
INTEROPERABILITY
Interoperable Web pages will function as intended in all User Agents; Graphical Browsers that display text and images such as MS Internet Explorer, Firefox, Google Chrome, Opera, Safari, Konqueror, et al. Textual Browsers such as Lynx that only display text; Screen Readers (such as JAWS) that read pages from left to right -- top to bottom -- and render the text as synthesized speech or transport it to a Braille reader; Search Engines such as Google -- which display textual information and hyperlinks; Mobile/Small Screen Devices -- cell phones, PDAs, pagers, smart watches, etc.
Pages should be checked in multiple Graphical Browsers at various screen resolutions to insure that they function as intended, which means that all content will display in the correct sequence, navigation will be as intended, and all hyperlinks will work correctly. I test all of my pages for correct function in current versions of, MSIE 6, MSIE 7, Firefox 2, Google Chrome, Opera 9, Mozilla 2 and Safari 3 graphical Browsers at 1280 by 1024, 1024 by 768, 800 by 600 resolutions, and small screen rendering mode. I also test them for accessibility in the Lynx textual Browser and the TextAloud audio screen reader.
An important feature of Interoperable Web pages is the use of Valid Markup in their construction. In fact, the W3C includes the following as part of the successful validation output for their Markup Validator: "To show your readers that you have taken the care to create an interoperable Web page, you may display this icon on any page that validates ..."
Emulating page function in textual Browsers and Screen Readers:
Free "Lynx emulation" textual Browser:
The Yellowpipe Lynx (text only) viewer is an excellent utility that emulates the output of the most popular textual Browser.
Fire Vox - A Screen Reading Extension for Firefox
This is a full featured audio Screen Reader that functions flawlessly as a Firefox Browser extension. It is accompanied by an excellent online manual and tutorials. The Fire Vox package (including download, installation and online manual) is available at the Fire Vox Information page.
Inexpensive audio Screen Reader:
TextAloud is easy to install, set-up, and use. Toolbars are installed for IE & Firefox Browsers. It is a Windows implementation and is available at NextUp.com as a 15 day free trial download.
Web authors do not know what type of User Agent, graphical Browser, textual Browser, or Screen Reader, each of their visitors will use to access their web pages, or what screen size (resolution) they have. They certainly have little control over how their web pages will be viewed and displayed. As the WWW progresses, Web authors will have less and less control over the way users view their web pages in graphical Browsers. Many users, especially People with Disabilities, will exert more and more control over how they view and navigate web pages. Newer graphical Browsers permit users to do such things, via drop-down menus, as:
- Selectively turn off image display.
- Disable (CSS) Style sheets.
- Enlarge or reduce text size (also via the keyboard).
- View only alternate text for images.
- Resize the entire page layout.
- Disable animation.
- Turn off or modify coloration.
- Substitute the user's own personal style sheet, and so on.
A quick and handy way to zoom and/or change text size via keyboard shortcuts when viewing web pages:
When using MSIE .....
- Zoom out: ctrl + (larger - repeat until desired size is obtained)
- Zoom in: ctrl - (smaller - repeat until desired size is obtained)
- Return to original size: ctrl 0 (zero)
When using Firefox ..... same as with MSIE (You can specify "change text size only" in Firefox via the top menu bar: View ---> Zoom ---> Zoom Text only. Setting remains until changed. The above keyboard shortcuts will now only change the text size leaving the image sizes as original).
When using Safari/Chrome ..... same as with MSIE except the keyboard shortcuts only change the text size leaving the image sizes as original.
When using Opera ..... same as for Firefox/MSIE except use shift + for Zoom out.
The above procedures are especially well suited for web page viewing by People with Disabilities who cannot use a mouse (duchenne muscular dystrophy, etc.) and therefor rely on stylus/keyboard functions. Visitors who use a scrolling mouse can zoom/increase text size very fast via ctrl scroll -- for all Browsers listed above -- keyboard shortcut ctrl 0 (zero) returns to original size.
Web developers/authors might want to check pages they are composing to be sure navigation is not affected by incremental zooming (visitors will seldom zoom more than three increments). In my experience, many visitors (especially those with diminished vision) to web pages now increase the text size by one or two increments for easier reading especially when very small text is encountered.
Newer computer screen conformations and smaller viewing devices are necessitating more flexible/fluid Markup & CSS (style sheet) authoring these days. Of particular interest is the use of cell phones to browse web pages. The Opera Web pages, Opera Mobile Browser, and Small Screen Rendering Technology are excellent references, the latter one being especially valuable for Windows O/S Web authors. The Apple IPhone uses a mini Web Browser by Safari
Mobile/Small Screen Rendering:
Hand-held mobile devices such as the Blackberry (8800, Curve, Pearl), and the Palm Treo 650, employ Web Page Small Screen Rendering which can be emulated in Firefox via the top drop-down menu: Tools> Web Developer> Miscellaneous> Small Screen Rendering (or via Miscellaneous> Small Screen Rendering from the drop-down menu in Chris Pederick's Web Developer add-on). The same facility is available in Opera, another excellent developer tool, via View> Small screen (toggle) from the top drop-down menu.
Although some of the following principles are applicable to good Web page design in general, the tabulation includes considerations that are especially important for successful Web page rendering in Mobile/Small Screen devices with their narrow windows and columnar displays:
- Structure pages utilizing header markup - use h1 for the page title and h2-h6 for section headings.
- Keep images small - large ones take too long to load and do not render well.
- Use short Link titles and URLs - long ones will truncate.
- Use proportional, rather than absolute, sizing and dimensions (% and em rather than pixels).
- Use basic font styles - PDAs only use the most common ones (Times new-Roman, Arial, etc.)
- Avoid using Tables for layout - they may not work well.
- Avoid Frames - they do not work on small screens.
- Be judicious in the use of client side scripting - It causes severe battery drain.
NOTE: the foregoing information relates to generating or changing "regular" Web pages to accommodate Mobile/Small Screen device rendering, or at least optimize their display in such devices, as much as possible. Designing specifically for Mobile/Small screen rendering requires different approaches and techniques. Two basic references are: Designing for the Mobile Web and W3C XHTML Basic 1.1
The Firefox Graphical Browser with Chris Pederick's Web Developer Extension installed is an outstanding tool for Web authors. The download is very easily installed and only a quick re-start of Firefox is needed to activate it.
The WAT IE Browser Accessibility Toolbar is an outstanding extension that is reminiscent of Chris Pederick's Web Developer Extension for the Firefox Browser.
The Developer Console offered by Opera also provides an excellent array of Web authoring tools.
Following are two invaluable Browser references -- be sure to read the caveats:
Remember it is the quality and usefulness of the content and the ease of navigation through it that are of the greatest importance to most web page users.