In his Handcrafted Patterns talk at An Event Apart in Boston, MA 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. We learn by imitating, repeating, and then finding our own style.
- Every Web site is a learning tool. Just view source.
- 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.
- ROLE banners can be used as style hooks into your CSS.
- Use less classes. 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.
- DRY: don't repeat yourself. CSS is pretty much the opposite.
- 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.
- W3C is working on integrating variables into CSS. In fact, a lot of SASS could make it into the CSS standard.
- CSS3 adds up to a lot of declartions when you take all the vendor pre-fixes into account.
- Mixins allow you to write a set of functions once and reuse them across your stylesheets. Example: you can send border-radius or box-shadow values to a function that fills in appropriate CSS declarations.
- Inline media queries can be used to nest adjustments inside CSS declarations inside of in separate files or parts of the stylesheet. This allows you to see how a style will change as viewport changes.
- The new version of SASS (3.2) allows you to set breakpoint variables to use within inline media queries. You can also create if/else content blocks and enter content within.
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.
- CSS generated content can be added to larger screens but omitted on smaller screens.
- CSS background images & media queries can be used to manage retina, high-resolution graphics.
- 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