So I am finally getting around to writing up a summary of my time at An Event Apart Boston. I can’t even express how much that I learned. It was amazing to see so many respectable names in the web design/development community all speak. Thank god for my company, Matrix Group International for paying for myself and two co-workers to go to the event. So I thought I would give a quick run-down of all of the events.

Eric Meyer — Secrets of a CSS Jedi

Eric Meyer started off the event with an wonderful talk showing the amazing things that are possible with CSS. The first thing that he mentioned was that in order to get consistency between browser, you should zero out the margins and paddings for every element (except form elements). People have been doing this by using the universal selector (*), but by removing the margins and padddings for every element, you can sometimes get weird results with form elements. I mean conceptually, what should happen when you add more padding to a radio button? Should the space between the circle and outline increase? The other thing is that the universal selector takes more time to process than just having a large group selector.

His next point was that we need to realize that CSS doesn’t care what element is doing what, an element is an element. Which is when he turned a regular HTML table into a bar graph, both vertical and horizontal. Basically, he had a few classes, and he was positioning the cells absolutely. I am still not sure if it would have worked in IE 6, since it is so fussy at times. He said he would post his HTML files at some point, so I would be interested in testing in IE 6. It was just awesome to see the power of CSS, and what we have to look forward to in the future as browsers get more and more powerful.

Jeffrey Zeldman — Writing the User Interface

Jeffrey Zeldman next spoke about writing content for the web. When we look at the highest traffic sites on Alexa, it is not a coincidence that content heavy sites are at the top. Content is what drives traffic. Fresh copy is what counts more than looks. People do not bookmark pages because of the images that are on it (except for photographic sites); they are bookmarking because of the content.

Every instance of copy on a site is a brand opportunity, and copy is often the easiest and cheapest part of a site to fix. Guide copy should be clear, brief, audience appropriate, and brand appropriate. Web users are most often in find mode, and they scan. While monitors get better and better, reading on the screen is much more fatiguing than reading print.

The keys to writing for the web is:

Use frequent subheads.
Chunk text.
Use 8th grade vocabulary, short declarative sentences

I tell you, Zeldman really speaks well. When he speaks, you just get enthralled in what he is saying. That is why I think working with him would be awesome. It is too bad that the Happy Cog Front End Developer position requires you to be in Philly. I can’t even imagine working with all of those awesome people at Happy Cog.

Jason Santa Maria — How to Redesign Your Way Out of a Paper Bag

Since I am not always the most creative person, I was really interested in hearing this speech. The first thing Jason Santa Maria talked about was looking around you for inspiration.

Keep a sketchbook.
Keep morgue files (whenever you see something in print that is cool, put it into a file folder).
Surround yourself in a creative environment.

But the best solution for seeking inspiration is to do research. When Happy Cog was redesigning the Comhaltas website, they went and heard these people play the music, and they hung out with them. This gave them some insight into the music and gave them inspiration to create the design.

We also need to remember that design is iterative. First, you start with grey box comps, which is where you focus on the idea and not minute details. Once satisfied with those, you get into the specifics of each element. When designing, you need to consider things that will not look dated in a year.

Another topic that I have recently read about in Transcending CSS is about grid design. This is not a new technique; it is just something that people do not know how to do. But basically by setting up a grid and designing by it, you keep things in line and can create really clean and nicely defined lines. This way you can plan for the placement of things, even if you aren’t the one updating it. Jason said to embrace the whitespace, which I think is something that is definitely being done in this whole “Web 2.0” thing.

The way to design is left to right, top to bottom, big to small; just like how we read. Make sure there is enough contrast on elements, and things do not have to be over-styled.

On a side note, Jason had a little rant about how " is not the same thing as “ (“) and ' is not the same thing as ’ (’). " and ' are used for feet and inches, while “ and ‘ are used for quotation marks and apostrophes.

Jason’s speech really inspired me, and I have since given up on my sister, who was going to design my site for me. I am just going to go for it.

Steve Krug — The Web Usability Diet

I had heard Steve Krug give a similar speech at another conference, but his points are still so valid. He first begin by pointing out that even the best thought out products have usability flaws. You can put it all the research and time creating the product, but without testing it, it can easily fail.

Web user testing is easy to do:

Round up a few volunteers.
Have them follow a script where they will be asked to complete some tasks.
Record it using software like Camtasia.
Then review with your team and see how much you screwed up.
Oh yeah, and pay your volunteers.

He made the point that you need to focus on the most serious ones, until they are right. It really does not take too much time and effort to realize that you have the problems; the harder part is fixing them all. The example that he used was to order a subscription of The New Yorker magazine on Magazines.com without using the search function. We found that it was not very easy. Time yourself. Only a handful of people did it in the alloted amount of time (approximately 3 minutes). He has used this example time and time again, and Magazines.com still has not corrected the problem.

While usability testing is relatively easy, sometimes it is hard to convince your clients of the value of it. But honestly, if money is involved, there needs to be testing.

Andrew Kirkpatrick - Beyon Basic Access

I must say, Andrew Kirkpatrick did not have the most enthralling speech, but it was an extremely hard topic to make interesting. He spoke about how accessibility is more than just alt attributes, <label>s, <th>s, or retaining information when JavaScript is disabled. There are many different kinds of disabilities that users of the web have, and we need to embrace all of them, not just a few.

The whole gist of his speech was that we need to provide the name, role, and state of objects that users are interacting with. For instance, if you have a set of tabs, these need to be named so that they make sense. Their role needs to be defined, i.e. Tabs, and the current state of each tab needs to be readily accessible. Providing keyboard access to arrow over between tabs is a huge step forward. Yahoo! and Dojo are making great strides in this domain, and their scripts are readily available.

Dan Cederholm — Interface Design Juggling

Dan Cederholm may have given the best talk of the entire two days. He was witty, and his insight was great. Not to mention he is currently one of my favorite designers.

He first spoke about choosing color. By starting with a small color palette and reusing variations of that set throughout the design, you get a much more cohesive design. A few ways to choose these palettes are:

Grab a nature photo you like, and use the color picker.
Apply the Mosaic filter in photoshop to any image, and see the color combinations that are possible.

Even such a simple thing as link color can carry great weight, since links are the most important item of the web, choosing a color that will stand out is important.

In Dan’s definition, great typography is invisible. Since there are not many universal fonts, we just need to learn how to work with what we got. One thing that Dan does beautifully on his site, is by styling his &’s beautifully. It is such a small thing, but just by adding one class, it really adds that extra beauty to the page.

Another interesting point that Dan brought up was the importance of Favicons. These can be used when people link to your site, they are used for bookmarks, and we are seeing them more and more on mobile devices. So essentially it is the first brand opportunity for your site.

Dan also talked about adding small simple details without adding complexity. By adding a simple 3px drop shadow on the bottom of a box, it adds a lot of detail to the box without any extra markup.

Finally, Dan talked about Microformats. I must say I was a little unclear about the benefits at first, but after hearing his speech, I totally understand them. I thought it was all very confusing, but essentially all that you are doing is adding a few universally accepted classes to elements. As Dan said, we are really desiging for the future. Allowing people to do all sort of cool things with these universal classes.

Oh, and of course Dan talked about being bulletproof:

Check out what your site looks like with images disabled.
Check it out with CSS disabled.
Finally, bump up the text two sizes.

Opening Night Party — Restaurant 33

Definitely the coolest bar I have ever been to. Restaurant 33 had these cool lighting effects all over the place, and it was really entrancing. Not to mention the free food, free drinks, and people were cool too.

Cameron Moll — Good vs. Great Design

Cameron Moll is another wonderful designer, and his talk seemed more conceptual than technical, but it was still very interesting. He first started taking about how there are some things that are just mapped naturally and that can help up determine how something works. Design is essentially communication, but great design yields meaningful communication. Sure there may be some really creative people out there, but if they don’t know how to design for specific audiences, then there talent is wasted. Cameron talked about how seeing things in greyscale can help to see the importance of specific elements in design.

He then went on to talk about how influence is almost cheap, it can be found anywhere and copied anywhere. While it can also be found anywhere, inspiration is a much deeper thing.

Finally, Cameron discussed the difference between redesigning (just updating the look of the site) and realigning (adapting to your users’ changed needs). He finished with the concept of fixing vs. preventing. By putting in more time up front to prevent things, you will be saving time in the long run from fixing.

Ethan Marcotte — Web Standards Stole My Truck

Ethn Marcotte’s talk was a little boring to me, because he didn’t really discuss many new things to me. He did make a few interesting points though.

While embracing standards may seen hard (to non-standardistas), the benefits are huge
- Lighter page weight
- Better accessibility
- Better SEO
- One single document that can control the style of an entire site
You can use the developer tools (like Firebug, Web Developer Toolbar) out there, you can decrease debugging time.
Use borders and backgrounds to debug layout problems.
Validate your code.
When all else fails, just delete properties and start from scratch.

The most profound statement he made was that building a site with standards is easy, but keeping it standards compliant is hard.

Molly Holzschlag — Building Better Browsers

As many people heard, Molly Holzschlag is going to do some work for Microsoft to whip their browser into shape. While at first I did not think Molly’s speech was going to be very interesting, it turned out to be pretty good.

She first pointed out that browsers are software too, they ALL have bugs. Also, the browser history is not that long, they are relatively young in software age. Since there are so many different interpretations to things, it is easy to have many different approaches to implementation. Don’t worry, I still hate IE. But after hearing her talk, and thinking back to my programming days in college, I have more respect for IE.

Molly’s browser pathways to success were:

Create common baselines.
Clarify ambiguous specifications.
Use transparent development cycles.
Keep an open dialog with the community.
Foster events and networking (Microsoft was a sponsor of An Event Apart).
Compete of UE and features.

Eric Meyer — State of CSS in IE 7 World

Ok everyone, let’s admit it. IE 7 is a huge step forward. It can basically be considered on the same standards-compliant level as Firefox, Safari, and Opera. The browser advanced so much in a standards sense. I am not going to bore you with all of the things that are now possible in IE 7 that weren’t in IE 6, but I will point out one cool thing.

Attribute Selectors

Attribute selectors are awesome. That’s it. Maybe one of the coolest things in CSS. By adding something like a[href$=".pdf"] to your CSS file, you can add a pdf icon to all links to pdfs. By adding something like a[href^="http://], you can target all external links an add an icon for that. That’s the long and short of it. It’s awesome.

Eric also encouraged everyone to make IE 6 more like IE 7 with Dean Edwards’ IE7 scripts. Via JavaScript, you can make IE 6 act must like IE 7. I have played around with it a little, and it is really cool. Use it. Spread the word.

Jeffrey Zeldman — Selling Design

Jeffrey wrapped it up with an interesting discussion on choosing clients. I have read a few articles recently about choosing clients, and this just reinforced the point. You do not need great clients; you need great relationships. You still need to choose your clients carefully and make sure not to choose indecisive clients, or the work will never get done successfully. The way to a good relationship is to involve the decision makers who are high up in the organization. This makes them feel special. Everyone wants and needs to feel special sometimes.

Our job is to sell ideas, not pixels. Solve a problem with your design. Don’t just create a design. When responding to criticism, figure out what they mean by it. Why don’t they like that color? They also need to realize that the site is not about the stakeholders; it is about the users.

When all else fails:

Push back.
Look into it.
Agree with them. Surprise!

That’s It!

I must say; it was awesome. I can’t wait to find some time to actually do my site design. If ever you have the change, go to An Event Apart event. Everything was very well organized, and I learned a lot. Thanks to everyone at An Event Apart, Happy Cog, and the speakers.

An Event Apart Boston Summary