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.


An Event Apart Day 1 – Seattle 2011 (notes)

So my company decided to send a co-worker of mine and myself to An Event Apart (aea) in Seattle this year. This is an extremely exciting and unexpected part of my career in this crazy web development world. I never really thought I would be going to a major web conference like this.

This is going to be my little break down of the presentations and my take aways.

Jeffery Zeldman - Web 2.1: The Medium Comes of Age

The conference started off with the man, the myth, the legend, Jeffery Zeldman. He is the author of Designing With Web Standards and the co-founder of A List Apart. He started off the conference with a history lesson. It was a history lesson about not just the web, but about communications in general. It was a fascinating presentation going back to movable type and the print press all the way to the present day with Facebook and Twitter. His discussion really ended with the advent of the new buzzword "Web 2.1". Please for the love of God do NOT USE THAT AS A REAL CATCH PHRASE! What Zeldman was talking about with web 2.1 was that mobile web is really where it is at. We need to have a better focus on the mobile because it is starting to take over the industry.

His presentation was very informative and a really good way to start off the conference because a lot of the other presenters actually drew from that and built upon it.

Sarah Parmenter - Crafting the User Experience

This presentation was in the top 3 for me. Sarah had an amazing stage presence, was very informative, was funny and engaging, and had a great accent (which always rocks). To be completely truthful, it was not the accent that puts her in the top 3. The content that Sarah provided was just awesome. She talked about how psychology affects the user experience and can craft what the user will expect or how the user will think in certain situations. First impressions are a major way that humans digest information. We make an initial impression of someone or something in the first 3-5 seconds that we look at it. We then spend the next 1-3 minutes trying to confirm or dispute that original impression.

Sarah then went into talking about how this has affected marketing. As an example, she showed how 7-Up changed the hue of their can by adding 15% more yellow to the can. By doing this, people suddenly thought that 7-Up had more of a lime flavor than before even though the formula had stayed the same. She discussed Coke vs Pepsi as well as butter vs margarine.

She also discussed Dark Patterns, or Anti-Patterns. These are the absolutely amazing marketing tricks played by certain companies. I do not say amazing in a good way. This is when a company hides opt-out options deep in the bowels of a form, or won't allow the user to opt-out even if they want to. These patterns are generally used when

Finally the 5 Basic Principles of Human Psychology in Design were discussed.

  1. Speed
  2. Simplicity
  3. Surprise
  4. Social Behaviour
  5. Stirring Emotions

Speed: "Most people make up their mind unconsciously about something within 2-6 seconds". Help guide users to the way you want them to see your design and your site. Give them the important things up front and make it quick to get to them.

Simplicity: "Often in communication, we suffer from the 'curse of knowledge' - trying to say too much. The most effective messages are clear and simple" Understand your user and offer simplicity where possible. Take something that is complex or boring and make it fun. Simplicity should be a focus, the more complex a system, the less your users will want to use it. Perceived simplicity is almost as important as real simplicity.

Surprise: "Your communication can be more effective if it challenges normal expectations or arouses curiosity." Sometimes it is good to buck the norm. If you make your users wonder you can reel them in because of their curiosity. Changing See More button from green to red can cause the user wonder why it is red and make them click it. Hide things and make the user guess. This can engage the user and make them feel happy and proud when they have found the hidden elements of your page.

Social Proof: "Understand 'herding' behaviour and how communication from friends or groups affects how we act in situations." How people will follow other people. This is true in design as well. Apple uses social influence to help with sales. "Pre-filling" a tip jar could cause more people to tip because they believe it is the norm. Showing how many people follow you on your personal sites can lead to people thinking "Maybe I should follow this person too if so many other people already are!" Facebook and the games on Facebook are also very good at this, they get you to click on things because your friends have clicked on them before, follow the herd aka Peer Pressure Lite.

Stir Emotions: "You need to make them feel that they care about the issue if you want them to take action. Negative and positive emotions can inspire people." People will get emotional about products if you help lead them to that. If your products tell a story people will become more emotionally connected with the product.

Jason Santa Maria - On Web Typography

Jason started off his presentation by talking about the past. He talked about how we have moved from almost no variance in the fonts we use to today where we have literally millions of fonts available at any given time. Type matters, it matters for marketing and brand management, it matters to convey emotion and feelings, it matters to make things more readable or flashy. Type is important.

Typography is hard, it is a specialized skill, but it is something that can be taught and it is very important to know a little bit about it.

  1. What makes a typeface good or bad?
  2. How to look at type
  3. Reading and Perception
  4. Considerations for design
  5. Methods for choosing typefaces

1. Typefaces are not evil, it is the improper use that is evil Somewhere in this world there is a proper application of Comic Sans or Papyrus... just not on the web. There is no such thing as "good" or "bad", it is merely the use of the typeface that matters. Use an elegant typeface on a grungy background to make the elegant type stand out that much more.

2. "Type is a beautiful group of letters, not a group of beautiful letters." - Matthew Carter. Typefaces are placed into different roles. There are Display faces (for headers, titles, and various other headline style uses) and there are Text faces (for blocks of text or more heavy reading). A Text face can be used in the place of a Display face by not vice versa, this is called a Workhorse Typeface (e.g. Bodani, Meta).

3. Reading is affected by the perception of the font. We think we see the individual words when reading but what we really see is the flow of the text block as a whole. We translate the text into images and if the text flow is hard to follow then it is harder to translate. Text blocks have a couple of parts when reading; first is the Saccade, the jumping of your eye as your read through the text, and then the Fixation, which is the point where your eye focuses on the text. The goal is to make the Saccade as small as possible so that the text is easier to comprehend. Jason also showed a block of text where he removed the bottom half of each line and the text was still readable. He then did the same thing but removed the top half, the text was no longer readable. This is because most of the important features of text is located in the top half of the font. "Good Typography is invisible". "Ugly Fonts" do not make comprehension better. They are more distracting than helpful. Contrast is important as "Typography is an art of contrasts". Knowing the contrasts between the fonts and font-weights is important.

4. There are no RULES for typography, just some really good GUIDELINES. Reduction is important. Simplify your design. Do you really need to have a Display font for your title, another for your header, then a Text font for your menus and another for your content. Would it be possible to change all of that will a single Workhorse Typeface by just change the contrast and some minor details of the font.

In practice, bigger is better for fonts. It is good to error on the side of too large than too small. Contrast is necessary. Bold the important pieces, change sizes, make the differences stand out. The longer the line, the more line-spacing is needed. More color (intensity of color, such as the contrast between grey and black), more line height.

Lettering.js (a jQuery plugin) provides more control to the designer to do what they want with each individual letter through CSS. A very handy plugin for future work.

5. Considerations for a good font: Dimensions, Special Features, Prolonged Reading, Internationalization. Avoid readymades (like Playground) and stick with more traditional fonts, just find better ways to use them. Develop a personal palette, a set of fonts that you fall back on. Also, make sure you know your history when it comes to fonts, don't just pick something that looks cool. Greek fonts shouldn't be used for Roman papers. Assign mental associations for fonts to make it easier to pick them. Know what feelings a font conveys and use that to help drive the design. Find alternates to commonly used fonts. See if something else that is like it exists, it might end up being a better use. Try fonts out. See what works.

Scott Berkun - Why Designers Fail and What to Do About It

This presentation was mostly geared towards designers but really works for almost anything. "All designers fail 95% of the time", that really could hold true for just about any profession. As a developer I know I fail 95% of the time. I fail when I think a button might look better on the left side of a form instead of the right, or where I think a foreach loop would be better than a for loop. The key is to own up to your failures and mistakes, study the failure and common situations that cause them, and study how to avoid these failures and mitigate the effects. Failure affects everything but design does not have a really good way to analyzing the failures (neither does software if you ask me).

Scott showed a bridge that I incorrectly identified as the Tacoma Narrows bridge. I was partially correct though because it was actually the sister bridge to the Tacoma Narrows, the Bronx Whitestone Bridge. He showed that with the failure of the Tacoma Narrows they were able to correct the mistakes and make a bridge that still stands today.

There are two types of failures; Fundamental (system collapses, people die; rare and dramatic) and Partial / Subjective (mixed results, works but not perfect; common and debatable). He mentioned the Maginot Line in France that was used to try to stop the Germans in WWII. The French used the experiences of WWI to build the line not thinking that the Germans would just be able to go around it.

Failure is necessary. Without failure there is very little learning. Take the Newton Platform by Apple; it was a failure but it helped spawn Palm Pilots which helped spawn Blackberry, which helped spawn the smartphones of today.

Design fails as you design. It is ok to throw things out. It is ok to fail on a regular basis.
Think outside the box. Rubix cube (nothing says you can't take it apart and put it back together.)
Re-frame the problem. Try to look at it in a new way.

Skill failures:
Poor colaboration skills
Poor pitching skills
Failure in business knowledge

Organization failures:
How do I work in an organization where failure is present.
How do I work around the system to try and correct the failures.
How do I hack this organization to get more control.

Top Ten Overall Issues (failures geared towards designers but true for many facets)

  1. Non-designers making design decisions
  2. Designers do not seek enough data before starting
  3. No time is provided for long term thinking
  4. Designers not receptive to critical feedback
  5. Designers ignorant of business fundamentals
  6. Only lip-service is paid to "User centered design"
  7. Everyone on team has their say on design issues
  8. It's never made safe to fail or experiment
  9. Designers have Poor persuasion / idea pitching skills

All of those hold true with developers as well.

Kristina Halvorson - A Content Strategy Roadmap

Kristina had a great presentation that I actually found a little hard to completely follow. It was not that the content was over my head, it was that I do not currently work with content. Almost all (99.7%) of the content in the current application I work on is user entered.

Kristina basically said that content is generally under appreciated and normally is the last thing on people's minds when building a website or web application. Project management seems to loose focus on content and then the content is generally just thrown together and put on the screen. In many cases the same content will be on a page for 5-6 years and be so out of date that the information is nearly useless. Too many times we believe that it is the client's job to work with the content but it should be ours as well. We need to tell the client when content should be updated. We should feel some level of responsibility to that client to help them with the experience of their site. Kristina showed a great image of a Mai-Tai. This image showed that the glass and all of the extra stuff around it was the user experience but the actual liquid inside the drink was the content. The glass, umbrella, straw, fruit, and napkin are useless with the precious liquid inside.

Content Strategy is important. Kristina showed a quote from the art of war: "Strategy without tactics is the slowest route to victory. Tactics without strategy is the noise before defeat." This holds true with content. It is important to completely map out the content on the site. Figure out when things need to be updated, how, who is responsible, why, and with what priority.

Content Audits are important to run. They are boring, but essential. They show where all of the content is on the site and maps it out so that it can be tracked. The important questions can be asked like "Who owns the content?", "Where do content requests come from?", and "Why does this content exist today?".

Content should have requirements just like software. If you tell me that you need a small space to put a message of the day, I will give you a small space (~200 characters) to put your message. If that message turns out to be ~1000 characters then that will break the design and could break the functionality of the page.

Content needs to be fully designed out. Know exactly what pages will be built and with what data. If the user says that they will have a couple of biography pages for a few people, ask which people, and who owns the content, and who updates the content, and how it will affect navigation. These are all important questions when designing the website.

Use Page Tables to convey the requires of the contents of a page. You can search Google for "page table content strategy" and you will find many pages that talks about this concept. It basically shows exactly what data will go where and how often it should be updated and by who. A content calendar is also a very useful device, especially with sites that have lots of content that needs to be updated on a pretty set schedule like an article site or heavy use blog.

Finally, just because the deployment was successful doesn't mean that the job is over. If you have content that quickly goes stale, sitting with the same content for a month after deployment could be the death of a great project. Maintaining the content is essential.

Luke Wroblewski - Mobile Web Design Moves

This talk was all covered in the A Day Apart workshop so I will put my notes for this there. This was probably my only great frustration with AEA is that this talk was even here. I felt a little ripped off that I paid for this talk twice essentially.

Day 1 Conclusion

Day 1 was great! Awesome conclusion, right? Basically I was happy with every presentation. My discontent with Luke's presentation had not festered yet, that happened on Day 3. All of the presenters were brilliant, articulate, and had great information to share. I didn't put down everything that they discussed but these were most of my notes. I paraphrased a decent amount of what they said, and I may have misquoted some of the information so please take my notes here as more of a compelling to tell you to go to An Event Apart yourself to fully enjoy what is offered.

I will continue on with Day 2 soon, and then I will throw a curve ball by discussing Day 3! And finally, I will discuss everything else about the experience in my final article.