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.

See listing on craigslist.org: Software Quality Assurance/Customer Support Engineer.

Digital Fusion is hiring a QA person. Apply today if you live in the Los Angeles area and fit the bill. You get to work with a great team!(Tags: dfstudio, digital-fusion, photography, qa, development, testing, jobs)

Formerly known as the “Tucson Web Standards Group”, the Tucson Geek Meet is having a get-together the week after Thanksgiving at Old Chicago on North Campbell Avenue in Tucson. Save the date: Thursday, November 29, 2007 from 8:00 PM – 10:00 PM (add to iCal).

See details and get directions at the Upcoming event page.

Come out for food, drink, and good conversation with your fellow computer nerds and web geeks.

UPDATE: Thanks to Jeff, Jim, Geoff, Sam, and Face for coming out—we had a great conversation. It was a gorgeous night out on the patio with the rain!

Some things we talked about at the November Geek Meet:

• Keepass Password Safe
• Amazon’s S3 Storage
• TechSoup—a non-profit resource for non-profits
• External hard drives
• Dobro, the Backup Robot
• MarsEdit
• Nice, clean Wordpress themes (by pearsonified.com)

If I missed anything, throw a link in the comments.

• MacNN | DF Studio 4.2 supports Apple’s iPhoneThis app is what I’ve been slaving away at for the last few weeks. Glad to see it out in the world.(Tags: dfstudio, digital-fusion, iphone, aperture, digital-photography)
• Gmail: How do actions sync in IMAP?Now that Gmail supports IMAP, and they recommend using it over POP, here is a chart to show how to replicate the same actions in your desktop email program.(Tags: email, help, howto, gmail, thunderbird, imap, pop)
• WPhone Admin PluginAwesome implementation of Wordpress Admin UI for iPhone users. I updated my personal blogs (3) today.(Tags: iphone, wordpress, admin, interface, iui, mobile, blog)
• Phone Fingers – buy now!Possibly the funniest iPhone accessory yet made. (Thanks, Rush).(Tags: apple, funny, humor, iphone, joke, accessory)

I’m in Austin for the third year in a row to attend South by Southwest Interactive, and hoping to get into the swing of things as panels start tomorrow at 10AM.

Erin and I are staying here for a few weeks, which is a nice change from the usual drive in Friday night and leave Tuesday afternoon to get home to work and family. Our “Sol Seeker” is camped a mile from downtown at the charming “Pecan Grove RV Park” along the Barton Springs restaurant row (we are next to Chuy’s, Shady Grove, Romeo’s, Uncle Billy’s, etc). We’re a stone’s throw from Palmer Auditorium and Zilker Park. (Oh, and if you are curious what/who Sol Seeker is, she is our home on wheels that we write about at “Travel Adventures with Lance and Erin”).

So this year should be great—the conference has grown by leaps and bounds. The keynote addresses are now housed in the Hilton Ballroom since they apparently outgrew the size available at the Convention center across the street. It’s encouraging to see and feel the excitement surrounding the web design and interactive media industries (and film and music, too, for that matter).

Speaking of music, a side benefit to being here for a bit longer is that we can catch some shows. Last night we saw “The Mother Truckers” at the Continental Club (awesome venue and great band!) and had a great meal at Guero’s Taco Bar afterwards, a local favorite. Tonight was a Lucinda Williams concert, but we had to skip it. Tomorrow we might stop by and see Jimmie Dale Gilmore at the Cactus Club… maybe.

Stay tuned for thoughts and ideas from this year’s conference; I’ll post my notes sometime next week. Aaron and Brian, I’ll miss seeing you guys here. Sam and Michael R., you should come next time!

DigitalFusion is a digital photographic rental and post-production facility based in Los Angeles, California. Their goal is to help professional photographers evolve from conventional film photography to digital photography by providing a digital replacement to the typical photographic workflow.

I’ve been involved with DigitalFusion as a web design and development contractor since December 2005. My first project entailed design and front-end coding for two internal DigitalFusion web sites: a corporate intranet and a client/job management system. I worked with Sam Devore of TeachesMe.com on both of these sites. Sam programmed the backend with the CakePHP framework while I worked on coding and designing the interface (CSS, HTML, JavaScript and graphics).

Pleased with the results of those two web sites, DigitalFusion invited me to be a part of a very exciting project: the third incarnation of their flagship software application, DF Studio. DF Studio is a web-based program designed for professional digital photographers as an editing and job management application. It creates a powerful and collaborative workflow for the photographers and their clients.

In April 2006, I started working on the new version of DF Studio as part of a small web development team. My role in the project was a major overhaul of the UI (user interface). This visual upgrade involved realigning the web application to use modern web standards since the new design required a solid foundation of valid HTML markup. For example, where the previous version used tables for layout, the new version sports a CSS-only layout. These changes opened the door for new user-specific features such as background color choices, layout sizes, and much more. The power of the CSS-based design is that these various flavors and ways to view images inside the application are all drawn from the same source code files.

Cleaning up the HTML code and converting the layout to CSS wasn’t enough, though. The new version implements improved interactive tasks and navigation using JavaScript. (This use of JavaScript in tandem with server-side technology is sometimes referred to as AJAX). Thus, the popup windows and dialog boxes became in-page elements to improve the interaction and response of the program. For example, to edit the name of a client in the contact list, the “Edit” link now opens the form on the same page instead of a new page. After selecting “Save” the program sends the changes to the server in the background so that work can proceed immediately.

Besides all the technological changes, I aimed to improve the readability and usefulness of the application by providing better typography, icons, layouts, and color choices. One of DigitalFusion’s requirements involved a CSS-driven layout that would correctly display on anything from a typical laptop screen up to a 30” Apple Cinema Display. The end-result is a collection of flexible and usable layouts that focus on the images. After all, it is a program for professional photographers…

Below is an example of the old jobs index page, and next to it the new one (these small images link to the full-size version).

The meat-and-potatoes of the application is image management. The post-shoot workflow includes uploading images, selecting images, communicating selections and edits to the client, and receiving feedback. I dedicated a large amount of time and energy to this part of the application, and I feel that it shows the power of CSS-based design. People viewing and managing images can change layout size and type, background colors, and toggle on/off different features. In the previous version, the only background color was white; now the default is black, but white and several shades of grey are just a click away.

Examples of the DF Studio proofsheet layout (old is first, then new—click for larger versions).

Image selection and management can also happen in full-size image mode. Changes to this part of the application included minimizing the header/footer areas to show more of the main image, and the addition of a thumbnail row across the bottom. The row helps navigate the current collection of images, rather than just moving back and forth with arrows and seeing each large image one at a time.

Screenshot of the new DF Studio proof (medium size image) layout.

DF Studio has many other features than those discussed here. Read more about DF Studio on the DigitalFusion web site. The bottom line is that by using web standards and JavaScript techniques this new version of the application is easier to maintain and customize, is more flexible to meet customers’ needs, and looks great in the process!

DF Studio version 3 was featured in September’s Picture Magazine (see DF Studio: The Best Next Thing), and received attention at the 2006 Photokina convention in Germany where DigitalFusion shared a booth with camera giant Hasselblad. Look for the public launch of DF Studio version 3 in early November at PhotoPlus in New York City. Here’s the official announcement from DigitalFusion:

“DigitalFusion is pleased to announce the release of DF Studio version 3 on November 2, 2006. Version 3 features a completely redesigned user-interface and extends DF Studio to users worldwide through DF Studio Link, a new easy-to-use upload tool.”

Along with DF Studio version 3, the DigitalFusion development team is launching new upload tools and a plugin for Apple’s Aperture software. My talented friend and colleague, Sam DeVore, is responsible for those two projects (with more to come).

Launch Date: November 2, 2006 at PhotoPlus.

Work Done: For DF Studio I performed front-end coding in XHTML/CSS, JavaScript and interactive design, template programming in JSP within the Java Struts framework, and graphic web design using Adobe Photoshop and Illustrator.