@media 2006 (London)

Decade of style

Eric Meyer

10 years ago, at www5 in France at CNIT. ... Talks about the history of CSS, commemorating the people that made the adoption of CSS happen:

• Chris Lilley - free information good for adoption of technology;
• Zeldman - webstandards.org;
• John Allsop - CSS samurai (webstandards);
• MSIE 5 /pc : link/@import selection of CSS sheets;
• Todd Fahrner - doctype switching (box model issues in IE 5 solution);
• Tantek - broke CSS design wide open; Before IE 5 Mac, it wasn't really an option to design with CSS as styling instrument.

Box model hack

Demo sites where CSS was used without considering browser issues. MSIE still brags that Meyers Complex spiral demo works in MSIE.

Wired site; The first high profile site that applied tables the way they are supposed to. Douglas Bowman - designer/CSS

Dave Shea's CSS Zen Garden spoke to designers. "for a long time css sites were boxy and boring. " ... "it was the people using them." CSS applied to an audience that did not care for styling.

CSS styling appearing in AIM and Dashboard.

Solving current browser problems with DOM Scripting (Inman Position Clearing, Resolution-dependent layout, sIFR, ...)

Future: CSS 3, with printing and grid layout features (with the funky syntax).

"Community is important, but also individual action" (Fahrner, Tantek, Allsop)

Great design vs. Good design

Cameron Moll, Veerle Pieters, Jon Hicks

grids

Cameron: Mark Boulton; A grid will ease the burden of decision making for you; X-step program:

• Assess the content characteristics: unusually long headlines? Photographs?
• Structure the grid accordingly
• Violate that grid when necessary

Timothy Samara: Making and Breaking the Grid: A Graphic Design Layout Workshop

Look at the content first, find a fitting grid with that;

what are the needs of the content. (photographs, banner with fixed widths)

Molly's take

typo

Jon; 318.com; "the elements of typographic style" - to the web; markboulton.co.uk

color

Veerle; "simplicity is the key"; "colors is like an extra layer on top the design"; subtraction website; details are necessary to make the design better than good.

Internet Explorer... 7

Chris Wilson

Opensearch (Adding Search providers to IE 7 using OpenSearch 1.1

• RSS feeds view in the browser
• RSS API in win32 and .NET toolkit
• LIST EXTENSIONS TO RSS
• RSS Team blog

Anti-phishing service integrated into IE

Vista's parental controls (network layer)

explicit user consent is required on first run of unused installed ActiveX controls, "ActiveX opt-in"

"hackers are looking to get paid" (malware)

Vista protected mode

Select is no longer a native window! (layering, styling)

We're planning the next two releases now;

We will support XHTML in the future

Future

The mash-up pattern will continue to grow: combining data from multiple sites; RSS will help stimulate the growth of mash-up sites

Semantic tagging of data; "LiveClipboard" stuff is a good example;

Application semantics

Bug Hunting

Andy Budd

Jeff Veen

veen.com/nextgen.pdf (18 MB); Garret's layer story; Mash-up of data silos.

Dan Cederholm

Bulletproof - umbrella term for robustness.

Beyond a Code Audit

Robin Cristopherson

JAWS and Homepage Reader as browser/browser add on; AJAX will give users with disabilities more problems

Internationalisation

Molly Holzschlag

Speak to people in their own language

Belgium: multi-language documents are the norm

Ethnic diversity: Tucson, Arizona: Spanish-speaking Mexicans and English/Americans

BBC sites: commonwealth

Enthusiastic presentation underlining the importance of language. Ethnic diversity is more and more important to address because many are (becoming) global.

Good example: In Japan a cursive glyph means nothing. Japanese use dashes to emphasize a word. Meaning: use <em> and not <i>.

www.w3.org/International

Strategic CSS Management

Rachel Andrew, Dave Shea, Roger Johansson

• undohtml.css (Tantek)
• Well commented CSS

Comment tips

• Comment convention, Flagging, from Doug Bowman: /* Page: =Header */
• Add URLs to e.g. positioniseverything, with each hack.
• Make a list of all the colors (swatches) at the top of the page.

Naming conventions

• avoid presentational names
• be consistent
• #navigation, #menu, #sidebar
• name prefixes

(practical application where multiple CMS applications can use the same styling)

Server side + CSS

• Shaun Inman: constant values for hex values e.g.
• personalized imports per request (browser, user settings)

Code order within the CSS

• generic to specific
• specificity

Tools

topstyle, stylemaster, skedit, dreamweaver, zenstudio, visual studio 2005

Testing

I just have a lot of computers.

linux, mac and windows box / browsercam / virtual machine VMWare

(how do they feel about reuse of existing rule blocks on extensions of existing websites? My colleagues and myself end up rewriting properties all the time, making CSS files bulkier and less maintainable every month)

Microformats: Evolving the web

Tantek Çelik

• feeds.technorati.com/contact
• hCard format
• Cork'd wine review microformat -- also applicable to recipes and cookbooks
• semantic data nuggets inside XHTML
• Google usage rights search
• Technorati kitchen
• xmdp - XHTML meta data profiles
• can be converted into an RDF model
• tails - Firefox plugin recognizes microformats by Robert de Bruin
• hreview

Hot topics panel

Holzschlag, Hicks, Keith, Meyer, Çelik