Pemaquid Communications

As all good Web designers know, Web sites should be set up so that if a visitor gets air dropped on any page they can easily answer three essential questions:

1. Where the @#$% am I?
2. Where can I go from here?
3. WTF can I do here?

(OK, some people won’t ask those questions in precisely the same tone… unless of course your Web site layout is 404 (”not found”).

Your Web site branding and navigation addresses the first two questions. It should be consistently placed on every single page on your site. In addition, if you have a page in your navigation called “About”, when your site visitor clicks that link they should be taken to a page entitled “About”, not “About Us” and certainly not “Our Company Mission” (I see stuff like this all the time).

That causes people to stop and think – and you don’t want them to do that, you want them to concentrate on reading stuff and buying stuff.

The last question is answered by clearly showing the content. Good Web copywriting is essential here. Use those bullet points, sub headings and “chunkify” the content (as someone I once worked with might have said).

The quicker a site visitor can answer these questions, the better the usability of your site. This is especially important when a search engine drop-ships a person deep into the nether reaches of your site, on a page that’s light years from the home page.

Remember, no amount of search engine marketing will make your site “sticky”. If your marvelous search engine marketing guru manages to bring people to your site – but it’s a Really Bad Web Site, one that’s confusing and hard to get around on – people will go away, and even a gigantic stimulus package of SEO dollars won’t be able to entice them to come back.

Conversely, a well-designed, usable, accessible Web site for a company that offers great products and great service will perform fine without a boatload of SEO.

I’ve been tooling around the Internet for the last few days and I’ve noticed that one thing hasn’t changed much in the last ten years: Web sites are almost always accessible, or well-designed, but hardly ever both.

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.

Late last week I surfed on over to the newly-redesigned site of a high powered Web design firm whose personnel I respect. I took a look under the hood.

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.

Remember a couple of weeks ago when an office building in Yarmouth was totally destroyed by fire? It left a couple dozen business people without a ‘place of business’; my hairstylist Wanda, who works at Top Cuts, was one of them.

Coincidentally, I got my hair trimmed the day before the fire. Talk about cutting it close (pun intended).

The day after the fire, Wanda called me and asked me to tell her the date of my next cut (it was Feb. 6, this past Friday). Her appointment calendar had gone up in smoke along with everything else in the fire, and she (and all the other stylists) had lost all their records.

I solved her problem by telling her about Google Calendar (take a tour). With “gCal”, keeping appointments up-to-date is a snap, and since they’re online (out there ‘on the cloud’, as it were) they’re safe from nuclear attack as well as fire (that was the original idea behind the Internet, you’ll recall).

Google Calendar lets you easily reset appointments without crossing things out or smudging erasures, as with a physical datebook. You can do things a datebook made out of dead trees can’t, like email an appointment confirmation or automatically send a reminder by email or text message the day before.

A Google Calendar for a business like a salon can be kept private, and if there are multiple stylists involved, each can have her own schedule that’s color-coded.

When I got my ears lowered again this Friday I followed up with Wanda (Top Cuts is temporarily sharing space with Studio 88, another Yarmouth salon) and she likes the idea. First thing’s first, though – they need to get a computer and wireless Internet access before they can put Google Calendar to work. Stay tuned…

This post is long overdue. But you know what they say – better late than never.

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!

Last night I released a new Facebook app for my band, Bluezberry Jam.

It’s a nifty little jukebox of sorts. You can play original songs from our upcoming album and add your favorite to a box on your Facebook profile, where your friends can play your fav, click back to the app, listen to our tunes, add it to their profile, where their friends can see it…

Devious, isn’t it?

It’s very similar to an app we launched last year for another local band, Lost on Liftoff. These are great little street-level tools for building buzz around an album launch.

Pemaquid also hosts both BluezberryJam.com and LostOnLiftoff.com, and both bands use the Pemaquid Content Manager to self-publish site updates.

On Monday night I had the opportunity to meet Eric Meyer, one of the foremost experts on CSS. I asked him just exactly how he came to be “one of the foremost experts on CSS”. Here, according to Eric, are the essential ingredients of his success:

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?

Last night I trekked down to Salem, Mass, with Wendy Clark to a special meeting of the Build Gulld, a fun-loving group of Boston area Web slingers.

The meeting was special for two reasons: it featured the revival of another group of Web designers, the Markup & Style Society, founded by Dan Cederholm and Ethan Marcotte (members of the M&SS were on hand), and CSS wiz Eric Meyer, who had blown into town to meet with some East Coast Clients, was on hand.

How did I find out about this? Twitter, baby (if you’re not following people in your sphere on Twitter, you are missing out).

I got to reconnect w/Josh Porter of Bokardo, whom I’d met at SXSW and who works out of the North Shore area.

My real reason for going was not so that I could write up a nifty blog post and drop names (really). It was because I think Portland needs a group like this. Sure, there are Tweetups and Maine UX is a great group for all things relating to usability, but I think there’s still room for a group devoted to discussing the latest trends in Web design – and imbibing good ale.

I talked to several of the founders of these groups on their experiences and fortunately starting an interest group is not rocket science, it just takes “interest”. Free beer doesn’t hurt, either (libations were on the house last night).

Patrick Haney (Refresh Boston) – “The people were out there. They just needed a place to come together. We created that. We joined about 30 other Refresh groups located in cities across the country.”

Dan Cederholm (Markup & Style Society) – “You just get together with people who share a common interest, do it regularly, and eventually others find out about it and it grows.”

Folks said the interest groups usually start out their meetings with a 15-30 minute presentation, often by one of the members, about a hot topic. Then, social networking in meat-space takes place. Only rarely does a saloon-style brawl break out.

The organizers I spoke with said one of their biggest problems nowadays is finding a place to meet that will hold all the people who attend. I naively expected last night’s meetup to be a fairly intimate gathering of 30-40; yeah, no, it was more like 120 people.

Boy, wouldn’t that be nice here? I’d settle for a group of 5 or 6.

What do you think, Portland? Can we do it? Do I hear “Ayuh”?

A little while ago I said I’d start posting some reviews of good content management systems. Many of you are familiar w/t/Usual Suspects – WordPress, Drupal and Joomla – so I thought I’d start w/a review of something you may not have heard of: Django.

Django was developed by The World Company as a CMS for the Lawrence Journal-World, the newspaper in Lawrence, Kansas. It was developed for the fast-paced, high-traffic news environment and was designed to make it easy to set up and easy to plug/unplug various modules (”apps” or “models” as they are known in Django-lingo).

Incidentally, it was named after jazz guitarist Django Rheinhardt. As a musician myself, I appreciate that.

Django is Open Source. It has been released under a BSD license.

Nifty. But all of you who are looking for a 5-minute install FTW will be sadly disappointed. Django installs are not for the faint of heart. Unlike the Usual Suspects, which are written in PHP, Django was written in Python. It also requires some server administration skills to configure. Fortunately, there are some hosting providers who specialize in Django.

Though it can be a challenge to set up initially, once configured Django is designed so that you can very rapidly plug in different chunks of some pretty sophisticated interactive goodness depending on your needs.

The idea is that you don’t want to be reinventing the wheel for content management with every site. This is known as the DRY Principle.

With a basic, rock solid Django framework in place, Web designers and developers can focus on the fun stuff – a custom look and feel, CSS and extensions to Django’s core functionality.

Django’s great for big sites that need things like member management(w/varying access privileges), events calendars, e-commerce and job applications. In other words, for sites that need more than the simple blog-based content management WordPress provides.

Here’s the lowdown:

Pro

Solid modular code – you don’t have to reinvent the wheel or rewrite most of the bedrock code you’ll need for most sites. You can concentrate on customization. There are models for e-commerce, Google Calendar – you name it.

Speedy setup - no, it’s won’t be speedy the first time you do it. But once you’ve got the knack, it’ll be a breeze.

Plays nice w/Google – Python, Django’s bedrock language, is one of the three “official” languages supported by Google. You can run Django and Python on the Google App Engine – meaning apps you develop will scale easily while they hum along on Google AE’s servers.

Open Source – No licensing fees to obtain, and the codebase is supported by a large – and growing – developer community

Con

Python – Just when you thought you had learned all the code you needed to rule the Web (*sigh*). Once you learn it, however, Python is a “pro” and not a “con”.

Server Administration Skills required – Can you say “shell access”? There, I knew you could. Get ready to cuddle up w/your favorite Terminal app.

Maine Sites Running Django

Flyfi.com – Portland-based, a social-ly, musical-ly site. Formerly Goombah and run by Emergent Music.

Maine College of Art – an application for applying online.

Southern Maine Community College – a personalized information request form.

Django Links

Django Project – documentation, tutorials… and your gateway to the developer community.

Django for non-programmers – Jeff Croft has a great post on the benefits of Django for front-end designers.

Django – Google Code – If you need help, here’s one good place to look.

Django Facebook Group (requires FB Profile) – here’s another good place to look for help, if you’re on Facebook (and everyone’s on FB now, right?)

Django pluggables – apps you can plug into your Django project.

Have you tried the Django tango? What are your thoughts?