Weblogs: Web Standards

@Media 2005: Tactical Manoeuvres by Douglas Bowman

Sunday, June 26, 2005

Some brief notes from the "Tactical Manoeuvres" by Douglas Bowman. His presentation is available on his website.

There are some well known CSS web designers in the audience that should be recognised:

CSS is not a magic bullet. Its no substitute for a well-planned design process.

The tools for creating a new websites are build tools and create tools. Create tools will still be the same, pencil and paper, Photoshop or Illustrator. A good source of royalty free photographs is istockphoto.com.

Blogger redesign

The Blogger traffic went through the roof when Google put the Blogger button on the Google toolbar. Before then, its traffic before and after Google's acquisition remained relatively steady.

Phase 1 - discovery. We talked to Google and looked at typical visitor sessions. Making notes of what functionality was being used.

Phase 2 - deconstruction. We stripped everything away, put the bare minimum back in and left everything else out. The classic rule for knowing when a design is complete is when there is nothing else left to take out.

Phase 3 - task analysis. The site needed to answer questions like what is a blog, what can we do, and then allow visitors to just get on with it.

Phase 4 - Interaction flow. We started off with a complicated flow, and gradually brought it down to the simplest screen flow we could conceive.

Phase 5 - Schematics. Wireframes of each screen.

Phase 6 - Brand evolution. We were told that the Blogger logo could not be altered at all, so we went ahead and changed it to be more consistent with the brand. We also, at this stage chose the logotype, chose a friendlier font face. We experimented with different layout techniques, and eventually settled on the final Blogger design. [Bowman shows how the design was iterated through to the final delivery].

Phase 7 - Markup structure

Phase 8 - CSS. We extensively used descendant selectors, which allows the entire layout of the page to be changed just by changing the class or id on the body element. We defined regions for primary and secondary navigation, along with main and extra content. We used relative positioning on the Blogger header to get a two colour blue border effect. We used a line-height of 1.5 because it was more readable, and more legible, than the default 1.2.

The sliding doors technique is currently popular for doing curved edges. We first published it as a technique for doing navigation menu tabs. It was originally invented for a project for Apple, but that project fell through. (Shows screenshot of Apple website using sliding doors for its branded tab menu).

New techniques include a remote rollover - rolling a mouse over one area triggers off a roll-over on a different part of the screen.

When troubleshooting CSS, first make sure the page validates. Don't start with Internet Explorer. Isolate the problem by chopping out as much CSS as possible. Talk to the community, perhaps someone has already solved this particular bug. The one major rule is:

It its floated, unfloat it.
if its not floated, float it.

Other coverage

[ Weblog | Categories and feeds | 2011 | 2010 | 2009 | 2008 | 2007 | 2006 | 2005 | 2004 | 2003 | 2002 ]