@media, Fine Art of Web Design

Andy Clarke of Stuff & Nonsense / And All That Malarkey

Andy's an odd fish! But he thinks of things in different ways, and from different viewpoints. He sees inspiration for web design all over, not just online. "Art is design without compromise" - Jeffrey Veen.

Bound By Boxes
We are hampered every which way by boxes, stemming from:

• The environment - ie a 2D screen, which is inflexible
• The Materials - ie the limits of Markup+CSS
• Medium - poor CSS support in older browsers
• Ourselves! - unlearning what we have already learned.
• Refs: Blue Robot's Reservior, Web Standards Awards

Grid Design
It is a fundamental skill of any designer - using the grid (see also the writeup on Good Design vs Great Design). BUT, what do we end up with?

becomes

Should we look at the web for inspiration, at places like cssreboot, or csszengarden?
Or should we look elsewhere? Maybe a right nav and vertical header could work for your site!

Keep a Scrapbook - could be magazine cuttings, etc, just to give inspiration from other areas. Showed example of page layout which was thus - just an ordered list, effectively - think how this below could be marked up with CSS?

Sometimes the juxtaposition of lines and curves can be quite interesting to think about.

Markup In The Real World
Markup needs to be technically valid but contain elements that have been chosen to convey meaning, semantically. If its tabular data - present it in a table!

Progressive Enhancement
Name given to technique were basic stuff is marked up for styling in IE, plus bells and whistles for other more capable browsers - eg Moz browsers can cope with the :hover class on any element, not just anchors; round corners on boxes are coming!

Transcendent CSS makes full use of all the most up to date CSS techniques. In CSS2.1 this could mean attribute selectors, parent/child/sibling selecctors, pseudo classes eg first/last child etc. Only use hacks to target browsers to turn things off.

Graded Browser Support
Doesn't mean everyone gets the same thing - but so what if it works and is usable in older browsers. IE7 will level the playing field a bit more (we hope!).

Refs: Yahoo DevNet - Browser Grades
stuffandnonsense.co.uk/downloads/transcendingcss.pdf