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 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 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:
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.
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.
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.
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:
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.
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 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:
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:
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 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.
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.
The most profound statement he made was that building a site with standards is easy, but keeping it standards compliant is hard.
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:
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 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 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:
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.
";s:13:"numberOfLikes";N;s:10:"bodyBlocks";a:0:{}}}}}i:1;O:25:"yii\caching\TagDependency":3:{s:4:"tags";a:4:{i:0;s:7:"element";i:1;s:29:"element::craft\elements\Entry";i:2;s:40:"element::craft\elements\Entry::section:4";i:3;s:7:"graphql";}s:4:"data";a:4:{s:40:"CraftCMSce35088bdfe0816226cd17fd051a4803";s:21:"0.70573500 1736501960";s:40:"CraftCMS2743a789e8993267a348eee1ee7e4450";s:21:"0.67537500 1713205687";s:40:"CraftCMS2ac34726f299f7e18e449d8e536c67f8";s:21:"0.84529700 1741778847";s:40:"CraftCMS3817d4a648fcfac939af46605323feb0";s:21:"0.36746500 1735923287";}s:8:"reusable";b:0;}}