@Media 2008
I was at the @Media conference on the 29th and 30th May (Thurs and Fri), getting some training – a web design and development conference. The focus is pretty much on user experience and front-end technology. Anyway, here’s a little run-down of the event. For anyone that is interested, links are provided to presentations where possible (though they don’t always make great sense without the speaker presenting) and Laura and I have much more detailed notes. Podcasts/audio highlights of the presentations are gradually becoming available on the conference website – http://www.vivabit.com/atmedia2008/london/
Day 1 – 29 May
Jeffrey Veen (Google) – Designing Our Way Through Data
Slides: http://veen.com/data-design.pdf
Audio: http://www.htmldog.com/atmedia2008/designingthroughdata.mp3
Jeff is a great speaker, quite a funny guy and thoroughly engaging. He’s been on the scene since day 1 and has done some great work with MeasureMap & Google Analytics. He covered some background history of interacting with data and then talked about how design can add value to information by focusing on the meaning and making it accessible (“don’t make me think, just show me the story”). He went through some great historic examples of data design like John Snow’s map of Soho overlayed with the locations of Cholera outbreaks and Harry Beck’s London Underground map (from 1933, essentially the same as the one that’s in use today) and then talked about some very cool recent data visualisations. He then went into the use of visual “mental models” in the design process (more about that in Indi Young’s presentation). The best was his explaining of a certain noble truth:
Indi Young (Adaptive Path) – Mental Models: Sparking Creativity Through Empathy
Slides: Not yet available
Audio: Not yet available
Indi Young is one of the founders of Adaptive Path and has recently gone solo to mentor and educate people on mental models, which was her topic to introduce to us all that day. What is a mental model?
A mental model is made up of your customer’s behaviours, philosophies and feelings towards your product (shown above the line). To match this you also list the various ways in which you currently support this behaviour in your product. Why use a mental model? It can help guide design, aid making business decisions and also act as a roadmap for a project. It also highlights opportunities and weaknesses in a project that may have otherwise been missed. It’s a full user experience investigation tool. Indi went on to explain how to develop mental models through engaging with your customers and also with team members. She also talked about how mental models can be done modularly as they can be a mammoth task to assemble. So pick a user type, some user tasks and do a mental model around those specifics, you can iteratively do this to eventually have a more complete mental model. Indi covered a lot in this 1 hour session. I have her book now “Mental Models – Aligning design strategy with human behaviour” if anyone is interested in a more in depth look at the topic.
Bronwyn Jones (Apple) – The Book was Better: Writing as Source Material for Web Design
Slides: Not yet available
Audio: Not yet available
Bronwyn is a copywriter for the Apple website and talked about the importance of text as both a source of inspiration as well as the focus of the design. She presented some examples of writing as source material from films (Rebecca, Apocalypse Now, Adaptation) and talked about various ways of creatively re-interpreting writing for use in visual media. The first rule of doing a film adaptation of a novel is to “read the book!” It was a fairly light-weight presentation really but just served to reinforce the notion that content is king.
James Graham and Lachlan Hunt (Opera Software) – Getting your hands dirty with HTML 5
Slides: Not yet available
Audio: Not yet available
The 2 presenters for this session had only just met on the day of their presentation! So it was bound to be an interesting show. James and Lachlan first talked about how the WHATWG (Web Hypertext Application Technology Working Group) and HTMLWG (HTML Working Group) have been working hard with many people (These groups are open for anyone to join) on the HTML 5 spec. They listed some of their design principles, such as: Don’t Reinvent The Wheel – Evaluate the success and failure of existing solutions. For those that have proven reasonably successful in terms of benefits, usage and implementation, consider adopting, retaining and/or improving upon them in preference to dismissing and inventing new features. Full document here: http://esw.w3.org/topic/HTML/ProposedDesignPrinciples
They also talked about some of the new elements in HTML and tried to show some real working examples. Here are some of the new elements: <header> <nav> <article> <aside> <footer> <meter> <video> <canvas>. You can see some of these examples in use on a preview of HTML 5 article from A list apart.
As for supporting HTML 5, Lachlan said that IE 8 will have some support, as will Firefox 3, Safari 3 and Opera. They are encouraging people to try HTML 5 as soon as these new browsers are available as the Spec will not be finished for a while yet!
Andy Clarke (Stuff and Nonsense) – Underpants over My Trousers
Slides: Not yet available
Audio: http://www.htmldog.com/atmedia2008/underpants.mp3
Andy is a well respected designer and CSS guru as well as a seasoned conference speaker. I really didn’t know how he was going to connect the world of comic books with designing sites that engage and communicate well with users but he managed to pull it off with class. He talked about how comics and illustrated novels brilliantly make use of grids (and know how to break out of them), use proportion, contrast and typography to convey a sense of timing (and priority) and guide the reader into behaving the way the author/artist wishes. These and other techniques and devices are used to “tell a story”, which is essentially what a web designer is trying to do on the web. Andy went into some practical examples, showing some designs he did for a very visual newspaper site and the semantic markup (including microformats) and CSS he used.
Dan Rubin (Sidebar Creative) – Designing User Interfaces: Details make the Difference
Slides: http://superfluousbanter.org/presentations/2008/downloads/atmedia2008-DetailsMakeTheDifference.pdf
Audio: http://www.htmldog.com/atmedia2008/details.mp3
Dan did a fairly detailed presentation on how make user interfaces “pop” by using lots of little techniques to give the design a certain “feel” and create a flow, visual hierarchy, a sense of balance and cohesiveness. He talked about good practices and little tricks in CSS or in Photoshop for typography, using grids, adding texture, lighting effects and adding a sense of tactility.
Hot Topics Panel
Discussion: General questions and topics discussed by Dan Rubin, Indi Young, Jeffrey Veen, Andy Clarke and Bronwyn Jones
Day 2 – 30 May
Day 2 was pretty much the crayon stuff out of the way, down to the geeky code stuff.
Nate Koechley (Yahoo!) – Professional front-end engineering
Slides: http://nate.koechley.com/blog/2008/06/11/slides-professional-frontend-engineering/
Audio: http://www.htmldog.com/atmedia2008/engineering.mp3
Nate is a very cluey fellow who heads up the UI team at Yahoo. He did a very detailed presentation about best practices in front-end engineering (yes, good front-end devs are calling themselves “front-end engineers” now). He discussed Yahoo’s approaches to front-end development. Their guiding principles are openness, richness and stability. Their core techniques are:
- Graded support (“c-grade” blacklisted browsers that get no CSS and JS, “a-grade” whitelisted browsers that are served the full rich experience, and “x-grade” which are the untested browsers on a variety of platforms and devices that should work and so are delivered full CSS & JS).
- Progressive enhancement – start with a functional and accessible base and build richness by adding presentation and behavioural layers on top of that.
- Unobtrusive JavaScript – keeping the behavioural layer separate from the content/structure and presentation
He discussed priority of concerns for making decisions and covered some knowledge areas and best practices in:
- HTML (very briefly… not much news there)
- CSS – good use of selectors, maintainability
- High quality JavaScript – unit testing (!), profiling, abstraction from vendor specific code
- JavaScript security concerns – cross-site scripting and other stuff
- Accessibility – particularly in rich media (touched on ARIA – the W3Cs new guidelines for making web-apps accessible)
- Performance – Nate went into a lot of specifics here, Yahoo has a lot of experience in front-end performance optimisation (the UI team at SV are all over this stuff but there were still a few new nuggets of wisdom in there)
- Infrastructure and process – documentation, debugging tools, logging, testing and profiling
Nate ended with a step back to look at the bigger picture as to why this all matters and why front-end engineering is important for the users and the health of the internet. I’ve really glossed over it here, this presentation was packed with a lot of technical detail so have a look at his presentation notes linked above if you want more detail.
Hannah Donovan (Creative director – Last.fm), Ben Woods (Media buyer – Vizeum) and Steve Pearce (Design director – Poke) – Advertising: Design with it or around it?
The topic of discussion for this panel was Banner ads; the placement, is there a best practice, where should we put them and how to work with them best when designing layouts.
The form of the discussion was a question and answers session. The main question on most people’s minds was where & which ads should be placed? Steve and Hannah both agreed that the context was very important. So if you are reading an article about cars, ads served should be car related. Although, sometimes ads are shown out of context because they are being served based on the user’s behaviour on the site. From a media buyers perspective placement is key. Of course above the fold is the most desired from a media buyers point of view. However studies have shown that the most common placement of above the fold and to the right of the screen (usually sky scraper format) are almost ignored now, as we are too used to them. Video ads were touched on as being a more engaging way to advertise and are popular with advertisers. We watch more video online now than ever before so adding adverts before watching things online is becoming more common.
John Resig (Mozilla/jQuery) – The Why and Which of JavaScript Libraries
Slides: http://www.slideshare.net/jeresig/javascript-libraries-media/
Audio: http://www.htmldog.com/atmedia2008/jslibraries.mp3
John presented a very detailed talk on the use of JavaScript frameworks, why they are cool and what you need to consider when choosing between the top 4 general purpose open source JavaScript libraries: Prototype, jQuery, YUI (Yahoo! User Interface library) and DOJO. Unsurprisingly, jQuery rated quite highly in the majority of John’s criteria (he is the author of jQuery). To summarise, he listed the focus and relative strengths and weaknesses of those four libraries against these criteria:
- Core functionality – dom traversing and modifying, events (standard and custom), ajax, animation
- Plug n play UI widgets
- Theme support
- Accessibility – The new WAI-ARIA recommendations and where the libraries stand (DOJO is ahead, jQuery is starting, YUI is looking into it)
- Architecture – bottom up vs top down, namespacing and extensibility
- Browser support
- File size – jQuery wins, YUI loses but all are relatively small when served minified + gzipped
- Speed – they’re all fast with matching CSS selectors, but haven’t looked much at the relative speeds of DOM modification and event handling
- Project – community driven development, all libraries have paid part-time developers, jQuery, YUI and DOJO also have full-time devs. Discussed Public SVN and Bug trackers, unit tests, documentation, support and training and general popularity.
It was very detailed so do check out the slides in the link above if you want the nitty-gritty stuff.
Marc Pacheco (The Guardian) and Matt Biddulph (Dopplr) – For Example: The Guardian & Dopplr
This session was split into two with Marc Pacheo from The Guardian on first. He did a rather lightweight presentation of how they manage their mammoth CSS files for The Guardian website. He talked about agreeing a common way to code your CSS, from naming conventions to formatting. He also explained that they work with multiple CSS files in the development environment and then merge it into one large CSS file for deployment to the live site to minimise http requests.
Matt Biddulph from social networking site for travellers Dopplr gave a very insightful overview of how they built Dopplr. Matt illustrated how you can build a fantastic social site with mashups to enhance a core offering. What is Dopplr?
Dopplr is an online service for frequent travellers. It lets you share your future travel plans with a group of trusted fellow travellers that you have chosen. It also reminds you of friends and colleagues who live in the cities you’re planning to visit. You can use the service with your personal computer and mobile phone.
Dopplr is built on many other sites that many people probably have an account with so it makes Dopplr really fast and easy to set up with minimal input. Matt talked about which API’s have been used to make Dopplr, Fire Eagle, Flickr, Facebook, Google maps, and Twitter. Dopplr is a great mashup example and has some nice touches that show they have really thought about how the integrate with other API’s. For example they have a clever way of accessing your Gmail/Hotmail contacts which does not require your hotmail password (unlike LinkedIn). This is very reassuring for a user and also is less of a security issue for Dopplr. Dopplr sends you to the hotmail/gmail website which informs you of a third party requesting access to your email account. Once logged in you can then allow or deny access. It also informs you that Dopplr will be accessing your contacts feed only, not your email. Much more secure and reassuring to the user.
Steve Faulkner (The Paciello Group) – WAI-ARIA, It’s easy
http://www.paciellogroup.com/blog/misc/ARIA/atmedia2008/
Steve did a presentation followed by some screen reader demos and a Q&A session about the new recommendations from the W3C for Accessible Rich Internet Applications (ARIA) and a quick primer for implementing them. The accessibility issue with web apps is we now have JavaScript/AJAX user interactions providing users with useful cues and content that are not visible to users of assistive software & devices as they work in a very linear fashion. The solution now is to dynamically add attributes to elements that represent their relationships and current state so users of screen readers have access to and are aware of content changes.
Richard Ishida (W3C) – Global Design: Characters, Language and More
Slides: http://www.w3.org/2008/Talks/05-atmedia-ishida/slides.pdf
Audio: http://www.htmldog.com/atmedia2008/globaldesign.mp3
Richard briefly discussed the history of multilingual written communication and then went into great detail about character encoding in its various forms and how that works in HTML/XHTML/XML and discussed some best practices in character encoding, language tagging and designing for multilingual sites. As dry as this presentation was, understanding the technicalities and considerations for multilingual front-end development is very relevant for us (particularly for sites such as Levi’s Europe). Things to consider are to allow space for text, links, tabs, buttons, etc to grow and generally allow the design to scale for languages like German, Italian, Polish and others that have somewhat longer words than English.
Hot Topics Panel
Discussion: General questions and topics discussed by Steve Faulkner, Simon Willison, Matt Biddulph (presenter), Jonathan Snook, Nate Koechley
Presentation slides and audio highlights are gradually being added at http://www.vivabit.com/atmedia2008/london/blog/