Notes on @media sessions

Sep 22 2006

Clearing some of the crap off my desk this morning, I came across my notes from this year’s @media sessions which I had yet to transcribe, so here they are (for my reference and yours).

Session notes

IE7 (Chris Wilson)

You can add an OpenSearch link to your site to add your site search into the browser UI, and there is an IE7 readiness toolkit to help get your site ready for the launch of IE7.

WCAG (Ian Lloyd et al)

The WCAG 2.0 Quick Reference lets you tick which scenario applies to your site and generate the relevant list of checkpoints.

Mobile (Cameron Moll)

Most mobile devices are WAP2.0 and use XHTML-MP for rendering.

Designing for mobile devices is contextual design for mobility. Test on your target devices, not on emulators. Your options for creating a mobile site are:

Do nothing
Strip all images and CSS
Create a handheld stylesheet
Create a separate site

This last option should be Content, Context and Component specific – identify the primary use-cases and build a site that is relevant for mobile users.

Mobile devices can also report data to the site, e.g. location, time, etc. which can inform the content. Opera Mini is available for most devices. The W3C MWI has a best practices document.

The .mobi TLD is available for registration; it requires sites to use XHTML-MP and not use frames.

Good Design (Hicks/Moll/Pieters)

Grids do the work for you – assess the content characteristics and structure the grid accordingly, violating it when necessary; the grid serves the content not the other way around. Different grid methods:

Fixed width, uniform (e.g. NYTimes)
Fixed width, hierarchical (e.g. Cameron Moll’s National Gazette mockups)
Fluid width (e.g. Vivabit)
Fluid + fixed width
Modular scale – ratios, e.g. 5:8, 1.618:1, etc.

Type – every typeface has its own language; harmonise content type with your logo font (e.g. for headers). Typography is there to aid readability, not to be cool. Use weight and spacing to establish hierarchy. To improve your font use, sign up for type catalogues and read Strunk+White.

Colour is mood, personality, emotion and meaning; it provides guidance to users. Details are important.

Fine Art of Web Design (Andy Clarke)

Play with the grid, don’t be constrained by common layout convention – architecture and print media are great sources of inspiration. Keep a scrapbook.

We don’t have to wait to do the cool stuff – use modern CSS techniques; it doesn’t matter if it doesn’t look the same in every browser.