Pemaquid Communications

One important rule we try to follow @ Pemaquid is to always have 3-4 Sharpies and tall stacks of blank paper when meeting w/a Client to review design comps.

It’s the easiest way to sketch out your design thoughts visually. It’s faster than using a whiteboard, and it’s much easier to sketch out ajax or design interactions with Clients - especially those who aren’t particularly Web-savvy - than it is to try to explain it to them verbally.

The other day I had a problem - a big problem. My Photoshop locked up and wouldn’t run. It’s an old copy that runs on the Windows side of my Mac through Parallels.

Why am I running my Photoshop on Windows?? That’s a long story in and of itself and for another day.

I tried reinstalling. No luck. I figured maybe it was finally time to invest in CS3.

Before I pulled the trigger our Creative Services Coordinator, Sarah Hines, and I tried one last thing, something we occassionally do when we run into a programming conundrum: we Googled the arcane error message.

After sampling three suggested solutions Photoshop was back up and running. Amazing! On the other hand, I shouldn’t be too surprised.

The moral of the story? If you’re hamstrung by a problem, whether it’s a design issue or even a home repair issue, you might do well to at least give Google a shot.

Before launching a new site, it’s always a good idea to run a check on its accessibility to folks with visual or other physical disabilities.

One of our favorite tools for checking Web site accessibility is no longer available. The WebXact service from Watchfire had a very comprehensive free assessment tool that not only checked accessibility but also other important components of the Web page to make sure it was well-formed. Alas! IBM, which owns Watchfire, decided in February that the tool would no longer be offered for free - it now costs a very steep $1,580 for a 12-month license.

Not surprisingly, according to one metric I use, the site’s traffic plummeted in March to half of its previous levels. I expect April’s traffic numbers will be down even further. Perhaps a better idea would have been for IBM to continue offering WebXact for free while posting ads for content relevant to those using the service.

No matter. Other excellent free tools are available. Here are a few we use at Pemaquid:

• Cynthia Says Portal (contentquality.com) - from HiSoftware, a company that develops accessible software. Just enter the URL of a page in question on your site, and the service will run a report to show how it measures up against the Web Content Accessibility Guidelines and Section 508 guidelines. The report is thorough and runs very fast. It’s become the spot-checker-of-choice for many top-flight Web design firms.
• WAVE - runs a similar report when you enter the URL of a page. Offers a visual view of the page as well as some other features, including a text-only view. Not as comprehensive as Cynthia Says. Here’s a report on Pemaquid’s home page

No accessibility tool is perfect, but these two can help you avoid making obvious mistakes.

Finally, I should add Web designers shouldn’t rely on any tool to tell them whether their work is accessible. You need to do your homework. Required reading: the Web Accessibility Initiative guidelines for accessible Web design.

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

Catching up on my required reading, I came across another useful post from Jeffrey Zeldman’s blog (as I often do) on tools to help designers predict how people with color-blindness will see their designs.

• Sim Daltonism
• Colorblind Web Page Filter

Details on each @ Zeldman’s site.

Adding to delicious….

OK, so you’ve decided you want to add a blog to your Web site - a good move since. pound for pound, frequently-updated sites tend to grab higher search engine rankings than their peers who go without. So you download a copy of Wordpress, an open source blog platform that has all the features you’re looking for. Great.

Next, you want your blog to have the same look and feel - theme, if you will - as the rest of your Web site. Your designer cracks open the Wordpress blog in Dreamweaver and gasps at all the PHP code in the templating system. Skilled as she is with HTML, your designer can’t make heads or tails of the CSS or PHP.

Not to worry. Pemaquid has designed Wordpress blogs for a number of Clients. In fact, this blog you’re reading is a Wordpress blog (though an imperfect one - ever heard the one about the cobbler’s children who had no shoes?).

So if you’re looking to add a Wordpress blog (or Typepad blog, or any other flavor), contact us and we’ll get you set up. We’ll do it fast too (48 hour turnaround is doable), if necessary.

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!

Striped backgrounds are a bit like last year’s music now, but this is a handy tool for creating them:
Stripe Generator.

In the last couple of days a great new bookmarklet has hit the streets for Web designers far and wide. It’s called the XRAY.

Like it’s namesake, it gives you an easy way to view the “bones” of a Web site. Turn on the XRAY, click on a page element, and instantly see the CSS associated w/that element. A great time-saver!

Better yet, I’m told it even works in Safari, though I haven’t yet tried that. Firefox is a breeze. Sorry, no IE version at this time.