Pemaquid Communications

I surfed over to a certain Maine Web site the other day and found that it had been redesigned. Here is the site navigational structure:

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…

It’s that time of year again, when people take a look back at what they’ve done and take a look ahead. Some, including Yours Truly, still even make New Year’s Resolutions.

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!

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!

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.

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.