|
||||||
|
||||||||||
|
||||||||||
Building a better website |
|
It is possible to build a better website but you must start way back at the beginning. A superior website is the result of careful planning, adherence to standards, and faithful obedience to site wide consistency. It takes discipline to achieve -- but the payoffs are many: stronger search engine positioning, ability to serve new and often hidden markets, compliance with new regulations, a website that doesn't break as easily, and web pages that are much simpler to revise. Common sense, really, but I discovered as a corporate web manager -- that things often have to be stated to become part of the group mentality (i.e. to make sure everyone is in the same game with you). A good template allows for incredible content flexibility. Plus, a good template allows content to be created in a much more user friendly environment -- like Microsoft Word or Excel, then converted to HTML, and pasted into the web pages. Compatibility All menus, style sheets, and page/content elements should be tested to make sure they function properly in all browsers on both PC and Macintosh platforms, including all versions of the following:
There are still many copies of older browsers in use. You should study the "user agents" and "referrers" sections of your web log/web analysis. If you don't get traffic from a browser version, ignore it. But if you get 0.025 (1/4 percent) traffic, you risk disappointing potential customers/visitors by not making sure your website works for them -- and that could cost you business. The menus, style sheets, and page/content elements should also be tested and function properly on the following mobile platforms:
More and more people are working remotely, using cell phones and these wireless devices to stay in touch while they travel. Even in their offices, they often schedule back-to-back conferences and keep productive by surreptitiously, discretely monitoring email and doing Internet research. If your website isn't compatible, they don't have time or the attention span to stay with you. Appearance Not all pages on a site need to look identical. However, some recognizable elements should be shared, including logos, branding elements, and visual elements based upon logos and branding. All text should be visible and legible. Do not use text that matches any backgrounds or text that is designed to "trick" users of search engine robots, as that will result in getting the site banned -- always a counter productive thing to do. If style sheets are used, care should be taken to make sure sight-impaired and older users can enlarge/reduce the text using the standard browser "text size" controls and commands. If possible, pages should dynamically resize to fit the browser window. The Internet standard is 800x600 pixels, however many mobile devices have smaller screens with menus of their own and it would be optimal if your website resized to match. A website should not require user intervention to resize, nor should it need to state minimum browser requirements. In addition, the website should not display horizontal scrollbars at any browser sizes of 480x320 pixels or greater, and 480x272 (PSP) or 240x280 (Blackberry) would be better. All pages should be printable at U.S.-standard letter size in portrait (vertical) mode, without requiring users to switch to landscape or lose text on the right side. Users will click the print button first because it doesn't require intervention, and then will grump and grouse when they must OPEN the print dialog and change to landscape. If necessary, style sheets may be used to properly format pages for printing as different from on-screen display. A website should not use a "print this page" artifice, nor display a secondary less-visual page to accommodate printing constraints. If tables are used for collect or contain content into discrete units, the tables should not have background colors, or style sheets should be used to ensure the colors (or gray shades) print properly. Colored cells in tables don't print -- period. Colors should easily translate into matching gray shades, so any visual clueing is not lost when printing to monochrome printers. Shopping cart pages, forms pages, and secure download pages should be indistinguishable from any other pages on your website (i.e. they should have the same design, graphic, menu, style, text, and functional elements and be consistent with the rest of the websites). Main menus There should only be the minimal number of necessary buttons/links in the main menus pointing to the second-level pages, plus addition of a matching Home button/link on all subsequent pages. Keep the structure flat, but limit the number of menu items. Keep like content in subfolders under the main site directory. Each main menu button/link should correspond to an index.htm file in the corresponding subfolder. If menus are created using graphical elements, the motif/style and color of the logo/branding elements should be used for the buttons/links, to expedite brand recognition. Provision should be made in the menus for users with sight, hearing, or mobility issues. If menus are done through scripting or server side processes, provision should be made to accommodate users who have scripting turned off , as well as those with sight, hearing, or mobility issues. Submenus Second level pages should be accessed in these ways.
Submenu elements and second-level pages should be clearly labeled for and accessible to computer-assistive reading technologies. If desired, "crumb-trail" links can be provided. However, it is better to design the menus to allow users to backtrack. Under no condition should a user be required to use the browser's Back button—however, the browser's Back button must not be disabled or rendered useless by any scripting or style sheets. Interactive The user interface for the website should incorporate interactivity as much as is possible without expensive application (web-API) programming. If rollovers are used, the attempt should be made to create them with Cascading Style Sheets (CSS). JavaScript rollovers are acceptable as long as provisions are made for users who have scripting turned off. Even if the initial content does not require Flash or streaming media, the website should be enabled for future use of Flash, streaming media, and—at least potentially—podcasting/MP3/MP4 broadcasts of speeches, videos, and visual/verbal content. This is especially true for websites designed to train others. Any interactivity used on the website should be adequately summarized in the code so that search engine spiders/robots and computer-assistive reading technologies are able to provide visual and auditory clues to identify these embedded elements. Links and style sheets Each page must have text-only links to all other pages, so that robot extraction/harvesting of the links will be expedited and indexing encouraged of the search engines, portals, and directories. These links are also required for accessibility (see Legal Requirements). Style sheets can be used to make the text-based links attractive. A common style sheet should be used for all pages, to ensure consistency of all character-based and visual elements site wide. The style sheets should be tested in all browsers listed in the Compatibility section to ensure that content is visible and readable in all. It is not necessary to guarantee identical style sheet behavior in all browsers, as long as site wide consistency and functionality is maintained. The conventional CSS "hacks" can be used but are not encouraged. All links on the website should conform to the Internet standard blue underlined appearance. It is acceptable to highlight the links or have them change upon mouseover, provided the modifications do not make the links hard to see or render them less than accessible to users with disabilities or those whom require computer-assistive reading technologies. Forms and Shopping Carts Forms should capture all data needed to:
Shopping cart and secure download pages should allow return users to take up exactly where they left off during their previous visits, as -- for example -- if they should experience a browser crash or other failure. Hard drives do occasionally fail, so once a user pays for report or other product/service, the user should be able to return at any time to reacquire the purchased item. If you do not explicitly exclude international users, they will find you and use your form, so be prepared with fields that meet their postal and telephone standards. Nothing is more frustrating to a user with six two-digit sequences in his or her telephone number than a form that asks only three-three-and-four. All forms should be programmed using in acceptable standard database design practices. Fields should include, as separate elements, anything for which a sort might be envisioned:
There may be other fields added for the specific usage you have in mind, but make sure all fields are consistently labeled and function the same. The shopping carts and forms should be programmed to unobtrusively prompt users about forgotten required fields. Telephone fields should automatically move to the next element (i.e. when area code field is filled, highlight automatically appears in prefix field, and when prefix field is filled, highlight automatically appears in number field). Most of the shopping cart content will be direct download of electronic versions of reports and products. If anything is to be mailed of sent by express delivery, the website should be programmed for such service. A shipping cost page should tell purchasers how much they will reasonably pay, before they start to buy. Accessibility Search engine optimization is enhanced by compliance with the Americans with Disabilities Act (ADA), which mandates using page elements and code structures containing additional places for keywords. These include table tag summaries, form "envelopes," and placement of alternate text in a number of standard HTML tags. The website needs to utilize all these elements and structures. Code compliance checking can be done by submitting pages to http://bobby.watchfire.com. Information about the accessibility standards can be found at http://www.section508.gov and http://www.usdoj.gov/crt/ada/adahom1.htm. Security All shopping carts and online forms must be designed to properly protect user identities and data from outside or illicit access, as dictated by AB 68 Chap 829 (see Legal Requirements section). However, data should be retrievable for evaluation and self-promotion. If the website deals with medical data or information, it must also comply with the rules and restrictions of the Health Insurance Portability and Accountability Act of 1996, Public Law 104-191 (HIPAA), an additional layer of security must be imposed. Information about HIPAA is available at http://www.hhs.gov/ocr/hipaa/ and http://privacyruleandresearch.nih.gov/. Site Map Although a website may have a simple design and structure, it should contain a link-based site map. This is be a simple, hierarchical list -- in link format, of all pages on the website -- that can be read by spiders/robots, as well as aids to persons with sight, hearing, or mobility issues. All pages that are not password-secured should be listed, including pages that access password-secured pages. Site maps enhance search engine optimization, and are aids for persons with disabilities. Legal requirements A website must comply with accessibility requirements of Section 508 of the Rehabilitation Act (29 U.S.C. 794d), as amended by the Workforce Investment Act of 1998 (P.L. 105-220) and the Americans with Disabilities Act of 1993 (P.L. 101-336). This is an advantage, as it provides a number of additional places in the code to legitimately include keywords, which will enhance search engine optimization. If the website will collect user data, including financial data, it must have a privacy policy to comply with the Online Privacy Protection Act of 2003 [State of California, Assembly Bill No. 68, Chapter 829, "An act to add Chapter 22 (commencing with Section 22575) to Division 8 of the Business and Professions Code, relating to privacy."], which can be read online in text format at http://info.sen.ca.gov/pub/03-04/statute/ch_0801-0850/ch_829_st_2003_ab_68. The privacy pages do not need to appear in the main menus but should be listed in the text-based links on every page. If no user data is collected by the website, it is still collected by the web server, even when the server is not under your control. You should state that data may be collected by your Internet service provider (ISP). |
About
|
Career
|
Creative
|
Faith
|
Family
|
Railroads
Home
|
Portfolio
|
Site Map
|
Privacy Policy
