@media, day 2

Professional front-end engineering
Nate Koechley
An interesting, but fast-paced presentation from Nate Koechley of Yahoo. Its always really interesting to hear how 'big sites' manage work. The very title of this presentation also rings a bit of a change - the fact that there is more of a requirement emerging to fill that specialised knowledge gap between designers and back-end developers.
Nate mentioned how the team supports 'grades' of browsers, layering the 'richness' of the user experience according to the technology each grade supports. This enables the experience to degrade gracefully for older browsers, yet the content remains accessible to all. He promoted the use of tags such as 'cite', 'caption' and 'thead', proper use of declorations and inobtrusive javascript. Other interesting tips which really drive home the level of optimisation these popular sites require, included the method of horizonal alignment of CSS sprites rather than vertical, as this seemed to result in a much faster load time. Also, avoiding gaps between icons has a positive effect on optimisation. Oh and don't use @import for calling CSS files.

Building on the shoulders of giants
Jonathan Snook
A presentation about APIs/mashups/frameworks. Jonathan talked about how developers try to re-invent the wheel whereas designers re-use. With that in mind, he suggested that developers follow the 're-use' approach and look at what's already out there and established. He touched upon some of the main frameworks available.

For example: The Guadian & Dopplr
Marc Pacheco & Matt Bidulph
Marc focused on challenges the Guardian faces with CSS management. Due to the variety of layouts, many CSS files are used. In the development phase, the files are kept separate for easy maintenance and are called using @import. These are then merged when the site is published. He mentioned that in his experience researching CSS management, there was very little information available and very few tools that aid the control and maintenance of large numbers of CSS files. Particular issues discussed during the Q&A, were the locating of specific code in large files and the removal of redundant classes etc. Hmmm - am there are tools out there for that. I attended a Microsoft presentation on Expression Web and remember quite a feature was made of CSS management. Must investigate further...
Matt Bidulph focused on the use of APIs for his talk on the development of Dopplr. He made the point that an application is more interesting with other people's data in it. Dopplr uses a number of APIs to combine features and data. He mentioned how it can integrate with Google. Pretty interesting, and I can see how it can work for social netwoking sites, but not sure you would want to rely on third party data etc for business critical purposes. To ensure total control, you kind of need to re-invent the wheel to a degree, I guess.

Communicating best practices
Rachel Andrew, Paul Boag, Patrick H Lauke & Murray Rowan
I was a bit disappointed with this session, but I think that may have been because it covered similar points from previous years. Only a problem if you've been to a few of these events. And I think they are probably important points worth covering. Much of the session discussed how to present good practices to stakeholders, how to make them a selling point, backing up the reasons why. Or whether we should just follow this best practices anyway as matter of course. I would say a bit of both. Another point covered, was how did the panel handle clients that insisted on doing something that went against the grain. Answers to this was to inform the client of the reason, backing it up with articles from third parties if necessary, then making a point that you would perform the task but it was against advice and that once the project was completed, you would not wish to be associated with it/wouldn't want to include it in your portfolio. This often surprises clients, enforces a sense of integrity and drives home how much you disagree with a principle.

Richard Ishida
Global design: Characters, language and more
An interesting presentation discussing character encoding (never been quite sure of what all this truly meant, but have a vague reference point now!) He explained the importance of declaring the language in the header ie. lang="en" or xml:lang="en" and how Unicode encoding UTF-8 is favourable. It certainly explained why random characters might appear if the correct encoding wasn't declared. I will start looking at headers in websites to spot this now!

@media 2008

Thursday and Friday last week was @media 2008, held at Southbank Centre. The venue was certainly one of the better choices for the event, especially due to its proximity to Waterloo Station.

I've attended all of the @media conferences and have enjoyed them all. I was a little concerned this year as the schedule seemed to remain quite gappy close to the event date, but I needn't have been concerned as I didn't feel short-changed. Although I didn't come away with any major revelations, I did enjoyed it and felt, as ever, it raised debate and refreshed inspiration!

SO common themes that seemed to emerge for me this year:

• Making use of established APIs to enhance data and save on development


• The stronger emergence of a role to cover 'front end engineering/development'

Anyway, here's my take on the sessions I attended...

Designing our way through data
Jeffrey Veen
I enjoyed this keynote. Jeffrey Veen, among many other things, worked on Google's Analytics front end and this session focused on the presentation of data. He drew upon examples from history and from other disciplines to show how data can tell stories. He talked about how the graphical interpretation of data can enhance the message by allowing the story to be told at a glance. He also warned against 'chart junk' - using graphical devices that woolly the message and just provide a surface gloss rather than making the data easier to interpret. Examples of creative design included Beck's London Underground map, John Snow's map of cholera outbreaks and the art of Chris Jordan.

For example: BBC Home page + Clear Left
Tom Cartright & Claire Roberts, and James Box
Two case studies here, one describing the development of the BBC home page which had communicated the strong requirement to optimise the site in order to deal with the many requests it receives, and Clear Left's role in the Edenbee website. A couple of interesting points James Box made, was that Clear Left 'don't do deliverables'. They may work with wireframes etc for the development of a site, but they don't present these to the client. He also offered the advice that when approaching social/community websites, design FOR a community, don't try and design A community. The case study also covered the use of API's.

Getting your hands dirty with HTML 5
James Graham & Lachlan Hunt
Some showcasing of some features of HTML 5, including specific tags that would reduce the need for divs with classnames; contextual h1 tags; a legend tag that would allow for captioning of images, objects etc; the opportunity to display video from the browser without the need for plugins.

Underpants over my trousers
Andy Clarke
An interesting session looking at how a comic book communicates a story and how these techniques can be adopted by the web designer. Andy told of how he struggled to make a newspaper site look 'different' and how he used comics as his inspiration for breaking away from the predictable approach. He provided examples of how comic book writers/artists use scale, grids, proportion to create a sense of drama and tension. How they provide non-specific cues to the reader to guide them round a page. He then showed how he used these techniques for his design and how he built the css to realise it. It was also interesting to note that aspects of the design may have been tricky to implement in reality when images and content would be created on the fly. However, its always a trade off building something that appears unique and 'un content-managed', requiring a high degree of control over individual elements, and something that is practical and easy to maintain by non-designers.

Designing user interfaces: details make the difference
Dan Rubin
Dan talked about the level of detail he puts into his designs in order to give them that extra edge. He discussed grids and using increments of units to create spatial relationships (vertical and horizontal padding) to create a harmony/pattern/rhythm to the page. Even if it uses just units of ten, it helps to give the design a sense of consistency and also aids the designer as this enables the designer to make many design decisions up front. He mentioned letter spacing to tighten headings and a very good tip - using a non-breaking space to prevent the occurence of widows. Dan continued with some photoshop tips to give texture and depth to what could otherwise be a flat and 'shiney' medium. Tips included using layer blends, taking sections from photographs and adding noise to create textures, overlaying colour layers to make colour changes quick and easy. He showed how very small changes could be made to improve a site, using an example that took just a couple of hours. I came away with the overall message from him that as designers, we shouldn't submit a design unless we're happy with it, even if it means tinkering with the details until it works just right.

Hot Topics Panel
Jeffrey Veen, Andy Clarke, Dan Rubin, Bronwyn Jones
An interesting debate including topics covering developer/designer working processes and the provision (or lack) of content from clients - am sure there was plenty more but its escaped me for the time being!!