The new Path

· · ·

It seems I’ve not had many chances to toot my own horn lately with announcements of new designs or projects with which Stopdesign has been involved. When a print design is complete, the wait for a finished product merely depends on the printer’s schedule or a publisher’s distribution cycle. Some design projects for the web are application-based, and get tucked behind a login screen preventing access to the majority of the new design. Other projects get held up in lengthy development cycles and iterative improvements which delay public release. But once a new site design has been thoroughly produced, staged, analyzed, tested, and deemed ready for the world, making it available is almost as simple and instant as flipping a switch.

[Thumbnail-sized screenshot of Adaptive Path's new home page design] Today, I can announce completion of the first major publicly available Stopdesign project since the redesign of Wired News last October. Last night, Adaptive Path completed the launch of a brand spanking new redesign of their website. Simplified layout. Clean, elegant aesthetic. Straight-forward structure. And what less would you expect from Stopdesign than beautiful, completely standards-compliant pages using that increasingly-popular XHTML and CSS combination to create tableless layouts. (Yes, just about every page validates from the get-go without error as XHTML 1.0 Strict.)

Quick highlights include:

  • Drastic reduction in use of images for titles, subtitles, navigation, and blurb text.
  • File size of the home page HTML dropped by 56% (20.9 KB to 9.2 KB).
  • JavaScript rollover effects in navigation eliminated and replaced by using CSS hover states for simplified tab- and subtab-like navigation.
  • Pages can be toggled between several variants of two- and three-column layouts simply by changing the body class.
  • Footer sits at bottom of longest column and extends full-width of page.
  • Page titles (h1‘s) for section pages come before sub-navigation in the markup to ensure a logical document structure. But titles get reversed in page appearance through absolute positioning so that they appear below the visual section header and subnav.
  • All non-critical, decorative images (including large header images) are rendered exclusively by CSS background images.
  • Case study pages present professional example layouts with or without style sheet formatting.
  • And finally, my favorite… the team photos on the home page and team page provide double-rollover effects solely with the use of CSS hover states and absolute positioning (similar to Eric Meyer’s Pure CSS Popups from css/edge.) However, in this case, the photos are inserted by CSS into a pure text-based HTML list containing only links of names which are persistently present. (Note: I’m aware that in Safari, while mousing over the text does not change the image and text color, mousing over the image works fine.)

In addition to the new design, fresh look, and the above list of benefits, Adaptive Path takes a big step forward in practicing what they evangelize to their own clients. Their content is now unobscured, both on the surface throughout the visual interface, and behind the scenes in the markup describing each page. The site is now incredibly easy to update and maintain — Adaptive Path partners say so themselves. No more images to change with each subtitle or blurb alteration. Simple markup makes it a breeze for anyone to jump into the source code and find what they need to edit. Content can now be structured and ordered on the page as they see fit without needing to conform to rows and columns of table layouts. And I barely need to mention how easy it would be for Jeff to grab the style sheet and change the red titles he’s not been liking much lately. (Clients are always so opinionated about color…)

Even though Adaptive Path will gain lots of direct benefits from their new site design, the whole team should be commended for their desire and willingness to move to this forward-thinking model. It’s been a pleasure working with them on this project and a few others we’ve tackled together. Additional props for this project are due to Lane Becker, who not only managed this project for the team, but recently cozied up to the HTML validator and squashed almost every validation error (on every page) before launch, and to Jay Allen, who helped Adaptive Path build out most of the pages and PHP scripts, and customized Movable Type for them to generate and publish key portions of the site.

Feedback, suggestions, questions, criticisms? Bring ’em on.