An Event Apart: Handcrafted Patterns

by Luke Wroblewski February 6, 2012

In his Handcrafted Patterns talk at An Event Apart in Atlanta, GA 2012 Dan Cederholm shared his recent experiences and insights about design patterns, the SASS CSS framework, and adaptive designs. Here's my notes from his talk:

  • There’s a common progression to learning anything creative: imitation, repetition, and finally innovation. Imitation: by doing what others have done. Repetition: learning and repeating patterns. At a certain point, muscle memory kicks in and you can use patterns without thinking. Innovation: apply your own creativity to the things you’ve learned. This adds your own style to things.
  • Web design is no different. Ee learn by imitating, repeating, and then finding our own style.
  • Being a Web designer/front-end developer was a lot easier in 2002 than it is in 2012. There are lots of new things to keep up with –it can be overwhelming. Repetition: building and reusing patterns. Patterns can help you learn.
  • Even Web sites that appear different from each other have more in common than not. Regardless of the visual design of a site, there are common patterns underneath it.
  • A good craftsperson builds their own tools so Dan has created a CSS and HTML pattern library called Pears that allows him to break things down into pieces and build up from there.
  • Solve small problems. Incremental improvements can happen when you look at things in small pieces. Patterns help you do that.

Patterns

  • Placeholder text: when you have a label or hint in an input field it goes away. Traditionally we used Javascript to make this work but there were problems. Now HTML5 has an attribute that can be enabled through a Javascript polyfill on all browsers.
  • ARIA is a technical spec for improving usability for Web applications. You can use the role attribute to designate landmarks on a page. Accessibility software can use these roles instead of IDs to identify things.
  • You can use CSS selectors where you used to use CSS classes. Use selectors like last-child to handle last elements in rows or lists. Or nth-child(even) to alternate styles in lists.
  • If you are using CSS selectors to affect layout, you actually do want to be careful of the browsers you support. Otherwise, it’s a nice enhancement.
  • Slat pattern: thumbnail, title, and description in a row. These are everywhere on the Web. Typically these are teasers to other pieces of content.
  • In HTML5, you can wrap an anchor tag around all the elements in a slat, img, h3, and p. This turns the whole element into a link.

SASS

  • SASS is a meta-language on top of CSS that adds more structure and power to document styling. LESS is similar to SASS. They essentially do the same thing.
  • Dan was reluctant to start using SASS because he usually created CSS files himself by hand and handed them over to clients. But it’s a different world when you are maintaining CSS for a large site. SASS can help a lot there.
  • CSS doesn’t support macros, variables, constants, and conditionals because it’s intended to be approachable by as many people as possible.
  • Dribbble converted an existing 6,000 line CSS file to SASS. Every valid CSS file is a valid SCSS file. It’s very easy to get going. Just create a SAS file, then set up a watch to have the file update.
  • In SASS: variables can be used to set up common CSS styles. You can also use darken & lighten functions to adjust colors in a single palette.
  • Mixins allow you to write a set of declarations once and reuse them across your stylesheets.
  • Inline media queries can be used to nest adjustments inside CSS declarations inside of in separate files or parts of the stylesheet.

Respond or Adapt

  • Pea.rs is a responsive design that allows you to see how individual components work in various layouts.
  • Many companies can’t throw out what they have and start over to build a responsive design.
  • Dribbble adapted their layout using CSS media queries instead of starting from scratch. They allowed content to dictate what the breakpoints in the design should be instead of device widths.
  • When adapting layouts, try to avoid just hiding elements. It’s better to rearrange elements instead.
  • Embrace patterns: it’s not cheating. It’s a way of breaking down problems into smaller, solvable bits.
  • DIY frameworks: creating your own framework is a great learning experience