Notes: Please add your name, if you contribute, to the 'Authors' section at the bottom of this file. DO NOT COPY AND PASTE THIS FILE WHOLESALE. IT MAKES IT SLOW. Export it or save it as text. 16/06/2006 15:00 - 16:00 Transcending CSS: The Fine Art of Web Design by Andy Clarke I went to art school, and it was very much about not conforming… We played games, and this was teaching us about perspective… [Makes everyone get on chairs] When we talk about design on the web - because it's such a dynamic medium - it's something The fine art of web design * Challenge the way that we look at our work * Challenging the way that we see our world as a source of inspiration for creativity * Designing with meaning * Transcendent CSS * Learning to look to the future One of the things that was interesting to me, talking to different designers, is different perspectives. 1. Bound by boxes "Art is design without compromise" - Jeffrey Veen "When we design for the web, we struggle against our materials, environment, medium and ourselves to create products that people love to use." - Andy Clarke We struggle often against our own preconceptions… We're molded by the medium we work in, and it's time to take stock. We're trying to design products - they happen to be web based - but products that people love to use. We forget it's about love, and emotion that people have for things. It's not just about Ajax, CSS, or semantic markup. Environment; the inflexibility of the 2-dimensional screen, Materials; the limitations of markup and CSS, Medium; poorer CSS support in older browsers, Ourselves; unlearning what we have learned from past experience I believe that absollute positioning is back: it's the new DOM scripting. 2. Escaping the box "Grid design is a fundamental skill of any designer. Understanding proportional relationships, white space and composition are all vital in constructing a grid for any delivery platform - web, print and real 3D platorms." - Mark Boulton We love to enforce uniformity. We try to impose our will and structure on things: buildings, spaces, ourselves. It's interesting to see how that can change when we understand what it is about ourselves that gives us this need. Is understanding the proportions of main content versus sidebar as far as we can go? Is that all we can do? When we understand the fundamentals of [grid design] we can start to work right on paper. There's been less challenging on the web than perhaps there should be. CSS itself introduces this new grid. Every element that sits on a page can be styled. We can have things intersecting and overlapping. We don't need to show the grid at all. The grid should just be the basis for taking things one step further. This gives us freedom to do interesting designs. One limitation we have to face is HTML and CSS… has there ever been a tool for designing specifically on the web? Flash is the _only_ tool that's ever been designed to work well for designing on the web. I'm not saying we should go back to using Flash for everything. We _should_ be able to take some of the freedom Flash designers have. This begs the question: where do we go for inspiration? Where can we look for ideas and perspectives on what it is to bring in more interesting stuff? We start by looking at the web… Should we do this? I wonder if that's harmful for creative opportunities. It may lead us to this [white text, dark background, large footers]. It's helpful to look elsewhere… [showing newspapers from different cultures: UK, German, Iranian, Japanese] Fundamentally, newspapers have the same media. Is there anything we can take from that? I wonder if we're in danger of making our work a 'global' style. People should keep scrapbooks more… Not just designers, coders too. Set yourself challenges to make what you see using markup. Do we have to lay eCom sites out like Amazon? What can we take from print? If we see an ordered list in a catalogue, how can we make that in CSS/HTML? We try to regiment on nature, too, by seperating trees. When we look at architecture, there can be really interesting juxtapositions… Looking up. How can all this be relevant to our world on the web? To me, playing with these things and using the full opportunity we have can be very interesting. 3. Markup in the real world "Markup that is not only technically valid, but contains elements that have been chosen to add meaning to content and not for their visual appearance" We still put a huge amount of presentational markup into our documents even if we dont' realise it. 9 out of 10 times, we use the same markup structure. We think about this presentationally. We think about divs like we did groups of table cells. How can we look at the underlying meaning of what's there? How would you mark up a picture? It depends on the context you want to put forward. How do you mark up a city? I wonder if we've become complacent… Have we really reached the end? Are we still thinking about design in the old ways? Is the most innovative thing we've got YFT in basecamp? 4. Progressive Enhancement Cf. MOSe Is progressive enhancement still the way to go? We feel bound by limitations from client, browser, whatever. If we don't move forward, we might as well not try. Transcendent CSS "Transcendent CSS makes full use of the most up-to-date CSS techniques and in doing so does not require that we limit our creativity to the limited capabilities of legacy browsers" We need this stuff, if we want to make documents without filling them with crap. We need to start using CSS2.1 fully, all the selectors, pseud-classes, transparent PNGs… It doesnt' take much to get this message accross. "Transcendent CSS means that we should avoid hacks or filters where possible …" We might use parts of CSS3 drafts. Why do we think IE5 should get the same look and feel as modern browsers? We don't expect that with cars. Clients and users need to take a mature approach to this. We can - and have to - do this. If we don't, we'll be at @media 2007 still talking about how nice it would be to use attributes selectors. Graded browser support Nate Koechley said expecting two users using different software to have an identical experience is not heterogenous with the nature of the web. Should have a grid of browser compat intentions. We should take a mature approach and be able to explain these things. IE7 levels the playing field. We can start moving forward and dropping legacy browser support. -------------------------------- Authors: Steve Marshall: http://nascentguruism.com/