I just flew in from New York and the Future of Web Design conference, and boy, are my arms tired!


So anyway... the conference was very enjoyable, and a ton of information was presented. I will try to recap and give my impressions of the workshop day and the seminar day.


On Monday I attended two workshops at the Radisson Martinique. The morning session was "The exciting new capabilities of HTML 5 and CSS 3", presented by Steve Smith of Ordered List. I thought Steve was a great presenter, with a good conversational style and a slightly geeky personality. It's obvious that he really cares about this stuff and his passion came across very well to me. The first half of his workshop was HTML 5, which is going to be very exciting when it's finally implemented. The new elements I found most promising are:

  • New semantic tags - section, header, footer, nav, article and aside - anything that will make our documents more readable is a Good Thing™
  • Mark <m> - marked text, but not necessarily emphasized - could be really great for displaying search results
  • Video <video> and audio <audio> - No more ripping DVDs and encoding to FLV, no more messing with multiple video or audio formats, no more building custom Flash video or audio players! Hallelujah! This actually works in Opera and Safari already, and it looks like Firefox 3.1 will also run them. Default controls will be provided by the browser, or you can build custom controls using simple Javascript.
  • onhashchange event - A new Javascript event that fires whenever the "#XXX" part of the URL changes. How cool is that? No more observing multiple events for Ajax operations. Will also be very useful for in-page anchors.
  • web Forms 2.0
    • A slew of new inputs, including date (and variations on date like month, week, etc.), number, email, and url
    • New input attributes like required (yay!), autofocus, and pattern (which will do a simple reg ex match for in-browser validation)
    • New CSS selectors like enabled/disabled, valid/invalid, and checked
    • Repeatable regions! I just recently had to build a ridiculously long employment application form which had 4 or 5 "employment history" sub-sections. With this new repeatable capability, I could just build a template of that sub-section, show one instance of it by default, and make an "Add another employer" link. The browser would automatically duplicate the sub-section as many times as the user needs. This is so useful, I can't wait for it to become reality. Oh wait, it is already (kind of).

The second half of Steve's presentation was CSS 3. This was like being a kid in a candy shop… a candy shop where all the candy is brand new, and not everyone can eat it yet. Totally awesome, and yet disappointing at the same time, because who knows how long it will be before we can use all this stuff? Here are the best parts:

New attribute selectors: [attr]

  • div[class] or [class="foo"] - select all divs with a class, or all divs with a class of "foo"
  • div[class^="foo"] - select all divs where the class starts with "foo"
  • div[class$="foo"] - select all divs where the class ends with "foo"
  • div[class*="foo"] - select all divs where the class contains "foo" somewhere in it

New pseudoselectors:

  • :first-child - selects the first child of a parent element
  • :last-child - selects the last child of a parent element
  • :nth-child(x) - x can be a number or "even/odd" keyword - select every nth child of a parent

    These are pretty cool because they can easily be used to style zebra-striped tables or list items with borders without having to write multiple classes.

  • :target - selects the element indicated by the URL hash (http://www.url.com#foo) - how cool is this?! Send your user to a specific point on a page indicated by a page anchor, like with a FAQ, and use the :target selector to style the text or element under that anchor! No more complicated Javascript to pick up the document location and manipulate the URL string!

New style declarations:

  • rgba(255,255,255,.5) - use this anywhere you would normally use a hex color. This will give you opacity on the color, without affecting the opacity of the rest of the element or any children of the element. I want this YESTERDAY!
  • border-radius - rounded corners. 'nuff said.
  • text-shadow & box-shadow - browser-generated drop shadows
  • border-image - this is a little complicated, but cool. It uses 9-region-slicing to stretch an image around the border of an element. What does this mean? It means that the four corners and center square of an image you create will stay exactly the same in size and aspect ratio, but the edges will scale to fit the element. Still confused? There's a great explanation here.

The second workshop was "How to stand out from the crowd of designers", presented by Armin Vit of Under Consideration. Unfortunately, I was a little disappointed by this workshop. Armin himself admitted that this is not usually the kind of workshop he gives, and he was called in kind of short notice to fill the spot after Carsonified had already announced the topic. I did get a good list of sites to look at for design and portfolio inspiration, some of which I will divulge here.

He also talked about the pros and cons of doing free work or unpaid personal projects in order to create a name for yourself. The general consensus seemed to be, this is a good idea for independent freelancers, not so good for companies. A lot of people in the workshop had the same experience in their companies that once word got out they had done free work from clients, EVERYONE expected free work. However, Armin did have some examples of freelancers who got lucky with the free/personal project approach and subsequently got a lot of new clients:

All in all, I got much more out of the morning session. I think Armin Vit had some great things to give us, but the presentation felt unstructured and vague to me. I took what I could from it, I just think it could have been so much more.

Coming soon... part 2, the seminar day.

Categories: Web Design