An Event Apart Notes: Dan Cederholm, Handcrafted Patterns

2011 was a year to step back and learn something new. What else other than the banjo! Banjos are very misunderstood. Learning new things helps us to become better at things we already do. The process of learning can be applied to things we know to break it apart and we can better ourselves.

  1. Imitation – LEARN – view source of greats
  2. Repetition – DO – And do until it reaches second nature – build repetitive patterns
  3. Innovation – apply your own creativity – reinterpret – stylize – own

Frameworks are great tools, but they are learning tools. A good craftsman builds their own tools!

Pears – common patters of mark-up & styles
-an open source wordpress theme to allow anyone to set up their own library of repetitive patterns.

Let’s be semanticaly correct.

Examples: HTML5 – placeholders, roles (ARIA landmark roles – Jeremy Keith of

stronger css selectors rather than more classes in css. (nth-child() in place of even, odd, alt, classes)

Slats – are blocks of content usually containing an image (thumbnail), title and description and even more optional info(date, tags, etc). They are often teasers of more content that should click through.

Breaking things into patterns you can solve small problems w big impact.

Overview of SASS (I agree with Dan and have been hesitant to implement CSS preprocessors)
Love the idea of preprocessors for CSS

Earl Scruggs revolutionized banjo playing with a new style (Flint Hill Special)
Bluegrass killed the banjo (arguable) by making it too hard for average people to play the new cooler styles.

One reason why CSS didn’t have many of these SASS and LESS features to begin with was the creators didn’t want to make it a complicated language. If you make something too powerful it can get too overly complex and people don’t use it.

There is a pride also in the handcraftedness of the source code. We like tools that plug holes, but don’t mess with our craft. But the benefits of using CSS preprocessors outweighs these nits. It’s easy to install:

$ gem install sass

(There are also tools that can help: Scout) It’s easy to watch a sass file and have it automatically recompile a CSS file on save.

watch $ sass ...

This is beautiful for those who follow the DRY mantra: Don’t Repeat Yourself!

CSS Preprocessors give us: variables, functions (mixins), inline media queries.

Respond or Adapt! Responsive Web Design

Dribbble set with a single breakpoint at 500 in which it makes the ayout of the site fluid. This is so we don’t have to consider the plethora of mobile devices using various sizes around the same.

We should let our content dictate our breakpoints rather than the popular devices dictating the breakpoints. Avoid display:none; give better options or if it’s really not needed get rd of it everywhere.

  1. Embrace Patters
  2. Solve Small Problems
  3. DIY Frameworks

An Event Apart Notes: Cindy Li, Inclusive Design

Usability should be called inclusive design so we don’t forget that we shouldn’t leave anyone out!

Indifference toward people = design cardinal sin!

VisionSim – usability ios app.

When designing and coding, think of those with disabilities! (use alt tags properly)
– It’s a big business

Think of color blindness which is a very common “disability” and use a healthy contrast in text on backgrounds.

LayerVault – version control for designers.

Tools – – screen viewing modified for color blindness.

Use technologies to make smart decisions

Keyboard shortcuts [shift + ?] – as seen in google mail and yahoo mail…

Contrast for text and good color choices.

Captcha, could there be a worse experience?

Look at projects in the context in which they may/will be used. Test In Context.


An Event Apart Notes: Jeffrey Zeldman, Content First!

Very exciting to hear THE Zeldman!

Do designers actually control what a site always looks like? What is a web designers job anyways? It’s to serve the customer/user, an advocate to give all users a better experience.

Bebo became synonymous for spam for only carrying about conversions no matter what they had to do to get them. Clearing your throat doesn’t always mean you want to go to Berlin!

Design that does not serve people, does not serve business.

Were here to study best practices. Good Web design starts with content. Content should precede design. Templates are not that!

Blogger template design story. Jeffrey and friends were excited to design blog templates with Web standards in mind! But very hard to design a site with no idea what the content would be.

Progressive enhancement: good experience for all! Http:// Adaptive Web design and responsive Web design = progressive enhancement taken to the next level.

1. Content is a design problem. Goss Web design starts with content. Yet our designers are often hostile to content.
2. If our designers don’t serve content, users well find ways to get the content anyway. enhancement rethinks design to put great user experience (and content) first.
4. Responsive and mobile are creating a new interactive design landscape that puts users and content first.