Okay, the only other web event I’ve been to so far this year is @media but they’ve both been top-notch events. As I said in a previous post about @media, it was a very worthwhile event however, I also really appreciated the option of a slightly closer-to-home, one-day event. So, on the 16th September I went up to Leeds for the final stop of the FOWD tour.

I thought all the designers’ talks worked really well together, very clever and well delivered. I’ve since heard comments suggesting that the talks had little to do with the future of web design but I couldn’t disagree more. Every designer spoke about a way forward, learning from past mistakes and finding inspiration. Perhaps nothing more fitting than looking back at Bauhaus Ideology and how that relates to the web, something both Simon Collison and Brendan Dawes talked about.

There was a good mix of people in attendance too, most of which I think I spoke to at some point. A lot of Drupal developers in the north apparently but good to see some other ExpressionEngine users also there.

Thanks to Carsonified for the event (and drinks afterwards). It would be really good to see this kind of tour repeated next year.

Just for reference, here’s a list of the sessions from the Leeds leg of the tour with links to slides/audio/links if available. If you know of anything that I’ve missed out, then let me know.

1. Oooh, That’s Clever! (Unnatural Experiments in Web Design)
   from Paul Annett (Clearleft), Slides and audio on Slideshare.
2. Silverlight and Expression Blend
   from Mike Taulty (Microsoft).
3. Developing Your Ultimate Package
   from Simon Collison (Erskine Design), Slides on Slideshare.
4. Bauhaus Ideology and the Future of Web Design
   from Simon Collison (Erskine Design), Slides on Slideshare.
5. Top 50 Rookie Mistakes and How to Avoid Them
   from Paul Annett (Clearleft).
6. ‘Totally Original, I Swear!’ How Personality Can Improve User Experience.
   from Dean Vipond.
7. Useless. Pointless. Beautiful: The Importance of Play in Web Design
   from Brendan Dawes (Magnetic North), A few links.

Spending money on going to conferences isn’t something you do lightly, especially in hard times but for me @media’s been invaluable. There’s no doubt that every year I’ve taken a lot from it. This year I thought the talks from Mark Boulton, Simon Collison and Andy Clarke were particularly relevant, although others from Andy Budd, Jason Santa Maria and Jon Hicks were also favourites.

It’s great to hear people talking so openly about their design processes. Maybe not something a lot of businesses do enough of or well. I think both Simon Collison and Andy Clark made a strong point about collaborating and not competing behind closed doors. Erskine Labs and For A Beautiful Web respectively being fine examples of that.

There was a lot of talk about process and working efficiently throughout the two days. It was perhaps the theme of the conference but if the theme was ‘process’ then I think the message was ‘quality’.

Clearly it wasn’t just Douglas Crockford talking about the importance of quality. Mark Boulton raised his concerns about more fonts becoming available and how that could seriously effect the quality of typography on the web, Jon Hicks also illustrated the importance of quality in designing icons for interaction.

This @media was actually the last from Patrick Griffiths as Web Directions will now be taking over, with the next @media being planned for June 2010. If you’re a web designer or developer, I would certainly recommend checking it out.

Just for reference, I’ve listed the speakers and their sessions and also linked to slides/resources if they’re available. If you know of any more then please let me know and I’ll add them.

1. Andy Clarke: Walls Come Tumbling Down
   Slides and transcript
2. Simon Collison: The Process Toolbox
   Article, slides and transcript
3. Jon Hicks: Icons for Interaction
   Article and slides
4. Dan Rubin: Designing Virtual Realism
   Slides
5. Mark Boulton: Typography and Font Embedding
6. Jason Santa Maria: Thinking Small
7. Douglas Crockford: Quality
8. Chris Wilson: The Web Platform Just As It Is
9. Molly Holzschlag: HTML5 for the Markup Agnostic
   HTML5 Features at a Glance
10. Andy Budd: Guerilla Usability Testing
    Slides
11. Robin Christopherson: New Approaches to a Modern, Accessible Web
12. Jeremy Keith: Hot Topics

For all those small sites that don’t need a big CMS, Perch looks like a great solution. Not that there aren’t others out there but I think what makes Perch so attractive is the simplicity and the price. Perhaps knowing that such a reputable development agency is behind it I think also helps.

There are sites I’ve worked on and would like to work on where the budget is just too small to implement something like ExpressionEngine. I’m now happily realising that a new little CMS that I can be confident with is in reach for those projects.

The recent issue of A List Apart featured Ethan Marcotte and his method for creating fluid grids. It’s a great article that puts some good weight behind any argument for using liquid layouts. As the article suggests, to see a working example have a look at Ethan Marcotte’s personal site where he’s experimenting with the idea. Even more recently, the SimpleBits site has also been updated and is now on a fluid grid too.

As the article points out, big stumbling blocks for liquid layouts are images, video and other such content that’s not so scalable. Although I completely agree none of that should stop us trying out new ways of working.

Either way, whether you use liquid layouts or not, one thing most people should agree on is using a good grid. So whilst I continue to develop my own ways of working, I thought I would explain the grid I settled on for this design. It’s nothing clever, just a grid but hopefully it may be of use to someone else.

This 12 column grid is 918px wide with 60px columns, 18px gutters and a 6px baseline. The theory being that all widths and heights are divisible by 6. From setting a 12/18px body style, the division of 6 fits quite well.

Although I set 6 as the baseline, I could also say everything is divisible by three. That means when working with thirds there is already that natural rhythm running through the grid horizontally and vertically.

How you might implement that into your CSS obviously depends on if you’re going to use a fluid grid (mainly percentages), an elastic grid (ems) or a fixed grid (pixels). I’m not sure there’s a superior method, I think it really depends on the job and the priorities of the design.

Using pixels is simple and now thanks to the aforementioned ALA article, there’s a great resource for anyone calculating percentages. Ems do not have to be difficult either. By resetting the body size to 62.5%, 1 em is equal to 10 pixels which makes your grid much easier to specify. An idea from Mark Boulton I believe.

For a basic example of the conversions for this grid, here’s some CSS properties for a page containing a header, two equal columns and a footer.

Fixed grid (using pixels)

#wrapper #header, #footer { width:918px; }
#column_one, #column_two { width:450px; }

Fluid grid (using ems and percentages)

#wrapper { max-width: 91.8em; }
#header, #footer { width:100%; }
#column_one, #column_two { width:49.0196%; }

Elastic grid (using ems)

#wrapper, #header, #footer { width:91.8em; }
#column_one, #column_two { width:45em; }

Remember by reseting the body size to 62.5% I am just dividing the grid’s pixel values by 10 for the em values.

Having multiple SWFs (each with their own FLV file) on a single page is perhaps not a good idea because of the large file sizes potentially being downloaded. In this case however, the idea was to only display a single SWF at any one time, meaning multiple downloads should not be a problem, or at least that’s what I thought.

To see the actual page I was working on go to http://www.inproductionmusic.com/examples.html.

The problem was that IE appeared to get stuck. It didn’t seem able to terminate the downloads when the user was choosing one file after another. That meant the browser would appear to freeze until all the files (even those set to display:none) had been downloaded. The only other way out was to quit IE and start again. Every other browser I had tested worked just fine.

The main problem seems to be the MIME type of the FLV files streaming from the server. IE has trouble with this if it’s not set, particularly if defaulting to application/octet-stream. You can use an htaccess file to correct this by adding:

AddType video/x-flv .flv

Other methods are available depending on your server configuration.

This was only the second time I’ve been to a onedotzero festival, my first being the tenth anniversary event back in 2006. Although I’ve been continually amazed by what onedotzero have been bringing together since I first found out about them—late nineties I think. Here’s a short preview from this year’s trailer.

This year for me was another great experience. I regret not being able to be there longer as it’s a three day event with loads I wanted to see. I thought the venue was great this year too, not only for the screens but there was loads of room to see the installations. The digital zoetrope by Troika was a very clever piece of work. I tried to take some still pictures of it, the ‘interesting’ results of which are on Flickr, I think you can get the idea but you really had to see it.

Next year this event is in September but other events do happen throughout the year so if you’re interested check out the events page.

After a bit of time to sort out this site, I can finally put it live again. Now I am using this a bit more like a tumblelog and there are primarily two types of posts, notes and articles. This means there will be a lot more activity on here than before. I usually have stuff I want to log somewhere but usually don’t have the time or the need to write an article about it. So I’ll be blogging about all kinds of stuff, though probably design related, and hopefully you might just find some of it interesting too.

I know there’s not much here yet but comments are always welcome and don’t forget to subscribe to the RSS feed to stay updated.

We started off our Camden Crawl at The Roundhouse with Future Shorts, where live bands were scoring short films on stage with the big screen behind them. The place was packed when we got down there and we just about saw a couple of films from the doorway before we got some floor space inside. What followed was worth the cost of the weekend all on its own with the adrenaline inducing combination of the film Easy Money scored by the band Invasion.

After a few more queues and a few more bands including Los Campesinos at Koko we headed down to NW1 to check out Does It Offend You, Yeah? which was an awesome performance, definitely the highlight of the Crawl for me, good times. I’ll definitely be looking out for next years crawl.

You can find the Camden Crawl website here.

On April 9th The Design Auction took place at the University of Lincoln raising loads of cash for the 3rd year Graphic Design Degree Show, a great idea it was too. Although I picked up some great stuff, the highlight would have to be the ‘different’ approach to auctioneering of guest ‘rebel’ auctioneer Jonathan Barnbrook.

I was very chuffed to walk away with a signed poster by Michael Johnson and a set of limited edition books by Alan Fletcher. I wanted to buy a lot more though but bank balance said no. You can find out how it all came about, who was involved and check out all the lots at the design auction website.

‘Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.’