@media London 2007 – day 2 wrapup

Day two started with a fascinating talk by Jon Hicks, called “How to be a creative sponge”. In it Jon outlined his techniques for getting inspiration, how to actually start a design. He explained that there are three steps to becoming a “creative sponge”:

  1. collect
  2. catalog
  3. create

He collects raw material from everywhere: observing life, books, magazines, the Internet, T-shirts, leaflet racks, packaging labels, etc.

To catalog, you can use a variety of different methods, but you do need a system. You can use a sketchbook, binders, box files, etc . On your computer, you can use iPhoto or other photo management software, such as yojimbo. However the real killer app is flickr – tagging, grouping, sharing with other designers.

You can then use your collection as a source of inspiration to actually create stuff: critique your collection, create moodboards (a collage of images from your collections that are associated with your topic – you can even get clients to make them and use them to discuss the project. They’re cool because they’re quick to make), sample colors from the images, spot design patterns, etc..

He finished by saying:”Soak up everything, you never know when you’re going to need it”

Håkon Wium Lie was the man behind CSS, and is now CTO of Opera. He presented a talk called “One web, Acid2, CSS3″

He said a few interesting thing (including his observation that having browsers on devices like the Wii might change the way we use the web – sharing our browsing experience with others in the lounge room), but for me the most interesting part was his look at HTML 5 and CSS3

HTML5 will include the video element, but the moment there is no agreement on the format, we need to push for a format that is free and unencumbered by patents: Ogg Theora would be a good choice.

He then went on to look at some of the interesting things in CSS3:

Media queries allow you to apply CSS selectively depending on parameters e.g.: if the device is handheld and less than 300px wide, apply a different style sheet.

Multicolumn layout (newspaper-like columns) will be more important as wider screens become more prevalent. You will be able to define the number of columns, the column width, and the gap between columns.

Paged media – for printing. Hakon showed us the latest edition of his book, which he wrote in HTML, and was sent to the printer as a PDF generated using CSS!

Web fonts – next big thing! You’ll be able to upload a font which the browser will download and use. Web fonts were actually introduced in CSS2 in 98, but without support for OpenType (and different implementations by Microsoft and Netscape, of course) they never took off. No implementation yet, but that should change very soon. There are literally thousands of freely available fonts that we can use.

In the afternoon, Dan Webb presented a talk entitled “The Mysteries of JavaScript Fu”, which was a grab-bag of JavaScript tips and tricks.

Dan started off by talking about event handling, and the benefits of using scripted event handlers – it’s nearly always better to go scripted! Scripted handlers are very DRY and nicely separate out the JavaScript from the HTML. However, large numbers of event handlers can choke the browser.

The best strategy is to use script based handlers by default. If this cause the page to be unresponsive, try using event delegation, and then, if all else fails, go inline

Dan then went on to talk about optimization.

  • Don’t include tons of library files if you don’t need them, the less JavaScript for the browser to assess the better.
  • Browsers can only normally load 2 resources concurrently, so combine JavaScript files together.
  • Always use Gzip compression over minification – once Gzip has been used, minification doesn’t give you much more a saving.
  • Make sure everything is cachable
  • Be careful with JavaScript library selectors – be very specific when using them
  • use a just-in-time approach – only run code when you need it, don’t do all of the work up front.

Finally, Dan talked about working cross-browser and testing:

  • Buy a Mac for Parallels
  • Get Firebug – and Firebug Lite on other browsers
  • Use Selenium for testing

The day finished with the fun “Hot Topics” panel, presented by Jeremy Keith with panel members Richard Ishida, Joe Clark, Dan Cederholm and Drew McLlellan. they answered questions on a variety of attendee-submitted questions (including the controversial “Why are there no women on the panel?”).

The day finished with the shock announcement of Joe Clark’s retirement from the web accessibility field – he’ll be concentrating on his captioning work. There was a warm round of applause to thank Joe for his efforts in the field – I think it’s fair to say that without Joe the topic of web accessibility has lost a champion and conferences such as @media will be much duller without him.

Overall, I would say that @media was a very successful conference this year. The sheer number of attendees was quite astounding, with delegates from all over Europe. The quality of the presentations was very high – normally at web conferences I tend to find that a few of the presentations aren’t really very useful or interesting (more “filler”); that wasn’t the case here. However, the lack of wi-fi at the venue was disappointing – something that will need to be addressed next year.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.sitepoint.com Matthew Magain

    Great stuff Simon. Very comprehensive. Thanks!

  • http://www.tmwebdesign.co.uk Php_penguin

    Great stuff, but I seem to be hearing a lot of mentions of Gzip and its use on resources. Any chance of a tutorial on this method?

  • http://diigital.com cranial-bore

    CSS Media Queries sound good. Hopefully they can be more fine-grained than simply “use this stylesheet”. I’d like to be able to use if statements and basic maths within a stylesheet rule.

    And Multi-Columns are only useful if the entire column height fits on the screen. Otherwise the scroll-down, scroll-up activity totally cancels out any benefits of utilizing the screen width.

    Web Fonts are also exciting, but I can see a big period of overuse for the first 5 years before some authors realise that having wads of copy in some novelty font isn’t such a good idea.