From the Recent Client Projects and I Should Have Blogged This Months Ago departments, I present a brief report on a website realign for Summit Hut.

I was fortunate to work with my great friend and mentor Aaron and several former coworkers from my days at the Hut (I worked there 2001–2005). The subject matter was close to my heart, and having worked on the website for a short period of time before leaving the company, I was thrilled to help with the task of realigning and recoding Summit Hut’s flagship website.

View screenshots, visit the live site, or for more details on the part I played in the realign, continue reading.

Disclaimer: Please note, I am not involved in the upkeep and production of code or graphics for Summit Hut; my role was to build a solid foundation for future development and visual merchandising. I did produce the first home page graphic (view screenshot), but the home page graphics and various and sundry sidebar callouts throughout the site have changed since the site launch in February 2008.

Notes and technical details

I was in charge of visual look-and-feel, basic interaction design, and coding the HTML and CSS for the page templates.

Visual

My goal was to create a mood that was simple, clean, and sophisticated with a subtle regional feel for Summit Hut’s location in the Southwest.

The visual tone took cues from Summit Hut’s in-store merchandising and signage. The chosen color palette, typography, and imagery were all tailored to match the wonderful feeling one gets when stepping into the company’s high-end retail shops. I intended visual chrome such as icons and buttons to produce a clean and professional look to match the company identity as a premier outdoor retailer.

Considerations included better readability, clearer navigation, enhancements to the display of vendor brands and product images, and improved product merchandising.

Merchandising an online store can be quite challenging, especially if you want to reflect how the real-life store works. There are really two parts to it: decorative and organizational. The first is extremely important since it conveys value and desirability to the products; the second provides a clear arrangement for easy searching, browsing, and choosing. My goal here was to remove obstacles and let customers figure things out easily while providing a pleasant, easy, and fun shopping experience.

Code

The recoded page templates were probably the most urgent need; the former summithut.com sported a table-based layout, spacer GIFs, and other typical markup-cluttering artifacts. Valid XHTML and CSS to the rescue! Building on Aaron’s solid programming and site framework, we worked together on producing lightweight and reusable HTML chunks (by reusable chunks I mean in the spirit of microformats). For the style sheets (CSS) I used principles of grid-based layouts and the excellent Blueprint CSS framework as a starting point for resetting and standardizing the layout, text treatment, and interaction messages.

All the benefits of standards-based development apply to the updated pages: faster loading times, code that is easier to read and update, improved usability and accessibility for traditional and non-traditional devices, as well as flexibility for future website features and visual changes.

Interaction

Interactive design tasks for the realigned site centered on product browsing, selection, and the checkout process.

For purposes of keeping this report as brief as I can, let’s take the example of the product browsing and navigation. The previous product navigation involved a clunky accordion-style navigation on the left of every page. The new site splits the top-level navigation into a horizontal dropdown menu on every page, improves the search tool, and provides multiple ways to visually scroll through products. Product browsing can be in a list view or thumb view, and the sidebar menus allow you to drill down and refine the offerings easily.

The dropdown navigation for products was an important piece of this realign (view screenshot). The amount of products and product categories in Summit Hut’s online store makes the product navigation interaction a complex and difficult one. The information architecture is based on the store’s internal organization, which doesn’t always mimic how customers shop. The dropdowns provided a great way to simplify the complexity, and with Aaron’s excellent choice of jQuery (with the Superfish plugin), this interaction works wonderfully.

There were many, many, more improvements to Summit Hut website; I can’t list them all here, but you can view the old site on archive.org and then browse the current site to see for yourself.

In URLs Can Be Beautiful, Chris Shiflett explains how he built beautiful URLs for OmniTI.

I agree whole-heartedly that URLs can and should be beautiful, and I firmly believe they should not only look good, but should also be useful, meaningful, and “discoverable.” In the case of OmniTI, the first subcategory in the URL is based on an action verb, like “is”, “helps”, or “thinks.” This gives the URL a powerful mnemonic quality, since it reads like a sentence. It also describes the content of the page it represents, which is awesome.

The only downside I can see is the “discoverability” for common URLs like “about” and “contact”. A lot of people are used to finding those URLs the same on most sites, especially typical brochure-type business websites. But, you can always have a redirect rule for those if it’s important. The creativity and unique design of OmniTI’s URL scheme might just make up for the loss of predictability.

I’m glad to see a great example of a beautiful and semantic URL scheme to use as inspiration for my own projects.

UPDATE: As a nice follow-up, Nate Abele explains how to set up nice URLs in the CakePHP framework by defining custom routes: Advanced URL Routing and SEO Techniques with CakePHP.

Can you refer me to a tutorial for making CSS-based dropdown menus similar to what’s found on this site?

First of all, I must admit I am not a big fan of dropdown menus. They can be a usability nightmare when not done right, and all too often they mask a poorly developed site architecture.

That said, if you feel the need to incorporate them for your site (or a client insists you do it on their site), there is a right and a wrong way to it.

Make sure the solution you choose uses well-structure HTML markup and lightweight CSS/JavaScript. Secondly, judge the size of your navigation to make sure a dropdown makes sense. If you have 5–7 links, you probably don’t need it. If you have 5–7 site sections that all have 5 or more subsections then it might make sense to incorporate a dropdown menu. Lastly, plan for what will happen if your visitors don’t have JavaScript enabled. Does the menu work with CSS only? Does it work without styles at all?

Probably the best implementation out there is Son of Suckerfish Dropdowns. It’s accessible, lightweight, and works well across modern browsers. It does use a small bit of JavaScript, but that is a necessary evil in order to support older versions of IE/Windows. I’ve used a version of Suckerfish called Superfish as a jQuery plugin with great success (check it out live on the new Summit Hut site.).

The cthsu.com site uses a product called “CSS Express Drop-Down Menus” from ProjectSeven. It’s another good implementation aimed specially at single-level CSS dropdown menus.

I hope that helps you. For more on dropdowns and how they affect website user interfaces, read these articles:

• Bad Practice In User Interface Design – Misuse Of The Drop-Down Menu
• Drop-Down Menus – Good or Bad?
• A flying menu attack can wound your navigation
• Dropdown low down
• Drop-Down Menus: Use Sparingly
• Dropdown menus. Use them or lose them?
• Users decide first, move second

Coding web forms in static HTML can be a royal pain, especially with super-long option and select groups for choosing countries and state/provinces.

Wufoo makes form design and coding easy as pie. I’ve been using their form building application since it launched—mostly for prototyping and brainstorming. This newly-launched gallery is great for trying out your ideas and viewing prototypes that are already built out for you.

If you aren’t the HTML/CSS type you can still find this gallery useful—browse the forms and then download the code for use in your projects.

Go: Wufoo Form Gallery: Free HTML Form and CSS Templates.

At the Tucson Geek Meet for November 2007 we talked about good Wordpress themes, especially ones that are clean and simply designed.

Here is a short list of Wordpress themes that I like. Technical note: I haven’t checked the HTML/CSS source on all the themes, so while they may be visually appealing I can’t promise that they are well-built under the hood.

• Cutline: From Chris Pearson, Cutline is an elegant design that works well for blogs and business sites. It’s available in two- and three-column versions. Pearson has three other great Wordpress themes as well.
• DePo: Designed by Derek Powazek, the DePo theme is minimal and graceful. The footer is a nice touch.
• Hemingway: A long-time favorite on Wordpress.com, this clean design is available in a light or dark flavor.
• K2: Kubrick’s big brother—this is one theme that combines both clean design and a workhorse of a theme: sidebar modules, admin improvements, custom headers, live search, and more.
• Simplicity: Very similar to Hemingway—simple, two-column design. (Site is in German, but English theme is available there for download).
• And finally, for the very best in minimalist Wordpress themes, check out Plaintxt.org’s The Best Minimalist WordPress Themes. I especially like Hemingway Reloaded.

• Why we need standards support in HTML email – Campaign Monitor BlogThis hits home to me due to an active participation in sending HTML emails for my clients. I think there is hope, in spite of Microsoft.(Tags: email, html, css, marketing, web-standards)
• iPhone for Web Developers – Optimizing Web Applications and Content for iPhone“The following guidelines will help you prepare web content and design a website or web-based application for iPhone.”(Tags: iphone, apple, mobile, web-standards, browser, safari, mac)
• Yet Another Multicolumn Layout | An (X)HTML/CSS FrameworkWhile I usually hand-roll my own CSS and HTML, this framework deserves a deeper look. (Hat tip: sdevore.)(Tags: development, framework, html, markup, tools, css, layout)
• CodeIgniter – Open source PHP web application framework"Simple yet powerful Open Source PHP framework for web developers." From the makers of ExpressionEngine.(Tags: php, framework, programming, mvc, open-source, cms)