Pemaquid Communications

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.

Thanks to all who attended my presentation on CSS last night for techMaine‘s Web Design User’s Group. No one threw rotten vegetables or experienced a bout of narcolepsy, which I took to be a good sign.

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

We’ve pushed live a new feature in the Pemaquid Content Manager, Pemaquid’s content management system, that allows easier, more flexible sorting.

In the navigation bar for certain content modules, like home page Promos, you’ll see a subnav item called Sort. Click on the link and you’ll go to an interface where you can sort simply by dragging your items to the desired position.

Modules that allow sorting this way include: Promos, Staff Directory, Resources and ad hoc Content. New Content Manager Clients will be able to sort their content this way immediately; existing Clients may need to contact us for a quick adjustment to their Resources and Content.

Enjoy!

Come on down to techMaine‘s Web Designers Users Group meeting October 20 @ 6pm to hear Jen and me sound off on CSS and why it’s a smart way to build Web sites. We’re trying to decide how much advanced CSS sorcery people want to see, so help us frame the discussion through your comments.

From the program:

Learn how to build better Web sites through the effective use of CSS (Cascading Style Sheets). When combined with that other acronym (HTML), CSS can help you create sites that download much more quickly, are less costly to maintain, are more accessible, are more search engine friendly and are more flexibly structured. This session will give you a brief overview of the basics, a look at practical approaches to solving challenging design and layout issues as well as some advanced razzle-dazzle (that’s the technical term for it).

About the Speakers: Rob Landry and Jennifer Ecker of Pemaquid Communications, LLC have their black belts in CSS and Web Standards-based design techniques. Pemaquid was one of the first Web design studios in Maine to use CSS exclusively for layout. Pemaquid Clients include Camden National Corporation, Oakhurst Dairy and the Maine Lobster Festival.

Door Prize: Registered attendees will be entered in a door prize drawing for a copy of the Sitepoint book, The Art and Science of CSS, by Cameron Adams et al., courtesy of O’Reilly Books. You must register and attend to be in the drawing.

…but this is a true story. I swear on a stack of Facebooks.

The other day, Sarah Hines, Our Creative Services Coordinator, after much prodding, linked to me. No big deal, right? Well, when browsing her contacts I came across Glenn Skutt. Glenn is someone I used to know more than a decade ago when I worked at Virginia Tech. His wife and mine were in the local community band together; that was the (very slender) thread that linked us.

I linked to Glenn, telling him I was now in Maine and was building Web sites with Sarah. He replied saying he went to school w/Sarah’s mother, and was starting a new startup company called VPT Energy Systems which, by the way, needed a new Web site. Kudos, to you, LinkedIn, I guess your system really works!

But wait, this is where it starts to get really weird.

Glenn mentioned that his partner, Jack Lesko, was vacationing in Maine that very day. To make a long story short, we found out he was old college buddies with the neighbor RIGHT ACROSS THE STREET!!

Sarah and I rushed over to the neighbor’s and asked for the guy from Virginia Tech. I thought they were going to choke on their coffee.

A truly amazing day, a truly small world, and a truly unbelievable set of coincidences. Timing is everything, but this is incredible.

Sincerely,

Rob Landry
Pemaquid Communications, LLC

p.s. Yes, we’ve launched a modest new site for VPT Energy Systems – more on that soon.