@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!!

Silverlight game continued...

Well the game has been making progress, if a little slow. The developer I'm working with has dabbled with a little games programming in the past but has been learning Silverlight games programming techniques as we've gone along. So between the two of us, its pretty much been a case of getting stuck in.

Once I'd drawn the characters in Expression Design, I exported them as xaml files, added them to a Blend project and worked on the (very basic!) animations for each character. For some characters I created just the one storyboard, other characters have several so that they can work independently and randomly. The developer requested I make each character a User Control. Getting this just right for him to work on took a bit of re-jigging: ensuring that the character was positioned within a canvas rather than the default grid, plus resizing the canvas tight to the character's edges. Some animations worked well when added to the game, others required some tweaking. Initially I'd worked with two 'states' which consisted of the basic character which was swapped to another image of the character in its altered state. This didn't seem the right approach and indeed didn't really work well in situ so I found working on the change of features directly in Blend in the storyboard far more satisfactory. Having used Expression Design really was an advantage when working with Blend, as methods of editing vector images are shared between the two.

The most exciting thing was seeing the characters and animations in a game that works! The game is playable at the moment but not finished - still some more to work on but its oh so close!

Silverlight game

Well for some reason I decided to create a really basic game in Silverlight. When I say 'I', I really mean I will do so with a lot of technical help from a colleague, but decided it would be a good way to get to grips with a bit more Silverlight and the Expression tools. My first step was to create some assets for my game, so I came up with a theme and created some characters using Expression Design. Now I can see Expression Design coming in for some design-snobbery criticism, but I actually find it ok to use. I still get frustrated, however, by the colour selection in the gradient tool, but otherwise I found it ok. I decided to create large illustrations of my characters initially, then set up the game layout and scaled down the grapics to put them in position. I need now to tweak the illustrations so that they work better at a smaller size - some will also need refining so that they relate to each other more effectively and look like part of a 'suite' of characters so to speak. Once that's been done, I will need to export them as xaml files to import into Expression Blend. Lots to do!

Windows Vista sidebar gadgets

I've just worked on a couple of sidebar gadget designs and its so refreshing to work on something different. Well, I say different but I guess its not that much of a step from web page design. However, I have got a little crazed by the freedom of designing for something so specific! Its still HTML, its still CSS, its still JavaScript, but suddenly there's no shame in fixing a width and height - how much easier is that to design for?? No need for clever workarounds and compromises for backgrounds to varying height pages, no more worries about browser interpretation issues (although its good practice to keep aware of all that in case your design is to become re-used for a web gadget) AND you get to use transparent PNGs! How exciting is that? Sad, I know, but I got a real thrill when I overlaid a PNG image that graduated to transparent onto a background image.

The tricky part was getting into the size restriction - designing small. When you're used to designing pages for 800 x 600 resolution, it takes a change in mindset to try and get branding info plus the all important content onto something with a width of 130 pixels. I imagine its like playing tennis all the time on one sized court and then switching to a smaller - you have to find your range. In the same way, you start to get a feel for what will work in that size restriction. In some ways, I guess it could almost define whether the content is gadget-worthy. If its not bitesize enough, then maybe its no use as a gadget. I look forward to getting to grips with a few more and finding my range.

Sliverlight animation

Having attended Microsoft's Mix 07, I decided it was high time to have a crack at using Expression Blend to create a basic Silverlight animation sequence. Now I've done very little animation in my time - pretty much just gif animation, so I'm conscious that I am as much learning about animation techniques as Expression Blend and Silverlight. It certainly was a good introduction to using Expression Blend and XAML. I will write the whole thing up in much greater detail alongside the animation on my site when I've tweaked a few things. In fact, I mean to keep at it so will probably publish several versions as I go along. But for now, I just wanted to mention some of the issues that cropped up while they are fresh in my mind.

The first thing that became evident, was the need to be familiar with XAML. Now I have no experience with this at all, but it doesn't actually look too daunting. My first task was to get an eps file into Blend. This meant that I needed to export the eps as a XAML file. For this, I used an Illustrator plugin downloaded from www.mikeswanson.com. This was where I first needed to go into the XAML code and paste it into the page, ensuring the tags were correct. From here on in, I tried to glance at the XAML code as I worked every now and then to try and familiarise myself with it. What I noticed was that any property change or transformation change made in Blend was recorded and stored in the XAML, even if the result was discarded. I became aware the the XAML was starting to bloat with unwanted code. I gained the confidence to go into the XAML and delete what appeared to be extraneous without wrecking the page. It did make me draw a comparisson with WYSIWYG web design tools. Couldn't help thinking that developers could potentially get mightily fed up with designers creating stuff with code-gone-mad results. This reminded me of Robby Ingebretsen's point in his presentation, 'Silverlight, WPF, Expression design projects - where do we get started?' on the second day of Mix 07. Robby introduced the idea of a XAML programmer role in the design/development process, who sits between the designer and the developer to ensure the implementation of design and development runs smoothly. My first little taster of using Expression Blend has certainly made me aware that somewhere along the line it would be an advantage to know XAML. If you're a designer in a large team, then there may be the facility to fulfil this role, but if you are a lone designer, do you learn it yourself or expect the back end developer to tidy up the XAML? So that was just the first issue I faced during my little animation project. More to follow!

Expression Design

My latest learning task, one of many, has been to get aquainted with the Microsoft Expression suite of tools - Design and Blend. I've tasked myself with a little project which I hope will introduce me to a taster. Nothing fancy, just some basic animation to start with. The first step for this was to create a map so I decided to bite the bullet and use Expression Design to build it. Learning a new tool is always a tad frustrating - you have enough general experience of design apps to get so far, but trying to discover how to produce an effect you could do in seconds in your preferred tool can seem to take a painful age!

To be honest, creating a basic map was pretty straightforward. Having experience with Microsoft products such as Publisher plus standard professional illustration software such as PhotoShop and Illustrator gets you through the majority of actions quite easily. Many of the terms and commands are similar. I did compromise on a few things and worked round these rather than perform the task in exactly the way I wanted, but I'm happy to say that watching a few tutorials (Lynda.com) soon revealed that everything I had wanted to create was indeed possible.

A few things niggled me - one was the colour pallet. I couldn't find a way of preserving a colour I had selected for future use. In Illustrator, for example, you can drag a new colour into the pallet but I couldn't see a way of doing in Expression Design. I'm sure it must be possible and hope it is stupid user error!!

Another thing I seem to have a problem with, and this is a problem I find in Illustrator too (probably because I'm more of a PhotoShop user) is the way accessing elements on the page versus layers works. In PhotoShop, you only move shapes on a selected layer. I guess this is straightforward because the application is for the manipulation of bitmap images. With vector tools, I find myself using the same method of working. However, I get unstuck if I happen to click on an object not committed to the layer I wish to access. The layer then switches to that containing the selected object. Before I know it, I've got bits of a path on a different layer, and I'm editing another layer and get in a bit of a mess. I imagine its a case of adapting working methods to the tool you are using/kind of image you are creating.

Overall, however, I was quite happy using it. It will probably be seen as a poor version of the mighty Illustrator and Photoshop, but as a 'supporting tool' for Blend has lots of nice features. The stroke brush tool offers scope for some interesting effects, some compound path actions seemed refreshingly simple so its worth investigating further. With XAML export plugins available for Illustrator, it will be interesting to see where it does fit in, but my first little play left me quite keen to try it out more rather than keep away so that's got to be a positive for it!

Unwanted vertical space between block elements

Just a note really about the appearance of extra vertical space between block level elements in IE6. Most annoying as it seems hard returns in the HTML code can cause this. I can get quite uptight if I can't lay out my code the way I like to, so having to break elements mid-tag gets me a little on edge. The times I find this occurs, is when you apply a style 'display: block' to an anchor tag within a list item:



If you find you get the insertion of vertical space between the list item tags, then try removing the hard returns, or if you're uptight like me and hate to work with code on one line, then:



ooh it still sets my teeth on edge, but more managable!!