Today is the fourth annual Blue Beanie Day. For the uninitiated, that stands for support of Web standards – a set of best practices for designing bulletproof, highly usable Web sites and Web applications, as well as ensuring open, affordable access to Web technologies.

The original preacher of Web standards was Jeffrey Zeldman, in his book, Designing with Web Standards. He wore a blue beanie on the cover, and the rest is history.

So if you see someone proudly wearing an indigo toque around Portland today, it could mean they are a Web designer who’s hip to the standards. Or, maybe their ears are chilly (it is Maine, you know).

Here’s a list of some of the books that I’ve read and referred to over the years that have been invaluable resources for Web design:

Don’t Make Me Think – Steve Krug. Steve shows how people surf the Web, and that should affect how you build Web sites

The Design of Everyday Things – Don Norman. How people use a tool, a door, a switch, a Web site depends upon how it’s built (see affordance).

Designing with Web Standards – Jeffrey Zeldman. What it means to design with Web Standards, and why that’s better.

Bulletproof Web Design – Dan Cederholm. Why it’s smarter to lay out sites with CSS, rather than using <table>.

Transcending CSS: The Fine Art of Web Design – Andy Clarke. A great read from one of the world’s most talented Web designers. Andy explains how to use CSS to render your design visions beautifully and accessibly.

The Inmates are Running the Asylum – Alan Cooper. Explains why you want an Interaction Designer – not a programmer or a graphic designer – to build your Web site.

Designing Web Usability – Jakob Nielsen. An oldie but goodie. How to make Web sites easy to use.

Defensive Design for the Web – 37 Signals. Another book that’s been around for awhile, from one of the Web’s premiere usability consulting groups. The principles they espouse are timeless.

What’s funny is that lately I read fewer books and follow more blogs (that’ll be the subject of a future post).

Do you Web designers out there have any essential reads that have helped you over the years and that we should recommend to Jordan? (We know our short list above is far from complete) If so, please let us know in the comments.

No, there’s nothing wrong with our blog today.

We’ve stripped the CSS from it to mark the fourth annual CSS Naked Day, an idea that is the brainchild of designer Dustin Diaz. The idea is to promote proper use of semantic markup. Web sites content should still be readable and accessible even when the CSS is removed.

Try to imagine what some popular Web sites, or even those of some Web design firms, would look like w/o their CSS.

Come to think of it, if you’re using the Firefox browser, you can use the Web developer toolbar to turn off the CSS of any Web site. Try it. Let me know what you find. I’d love to see some screenshots (let’s not be mean, though, people).

BTW, we’re not perfect. We’re using inline CSS in the image tags to float them to the right – for now, until we upgrade the site in the near future.

I saw things that I typically see (that is to say, there were things missing). Examples:

• No h1 tag
• No skipnav for accessibility, not even a simple, modest one

How is it that such things get omitted from the architecture of sites whose people should know better? I have my theories.

Accessibility is not a primary goal for most high-end Web design firms. The goal of most of these sites is to sell the graphic design capabilities, the voice of the copywriters, and the background of the company principals. The audience of such a site is typically a creative director at an agency or the marketing director at a large company. These folks have hi-res monitors and generally don’t have visual or other physical disabilities.

Requirements for accessible design and semantic markup create overhead. I suspect that many creative firms would rather not take the time to be problem solvers when it comes to accessibility. Building in a high degree of accessibility while also preserving a design concept can be challenging, though at the upper echelons of the Web design world I would have thought that in 2009 these types of design considerations would be non-issues.

We can do better, people

When I got involved in the Web I quickly noticed that what’s required to design sites (write code) is an intrinsically difficult bridge for many graphic designers to cross. Just the other day, I talked to the principal at a Portland design firm. When I asked her about how her company goes about building Web sites, here is what she said:

I hate building Web sites. Hate it, hate it, hate it. When I create a brochure, I know exactly how it will look. On the Web, it might look different depending on the browser, the screen size, the color temperature of the monitor…

I’ve heard other agency principals beat the same drum.

Here’s the thing: the issues mentioned above are all technical issues. They are not design issues.

Still, if you pitch yourself as a top-flight Web design firm, you ought to be able to demonstrate the basic principles of accessible design, semantic markup and Web standards.

It is possible to create elegant sites that meet the highest accessibility standards without compromising your design goals. I would even say it’s getting easier as browsers improve. It shouldn’t take a lot of time, and it shouldn’t be that hard.

And if it is, let Pemaquid be a problem solver for you.

I thought it was high time I recognized some of the folks who have contributed to Pemaquid Web design projects over the last few years; these are the some of the folks who make up Portland, Maine’s Web design scene.

Jen Ecker – Web Designer, Pixel Surgeon. Jen (a.k.a. Dr. Jecker) has collaborated with me for more than three years now, and we’ve honed quite a system for developing markup. Jen’s specialty is cutting-edge CSS, and she’s got a certain flair when it comes to graphic design. She can also dabble in PHP. In other words, the Doctor is in, and she Rocks! (Word to the wise – she is not a robot!)

Sarah Hines - Creative Services Coordinator and all-around Problem Solver. The Web is not simply about a “Web site” anymore. It’s about solving technical problems elegantly. Sarah’s done that in spades. She can do a little Web design, a little SQL, and she’s even been a project manager at times – though I hate the term. She even took care of business cards a while back when we needed some.

Jeff Norris - Programmer. Actually, programmer is not really a fair assessment; Jeff is a big-picture thinker (dare I say “Problem Solver”?) in regards to technical trends. Jeff has fine-tuned the back-end database systems and has done some sysadmin work for a number of projects, and did the heavy lifting behind Oakhurst Dairy’s innovative job application module, which I architected this past September.

Jamie Peloquin - Web Designer. Jamie, a lone wolf who runs Peloquin Design, has been a frequent contributor to Pemaquid sites over the past few years. Typically, Jamie has collaborated with us to produce the Photoshop comps for a site design concept, though he’s a very capable XHTML/CSS designer who is passionate about Web Standards – which is one reason why I like working with him. Oh, yeah, he knows his way around PHP and a Subversion checkout as well.

Wendy Clark – Web Designer. Wendy is the lead designer at MaineToday.com. We were on the same wavelength when I worked there several years ago and we’ve kept in touch; Wendy has done some graphic design work and XHTML coding. I can’t wait to see her handiwork on the brand new MaineToday.com site which is slated for launch tomorrow – kudos Wendy!

Louise Ellis – Web Designer. Louise bumped into a post on this blog more than a year ago when I was looking for help managing the ever-increasing workload. She lives up the road a piece in Rockport, Maine, but that’s not stopped her from being a frequent contributor. Like most of the folks listed here, she’s passionate about Web Standards and “doing things right”.

Suzy Massey – Web Designer. I’ve known Suzy for some time through a local coffee klatch of Web designers; then last year, we discovered we were both attending SXSW. Suzy’s chipped in a time or two, though mostly she’s been a kindred spirit. She may become more involved soon enough though!

Thanks to all of you for all the amazing work we’ve done. I consider you my Superfriends of Maine Web design. I couldn’t have come as far as fast without you, and I look forward to collaborating with you in the future. Good times!

I downloaded Chrome last night and ran pemaquid.com and several other sites that apply Web Standards through it, and they all checked out, even the features fortified w/(Progressively Enhanced) Ajax.

Separately, a CSS bug has been reported by Jeremy Jarratt, in that Google Chrome improperly displays alternate style sheets. This is apparently a bug that has existed in Webkit and Safari for some time. (information via Jeffrey Zeldman).

Because of Google’s high profile, Chrome could have more of an immediate impact than Firefox did when it came on the scene. I’m hoping that’s going to be a good thing.

For example, it might wake up certain IE6-centric developers slumbering blissfully ignorant to the existence of Web Standard design principles, when they wonder why their sites don’t render consistently in a suddenly-popular Chrome.

Still, it remains to be seen if Google Chrome will make a sizeable dent in the browser market. As we’ve seen with the continuing significant market share held by IE6, people don’t easily switch browsers unless they find it compelling to do so.

One thing’s for sure, as Zeldman says, we once again live in interesting times regarding Web Standards, Web content and Web browsers.

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

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!

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…..

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.