Speaking

I've been speaking national and regional conferences, meetups, bar camps for the last six years.

I often speak about Designing in the Browser, Responsive Web Design, Sass, and Drupal. I produced a video podcast that teaches people about how they can use these tools and techniques creatively. I also blog at The Coding Designer and The Sass Way.

SassConf Speakers Panel. l-r: Una Kravets, Rachel Ober, Elise Holladay, Mason Wendell, Jina Bolton, Natalie Weizenbaum
Mason Wendell speaking at Devsigner in Portland, Oregon
Keynote speaker at Devsigner in Portland, Oregon
Photo by @Mindewen

Thinking Inside the Box
Inside the Box Inside the Box

Great design, like jazz, needs both harmony and discord skillfully executed in just the right places. On the web, many of our projects are playing sour notes. Let’s get in tune.

Even in the age of Responsive Web Design, many sites are designed from the outside in. Whether the page is designed in Photoshop or, let’s hope, in-browser, many design projects slide out of tune when they get to the second or third page. Components are inconsistent, page and layout dimensions vary, font sizes shift. These details add up. Living style guides have been proposed to address this problem, the trouble is they’re often extracted from the finished project.

Let’s design the style guide first. Start from inside out with the most common aspects of a design language. Instead of envisioning individual pages, work to create a cohesive family of components and layouts that can be assembled into any page. By leveraging a tools that help us create the elements of out design language and visualize them in various contexts, we can make components, layouts, and even working pages that snap together beautifully. It’s the new blank paper.

Events

Sample slide from presentation
Sample slide from presentation. All slides are based on classic Jazz album covers from the 50’s and 60’s, and built using HTML and cutting edge CSS and SVG.

This session was hands-down my most productive hour at Drupalcon. Not only did it open my mind to a completely different approach to design, but it streamlined my development process as well. I now have a brand new mindset going into my current projects.

Managing Responsive Web Design With Sass And Breakpoint

Writing css for responsive web design can get out of control quickly. Write some media queries for your layouts, some more for your menus, and even more to catch all the little details in a well-crafted design and they really add up.

I created a Sass extension called Breakpoint that lets you boil your media queries to their essential properties, and to give each one a meaningful name. This helps you write your styles more quickly, while also creating more maintainable and future-proof code. I'll demonstrate why this is needed and how it's become indespensible in my RWD toolset.

Events

Sample slide from presentation.
Sample slide from presentation. Slides are created with HTML and CSS.

Doing mostly backend development, over time I've shied away from front end development. Mason as a coding designer has made me more interested in bridging those. One of the things I like about Sass is how reusable style rules can help the process become really simplified and more logical. But one of the questions I've had is how to keep it all manageable - media queries for example. A tool to help with that sounds like something I'd like to hear about.

Designing with a Living Style Guide

An introduction to designing a styleguide as you create a new design language.

Events

Sample slide from presentation.
Sample slide from presentation.

Responsive Web Design
– Shrinking Websites on Phones

An introduction to mobile-first responsive web design.

Sample slide from presentation.
Sample slide from presentation.

Mobile and Responsive Design with Sass

Approaches for doing mobile-first responsive web design, with an emphasis on advances Sass techniques.

Events

  • Drupaldelphia 2012 - Philadelphia, PA
  • NYC Sass Meetup - NYC, NY
  • Capital Camp 2012 - Washington, DC
  • NYC Camp - NYC, NY

The Coding Designer’s Survival Kit

Markup, CSS, and JavaScript tools for Designing in the Browser. I outlined the philosophy and reasoning behind the in-browser approach.

Events

  • Drupaldelphia, 2011 - Philadelphia, PA
  • NY Drupal Camp 10 - NYC, NY
  • Design for Drupal 2011 - MIT, Cambridge, MA
  • Capital Camp 2011 - Washington, DC

Design in the Browser

Designing in the browser was very new. I made my case for it.

Events

  • Drupalcon 2011 - Chicago, IL
  • Drupal Camp Denver, 2011 - Denver, CO
  • Design for Drupal 2010 - MIT, Cambridge, MA
  • NY Drupal Camp 8 - NYC, NY
  • BAD Camp 2010 - San Fransisco
  • Drupaldelphia 2010 - Philadelphia, PA
Sample slide from presentation
Sample slide from presentation.