I’m giving short presentation on the subject tonight to the New Hampshire Usability Professionals Association. Here are some recent, relevant links on the topic:

• Jeffrey Zeldman on the latest advances in Web typography
• W3C – CSS Fonts Module Documentation
• CSS3.info – article on @font-face
• A List Apart – CSS at 10
• Issues with IE8 and Web font rendering
• Typekit

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’m not sure why. At Pemaquid, while we’re not perfect, we always build a high degree of accessibility – at least Level AA – into every site we develop. (Go ahead, check out the sites listed in our Portfolio and run them through your favorite accessibility checker – as long as you don’t bother w/some of the ancient table-based sites towards the bottom of the list.)

Accessibility is only going to become more important as time goes by. You may recall that Target recently settled a lawsuit brought against it by a blind man whose screen reader couldn’t weed his way through the hideous code soup Target’s development team put in front of him.

Companies and governmental organizations are only going to find it more and more important to build accessibility into their sites. Web designers should be up to the task.

Fortunately, when you add accessibility to your Web site, it doesn’t have to ruin a good design concept. It doesn’t have to add cost or overhead to your project either. You just have to take the time to learn about the core issues and build it into your design process.

More Web designers should understand the issues around accessibility and become accustomed to being a problem solver regarding them. The ingredients: an understanding of Web standards and the Web Accessibility Guildelines. A solid understanding of CSS can go a long way towards helping designers deal with accessibility challenges to their design concepts.

One person who uses the latest CSS techniques to create sites with amazing visual designs along with a high degree of accessibility is Andy Clarke (@malarkey on Twitter).

I hope to get back to my roots a bit and start writing and speaking more about accessible design and how the two don’t have to be mutually exclusive. I’d love to know what issues you’ve faced regarding accessible design.

Be at the right place at the right time. Eric was at a conference in the mid-nineties and heard someone give a talk on CSS before anyone knew what CSS was. He developed an interest and wanted to learn all he could about the new technology.

Be first . Eric was one of the first people to do any problem solving around CSS and the varous browsers (and this is back in the day; we’re talking IE3).

Write a book. Eric wrote the books that were just waiting to be written about CSS. Once the books were written, he found he received many more offers to speak at conferences and share his expertise.

Get lucky. Eric will tell you that his success story involves a lot of luck (See “Being at the right place…” above). He said there were other people along the way who had the opportunity to write books, but didn’t, or contribute their expertise and didn’t, or who didn’t meet the “right” person or attend the “right” event to light the spark.

Work hard. Let’s not forget the most important ingredient. It’s a given that you’ll need to work hard to rise to the top in any field. You’ve got to pay your dues to sing the blues.

Eric says for him, it was like Rockefeller, who when asked how he’d cornered the oil market, replied:

Get up early. Go to bed late. And strike oil.

What’s your secret formula for success?

At Pemaquid we use it for table sorting in our Content Manager (our home-grown but spunky little CMS). The nice thing about it is that it degrades gracefully. In other words, the table works just fine even if the javascript doesn’t.

More on the whole bit here.

Editor’s note: Yep, the table below is not the prettiest, and I can’t properly show code snippets at the moment. We’ll be upgrading to WP 2.7 shortly and will bang the CSS around a bit to give a cleaner display.

A little over a week ago the Pemaquid team launched a new site for Oakhurst Dairy, a venerable Maine company expertly run by Stan Bennett and his family for three generations. The Oakhurst brand stands for high quality, and so we wanted to make sure that Maine’s largest dairy had a Web presence that measured up.

Most importantly, Oakhurst was looking for a better content management system that would give Marketing Director Jim Lesser and his staff more flexibility to quickly and easily update many different types of content throughout the site. We responded by building a custom version of the Pemaquid Content Manager, adding special modules for handling Products, “marquee spots” on the home page (“Nature’s Perfect Food”, etc.) and features on student Athletes of the Week.

Other modules were tailored to Oakhurst’s content needs, and the flexibility of the Content Manager allowed us to easily adjust the presentation of many different types of content, such as the company timeline.

In terms of design, we were able to have some fun with Oakhurst’s wonderful signature “landscape” graphic, a pastoral scene depicting the Maine countryside. We used some advanced CSS to nail the landscape to the bottom of the viewspace in front of a division containing the other content for the page. As a nifty little trick, when you scroll to the bottom of the page you’ll see the sun rise (unless you’re viewing in Internet Explorer 6; unfortunately, IE6 doesn’t support the display of transparent PNG graphics used in the landscape overlay. We used some conditional CSS to detect IE6 and serve up a different version of the scene for that browser).

The landscape graphic is quite a bit larger than we’d have liked (about 538k), but should perform fine for a wide majority of screen resolutions and connection speeds, according to site traffic statistics. And we’re continuing to tweak.

Other unique features include the interactive Products display (fortified with CSS, jQuery and AJAX), and an interactive Job application module that works like an e-commerce checkout and allows job seekers to save a profile they can use to quickly apply for future positions.

All in all, we hope the site is a good example of the wholesome natural goodness of Maine Web design.

We have to tip our caps to CIO Paul Connelly, who runs a well-oiled machine, and especially to Tim Hundt, our contact for project management. Tim kept everything very well organized from start to finish. Oakhurst’s IT staff kept us on our toes and challenged us to do our best work.

It was a bit challenging to prepare this presentation because:

1. I hadn’t put together a 2-hour presentation on the subject before
2. I didn’t know going in how much participants knew about CSS, so I covered a lot of ground, from the basics to some advanced sorcery
3. My partner in crime, Jen Ecker, (a.k.a. Dr. JEcker), had to bow out at the last minute due to a stomach bug, leaving me to do the whole 2-hour spiel (Jen sends her regrets and I’m glad to report she’s feeling much better today, though she remains disappointed that she missed out)

Fortunately, on the subject of Web design, I’m usually not at a loss for words.

Here’s the main point. Using CSS (Cascading Style Sheets) is a better, more efficient way to design Web sites. It’s a lingua franca for the Web, along with that other 4-letter “word”, HTML.

CSS has “that same great taste, but it’s less filling“, meaning, you can make great looking sites w/a fraction of the markup. That leads to all kinds of benefits:

1. More Flexible Design
2. More sophisticated Design
3. Easier, quicker maintenance
4. Greater Accessibiilty
5. Better search engine ranking
6. Lower costs for bandwidth, server storage and redesigns

Jen and I have put up a CSS Quick Reference Guide we’re calling CSS 101. It’s here:
http://css.pemaquid.com/101/

Here is a list of some of the other resources we dug up for you. Use them in good health!

Online Resources

• A List Apart
• W3C – CSS
• W3 Schools – CSS Reference/Tutorials
• Position Is Everything
• CSS Zen Garden
• CSS Beauty
• Smashing Magazine (random article)

Books

• Bulletproof Web Design
• More Eric Meyer on CSS
• CSS Web Site Design
• Transcending CSS

Tools

• Firebug
• Web Developer Toolbar
• Colorzilla
• Internet Explorer Developer Toolbar

Gurus

• Dan Cederholm – www.simplebits.com
• Andy Clarke – www.stuffandnonsense.co.uk
• Eric Meyer – www.meyerweb.com
• Dave Shea – www.mezzoblue.com

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.

Can anyone tell me with 100% certainty what those items represent?

Therein lies the problem. You can’t tell what you’re going to get when you click (you can’t even tell that you can click). The only hint that this is the site navigation is that it is positioned in the spot where, if you’ve surfed for any length of time, you know that navigation is usually found.

Here’s the site, btw, if you’d now like to see that nav positioned within the overall layout.

(I don’t mean to pick on Downeast. They’re a great company and their Web site is far better than the previous version. I’m just using their site to show how you can improve the user experience on sites you design.)

Navigation is best as text. Text that is unambiguous. “About” is more effective than “Who We Are“.

Lo and behold, when you mouseover the nav on this site in question, you see a… word.

There are two big reasons why you should use text in you site navigation.

Usability. There’s an excellent book on Web design by Steve Krug called Don’t Make Me Think. In it, Krug points out usability studies show that people usually don’t read Web sites – until they’ve found that article they were searching for – they scan them. Navigational text that is simple and clear supports this scanning activity. With graphics, you have to stop and think (“hmmm… what could a camera mean?…”) This is why icons, unless they are universally understood, are also poor choices for navigational labels on Web sites.

Accessibility. In the example above, if you were visually impaired and came upon this site, there would be no way for you to understand that the images represented the site navigation. It would be much better to place navigational items towards the top of your HTML as a list of text links and to then use CSS to style the list to match your overall design concept.

Web site designs like the one in question point to a larger issue in Web design, which I call The Tyranny of Graphic Design. That’s a topic for another day, but briefly, Web design is not graphic design. It’s interaction design (of which graphic design is certainly a part). In creating Web sites, designers should take care that the graphical design concepts they produce make it easier for people to find what they’re looking for on a site, not harder.

Don’t make me think…

Seth Godin has a great post on his blog today that fits right in with that theme. He says people should think about what they’re doing right now and ask themselves if they will be proud of themselves 15 years hence. Do we think these are crazy days? Godin says that’s nothing new:

So stop thinking about how crazy the times are, and start thinking about what the crazy times demand. There has never been a worse time for business as usual. Business as usual is sure to fail, sure to disappoint, sure to numb our dreams. That’s why there has never been a better time for the new. Your competitors are too afraid to spend money on new productivity tools. Your bankers have no idea where they can safely invest. Your potential employees are desperately looking for something exciting, something they feel passionate about, something they can genuinely engage in and engage with.

If times are going to be crazy no matter how you slice it, says Godin, Why Not Be Great?

Sounds like a good Resolution to me.

Leo Burnett, the great ad man, had the same idea, which he put this way:

When you reach for the stars, you may not quite get them, but you won’t come up with a handful of mud either.

And Donald Trump said:

As long as you’re going to think anyway, think big.

To paraphrase The Donald, if you, like me, are going to build Web sites anyway, think big. Stretch a little bit this year:

• If you’re still coding layouts w/table structures, learn some CSS (Your Clients will thank you because their sites will be easier to update and maintain)
• If you’re still creating design concepts that depend on embedding a lot of images into each Web page, again, learn some CSS (Clients will appreciate that their pages are dramatically smaller, load more quickly and use much less bandwidth – bandwidth costs money)
• If you’re not yet writing valid code based on Web Standards, start (Clients will thank you when it becomes easier to maintain the look and feel of their sites across different browsers and operating systems
• If you haven’t learned about Web site accessibility, start reading up on it, and apply to your sites (your Clients, and their Web site visitors with visual and physical disabilities, will thank you for being mindful of their special needs)
• If you think it’s more important to bring people to your site – (search engine marketing) – than it is to keep them there – (Web site design and usability) – please think again (if you don’t, your Clients’ competitors will thank you for sending customers their way as they flee a hard-to-use site)

Here’s wishing you a happy, productive – and Great! – New Year!

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!

Played around w/t/ Facebook Platform over the weekend, and was able to create an app for Portland Diner. Now, members of Facebook’s Portland, ME network (and anyone else, for that matter) can add the Portland Diner app to their profile and check out local restaurant listings right there – which is of course why Facebook created the platform in the first place – to allow developers to create tools that would make the user experience at FB more engaging and – shall we say – “sticky”.

There are a few minor bugs in the CSS – Facebook doesn’t allow linked CSS and rewrites inline sheets placed in the <style> tags – but it seems to work just fine. There are other wrinkles – no javascripts are allowed, and Facebook requires that developers use a subset of HTML called, naturally, FBML. SQL can become FQL and there are some proprietary tags that include an “FB:”.

If you have a Facebook account and live in Portland, Maine, you might find the Portland Diner app useful. Go get it here. We’d love to know what you think; please let us know.

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.