FallenRayne Dev One developer's random thoughts are better than nothing.


An Event Apart Day 2 – Seattle 2011 (notes)

Ok, so I am back with day 2 of An Event Apart in Seattle.

Eric Meyer - The CSS3 Anarchist’s Cookbook

Eric Meyer started off the day with an awesomely insightful way of messing with people by editing their browser CSS files. His entire talk (there were no slides) was him standing on stage and editing CSS and applying it to Safari and Firefox. He did everything from making every other paragraph slightly smaller, to using weird behavior in Firefox to make the footer element of the page the background and repeat it diagonally.

This talk was insightful not only because he showed the fun little evil you can do, but it also showed how powerful CSS3 really is. I didn't actually get a ton of notes down during his talk because it was mostly him editing CSS on the fly so it was a little difficult to type while watching that. This is more of a talk that you have to see rather than read about.

Jeremy Keith - Design Principles

Jeremy's presentation was by far my favorite. He was a very engaging speaker and had a great topic to talk about; Design Principles. Jeremy defined design principles as the "How?" to design goal's "Why?" and design pattern's "What?". Basically, your team has a goal: "Build fast, low bandwidth websites because our main customers are mobile." That goal is the "Why?". There can be multiple principles for that goal such as: "Unobtrusive JavaScript will be used to progressively enhance the site." A pattern, or one of the "What?" could be: "Use AJAX to override normal form submit when JavaScript is enabled."

Jeremy used a really nice example with the US Government. He defined the Constitution as the goals, The Declaration of Independence as the principles, and the patterns being things like "one person, one vote" or "checks and balances".

One overriding principle that was talked about a lot was a quote from Jon Postel; "Be conservative in what you send; be liberal in what you accept." Basically, send only what you mean to send, don't display a phone number in different formats. Be liberal in what you accept, meaning you should be able to accept a phone number in different formats. I know that is a pretty simplistic explanation but it holds true for most things.

Graceful degradation was one of the big topics of Jeremy's presentation. He showed how an input field with new HTML5 types will degrade gracefully into type="text" in older browsers that do not understand HTML5 markup. This is very important because it means that we can start using HTML5 today and the older browsers will mostly be able to handle it. The goal should be backwards compatibility, the principle is progressive enhancement, the patterns are different ways of providing gracefully degrading. An example would be wrapping a new datalist element around a select box. The datalist ignores all tags except for option tags, so the select would be ignored on browsers that can render a datalist. Browsers that can't render datalists would show the select box instead. HTML5 video is very similar. Use a video tag on the top level with the object tag inside for flash and finally a download link if neither work. This covers all basis and keeps the backwards compatibility that is the overriding principle.

JavaScript should be used in a similar way. Unobtrusive JavaScript. Take the example of the rating stars. Should you code the stars first with JavaScript and then figure out how to fall back or would it make more sense to build a select box that contains the various rating levels and then progressively enhance that with JavaScript to replace it with rating stars? "Break down the problem and find the base level, build that and progressively enhance."

Jeremy brought up a topic from Sarah Parmenter's presentation about anti-patterns or "Dark Patterns". He showed that using inline JavaScript is very much an anti-pattern, it breaks away from the intent of HTML and breaks some of the rules.

Lastly, he went through a lot of the big players and showed some of their principles and goals. Google was a good example:

  • Goal: "...to organize the world’s information and make it universally accessible and useful"
  • Principle: "Simplicity is powerful."
  • Principle: "Every millisecond counts."

These still hold true today, Google still lives by this goal and its principles. He also showed his main goal and pattern, the goal is "Universal Access", the pattern is "One Web". The principle should be "A page should be viewable on all devices, big and small".

Aarron Walter - Idea to Interface

Aarron's talk was all about the creative process and ideas and how to grow them. His overriding message was that ideas are important and it is important to give yourself permission to follow through with your idea. By sitting by and over thinking or over planning the time could pass for the idea and it will be lost.

Aarron talked about Ideation, the ability to come up with a lot of ideas and go through them quickly. Incubate, allow the ideas to settle and then evaluate each idea later and determine what is feasible and what is fantasy. Just pump out ideas.

He spoke about the ways to attack your ideas. The concept that the idea needs a design that is bigger than just a layout or pretty font, the design is about everything dealing with the idea. It is best to go with what you know because it is easier to design and get a working version out. Trying to tackle a subject that is not fully familiar will be difficult to do when running through ideas so quickly.

Aarron stated that the buddy system is important. With someone to help develop and design it makes it easier but also there is a level of accountability to each other to make sure things get done. He also said that prototypes are important, get a working version of the idea out there.

Ideas are not always thought about at the right time. Meaning that Twitter wasn't ready for prime time when the original creator had the first idea of it. He had to shelve the idea for a few years and bring it back up when the time was right.

Design a persona, make the idea have brand traits, almost like the brand is human. Is the idea or brand friendly, funny, sarcastic, or overbearing? This is important to know because you do not want to create a very liberal feeling brand when building something for a conservative customer base.

New ideas have overhead but design patterns can help with that. Use tried and true methods to create what you need. There are many sites out there that show design patterns and how to apply them right. This works for both design and development. This helps lower the learning curve of developers and designers, plus it reduces the amount of code needed. It allows for prototypes to be build faster and cleaner.

Sketchboards are a great way to design out an application. A sketchboard is basically a cork board with the site on laid out on it. It allows the designers and developers to create the site collaboratively adding notes to this board and moving things around. It grows and morphs with the project and allow the designers and developers to ideate quickly, allows them to incubate the ideas on the board so that they can be evaluated by the team to see what works.

Aarron also talked about how wireframes might not be the best solution for design. He stated that prototypes are a much better way because they are usable. You can actually use the design as you design it which is far nicer. Keep revisions of the prototypes so that at any point you can go back to a previous design. Test early and test often. This is true with prototypes as well. Get users in there quick to verify that things are working the way you intend. Don't assume you have a good design.

Andy Clarke - Smoke Gets In Your Eyes

Andy's presentation was all about CSS3 animations using transitions and transforms. His talk focused mostly around Madmanimation, a recreating of the Mad Men opening credits using nothing but CSS3. Very impressive stuff.

He mostly covered the big points of CSS3 animation:

  • Translate - to move an object
  • Rotate - to umm, rotate an object
  • Scale - to change the size
  • Skew - to change the dimensions of the object

Using these 4 core principles of CSS3 animation, you can basically do what ever you want and create some incredible screens.

He also showed progressive enhancement with this presentation. If using a browser that does not support CSS3, the page still renders and looks quite nice doing so, showing each scene with a description of the scene. This is due to the fact that each scene is a list item in an ordered list. That means that the html is semantically correct and is just content.

The big thing at the end that Andy showed was Animatable. This is a CSS3 web based animation studio that should be released soon that will allow the creation of CSS3 animations with little knowledge of CSS needed.

All in all, Andy had a great presentation though for some reason he kind of reminded me of the Ricky Gervais of the web design world. It was probably just the accent and snarky humor.

Alexa Andrzejewski - The Dimensions of a Good Experience

Alexa probably had my least favorite presentation overall. The information was good but for some reason I had a hard time getting through this one and with that I actually did not take any notes during her talk. It was probably just a bit of burnout after two long days of presentations. Luke Wroblewski has great notes about AEA Seattle 2011 (and he is a presenter) so his notes for the presentation are here.

Tom Coates - Everything the Network Touches

Tom had the most entertaining of presentations and with that I actually had a very hard time writing notes with his presentation as well. Kind of interesting that two back to back presentations left me note-less but for completely different reasons. I will say that Tom was amazing because he has very similar ideas to me. Everything should be connected and on the network. There is no reason to leave something off of the network these days. Everyday items like parking meters, scales, and store windows are on the network right now and there is more to follow. We are getting into an age where soon we will be able to instantly know the status of our vacuum cleaner as it automatically cleans the house just by looking at its Twitter feed. The more connected we get, the smaller the world gets, and the more our world moves forward. Here is the link for Luke Wroblewski's notes on Tom Coates presentation.

Day 2 Conclusion

Day 2 was amazing. Loved watching Eric Meyer working his CSS magic and Jeremy Keith and Tom Coates were highly entertaining. Day 2 was inspirational and a great motivator. I actually changed some of my thinking just simply from the day 2 talks alone.

I was going to put up the day 3 notes but instead I am just going to link to Luke's Presentations page. All of his presentations are linked there and his has video and audio for a lot of them. Luke Wroblewski's presentation page

All in all, I would say that AEA is an amazing experience and I would highly recommend it to any designers or developers. It was awesome. Thank you Jeffery Zeldman and Eric Meyer for putting on a great conference and thank you to every one that helped them as well as the presenters. Hopefully I can go again next year.