AEA12, Handcrafted Patterns

When learning a new creative skill, we often follow a progression: Imitation, repetition, and innovation. We learn by dissecting the work of others, building our own tools, and later adding our own uniqueness. We’ll apply that thinking to designing flexible interfaces in an HTML5 and CSS3 world, exploring the process of crafting your own markup and style pattern library. What lessons can we learn from breaking websites into micro frameworks? What happens to these patterns under varying browsing conditions? Dan will share how patterns have helped him build bulletproof websites.

Handcrafted Patterns
Dan Cederholm
@simplebits

Everything comes from “The Gut”

Building websites is 99% convincing yourself that you’re doing the right thing.

Web design 10 years ago was probably easier than today. HTML5, CSS3, Devices, Web Fonts, Grids!

Patterns.

Everyone uses patterns. It’s not cheating. Even Pixar does it. http://smpl.bt/pixarrules

We don’t have to reinvent the wheel with every new project.

The banjo is a quirky, misunderstood instrument.

Steps to learning the banjo.

• Imitation - by learning old time tunes.
• Repetition - by learning and practicing patterns.
• Innovation - by applying your own creativity.

Steps to learning web design.

• Imitation - by viewing source.
• Repetition - by building interface patterns.
• Innovation - by applying your own creativity.

Repetition: What I’ve learned from patterns

Patterns in…

• Markup
• SASS
• Adaptive

Break down problems into small bits.

Microformats. Start as simple as possible. Solve a specific problem.

Pears project. http://pea.rs

Solving small problems in HTML5

Placeholder text. Formholder text.

In HTML5 there is a placeholder attribute. More semantic than using JS. There is a JQuery Polyfill for unsupported browsers.

Aria Landmark Roles. Used to mark very specific portions of the page. i.e. role=“banner”, role=“navigation” instead of an ID or class.

Less Class. nth-child(even) instead of class=“alt”

Don’t rely on advanced selectors for layout!

Slats - Image left, title right, meta data - they’re everywhere. HTML5 allows you to touch any part of the slat (title, image and body content).

Sass

Patterns in CSS itself. Sass is a CSS preprocessor. CSS needed to be powerful enough without being overly complex.

Every website is a learning tool. We learn by viewing source. So the formatting of the CSS files are important.

Using Sass

• To install on the Mac: $ gem install sass
• Scout: a Compass and Sass App
• Renaming master.css to .scss.
• Keep watch: $sass—watch style.scss:style.css

What does it do? Enables DRY (Don’t Repeat Yourself) principle.

• Variables: {color: $color-pink;}
• Darken and Lighten using Sass
• Sass + CSS3 : Mixins @mixin add the vendor prefixes automatically.
• Media Queries: Lets you do inline media queries and it will bubble them up.

Respond or Adapt

The ideal is…

• Mobile First
• Content Out
• Responsive

But you may not be able to start over with a responsive site.

Dribble for example. Instead of starting over, they created an adaptive version for small screens using Media Queries.

Adapt.css file

• One breakpoint: 500 pixels
• At 500 pixels and below it becomes a flexible layout.
• Let content dictate breakpoints.
• Avoid {display: none;} As much as possible.
• How do we fit these big things in small spaces?
• The Grid: #secondary drops below the #main and actually have more room on the mobile version.
• Tag Links - On the small screen version went to two columns using multi-column layouts
• Generated Content used to add () around job location on mobile.
• Retina Graphics - Used selectively - the ball and the logo

To wrap up:

• Embrace patterns
• Solve Small Problems
• DIY Frameworks
• http://pea.rs