17.1. Site Launch Checklist

Don't wait until you finish your site before developing a thorough strategy for regular testing. By that time, serious design errors may have so completely infested your site's pages that you may have to start over, or at least spend many hours fixing problems you could have prevented early on.

• Preview early and often. The single best way to make sure a page looks and functions the way you want it to is to preview it in as many browsers as possible. For a quick test, click the Live View button (Section 13.7) in Dreamweaver's Document toolbar. This is a great way to quickly check JavaScript components and view complex CSS. However, since Dreamweaver's built-in browser is WebKit (a.k.a Apple's Safari browser), Live View doesn't necessarily show you how your page will look in another browser, like Internet Explorer.

  To see how your layouts, CSS, and JavaScript hold up elsewhere, use Dreamweaver's Preview command (File→Preview in Browser) to test your pages in every browser you can get your hands on (Dreamweaver lists your installed browsers when you click Preview, and you select a browser from that list). Make sure the graphics look right, your layout remains intact, and Cascading Style Sheets and Dreamweaver behaviors work as you intended.

  For a thorough evaluation, however, you should preview your pages using every combination of browser and operating system you think your site's visitors may use. At the very least, try to test your pages using Internet Explorer 6, 7, and 8 on Windows, Firefox on Windows or Mac, and Safari on the Mac. According to the Market Share website (http://marketshare.hitslink.com/browser-market-share.aspx?qprid=0) Internet Explorer 6 for Windows is the most popular web browser, followed very closely by IE 8, Firefox, Chrome, Safari, and others. Including all versions, Internet Explorer claims over 60.percent of the world market for browsers (as of December 2009).

  ---

  Tip:

  If you already have a site up and running, you can find useful browser information in your site's log files. These files track information about visits to your site, including which browsers and platforms your visitors use. Most web hosting companies provide access to these files, as well as software to analyze the confusing code inside them. You can use this information, for example, to see whether anyone who visits your site still uses Internet Explorer 6. If no one does, that's one less browser you have to design for.

  ---

  Unfortunately, you'll discover that what works on one browser/operating system combination may not work on another. That's why you should preview your designs early in the process of constructing your site. If you design a page that doesn't work well in Internet Explorer 6 on Windows, for example, it's better to catch and fix that problem immediately than to discover it after you build 100 pages based on that design. In other words, once you create a design you like, don't plow ahead and continue building your site! Check that page in multiple browsers, fix any problems, and then, grasshopper, begin to build.

  To test your pages, enroll your friends and family to check your pages on as many browsers and operating systems as possible. You can also use Dreamweaver CS5's built-in support for Adobe's BrowserLab (see below) to get screenshots of your designs.

  ---

  Note:

  Internet Explorer 6 is usually where most Web pages fall apart. This old and crotchety browser is full of bugs that often cause hair-pulling bouts of hysteria among web designers. Most of these problems are related to using CSS for layout (see Chapter 9). An approach recommended by professional web designers is to preview your page in Firefox, Safari, or Internet Explorer 8 first. Get the page working in those browsers, and then preview it in IE 6 to fix the bugs. If you design with just IE 6 in mind, you'll find that your site doesn't work in Firefox, Safari, and, in many cases, the ever-growing population of IE 8 browsers. Dreamweaver's Check Browser Compatibility tool gives you one way to track down nasty CSS bugs (see Section 10.2), and if you use Dreamweaver's CSS Layouts (Chapter 9), you'll find that Adobe has already solved many cross-browser problems.

  ---

• Validate your pages. Previous versions of Dreamweaver included a tool that let you compare your web pages against agreed-upon standards for HTML and other web languages. It wasn't completely reliable, so Adobe removed that feature from Dreamweaver CS5.

  Of course, creating valid web pages is still important. Valid pages are more likely to work in a predictable way on all browsers. And if you envision your site on mobile devices such as smartphones and cellphones, valid pages are again your best bet. In addition, one possible cause of page layout problems is invalid HTML, so using a validator can help spot otherwise hard-to-find errors.

  You can validate pages in a couple of ways. You can use the W3C's online validator (http://validator.w3.org), and since the W3C makes up the rules for HTML, you know the validator's going to be right. You can type in the URL of a page on the web, upload a file from your computer, or copy and paste HTML into a form field. The validator checks the page and lets you know of any errors. If you use Firefox, the Web Developer Toolbar extension makes quick work of testing a web page using the W3C validator. Just launch Firefox and install the extension from http://chrispederick.com/work/web-developer/. Restart Firefox, and the newly installed toolbar appears near the top of the browser window (if you don't see it, choose View→Toolbars→Web Developer Toolbar). Now, whenever you preview a page in Firefox, just choose Tools→Validate Local HTML and Firefox will contact the W3C server, feed it your HTML, and then display the results in a new tab.