Review: An Event Apart

Having had a few weeks to digest An Event Apart I now have decided rather than detailing the entire event cover to cover, to just focus on the highlights.

Secrets of the CSS Jedi - Eric Meyer

Eric Meyer started out the conference on Day 1 by blowing my mind on what was possible with css based layouts. His first tip was on the universal selector

* {margin:0;padding:0;line-height:1.2em}

To smooth out the majority of line-spacing and default margin issues between browsers this solution is recommended. Apparently one also does not need to specify a measurement for line-height and the approximate line-height that most browsers apply is 1.2em which should be the default. He went on to explain that all elements except the form elements should be included in the definition of the universal selector. This is largely due to the way browsers handle issues such as padding within form elements and that there is no standard browsers display forms. It is best to leave this rendering up to the browser.

From the universal selector he went on to give a demonstration on the power of CSS as it pertains to table based layouts. Basically he took a standard table and using nothing but css turned it into a dynamic graph. I've never seen css used for this type of practical application and it was fascinating to see. If only he had given away his code snippets

Perhaps the most useful thing from both of Eric Meyer’s talks was his quick discussion about a library of Javascript code (named IE7) written by Dean Edwards that essentially makes IE6 behave like IE7. On his website Dean states “IE7 is a JavaScript library to make IE behave like a standards-compliant browser. It fixes many CSS issues and makes transparent PNG work correctly under IE5 and IE6”

I also had an opportunity afterwards to get his thoughts on Fahrner Image Replacement and asked him if it was a technique he would advocate. He responded by saying he would advocate using images with alt tags within your headings unless of course you had a need to print the page, in which case Fahrner is a suitable technique.

Writing the User Interface - Jeffrey Zeldman

The concept of writing good copy is a skill that most web designers do not trouble themselves in. Writing brief, clear, audience appropriate and brand appropriate content should be one of the primary foundations of any website. Unfortunately it is often one of the most overlooked foundations. He explained how all copy is really a brand opportunity (in most cases often missed) and that it is often one of the cheapest parts of your site to fix. A simple example of poor copy from the New York Times follows:

To continue reading this article you must be a subscriber to TimesSelect.

Notice how they use the word “must” in this sentence. Not very friendly is it? It’s like they are giving the buyer a command. Jeffrey went on to provide a revised example that demonstrated a much friendlier approach (Note also the inclusion of a link to the subscribe page, which was previously absent):

To continue reading this article, subscribe to TimesSelect.

Jeffrey went on to talk in depth about the importance of brevity and clarity in writing, which was something that really resounded with me as I tend at times to write very loosely. Without giving everything away, a few tips were to:

1. Use Frequent Subheadings
2. Chunk text
3. Mostly use 8th grade vocabulary and short declarative sentences
4. Gets some help by reading Attack of the Zombie Copy and Your About Page is a Robot.

Redesigning Your Way Out of a Paper Bag

Jason Santa Maria produces some high quality graphic design work and is one of many artists I look to for inspiration. One of the biggest things I took home from this session was just a simple thought: start storing creative ideas. I've long kept a scrapbook of creative ideas and thoughts, but after this session I realized that this really needs to be broadened to include photos and excerpts from things I find inspiring. Magazine articles, newspaper clippings, the whole nine yards. He also did a brilliant piece on figuring out your brand and really embracing it wholeheartedly.

What I really took away from this session was the importance in sweating the small stuff. From whitespace to the importance of hierarchy and focal points in your design, he covered it all. Here are a couple of points I found especially useful:

1. Don’t use black text on a white background. The contrast is too hard on the eyes. This can be fixed by choosing a slightly flatter black ie. color:#2b2b2b;
2. Don’t be lazy with your typography and use ' and ". These are primes and should be used as units of measure for inches and feet. You should be using their html character equivalents. See below for this:
   
3. Apparently the best web fonts are Verdana (sans–serif) and Georgia (serif). He prefers not to use Arial but stated that Trebuchet MS and Lucida Grande were OK.

The Web Usability Diet

Having read Steve Krug’s book “Don’t Make Me Think” I didn’t really get all that much out of this session. He basically reinforced a lot of the points that he made in his book, and although I did enjoy the live demo he did of www.magazines.com I really didn’t really find any new inspiration. It would have been great if he would have critiqued a few more sites and spent a little less time explaining his theory since about 95% of the audience had read his book.

Interface Design Juggling

This I think was my favorite talk of the entire bunch. Dan Cederholm delivered an excellent speech on color, typography, iconography, microformats, and design flexibility. He kicked off by introducing his latest creation Toupeepal which is a social networking site for men to review toupees. I would recommend that everyone take a look at his design, I just love the simplicity and clarity that this site embraces.

Here are a few tips I got from the session on colour:

1. Start with a small core palette that is reused throughout the design.
2. Use a online colour generator to help with this
3. Choose colours that match to photos you use. There are colour palette generators to help.
4. Start with some nice broad strokes and just layout a handful of elements on the page, then play with link colour, header colour, submenu colour and text colour.
5. Link colour is important especially on link–heavy pages

Here are a few tips I got on typography:

During the Italian renaissance the typographer had one font to work with, and yet this period produced some of the most beautiful typographical work. – Oliver Reichenstein

Information design is not about the use of good typefaces, it is about the use of good typography… Anyone can use typefaces, some can choose good typefaces, but only few can master typography – Oliver Reichenstein

1. He reiterated Jason Santa Maria’s point on using Georgia and Verdana, emphasizing using Georgia for headings and Verdana for everything else.
2. There is also a great deal you can do with the display of headings using CSS. I recommend either buying his book on Bulletproof Web Design or his book on Web Standards Solutions for the keys to these tricks.
3. A great resource that he pointed us all to was www.webtypography.net
4. To add another resource I would also take a look at 5 simple steps to better typography

Here are a few tips I got on favicons:

1. Create a favicon for every site you build. Period.
2. Either use the site logo, or if it does not scale well use a cropped portion of the logo
3. This is one I found myself, but you can create favicons online using Dynamic Drive’s favicon generator

There were a few final points on microformats, why you should use them, and why everybody should use them. I am in full agreement and I think that these standards are a necessary step in the evolution of the internet.

Day 2 brought another host of talks, but I'm just about all typed out here. I will say that I deeply enjoyed Cameron Moll’s discussion on Good vs. Great design and I also enjoyed the website critique that they all the speakers contributed to at the end of the conference.

In summary An Event Apart was worth every last penny. From design, to code, to great networking opportunities, this conference completely blew my expectations.

This entry was posted by Stuart Bowness on Saturday, April 28th, 2007 at 9:14 am and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.