Dreamweaver Assignment 15 – Testing

Photo credit: Tracie Masek, uploaded via Flickr, Creative Commons License

15.1 – Spell-Checking:

There a few odds-and-ends covered here.

First, we look at the process of importing text that was created in MS Word.  We need not copy Word-document text to the clipboard and paste in into a Dreamweaver page.  Apparently, we can just import a Word document as a whole, and the formatting that was applied in Word will be preserved.  This is as simple as selecting File=>Import=>Word Document…, and browsing to the target file in the file browser dialogue.  In fact, I believe that we have covered this in a previous lesson.

Next our tutor demonstrates a new tag; the <blockquote>.  This tag merely indents a block of text, as one would do when including a multi-line quotation in a paragraph.  She applies this tag by selecting the desired text, and choosing Insert=>HTML=>Text Objects=>Block Quote. 

Also, our instructor demonstrates applying a new CSS rule, not from the CSS Styles panel, but by toggling the Properties panel from HTML mode to CSS mode, and selecting the desired formatting options therein.

Finally, she demonstrates the Dreamweaver spell-checker; Commands=>Check Spelling.  Of course, since we are working with an imported Word file in this exercise, we presumably would have already done the spell-checking in Word, but it’s good to know that we have this tool available in Dreamweaver as well.

15.2 Checking for Broken Links:

Before releasing one’s site out into the wild, it is essential to ensure that none of the links between pages within the site have been broken during the site building process.  To this end, we get a look at the Link Checker tab of the Results panel.  We view this panel by selecting Window=>Results=>Link Checker.  Note that this does not check the status of links to external sites, just intra-site links to other files within your site’s file structure.

15.3 Previewing Pages in the Browser:

Of course, throughout this series of lessons we have frequently used the preview in browser command to check on browser rendering of or pages.  We do this by clicking the Globe Icon on the Document bar, and selecting the desired browser from the drop-down list.  Our tutor points-out here that there is an option to Edit Browser List on that drop-down, which we may use to add additional browsers to the option list, and designate which one is the primary browser.

15.4 Checking Browser Compatibility:

Way back in Assignment 4, we discussed the issues of browser/OS compatibility.  Here we see a tool that aids in checking for compatibility issues. 

To use this tool, we choose Window=>Results=>Browser Compatibility to view the Browser Compatibility tab of the Results panel.  This tool will check the current document against a number of browsers/version, which we can edit by adjusting the report settings.  It is probably best to use this tool in conjunction with actually viewing the page in browser one’s self.

15.5 Browser Issues:

Just to reiterate issues of browser differences, our tutor performs a demonstration by inserting a horizontal rule on a page with the <hr> tag, then shows us how this element appears with sharp corners in IE 8, and then with rounded corners in Firefox 3.  Not a significant issue in this example, but just in case one was thinking that all browsers are the same….one best think twice.

Also, we learn how we can quickly display our page in the design view at different screen resolution, giving us a sense of what users will see on their initial view, vs. what they must scroll to see, depending on the resolution of their display.

15.6 Gathering User Feedback:

As we discussed back in section 4.3, when one’s site is has all the pieces assembled, it’s time to start testing it out for functionality.  Our tutor suggests that it’s best to get some fresh eyes on your design, and seek beta testers from outside the web development team.  You should ask them to complete some tasks that you want users to be able to do on your site, such as navigate to the locations page and find a local store near their star system, of find a parts diagram for galaxy-class starship impulse thruster power coupling.  Beta testers can give you important feedback on their experiences using the site, which you can use to streamline the design.

After beta testing and tweaking is complete, you will need to conduct a full-fledged usability test on your site.  This is a comprehensive test that will require significant planning, resources and documentation.  We are advised that usability tests require tester recruitment and demographic data collection regarding same.  Your site needs to be hosted on the same hardware during testing as it will be when rolled-out.  You need well-defined tasks to give to testers and a model for collecting feedback.  Less obvious concerns must also be considered, such as how to compensate testers, and whether non-disclosure agreements with testers are applicable. 

15.7 Page Load Time:

In this section our instructor emphasizes the importance of keeping page load times down to a tolerable level.  Of course, it was not so long ago that loading even the simplest of pages resulted in a frustrating lag while our dial-up connections trickled content bit-by-agonizing-bit.  However, in this era where the broadband connection has become the norm, users are no longer tolerant of slow page loads.  Therefore, it is important to keep an eye on one’s page size, as a larger page = longer load time.  This is particularly important here in the United States, where our so-called “high-speed” connections are alarmingly slow (and expensive) compared to other developed countries.

You can keep an eye on your page size as you build by referring to the bottom of the document window, where among other snippets of information, the current page size and estimated load time are displayed.  Of course, the load time calculation is based on a particular bandwidth figure, which you can choose in the general program preferences settings.  However, the estimate cannot factor-in variables such as latency and server load, so your actual mileage may vary.  Also, our tutor points out that the page size figure counts streaming content in it’s entirety, which leads to inaccurate load time calculations because of the way that streaming content appears to the user. So…once again, this only a guide.  Just remember that richer content vs. shorter load time is a balancing act.

15.8 Dreamweaver Extensions:

Our tutor introduces us here to the Adobe extensions manager, and available extensions (add-ons) for Dreamweaver, as well as other Adobe applications.  Some of these extensions are available for purchase, but others are free for the taking.  The example that she uses is a site-mapping utility that automates what could otherwise be a recalcitrant task, depending on the size of one’s site.

In summary, it seems that browsing over the available extensions might be worthwhile.