Fresh

Let me start off by saying that I had an AWESOME time while attending An Event Apart. From my first ever train ride to all of the food consumed to all of the conference sessions, it was an event worth attending. So many experts in the field presenting AND presenting in a manner that actually had entertaining moments (read: not boring). An Event Apart is a conference I will be happy to attend in the future.

That being said, my blog post about coding techniques learned at AEA will probably be the driest post to date. Here we go…

Before coming to An Event Apart, I didn’t know who the experts were in HTML and CSS. Then, in comes Eric Meyer. He was introduced to us as being the CSS god. That ended up being a fairly accurate statement.

On day 1 of AEA, he talked about how he coded and styled the An Event Apart website. One area of focus he talked about was about how he coded the stripe of 4 cities that An Event Apart will be held at this year.

Now he could have very easily just coded each city to have a particular background color. That would have been boring and involve no CSS creativity at all. Instead, he made a thin image strip with the background colors perfectly spaced. The cities were then placed in an ordered list with the thin image set as the background of the entire list. Here comes the genius: when an AEA has officially completed, that city’s background color is supposed to have a greyed-out effect to it. Not a problem in CSS! In the thin image strip with the cities background colors, four more backgrounds are added, one for each city. For each of the city’s greyed-out effect, the CSS class “done” was added to the completed city’s LI tag.

On day 2 of AEA, Meyer displayed more CSS prowess. He talked about how he coded the results of the A List Apart Survey. The results has numerous charts and graphs which he could have just left as images. That’s not how he hangs. In the words of the ShamWow/Slap Chop guy, stop having a boring web page, stop having a boring life! Look at the following chart.

All Meyer did was use percentage-widths in the divs and give those divs a certain background color as the bar. Why did he go through all this trouble? Answer: Accessibility and web standards. Meyer felt that the content should be accessible to all people reading the content regardless of the web browser used as well as the ability of the people actually reading it. Sure it all the CSS trickery used involved more development time for him, but his goal in terms of web accessibility was met. All in all, it was a refreshing take on how to use CSS creatively.

You made it to the end of this post! As a reward/thank you and for no reason at all, here’s a remix of the Slap Chop commercial.