DekGenius.com
Previous Section Next Section

C.2 Site Construction Tasks

Constructing a successful web site requires a series of steps to ensure both its visibility and its effectiveness (often in regard to sales).

  • Define your graphics. Sketch them out so that you're not the only one who can see what they look like. Be sure to get client approval of the basic design before producing all your graphics.

  • Define your navigational system using navigation bars, frames, jump menus, or something fancier such as Flash.

  • Design your directory structure and create a standard file naming system. See Chapter 6 for more site-planning tips.

  • Define your site using Site figs/U2192.gif Define so you have easy access to all your site's assets. (See Chapter 6 for more details.)

  • Focus the development of your site on its primary goal (making money, building community, or disseminating information) and not on dynamic effects for their own sake.

  • Design templates for your site's pages (see Chapter 8).

  • Convert repetitive images, HTML, and links into Library items that can be reused and updated across the site quickly (see Chapter 9).

  • Define CSS stylesheets for your site (see Chapter 10).

  • Use HTML styles to speed the application of text styles. (See Chapter 11).

C.2.1 Deployment Guidelines

You'll ordinarily preview individual pages and your entire site in a browser using File figs/U2192.gif Preview in Browser (F12), not in Dreamweaver itself.

Preview your pages as you develop them so that problems are spotted early. Test early, test often, test on all target platforms in all target browsers (TETOTOATPIATB).

Hire a testing company or ask colleagues and friends to perform an informal site check (ask them to report any glaring problems along with their browser and OS versions). The Dreamweaver 4 CD-ROM includes installers for the NN4.7 and IE5.5 browsers. You can download others browser versions from the vendors' sites.

Test your site thoroughly by taking the following steps:

  • Check your pages in all targeted web browsers on all target platforms. Test Versions 4.x, 5.x, and 6.x of Internet Explorer and Netscape Navigator, plus less popular browsers such as the AOL browser, Opera, and iCab.

  • Test on all supported platforms, including different versions of the Mac OS (7.x, 8.x, 9.x, and OS X) and Windows (95, 98, 98SE, Me, NT, 2000, and XP). Test on Linux and Unix browsers, if appropriate.

  • Always support (and test) the browser used by the site owner. If the site doesn't work when decision makers use it, they will rapidly lose confidence. Saying "It looks great on my machine" will not suffice.

  • Test whether users behind a firewall can access your site.

  • Test all passwords and their corresponding privileges for password-protected sites (and don't leave sensitive information unprotected).

  • Test whether your site deals gracefully with unsupported browsers. If applicable, test pages that use frames, layers, and CSS in browsers that don't support these features. Use the File figs/U2192.gif Check Target Browsers option to detect possible unsupported features. Verify that the no-frames version of your site appears as intended or that users with older browsers can see an appropriate error message. Use the Check Browser behavior to redirect users with older browsers accordingly.

  • Test whether your page deals gracefully with users who don't have a necessary plugin or who have an outdated version of a plugin. Be sure that the server MIME types are set for all files that require plugins. Verify that plugins can be downloaded or upgraded as needed (either automatically or manually). Plugin detection differs markedly on Netscape and Internet Explorer on Macintosh and Windows, so test them each separately. Some plugins suffer incompatibilities when used with the AOL browser, so test versions of AOL on both Macintosh and Windows if you are supporting that browser. See Chapter 5, Chapter 12, and Chapter 16 for details on plugins and MIME types.

  • Check the spelling on every page of your site using Dreamweaver's spellchecker (Text figs/U2192.gif Check Spelling).

  • Check all links on all pages of your site using Site figs/U2192.gif Check Links Sitewide. Check external links using the External Link Checker extension (see Chapter 22) or other external link checking program.

  • Run Dreamweaver's site reports regularly to ensure that there are no missing files or hidden errors.

  • Check web accessibility (See Chapter 22) for text-only browsers (such as Lynx) or speech-based browsers (those that read web pages to the blind).

C.2.2 Web Address and Email Address Tips

The following tips help maximize the utility of your site and convey an air of professionalism to your visitors. Contact your webmaster or ISP for assistance with these items.

  • Ensure that your site is accessible both with and without the www server name, such as with the URLs http://www.mydomain.com and http://mydomain.com.

  • Ensure that the email addresses webmaster@mydomain.com and postmaster@mydomain.com are forwarded to appropriate administrators. Mail directed to incorrect email addresses, such as nobody@mydomain.com, should be redirected to an administrator rather than ignored or bounced back to the user.

  • Configure your server to display a custom page if a link is broken. A custom error page can give the user more information than the default 404 (file not found) error. Include a search feature on the page (see Chapter 22).

  • Check your server logs periodically for reports of broken links. (Most servers can log attempts to reach nonexistent URLs.)

  • Ensure that every folder, including the site root, has a default file, such as index.htm, to prevent visitors from viewing your directory structure or receiving an error message. The filename of your site's home page depends on your server. Some servers assume index.htm or index.html as the default home page. Other servers assume home.htm, home.html, default.htm, or default.html as the default home page. Consult your webmaster for details.

C.2.3 Navigation Methods

Pay attention to how your users navigate your site. If the interface isn't simple, visitors will leave or fail to find the information they need to make a purchase decision.

  • Just as graphical user interfaces offer a consistent user experience, your entire site should share a common navigation system. Don't ask a visitor to select from a drop-down menu at the top of one page and then from a series of images at the bottom of the next page.

  • Every web page should include the answer to your visitors' two main questions: "Where am I?" and "Where am I going?" Include a navigation bar or navigation panel that indicates the visitor's current location and gives easy access to other portions of the site. Such an approach keeps the user oriented and motivated to explore your site further.

  • Navigational elements should be easily discernable. Buttons should have a raised appearance and text links should be separated with pipes (|) or other characters to delimit user choice visually.

  • Use rollover text or graphics with your buttons to provide more information to the visitor while maintaining an uncluttered page design. Use the Set Text of Status Bar behavior to provide help on the status bar of the user's browser. Both techniques help to engage the user through interactivity.

  • Make a search mechanism readily available, as described in Chapter 22.

  • Test your site on real users, then refine your design.

C.2.4 Content

You have heard the phrase, "Content is king," and it remains true for the Web. Despite cost pressures, superior design and content can make your site stand out.

  • Your clients know their business and their customers. Encourage your client or marketing staff to participate fully in the high-level design of the site. That said, you should provide guidance as to what works and doesn't work on the Web. In other words, ask clients what they want to get across to their customers, and then help them achieve that goal.

  • Employ a professional copywriter with knowledge of the client's industry and a flair for writing copy that sells and inspires.

  • Check grammar, spelling, and punctuation carefully. Keep articles under 1,000 words, if possible. Break longer articles onto multiple pages.

  • Check the page layout in various browsers and different resolutions. Look for potentially misaligned images.

  • Performance, performance, performance! Don't overload your page with so much content that it slows down performance. Potential visitors will leave before ever seeing your beautiful design. Try to keep page load times under 10 seconds, and certainly no more than 30 seconds (an eternity for a user).

C.2.5 Colors

Color can communicate very effectively when used properly, but can be a real eyesore when used improperly. The following tips will help you to use color effectively.

  • Use the Commands figs/U2192.gif Set Color Scheme option to select a color scheme for your site.

  • Pick a combination of foreground and background colors that has adequate contrast and improves legibility. Telephone books use yellow pages because black text on a light yellow background offers the highest contrast on printed paper. Experiment with different colors, as monitor brightness and contrast settings differ markedly. Also pick a san serif font and an adequate point size to make the text easy to read on screen.

  • Avoid inverse text (light text on a dark background) especially if you expect the page to be printed.

  • Avoid color schemes that make text illegible to colorblind visitors. Remember that there are different types of color-blindness, including an inability to distinguish red from green and an inability to discern shades of gray.

  • Avoid color schemes that seem so retro or modern that they obscure your message.

  • Avoid oversaturated and cliché colors, such as pure red (#FF0000), green (#00FF00), and blue (#0000FF). Tone down pure white (#FFFFFF) to a shade of gray if nearby colors appear to bleed into the white area.

  • Be aware of the emotions that colors can evoke and how they reflect on your message. Colors such as pale pinks and blues tend toward a softer appearance, while browns and reds have a stronger, rustic appearance. Don't use colors that provoke anxiety if you want to put your audience at ease. See Table C-1 for details.

Table C-1 summarizes the emotions loosely associated with different colors.

Table C-1. The meaning of colors

Color

Interpretations

Black

Dark or heavy; balance it with other colors to look chic instead of morbid.

White

Avoid pure white, as it can be too brash. Use it for accents or tone it down by combining it with other colors.

Dark blue

Distant, authoritative, or reserved. Avoid pure blue (#0000FF), which may be too intense. Use navy blue instead.

Aqua blue

Peacefulness and relaxation. Nature and water.

Green

Encourages interest and exploration; engaging. Combine with subtle yellows for contrast. Avoid drab green unless selling camouflage gear or alligator bait.

Yellow

Fiery and emotional with raised expectations.

Light brown

Rustic strength and history (sienna photographs).

Brown

Cultivation and distinction (brick and wood).

Red

Alertness and intensity. Avoid pure red, which conveys emergency rather than urgency.

Magenta

Cool and artificial.

Any color can be specified as a hexadecimal RGB triplet (#RRGGBB). Some colors can also be specified by name, such as <body bgcolor="red">, but support varies by browser. The most widely supported named colors are listed in Table C-2.

Table C-2. Color names defined in the HTML 3.2 standard

Color name

RGB equivalent

aqua

#00FFFF

black

#000000

blue

#0000FF

fuchsia

#FF00FF

gray

#808080

green

#008000

lime

#00FF00

maroon

#800000

navy

#000080

olive

#808000

purple

#800080

red

#FF0000

silver

#C0C0C0

teal

#008080

yellow

#FFFF00

white

#FFFFFF

C.2.6 XHTML Compliance

XHTML represents the evolution of HTML 4.01 into an XML-compliant standard. XHTML is the next step in the development of HTML and will be slowly adopted as the default language of most browsers. For a full discussion of XHTML, see HTML & XHTML: The Definitive Guide by Chuck Musciano and Bill Kennedy (O'Reilly). This appendix covers the steps to ensure that your HTML complies with the XHTML standard. When converting from HTML to XHTML you must follow more rigid rules:

  • All element and attribute names must be in lowercase. You can set them to lowercase by using the Case for Tags and Case for Attributes preferences under Edit figs/U2192.gif Preferences figs/U2192.gif Code Format.

  • All attribute values must be enclosed in quotation marks. Dreamweaver encloses attributes in quotes by default, and you should use quotes when hand-editing HTML in Code view or the Quick Tag Editor.

  • The root element of the document must be <html>. Dreamweaver uses the <html> element as the root element of all newly created documents (unless you change the default.html file on which all new documents are based).

  • The <!DOCTYPE> declaration must precede the root element in the document, as in:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Dreamweaver does not include the <!DOCTYPE> element in its documents. You can add this element by modifying the default document template, default.html (see Chapter 21).

  • The default namespace associated with the root element must be:

    http://www.w3.org/1999/xhtml

Dreamweaver does not include any reference to a default namespace in the default document template. You can add this reference by modifying the default.html file.

  • All elements must be closed. Empty elements must be closed with a forward slash before the closing >, such as in <br /> and <img.../>. Nonempty elements must be closed using a standard end tag.

Dreamweaver does not include the closing slash with empty elements. This deficiency can be remedied by editing the appropriate object insertion files located in the /Configuration/Objects folder.

  • If an element is not normally empty, use a closing tag, even if a particular instance is empty. For example, use <p></p> instead of <p />.

  • The use of external stylesheets is suggested if the stylesheet uses any of the following characters: <, &, ], ], >, or -.

  • The use of external scripts is suggested if your script uses any of the following characters: <, &, ], ], >, or -.

Because XHTML parsers can remove comments from content, enclosing scripts and stylesheets within comment delimiters may not hide the stylesheet or script from browsers that don't support those features.

  • Line breaks and extra whitespace found within attribute values are handled inconsistently and should therefore be avoided.

  • When creating transitional documents, use both the lang and xml:lang attributes when specifying the language of an element. The lang attribute allows older browsers to view the document properly. When used together, the value of the xml:lang attribute will take precedence.

  • Use the id attribute, not the name attribute, to identify elements. The name attribute isn't supported in XHTML documents because it is not defined as an attribute of type ID. The id attribute isn't supported in all browsers, so provide redundant id and name attributes to support older browsers.

Dreamweaver uses the name attribute, rather than the id attribute, in all instances. Add the id attribute manually by using the Quick Tag Editor.

  • Use both the XML declaration <?xml version="1.0" encoding="EUC-JP"?> and a matching meta http-equiv element, such as <meta http-equiv="Content-type" content="text/html; charset="EUC-JP"' />to specify the character encoding used in your XHTML document. When these attributes are used together, XML-compliant applications use the XML declaration.

Dreamweaver uses the <meta http-equiv> element/attribute combination. You can modify the default.html file to include the <?xml?> declaration.

  • Boolean attributes that are not assigned a value, such as checked, nowrap, compact, and resize, are not supported in XHTML browsers, although they will continue to be used for HTML browsers. To comply with XHTML standards (and still support HTML browsers) set Boolean values to themselves, such as checked="checked".

Dreamweaver follows the old HTML standard in which a Boolean attribute without a value implies an assignment to true. You can change the default by modifying HTML files in the /Configuration/Objects directory.

  • When an ampersand (&) appears in an attribute value, it must be displayed as the character entity &amp;. This requirement creates problems when working with addresses containing ampersands within href attributes, since they would need to be expressed as http://website.com/cgi-bin/sendmail.pl?id=guest&amp;name=user rather than as http://website.dom/cgi-bin/sendmail.pl?id=guest&name=user.

Dreamweaver displays ampersands found within URLs as the ampersand rather than the &amp; entity.

    Previous Section Next Section