Archive for the 'Web Design' Category

Redesign: Maine Health Access Foundation advances health care reform in Maine

Tuesday, July 13th, 2010

A few weeks ago Pemaquid launched a new Web site for the Maine Health Access Foundation (MeHAF). MeHAF advances its mission through three strategic priorities: advancing health care reform in Maine; promoting patient and family-centered care; and strengthening Maine’s health care safety net.

Maine Health Access Foundation
The goal of our redesign project was to help give MeHAF the online tools needed to share knowledge, publicize the work of its grant recipients and strengthen its position as a thought leader on health care issues in Maine.

When MeHAF approached Pemaquid in January of this year, their Web site was not helping them advance their strategy. For several years they had been using a rigid, hard-to-use content management system that had been built using proprietary programming on an ASP.net platform. The system was balky and hard to adjust to meet changing needs. MeHAF staff had a tough time understanding how to manage the CMS, let alone how to use it to communicate quickly and effectively online.

Pemaquid responded by developing a custom version of our Pemaquid Content Manager, built atop the Django framework. We were able to quickly architect a solution that allowed MeHAF to preserve and migrate all the data from their existing site. At the same time, we were able to dramatically improve their ability to self-publish content on the site. Their page templates are much more flexible and search-engine-friendly, so over time we hope to see their search positioning (already relatively good for relevant topics) improve.

With the new Content Manager in place, MeHAF can update every page on their site – and create new ones – in a way that is easy to manage and is search-engine friendly. They can even easily control naming conventions (i.e. “mysite.com/mysection/mypage”). They can update news and events, and can update the contents of a custom library of Resources.

With a little help from graphic artist Arielle Walrath we updated the look and feel of the site to match design elements from their most recent annual report, designed by Portland agency Pennisi & Lamare.

As with all Pemaquid sites, MeHAF.org is built with bulletproof, cross-browser compatible CSS and xHTML and is structured so it’s easily accessible to folks with visual and physical impediments and who use assistive devices to browse the Web.

The solid base we’ve established also puts MeHAF in position to incorporate linkages to their nascent social networking system, and Django’s Open Source framework will allow us to build an online community for sharing health information through an onsite social network/forum, should MeHAF decide to move in that direction.

Whatever they decide to do next and however they choose to approach it online, the Pemaquid Content Manager will give them a platform that allows their site to easily grow and change along with their online communications objectives.

  • Twitter
  • Facebook
  • Digg
  • del.icio.us
  • Google Bookmarks
  • NewsVine
  • StumbleUpon
  • Technorati
  • Tumblr
  • Print this article!

The four kinds of people who build Web sites

Tuesday, July 6th, 2010

After building Web sites for more than a decade now, I can say that when you boil it down there are basically four types of people who build most Web sites. And three of them are not the people you want monkeying with your pixels and data, not because they’re incompetent, but because their professional interests and motivations are at odds with what makes for a great Web site.

I submit for your consideration:

Susie Sunshine (The Graphic Designer) . Susie got into design because she likes to work with colors, fonts, layouts and patterns. Designers like Susie get involved in Web design because all her Clients, for whom she already does brochures, logos, letterhead and other collateral, ask her about Web all the time (this is also how a lot of so-called “full-service” ad agencies fall into Web design work as well).

But Susie and her ilk aren’t usually great coders – in fact, they often have an aversion to it – and let’s face it, that’s not what floats their boats. So she ends up building “Supermodel sites”: they look pretty, but they break a nail or break a heel when asked to do anything athletic (interactive).

For a full-featured interactive Web site, equipped with even a simple content management system, Susie’s not your gal.

Sir Codesalot (The Programmer). Sir Codesalot can write a script to do just about anything. He’ll make your Web site sit up, beg and fetch your slippers in the morning. Content management system? Check. Chron job synchronizing online and offline databases via XML export/import schema? No problem.

But programmers far too often create systems that only other programmers could love. They’re often too complex for most people to use easily, and ignore common workflows. To make matters worse, programmers are not trained as communicators, so you often get cryptic error messages or help text that’s unhelpful because it’s chock full o’ jargon.

Sir Codealot will not slay it when it comes to your site.

P.T. Bar-Nunn (The Search Marketer). Search marketers are really good at convincing their Clients to spend money on all sorts of voodoo that may or may not bring people to a Web site (my 80-20 rule of search marketing is that 80% of the practice is drop-dead simple; but that’s a blog post for another day). Then, P.T.’s Clients pay for a monthly report filled with all kinds of statistical metrics on how well – or poorly – they are performing… and justifying more search marketing.

When it comes to actually architecting a Web site however, many search marketers are mediocre – because their focus is on the marketing, not the build. And the problem with that is that even if your search marketing campaign is successful, you could end up bringing people to A Really Bad Web Site, and that’s kinda like being The Boy Who Cried Wolf. People will come to your site based on the search marketing, but they’ll leave once they get there – and they’ll never return. At that point, your entire search marketing budget will be wasted.

Search marketing should be considered when redesigning your Web site, but don’t treat it the marketing as more important than the site itself.

Mr. Clean (The Interaction Designer). An interaction designer takes the psychology of how people browse the Web into account when building a site. He’ll first try to understand who will be using the site and what task patterns they’ll follow when navigating through it. Then he’ll use the appropriate graphic design and programming to support the needs of people visiting the site. Other architectural issues, like the types of content (news, events, job postings, resource libraries, member directories, meeting minutes, products for sale) will be taken into account to fashion a content management system that’s best for the people visiting the site.

If you want a site that gives people a great user experience (and a great user experience sells products, by the way) then look for an interaction designer like Mr. Clean.

  • Twitter
  • Facebook
  • Digg
  • del.icio.us
  • Google Bookmarks
  • NewsVine
  • StumbleUpon
  • Technorati
  • Tumblr
  • Print this article!

Content Management Systems – a designer’s guide

Wednesday, April 7th, 2010

Last night I gave an overview of content management systems (CMS) in a presentation organized by the Maine chapter of AIGA and held at Wycwah, the coworking space we share at 28 Maple Street. Many thanks to Programs Director Sean Wilkinson for helping with all the arrangements.

The idea was to give designers with limited experience coding a look at some of the many, many different CMS options available, and to touch on a few ways that dynamic content management can affect design decisions.

Plenty of Web design shops have even created their own CMS (Pemaquid has built one that we use both for “standard” as well as e-commerce projects). We’ve recently built one using the Django framework. The bottom line is to understand what’s available and choose the best tool for the job.

Below is a rundown of some of the content management systems that we discussed, as well as a few others worth highlighting.

Get Simple

Lowdown: As the name implies, it’s very simple to set up; no database required (it uses an XML file to store data). A basic template structure (you can alter the HTML/CSS to create new ones). You can only create one kind of page. Open Source.
Good for: Basic sites with limited navigational, content and layout needs.
Sites: Get Simple

WordPress

Lowdown: Easy setup (the “5-minute install” is a claim to fame), plenty of themes that are easy to customize, strong community. Clean admin user interface. Open Source. Perhaps not ideal for custom content needs or interaction design/layout, communities or e-commerce.
Good for: Blogging, subject matter experts, search engine optimization around a topic
Sites: TechCrunch, Scobelizer, Zeldman.com

Concrete 5

Lowdown: A little tougher to install than WordPress; it has a WYSIWIG interface for editing pages; chunks of content can easily be dragged from one column to another. Small developer community; many add-ons must be purchased.
Good for: Simple editing interface is great for non-technical administrators; a good option for lightweight content management needs on sites that may have high page counts.
Sites: Bigelow Laboratory, Kodiak Staff

Joomla

Lowdown: Easy setup (some hosts have a one-click install for it), lots of easy-to-customize themes, more available modules (”extensions”) for managing different types of content. Can be somewhat challenging to create custom extensions for a specific user experience. Admin interface not completely intuitive to novice or non-technical users. Open Source.
Good for: Projects with modest budgets and that don’t require a lot of customization or have specific content needs.
Sites: Maine Marketing Association, Guggenheim

Expression Engine

Lowdown:Feature-rich. Allows page-by-page customization of templates and layout. Core is free, but to obtain many extensions you must pay a $99 licensing fee, and a license for commercial projects is $249. Clean admin interface but unusual lingo (”Weblog”)
Good for: Personal sites for Web design professionals and those with heavy weight on visual design.
Sites: Stuff and Nonsense, Jason Santa Maria

Drupal

Lowdown: Strong developer community. Extensive collection of modules for most content management needs. Supports members-only communities. Plenty of themes, or make your own. WYSIWYG admin user interface for managing pages can be complex and challenging for non-technical or occasional admins to master; admin workflow can be difficult to learn. Interaction design can be time-consuming to customize for a specific user experience.
Good for: High-traffic sites, membership management, online publishing
Sites: Technology Association of Maine, Healthcare IT News,

Django

Lowdown: All right, technically Django is a framework, not a CMS. What’s that mean? A framework is something you use to build a CMS. Django’s framework provides the best performance of all (faster than Ruby on Rails) and it’s code is very modular and flexible: developers can create new modules easily in one section while designers create templates in another, and modules can be “plugged in”. It’s what we currently use at Pemaquid to quickly build custom content management solutions that don’t compromise the look and feel. Open Source.
Good for: high-traffic/high-content sites, online publishing, Web applications, social networks, rapid development of custom content management solutions.
Sites: The Washington Post, Flyfi, Lawrence Journal-World & News (they created it).

  • Twitter
  • Facebook
  • Digg
  • del.icio.us
  • Google Bookmarks
  • NewsVine
  • StumbleUpon
  • Technorati
  • Tumblr
  • Print this article!

The Usual Suspects

Tuesday, April 6th, 2010

Usual Suspects

Have Clients asked you about the Usual Suspects yet? You know, WordPress, Drupal and Joomla. If not, they will. When it comes to choosing a content management system, most people have heard of these options. They are backed by large, devoted developer communities.

But when it comes to managing the content on your site, there are a lot of options out there.

Tonight from 6-8pm at Wycwah, our coworking space at 28 Maple Street in Portland, I’ll be giving a presentation on a variety of “CMS’s”, geared towards visual designers with an eye towards how a CMS affects the visual design of a Web site interface?

In addition to the Usual Suspects, we’ll take ExpressionEngine, Concrete 5, GetSimple and Squarespace for a spin.

We’ll also take a look at a CMS Pemaquid has built on the Django platform.

This event is brought to you by the AIGA Maine.

Register in advance for $5 or bring $10 to the door. Free gourmet pizza provided graciously by Portland Pie.

  • Twitter
  • Facebook
  • Digg
  • del.icio.us
  • Google Bookmarks
  • NewsVine
  • StumbleUpon
  • Technorati
  • Tumblr
  • Print this article!

Presenting: Wycwah

Tuesday, April 6th, 2010

Wycwah

Last week Pemaquid launched a new site for Wycwah, the coworking space we share at 28 Maple Street.

www.wycwah.com

What the heck does “Wycwah” mean? An ancient Abenaki word for “coworking”? Was it the only domain name available? Nah. But you’ll have to ask us in person sometime to get the lowdown on it.

The site is a simple construction built on the Django framework. Over time, we coworkers will be using it as a learning device as well as a source of information about our space.

The beautiful logo was designed by our friend and Wycwah member Keith Sirois; interface production and Django configuration was done by yours truly.

  • Twitter
  • Facebook
  • Digg
  • del.icio.us
  • Google Bookmarks
  • NewsVine
  • StumbleUpon
  • Technorati
  • Tumblr
  • Print this article!

IE6 users are (still) people too

Tuesday, January 19th, 2010

Internet Explorer 6

There’s no question that Internet Explorer 6 has replaced Netscape 4 as the most reviled browser known to Web development. Just do a quick real-time search to see how Web designers feel.

There’s a lot not to like. To name just a few short-comings:

  • It doesn’t render the transparency of Portable Network Graphics (*.PNG files) properly, requiring a browser-specific filter
  • It doesn’t render a lot of the latest CSS declarations

(I could go on and on, but why relive the agony?)

This means that Web designers need to invest extra time making sure IE6 renders their creations properly, and that makes us, um… cranky, and rightly so.

Internet Explorer 6 after a Web designer drive-by

Some designers actually seem to be personally offended by people who use IE6, and want to force them to switch browsers by denying them access to their Web sites if they use IE6.

This approach is miguided and does not take into account the fact that many people cannot upgrade because they access the Web from corporate IT environments that only support IE6.

Other designers are bewildered that some people would continue to use IE6 when other options exist. The reason has to do with usability, and is best characterized by the phrase “if-it-ain’t-broke-don’t-fix-it”. In other words, people who use IE6, many of whom are non-technical, get along just fine, thank you, sending email and surfing and purchasing with adequate security. These folks have no incentive to switch.

It’s hard to get angry with people for that.

Designer Andy Clarke recently considered the options regarding the IE6 question and proposed a Universal Internet Explorer 6 CSS file as a solution. Basically, Clarke, says, serve up a plain jane style sheet that allows folks with IE6 to view a Web page’s content, but conveys the message that their browser is not up to par in terms of rendering its layout.

Some top flight designers have adopted this approach, as Jina Bolton did recently when she redesigned her personal site, Sushi and Robots. UIE6 has popped up on a couple of sites here in the Portland area as well.

So, has the time come to employ the Universal Internet Explorer 6 CSS more routinely? The answer depends on the audience for your site as well as its content.

A quick spot check of W3Schools browser stats suggests that roughly 10% of all Internet users view it through IE6 (about 4% of the visitors to this site use IE6).

If your site caters to the general public and traffic analytics show one in ten visitors are using IE6, I’d say the time has not yet come for you to switch. You’re still better off employing progressive enhancement techniques in your CSS to serve up a design that still looks sharp, if not a pixel-perfect clone of what’s seen in other browsers.

If 4% or less are using IE6, and you’re not conducting any e-commerce, I’d say you’re safe giving UIE6 CSS a spin.

But if you do use UIE6 CSS, make sure you check to see that things are rendering properly. Sometimes goodies like jQuery, bereft of the CSS used in other browsers, leave the interface looking a little messy and content unreadable. Yep, I’ve seen that on at least one local site-that-shall-remain-nameless.

Remember, IE6 users are people too. They deserve a great (if not pixel-perfect) user experience like everybody else.

Next week we’ll be talking about Pemaquid’s current approach to handling CSS for IE6.

Have any of you out there used UIE6 CSS? Let us know how in the comments.

  • Twitter
  • Facebook
  • Digg
  • del.icio.us
  • Google Bookmarks
  • NewsVine
  • StumbleUpon
  • Technorati
  • Tumblr
  • Print this article!

CSS3, Web fonts and Typekit

Wednesday, November 18th, 2009

It’s getting easier and easier for designers to make use of a wide variety of fonts in their Web projects. This is due to advances in CSS3, including the @font-face declaration, which in turn has led to the development of Typekit, a font “broker” of sorts.

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:

  • Twitter
  • Facebook
  • Digg
  • del.icio.us
  • Google Bookmarks
  • NewsVine
  • StumbleUpon
  • Technorati
  • Tumblr
  • Print this article!

Web Developer sought

Friday, October 30th, 2009

CONTRACT WEB DEVELOPER

Pemaquid Communications seeks a Web developer to assist us with upcoming work on a project-by-project basis. Proficiency in Python and the Django framework is preferred, although expertise in Rails or PHP frameworks is also good. Experience architecting and building custom content management systems is desirable.

Please send a technical resume along with links to working Web sites we can review to:

work@pemaquid.com

Thanks for your help. Rock on….

Rob Landry
Founder/Principal/Chief Bottle Washer
Pemaquid Communications
W http://www.pemaquid.com
FB: http://www.facebook.com/pemaquid
T: http://twitter.com/pemaquid

  • Twitter
  • Facebook
  • Digg
  • del.icio.us
  • Google Bookmarks
  • NewsVine
  • StumbleUpon
  • Technorati
  • Tumblr
  • Print this article!

Social networking IRL comes to 28 Maple this evening

Wednesday, August 26th, 2009

Interaction Design Association

We’ve been looking for ways to make use of our coworking space at 28 Maple that will advance the cause of digital creatives in our fair city, and tonight, from 6 – 8pm, we’ll host our first-ever evening mixer.

The event will feature a presentation by Kevin Silver on interaction design and agile development. Silver is a UX Designer at Tyler Technologies in Falmouth, Maine and he’s on the Interaction Design Association (IxDA) board of directors.

The gathering was organized by Benjamin Ho and Susan Doran, who have reorganized the local MaineUX interaction design group as the Portland, Maine chapter of IxDA (@maineixda).

Vittles will be provided free of charge by Portland Pie – and you’ll be able to wet your whistle with beer or wine. So slowly… slowly back away from the Facebook and the Twitter and come do some real life social networking with other like-minded creative types.

About Kevin Silver

Kevin is an empathetic champion of the end user and has been involved in designing the behavior of digital products since 1995. He has worked on a diverse range of projects for the government, software companies and many nationally recognized brands providing strategic direction and interaction design goodness. As a passionate advocate for Interaction Design, Kevin led the charge in forming an IxDA local group in New Mexico and is currently on the IxDA Global Board of Directors. In his role on the IxDA Board, Kevin oversees more than 80 IxDA local groups from around the world. Currently he is UX Designer at Tyler Technologies working to deliver the next generation of financial software for local governments and municipalities.

About IxDA

The IxDA Manifesto: We believe that the human condition is increasingly challenged by poor experiences. IxDA intends to improve the human condition by advancing the discipline of Interaction Design. To do this, we foster a community of people that choose to come together to support this intention. IxDA relies on individual initiative, contribution, sharing and self-organization as the primary means for us to achieve our goals.

  • Twitter
  • Facebook
  • Digg
  • del.icio.us
  • Google Bookmarks
  • NewsVine
  • StumbleUpon
  • Technorati
  • Tumblr
  • Print this article!

Web design advice for Jordan

Monday, June 29th, 2009

Jordan Warren

Last week we asked other Maine Web designers to Twitter some words of advice for our intern, Jordan Warren. What we got was good advice for any Web designer at any level. A sampling:

Wendy Clark@wending (Senior Web Designer at MaineToday) – “Occasionally leave the computer for your education and inspiration. Visit the PMA or local galleries once a month.”

Tim Shackleford@fiveleafdesign – “Always be learning, test early and often, and surround yourself with people smarter than you. You’ll learn alot.”

Dan St. Peter@danstpeter – “Listen to and learn from the experts you meet. Study http://www.smashingmagazine.com and other great online resources.”

Maggi Blue@magpiecreative – “Don’t over think it…it only gets you in trouble.” (Don’t overthink, Jordan, but please do think.)

Ellen Kanner@ellenkanner (Kanner Kreative) – “Firebug plugin for FireFox. period.” (We got her squared away with that on day one, Ellen!)

Calvin Gilbert@calvingilbert – “Create libraries of frequently used code snippets and site templates… and listen to Rob.” (Listen to Rob? Smart man, that Calvin.)

You can find all these “tweets of advice” on Twitter, tagged as #4Jordan. Thanks to the folks above for taking the time to share insights based on their experiences.

So what advice do you have for Jordan? If you’re a Web designer here in Maine, we’d love a quick comment. No matter how insignificant you think it might be, it’s a gold mine of knowledge for her. Help her get better, faster.

She’d love to hear from you.

  • Twitter
  • Facebook
  • Digg
  • del.icio.us
  • Google Bookmarks
  • NewsVine
  • StumbleUpon
  • Technorati
  • Tumblr
  • Print this article!

Pemaquid garners 3 Best of the Web nominations

Friday, May 29th, 2009

Yesterday techMaine, the Technology Association of Maine, announced finalists for its Best of the Web awards, and Pemaquid has won three nominations, more than any other Web design studio. In the past three years, seven Pemaquid sites have been nominated for Best of the Web, also more than any other studio by our count.

The nominees are….

Eastern Book Company
http://www.ebc.com
Best Corporate Image
More Eastern Book

Maine Merchants Association
http://www.mainemerchants.org
Best Non-profit Web site
More Maine Merchants

Bluezberry Jam
http://www.bluezberryjam.com
Best Arts & Entertainment Web site
More Bluezberry

Another Pemaquid site, OakhurstDairy.com, was submitted in the Best Corporate Image category, but was not named a finalist.

Winners will be announced at the techMaine 2009 Technology Awards Gala June 2, to be held at the Eastland Park Hotel.

  • Twitter
  • Facebook
  • Digg
  • del.icio.us
  • Google Bookmarks
  • NewsVine
  • StumbleUpon
  • Technorati
  • Tumblr
  • Print this article!

Pemaquid’s First Intern

Thursday, May 21st, 2009

Jordan Warren

My name is Jordan Warren, and I am a Business Major with a Computer Science Minor at the University of Southern Maine. I am very interested in Usability, Website Design, and Information Systems Management. I am the very first intern taken on by Portland Web design studio Pemaquid Communications.

As I started looking for internships, I was finding that most of those available are either all on the business side of things or too technical for my current set of skills.

Then Pemaquid’s principal, Rob Landry, came to speak at my e-commerce class, and everything he had to say about his own company was what I was interested in, and he seemed fun and enthusiastic about his career, so I did the brave thing and asked if he would like to have an intern, and we found a way to make it work.

Having never entered into an internship, I had only my own assumptions and friends’ stories to go on as to what it would be like. Having an employer who has never had an intern has added an interesting twist on things as far as I can tell.

Rob has gone out of his way to make sure I feel welcome at the office and has gone above and beyond to make sure I start out with the right tools and knowledge so we can both benefit from this partnership. Sheila Reiser, the Creative Services Coordinator, has been just as helpful, and is as excited to learn as I am.

Pemaquid is a unique environment and because of that I think I will gain more from this experience than I would have from a company that “knows what they’re doing” when it comes to interns. I told the folks at Pemaquid that I wouldn’t mind fetching coffee for them, but I don’t think I’ll be doing much of that.

The experience is much more like school than I expected, so far, but in a good way. Rob is so eager to share his knowledge and we have discussed the things I am most interested in learning. From there, he has offered books for me to read, and websites to look over, we are even starting a delicious account for Pemaquid that will include all our favorite sites for other to use to help them find what they are looking for.

It is also a lot more technical than I thought I would be able to find for an internship. I expected to end up in an office somewhere, filing, but instead I get to learn more about HTML and CSS and eventually help on some projects at Pemaquid.

I am so lucky to have landed this opportunity to learn and make connections throughout the Portland area in the process. I don’t think there is any way I can learn all that the people at Pemaquid could teach me in a single summer but it will definitely be a most worthwhile experience.

  • Twitter
  • Facebook
  • Digg
  • del.icio.us
  • Google Bookmarks
  • NewsVine
  • StumbleUpon
  • Technorati
  • Tumblr
  • Print this article!

HTML5 – A Look Ahead

Tuesday, May 19th, 2009

Lately I have been hearing more about HTML5, so recently I decided to dive in and figure out what it all means. This led to a presentation last night to the techMaine Web Designers User Group.

It’ll be awhile

Bottom line: HTML4 and xHTML will be with us for a long time to come. The HTML5 spec is still a work in progress and browsers still don’t render a lot of the new tags. Still, the possibilities are interesting.

The Takeaway

HTML5 will provide better cross-browser support for Web apps (not just documents like PDFs). Look for mobile devices to make use of the new spec first.

Resources

Presentation

  • Twitter
  • Facebook
  • Digg
  • del.icio.us
  • Google Bookmarks
  • NewsVine
  • StumbleUpon
  • Technorati
  • Tumblr
  • Print this article!

Reading List for Web Design Interns

Thursday, May 14th, 2009

If you’ve been following our tweets @pemaquid (you *have* been following our tweets, haven’t you?) you know that our first intern, Jordan Warren, began working with us last week. You also know that we’ve tweeted a couple of the books I’ve recommended to her from our library.

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 ThinkSteve Krug. Steve shows how people surf the Web, and that should affect how you build Web sites

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

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

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

Transcending CSS: The Fine Art of Web DesignAndy 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 AsylumAlan Cooper. Explains why you want an Interaction Designer – not a programmer or a graphic designer – to build your Web site.

Designing Web UsabilityJakob Nielsen. An oldie but goodie. How to make Web sites easy to use.

Defensive Design for the Web37 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.

  • Twitter
  • Facebook
  • Digg
  • del.icio.us
  • Google Bookmarks
  • NewsVine
  • StumbleUpon
  • Technorati
  • Tumblr
  • Print this article!

Maine Hospitals’ Swine Flu notices and Web site usability

Thursday, April 30th, 2009

Yesterday, as the first cases of swine flu were reported in Maine, one of our Clients, Parkview Adventist Medical Center, contacted us to put a special notice about the outbreak on their Web site, as the number of phone inquiries started to skyrocket.

We handled it by putting a “pushdown” on their home page, which linked to a page with more information on swine flu in Maine. This is a common Web design technique employed by media sites such as CNN and MaineToday.com, in which you push down the normal content/layout and insert a call out on your breaking news.

Our goals in designing our swine flu notice for Parkview were to make it:

  • easily noticeable, without wrecking the layout or conveying an undue sense of alarm
  • easily updatable
  • accessible to visually challenged site visitors

I decided to take a tour of other hospital Web sites in Maine to see how they were handling things. Here are screenshots, taken at 4pm today, of five Maine hospital home pages:

Parkview Adventist Medical Center

Maine Medical Center

Mercy Hospital

Central Maine Medical Center

Midcoast Hospital

What I found provided what I think are teachable moments on two subjects: Web site usability and content management.

Usability

When people search Web sites for information on “swine flu”, they are scanning for text links that say, um, “swine flu”. That’s the reason we used text in the Parkview notice and made the words “swine flu” the link to the page with additional information. As of this writing, Maine Medical Center and Mercy Hospital use text. At Central Maine Medical Center and Midcoast Hospital, they use graphics containing text.

Text in a graphic is not the same as HTML text. A proven characteristic of human behavior, banner blindness, demonstrates that people see HTML text more quickly than text in graphics. People tend to ignore graphics, in part because they are reading/scanning and in part because graphics are commonly used to display advertisements (that are usually irrelevant to the information they seek).

It’s interesting to note that both CMMC and Midcoast used a picture of someone blowing their nose. While well-intentioned, IMHO this creates mental static because such a picture could mean “common cold”, “runny nose” or even “handkerchief” and not necessarily “swine flu”.

Granted, in this case the difference is subtle, but think about your own user experience on these sites (we’d be interested in your comments).

Takeaway: If you want someone to read something, make it text.

Content Management

The layout of each of the swine flu notices give us clues as to how each hospital manages content.

Maine Medical Center – I’m almost certain they use a dynamic CMS to post News updates to the center column of the home page. I’m guessing they may have wanted to feature a swine flu notice in the Flash “marquee” (”Maine Medical Center: Centered Around You”) – and they may still do this, but the Flash is probably not part of the site’s CMS, is probably not easily updateable (and incidentally would not likely be accessible to the visually challenged).

Mercy Hospital - Again, I’m almost certain they use a CMS to update the “What’s Happening” section in the center column of the home page. I’m also fairly sure this CMS limits how prominently staff can display special notices. “Swine Flu” heading has the same color and visual weight as other sub headings in this section.

Central Maine Medical Center and Midcoast Hospital – both very likely use either a staff Web designer or contractor to create banner graphics as needed.

As we’ve mentioned, for Parkview our staff manually creates HTML pushdowns for special notices like this. At some point – for Parkview and for other Clients – it would be nice to add this feature to our custom CMS, the Pemaquid Content Manager. In the meantime, our manual updates are quick and inexpensive.

Takeaway – Content Management Systems should not impede your ability to make appropriate layout decisions. CMS’s do only what they are designed to do. If they are not designed to effectively communicate things like special notices, make sure you have access to a Web designer who can get the job done (that statement is not a back-handed criticism of the designers at other hospitals).

What do you think?

  • Twitter
  • Facebook
  • Digg
  • del.icio.us
  • Google Bookmarks
  • NewsVine
  • StumbleUpon
  • Technorati
  • Tumblr
  • Print this article!

Understand your brand before you promote it

Wednesday, April 29th, 2009

The other day I was talking to someone I know well at a Web consulting firm that had recently launched a new Web site. My eyebrows went up when I heard this:

…[we] are still working through the logo design/branding process…

This sort of thing gets people into trouble all the time. Putting the Web site out and distributing your brand message before you’ve thought things through is like putting the cart before the horse.

If you don’t clearly understand what you’re all about, and don’t convey that clearly through your logo mark (and indeed through everything you do), you can’t expect anyone else to figure you out.

One way we help Clients think through their branding is by developing a Creative Brief early in the design process, before we do any design or coding. The brief identifies things like target audiences and communication themes and guides the Web design team as we create a site.

To build a building, use a blueprint. To build a brand, make sure you understand what you’re about.

Incidentally, Pemaquid is going through this process as we speak…

  • Twitter
  • Facebook
  • Digg
  • del.icio.us
  • Google Bookmarks
  • NewsVine
  • StumbleUpon
  • Technorati
  • Tumblr
  • Print this article!

CSS Naked Day (no, there’s nothing wrong w/our code)

Thursday, April 9th, 2009

CSS Naked Day

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.

  • Twitter
  • Facebook
  • Digg
  • del.icio.us
  • Google Bookmarks
  • NewsVine
  • StumbleUpon
  • Technorati
  • Tumblr
  • Print this article!

Eastern Book Company helps libraries acquire books

Thursday, March 26th, 2009

Eastern Book Company

Pemaquid recently launched a brand new Web site for Eastern Book Company, a firm located in Westbrook, Maine that provides book acquisition services to libraries worldwide. Librarians place thousands of orders through the site each month.

EBC, run by brothers Dick and Steve Coyne, had decided that the time was right for a makeover. We had a few major objectives.

The Goals

Present a more professional image. Though the EBC Web site was fully functional and getting the job done, Dick Coyne wanted a polished look and feel that would present a first class image to customers (and more importantly, potential customers). The look developed by Pemaquid tied in with a rebranding developed by a local marketing firm and amplified it.

Improve the user experience. EBC strives to provide the best customer service in the book acquisitions industry. Pemaquid provided better views into the status of orders, book claims and especially book searching and sorting.

Content Management. We plugged in a custom version of the Pemaquid Content Manager to allow EBC to self-publish content to the home page and to create booklists and publish news.

Custom RSS feeds. EBC wanted to create custom RSS feeds for their booklists that would allow customers to easily get updates, via a feedreader, of booklist topics of interest to them.

The Technology

Yahoo User Interface. We used “YUI”, as it’s known, to provide AJAX sorting of book search results and shopping cart data. This reduced overhead as fewer calls to the server were needed for customers to navigate recordsets.

Ingres database. EBC maintains millions of book titles in Ingres (the-Open-Source-database-that’s-not-mySQL). We had to tie into that existing system, which we did using PHP.

mySQL database. The Pemaquid Content Manager was built for mySQL; any information not related to book ordering runs through this database.

The Team

In order of appearance…

Jamie Peloquin, Web Designer – Jamie took the EBC brand and created the look and feel.

Jen Ecker, Web Designer (Pixel Surgeon) – Jen was the one primarily responsible for taking Jamie’s design comps and turning them into XHTML and CSS. She added a dash of iconography along the way as well.

Sarah Hines, Web Design/Air Traffic Control – Sarah chipped in with project management and a little HTML coding here and there.

Jeff Norris, Web Developer – Jeff was the one who deciphered Ingres (this was our first Ingres project) and wired in the YUI grids and PHP scripting to talk to it.

Robert Brochu, Graphic Designer – Robert created a few graphics to add the finishing touches to booklistings towards the end of the project.

Rob Landry (Yours Truly), Chief Bottle Washer, Cat Shepherd – I did the business requirements analysis, information architecture, and installed the customized Pemaquid Content Manager and chipped in on the XHTML/CSS, as I usually do. Since it’s my business, I also get to do a lot of project management too (don’t envy me all at once, now).

The Future

The response from EBC customers on the new site has been overwhelmingly positive. I say: Good Start.

We’re currently developing an online marketing plan for Eastern Book which will include Twitter and possibly other social networks where appropriate, and we’re continuing to refine the the user experience based on customer feedback.

  • Twitter
  • Facebook
  • Digg
  • del.icio.us
  • Google Bookmarks
  • NewsVine
  • StumbleUpon
  • Technorati
  • Tumblr
  • Print this article!

Lessons Learned: Adventures in Web design

Monday, March 23rd, 2009

Recently Pemaquid Communications launched a redesigned Web site for Eastern Book Company, a firm in Westbrook, Maine that offers book acquisition services to libraries worldwide.

The launch was successful, and the site has been well received by both EBC and its customers. But the project was not without its share of bumps and bruises. Here are some things we learned along the way.

Never underestimate the time it will take to learn new technology.

EBC uses Ingres as its main product and ordering database. Like mySQL, Ingres is Open Source, but it’s far less common. It also uses a slightly different syntax than the more familiar mySQL. This was Pemaquid’s first Ingres project.

Having worked with SQL Server and even a dash of Oracle, I figured it wouldn’t be too long before I had Ingres doing my bidding. I thought wrong, sports fans. As I should have known, when working with new technology, plug a substantial fear factor into your plans.

If at all possible, have one designer “own” the entire Design Concept

I charged one designer with creating the concept for the EBC site, based on site navigation and wire frames I developed. I have to say it came off beautifully (many thanks to Jamie Peloquin). Then (mainly due to delays in development) I relied on a couple other hired guns to add some icons and graphics to rounds things out, and I added my own touches in a few spots. The results were a little underwhelming.

Don’t get me wrong. There’s nothing tragically hideous about the site. It’s just that every designer plays their own brand of rock and roll, and that affects the overall cohesiveness of the look and feel. That’s true of the EBC site, and there were times when we could have paid a little more attention to details (we’ll be sprucing things up a bit over time).

If possible, make sure you don’t switch horses midstream when it comes to the design.

DIY can get you DOA

I’ve always been a Do-It-Yourself kind of guy. Probably because I can’t wait for someone else to do the job, and because my Inner Control Freak usually holds sway.

In the case of EBC, I figured, what’s a little Ingres database? It’s gotta be just like mySQL, right? Um, not quite right. Wrestling with the Ingres database and the particular dialect of SQL that it speaks led to delays. I should have brought in Jeff Norris, my database gun, much earlier in the game.

Know what you know, know what you don’t know, and trust that your Web slinger friends will help you get the job done right.

  • Twitter
  • Facebook
  • Digg
  • del.icio.us
  • Google Bookmarks
  • NewsVine
  • StumbleUpon
  • Technorati
  • Tumblr
  • Print this article!

This content deserves better

Tuesday, March 17th, 2009

it’s been said that the goal of good design, layout and typography is to honor content. I believe that an excellent Web design concept lends credence to what’s being written.

In some ways, a Web site is like a garden. After its built, if not carefully managed, the “weeds” start popping up and things can get a little overgrown. This site is no exception.

I’m proud of this site, but this site needs some adjustments, to keep up w/t/latest design techniques but more importantly to allow me to more easily do the things I’d like to do.

For example, on this blog you can’t easily highlight code snippets. That means more time is needed to style things any time you want to write about code, and that’s not a best practice.

So…time to weed the garden… or maybe even rototill it. Stay tuned.

Update: Created a style for highlighting code:

<script type="text/javascript" src=""> </script>
<script type="text/javascript" src=""> </script>
<script type="text/javascript" src=""> </script>
<script type="text/javascript" src=""> </script>
  • Twitter
  • Facebook
  • Digg
  • del.icio.us
  • Google Bookmarks
  • NewsVine
  • StumbleUpon
  • Technorati
  • Tumblr
  • Print this article!