@media2006 Notes: Andy Clarke, Transcending CSS: The Fine Art of Web Design

The following are my panel notes from @media2006. As I am not the fastest typer I have paraphrased what was said. Should you notice any mistakes please do point them out in the comments for corrections.

I remember A-level art having to paint a watercolour in 2 hours. When I went to art school we tried to forget what we knew and looked to see what was there.

(Asks Cameron Adams to stand on his chair.)

this gives you a different view on the world.

(Asks everyone to stand on their chairs)

Thanks to everyone that's supported me throughout the last year.

The example of standing on chairs was a way of getting people to look at things differently and to challenge people.

Challenge how we look at the world

Seeing webpages everywhere I go. Picture of hicksdesign branded converse allstars.

Jeffrey Veen said in SF. "Art is design without compromise"

"When we design for the web we stuggle against out materials,environment, meduium and ourselves to create products that people love to use" Andy Clarke

It's time we take stock and look at where we are and what we want to do. When we talk about the web it is about the love.

Bound by boxes:

Environment; the inflexibility of teh 2-dimensional screen.
Materials; the limitions of the markup and CSS fragility like making an ics sculpture.
Medium; poorer CSS support
Ourselves; unlearning that we have learned from past experience. The biggest constraint.

The mood incident box lessons.
The Blue robot layout reservoir. Who was the author: Rob Shandenaise?

Both of these sites were using absolute positioning.

Web Standards Awards, started by Cameron Adams, Andy Budd and ?? By designers for designers. Closed recently because everyone involved thought it had run it's course.

I'm not sure that we have reached the end of the road.

Heads of state
Web Burza
A List Apart

So is it a closed book.

Escaping the box

Mark Boulton made a career out of grids.

Photo of business people at St Pancras station: Is an example of how we conform.

Grids help us to understand where things go. Mark Boulton's site. Khoi Vinh's subtraction. Veerles blog one of my favorites. the grid structure holds everyhitng together.

Guy Carberry 3-column layout from flickr. Found this photo by chance. It's interesting to see how people are thinking about the proportions involved.

We tend to end up with header and footer with a sidebar on the left (see the slides)

Why don't we use different things with our grids. What make us conform? What limits our imagination? there's some interesting constructs that can come about by accident. Starting with bits of paper that you can move around means you can easily play with layouts.

Now when we think about CSS we have the box model and all the things tht go in to that. We can style anything and lay them out in new and interesting ways.

We don't even need to show the grid there. This give the freedom and flexibility to do interesting designs.

Was there a tool that was specifically designed to work on the web? Flash was. It's designed to be free of the constraints of the web. Can we take some of the freedom that flash designers have and bring it back into our work. Corpse bride and pirates of the carribbean. Exquisite flash. Free of grids.

Where do we go now for our inspiration. People start being inspired by looking at the web. Should we do this? I don't know, maytbe this is harmful.

Shows dark sites from CSS reboot. Why does this happen. large footers, how does this happen. Was it inspired by Mike Rundle doing it on 9rules or Veerle.

looking elsewhere. Japanese, iranian newspapers. Uses the same principles. Is there anything in this japanese design that we can use in our own work. If I look at the grid or the composition behind it can I use a different approach. Does anyone use a scrapbook? (Not very many hands go up) Everyone should do this even coders. I look at stuff and say is this a list. Do we have to aly e-commerce sites out like amazon?

Look at magazine articles and look at the grid.

Photo of building. Grids are used in buildings they're necessary. When we look at architecture we can see really interesting juxtapositions. I'm guilty of not looking up when I walk around london. Playing around with these things and seeing how we can accomplish our work and create a different appearance.

We have to figure out how to make these things work. What I've come to realise. We need to think about meaningful markup not jsut valid markup.

We do still put presentation markup into our documents whether we realise it. We think about markup presentationally. how can we see through the visual presentation and see through the underlying stuff.

How would you markup this photo of runners? Maybe it's an ordered list with the runners ordered by their position. How would you markup a rank of taxis? Lists? DL a table in my opinion.

How would you markup a picture of buildingsin SFrancisco. A bunch of nested ordered list to convey building addresses.

Web 2.0 has made people complacent. Have we really reached the end? We can free ourselves from the limitations.

Progressive Enhancement. Quote from triangle tech journal. Preceded by Dave Shea talking about moz enhancement in 2003. That was 3 years ago. We are bound and weighed down by constraints. We should wake up, if we don't move forward we might as well not bother.

Transcendant CSS

Makes fulll use of teh most up to date CSSS techniques and indoing so does not require that we limit creativity to the limited capapbilities fo legacy browsers.

Make use of all CSS 2.1. Transparent PNG. we need to make use of attribute selectors, child selectors, adjacent sibling browsers.
People say it's ok that you can do this on your blog. But why can't we all do this.

Don't need to make this look the same on all browsers. We should use everything that's available. Even use CSS 3. Text-shadow (safria only) or opacity (Firefox). If I use a different car do I expect to have the same experience. I still get from A to B.

This is not just me that can do this. If we don't do this we will still be sitting here in @media2007 requesting for attribute selectors.

We can do this thanks to Nate Koechley. Graded browser support means supporting the features that browsers have. Giving all of them the best experience they are capable of.

Slide of Yahoo Browser grades.

We all need this.

At mix O6 in vegas. Eric, Dave, Molly and I. We came under flak for being microsoft apologists. I had to publish a list of everything I got from MS. We're not apologists.

Slide of stuffandnonsense.co.uk in IE7.

We no have the chance to see a level playing field. I hope that overall that this gives a taste of my world.

Book coming out in autumn. Transcending CSS.


Show Comments