Pemaquid Communications

I’d like to thank Shirley Helfrich, Thomas Bennett and the folks at the Prince Memorial Library and everyone at the Southern Maine Library District for inviting me to speak the other day about Web site usability at their annual conference. Thanks for the opportunity, the thoughtful questions - and for not throwing tomatoes!

Here are some of the tips I mentioned (and some I did not), as well as some links to resources you might find useful.

Usability

• people don’t read Web pages, they scan them support that scanning activity by “chunkifying” the content on your pages (use headings, subheadings, lists, meaningful link text)
• don’t use “click here” in your link text. It’s wastes space. Use either an action word (”shop”, “review”) or a descriptive word (”apples”, “oranges”) that describes what the person will see when clicking
• if you want someone to click on something, make it look like a button
• if you want someone to read something, make it a text link (not a graphic; see banner blindness
• if it’s a link, underline it; if it’s not, don’t underline
• when linking to PDFs, spreadsheets and other files, put the filetype and the size of the file in the link text (big pdf file (PDF - 1.7MB)
• avoid uploading/linking files that are more than, say, 4MB in size (see Attack of the Giant PDF)
• don’t use “What’s New” (it gets old fast)
• review your traffic stats to see what how people are moving through your site and which sections of your site are generating the most traffic

Accessibility

• provide “alt text” for all images on your Web pages
• use relative sizing for fonts (%, rather than pixels)
• ideally, use CSS to layout your site (less code, easier for assistive devices to interpret properly)
• in forms - remember to use labels and associate labels with the proper form field - learn more
• don’t use color as the only way to represent information (as in: red = “bad”; red=”required”)

Resources

• Watchfire’s Webexact accessibility checker - great for spot-checking your work
• Web developer Toolbar for Firefox - a ton of useful tools for accessibility/usability built right into the browser
• World Wide Web Consortium’s Web Accessibility Initiative - the standards for accessible Web site design, from the folks who brought you HTML
• Section 508 - federal standards for software accessibility
• Sim Daltonism - tool for viewing Web pages as a colorblind person might see them
• W3C Markup validation service - essential tool for making sure your Web pages are coded properly
• Dreamweaver - easy to use Web editor; the latest version has excellent support for CSS
• Coda - great little Web editor; helps you work faster. For advanced users comfortable hand-coding (Mac only)
• Accessible Photo Gallery - this gallery meets the criteria for accessible display of photos, uses progressive enhancement to meet needs of viewers
• CSS1 reference guide and CSS2 reference guide - from CSS guru Eric Meyer

Books

• Don’t Make Me Think (Steve Krug) - easy read; reveals how people really interact w/Web pages, and how you can take advantage in your design
• Bulletproof Web Design (Dan Cederholm) - shows how you can use CSS to tackle common design challenges
• Designing with Web Standards (Jeffrey Zeldman) - Zeldman explains why Web standard design techniques are the way to go

Eric Meyer, one of the zen masters of CSS coding, has a new product out called CSS Sculptor that makes creating Web standards compliant layouts as easy as pie.

CSS Sculptor integrates w/Dreamweaver, and has templates for more than two dozen of the most common layouts, whether they be fixed-width, liquid, fruit-juicy or nutty-crunchy.

So if you’re a Web designer who’s just coming up the CSS learning curve, you might consider adding CSS Sculptor to your tool kit. Rock on!

The Eagle Has Landed (sorry, I always wanted to say that…)

If you haven’t already, you might want to join the rapidly-growing group of people who are making the EagleCam, managed by the BioDiversity Research Institute of Gorham, Maine, one of the most popular sites on the Web. So far, viewers have seen romance (eagle-style), battles-against-the-elements (the birds have braved four storms, including an unusually heavy snowfall), suspense (had their eggs survived those storms?) and a surprise plot twist (a chick was born April 11 after biologists had concluded that the birds had failed to keep the eggs warm enough to make it through the cold, harsh spring).

The EagleCam is proving to be Must-See TV. When the eagles returned to their nest about a month ago, the folks at BRI said traffic to the site exploded to 8 million hits in a single day as a result of an Associate Press story on the topic. Traffic died down a bit afterwards, but now that there’s a chick to watch, you can bet there will be another, even bigger spike.

There are a handful of eagle cams out there, but apparently at least Google seems to think BRI’s is important: It’s the #1 search result for “EagleCam”.

In late February BRI asked Pemaquid Communications to redesign the site. The challenge was to get the new look in place before the new addition to the family arrived. How it got done is a case study that could be the subject of a separate post, and the site is still a work in progress, but we got the major features/pages in place.

Future work may include working with National Geographic (provides the live feed) to upgrade the presentation of the live cam object code to bring it in line with Web Standards, placing the rest of the low-traffic back pages into the new look and feel and possibly putting together a photo gallery (BRI has tons of great wildlife photography). And don’t forget the EagleCam Blog (updated by wildlife biologists) and… the LoonCam (inactive right now).

Stay tuned…..

A couple of weeks ago the boys over at Happy Cog released to the wild an updated version of the swfir (pronounced “swif-fer”). For those keeping score, SWFIR stands for “Shockwave Flash Image Replacement”, and it’s an easy way to give the images on your Web site a little zing.

To get it to work, you add the swfir javascript function in the head tag of your page and then a 3-line javascript just before the close-body tag. The script looks for any image on your Web page with a class of “swfir” and replaces it w/a Flash object based on that image.

You can easily adjust the script parameters to give your target image a:

• border
• rounded corners
• shadow
• tilt

…and more. You can see a demo on swfir.com.

What’s more, the swfir was designed to support standards-based design concepts and works on all the major browsers.
This is a great feature for Web designers to add to sites with simple content management systems and that will be used by people with little knowledge of graphic design to upload photos. Instead of posting simple - and sometimes bland - photography, by building the swfir into a dynamic page template designers can easily make these sites look more sophisticated and professional.
Pemaquid is actually building the swfir into a new version of the Pemaquid Content Manager on site we’ll be launching in the next two weeks. Stay tuned for that.