Jump to Sidebar Content | Jump to Main Page Content

Begin site navigation:
End site navigation.
Begin left menu:
Topics

Pages

 
Search
 
Links
 
Subscribe
 
End of left menu.
Begin main content:
Blog
Archive for January 2008
« Previous Entries | Next Entries »

New Site Launched: Headwaters Consulting

Monday, January 7, 2008 8:08 pm

I had the pleasure of working again with Beth Conover last month to design and develop the Web site for her new consulting practice, Headwaters Consulting, LLC. As the former director of Greenprint Denver, Mayor Hickenlooper’s largest single initiative, she’s accumulated an amazing breadth of experience and is one of the sustainability sector’s most respected visionaries.

screen image

This busy executive needed a no-fuss, feature-rich Web site that could grow with her as her business grows. Gaining market exposure is always a challenge for any new businesses as well, so ensuring the findability of her site would help her message come out strong and clear.

Having a well-structured Web site with compliant XHTML code, a blog with RSS feeds, and text-based content optimizes her site for search engines like Google and Technorati, which gives her a great nudge ahead of the competition.

My choice for this project was WordPress, a free, open source platform that provides a lightweight content management system with a super easy administrative interface. I’ve been working with WordPress for two years now, and am continually impressed with the quality and stability of the product.

Every section of the site can be updated within WordPress, including the three content boxes on the home page: “our focus”, “news & views,” and “our experience.”

screen image

To create these, I incorporated a couple of advanced techniques within a “static” home page template. WordPress has provided this feature since version 2.1. It enables you to reference a page created within WordPress as the site’s home page (if you want a simple editable content area), or you can create a page template with static information and reference that file (for more complex structure using template tags).

I used the Get-a-Post plugin for the two side content boxes. This plugin brings in the Page Title and Page Content for any page created within WordPress, and you can select which page to display by its ID number and other criteria.

The “news & views” box is a WordPress mini-loop that uses the query_posts template tag. It automatically brings the title of the first 5 blog posts, with an excerpt for the leading headline (or the first 55 words of the post if there isn’t an excerpt.)

For the overall look and feel, I designed a fluid, tableless CSS layout that allows the site to adapt well to multiple displays, including mobile platforms. This kind of design requires some trade-offs, such as avoiding strict placement of images and grid-style positioning. Because of this, many designers shy away from fluid layouts in favor of device-specific CSS styling and/or fixed-width CSS attributes.

screen image
Example: WordPress default theme at 1024×768 screen resolution.
screen image
A Web site layout that uses fixed-width CSS styling accommodates the overflow of extra screen space on the sides, which compresses or frees up main content areas depending on the screen resolution. Shown in this example is the WordPress default theme at 1280×768 screen resolution.
screen image
Custom Headwaters theme at 1024×768 screen resolution.
screen image
A Web site layout that uses fluid CSS styling accommodates the overflow of extra screen space within its design and main content areas expand or shrink in proportion to higher or lower screen resolutions. Shown: Custom Headwaters theme at 1280×768 screen resolution.

Each layout option has benefits and drawbacks, and one way isn’t necessarily better than the other. But if the opportunity exists to use a fluid layout, it’s generally my preferred choice.

Knowing that many visitors to the Web site would likely be using larger monitors and higher resolution laptops, fluidity would make their viewing environment as pleasant as possible without sacrificing design appeal for those with lower screen resolutions. The interface is adaptable as new content is added to the site and provides versatility without excessive formatting constraints and hassles.

As such, the design retains longevity and should continue to appear fresh and modern for quite some time.

End of main content.