Article
A few details about the FeedBurner.com redesign
Late, late, late on a Tuesday night almost two weeks ago, we re-launched FeedBurner.com with much-needed updates to the design, content and overall direction.
Traci already commented on the strategic importance of the new site, while Rachelle provided a more personal account.
But as the designer and half-developer (Rachelle did the other half — actually, probably more than half — with great skill and speed), I’m going to share a couple of “behind the scenes” details that I find super neat. Hopefully you’ll feel the same way.
Powered By FeedBurner
Going in to this project, two requirements became clear:
Traci (our marketing director) needed the ability to make content updates without routing all changes through the design team.
Many types of content needed to be reused in slightly different settings and formats around the site.
To address these requirements, we came up with the idea of modular content — basically, little nuggets of content that can be randomized, subscribed, inserted and updated anywhere.
For a couple of content types — blog posts, publisher buzz, press releases — we used feeds and our very own BuzzBoost service to repurpose content wherever we needed it on the site (mmm, dog food). For others, we generated custom blocks of static HTML or Javascript and included those in the JSPs that contain forms, session information (“You are signed in as…”) and other application components.
Of course, we had to generate all of this content somewhere…
Powered By MovableType
We’re using MovableType to store and publish the press releases, in the news, events, corporate backgrounder, stats, Publisher Buzz, and of course our blog, Burning Questions. Our MovableType installation is rigged up with a variety of templates that publish static files in HTML, Javascript and Atom formats — all of which are then pulled into the pages like I mentioned above.
One of the complaints people have about MovableType — that it creates static files by default — is actually a huge advantage here. We’re able to publish flat, lightweight static files to a single server, then pull in these files in a variety of ways across our distributed server environment.
Elegant, dual-float layout
When I was first learning CSS, doing multi-column layouts was always the hardest part. Even two-column layouts seemed tricky, weighing the pros and cons of various approaches and never being totally satisfied with the end result.
Then I got floats. Like, really got them. It was Doug Bowman’s slides from this presentation that secured my understanding and I haven’t fretted about CSS layouts since.
On the new FeedBurner.com, everything but the home page uses a classic dual-float, two-column layout. I set a width on both columns in the CSS, then assigned float:left on the left column and float:right on the right. Finished with a clear:both footer, it’s a solid layout that works regardless of which column is longest.
A new approach to navigation
While many sites feature massive navigation (practically a site map), we took a page from Flickr’s design books this time around and divided our navigation into two sections. A high-priority “primary” navigation and a lower-priority “secondary” navigation are based on prominence, not hierarchy, which helps focus the page and not overwhelm people with choices.
We also made heavy use of in-text hyperlinking across sections, to encourage exploration without forcing folks to grok and traverse our site architecture via the navigation.
Coming soon
Perhaps the best things to come out of this redesign process haven’t arrived yet. As a result of our extensive brainstorming and planning, we have tons of ideas and a general roadmap for web site improvements over the coming months.
And now, with the addition of Rachelle Bowden to our team, we have the manpower womanpower to get it done.
Questions? Comments?
Use the comment form. As always, I love to hear from you!