Webstock: Chris Coyier, The Modern Web Designer’s Workflow

This week I’m at Webstock, a lovely conference in New Zealand. I’m doing my best to write little blog posts about the amazing presentations. Please forgive any typos, etc. If you’re here too, come write a haiku at Automattic’s booth.

Chris Coyier is a humorous man. He was also a designer at Wufoo and now does CSS Tricks and CodePen. Today he’s covering:

  1. Getting started designing.
  2. Local development environment.
  3. Working on a team.
  4. Preprocessing saves happiness.
  5. Testing, testing, testing.

Chris designs in Photoshop, to the faux-horror of everyone in the room. Photoshop is more “left brainy” than a CSS editor. It affords more creativity. WebZap gives you buttons and other web patterns to use in your mockups.

The blank canvas is a challenge for every profession. In the design world, you might:

  • Toss down a texture.
  • Draw some shapes.
  • Avoid making wireframes.

As soon as you have a Minimum Viable Design in Photoshop, though, take it to the web. Making it perfect in Photoshop just means you’ll have to do the work all over again.

“Let’s change the phrase ‘designing in the browser’ to ‘deciding in the browser’.” – Some Guy I Missed

Don’t work live on a server. Just don’t.

Instead, you can and should develop in a local environment. If you’re building for WordPress, MAMP is a good option to provide everything you need to run a web server.

Two tools to demystify version control: Github for Mac and Tower.

Chris is all about the Sublime Text. In version 3, being able to jump to files is amazeballs. Emmet does all sorts of crazy HTML auto-completion.

Some advantages to using a preprocessor like Sass:

  • DRY awesomeness.
  • Mixins allow you to define named functions, and use those functions elsewhere in your Sass. Everyone screws up CSS3 vendor prefixes. Mixins allow you to only screw up (and fix) in one place.

Sass plus Compass gives you an amazing number predefined mixins.

Editor’s note: All of this frontend hotness is blowing my mind. I didn’t even know.

Preprocessing also greatly simplifies media queries. And it makes writing CSS fun again.

CodeKit is a Mac app that automagically preprocesses all of your shiz. It will inject style changes into your browser while you edit. Great for when you might need to style web apps with various states. It can also losslessly compress any image assets used in your site.

The easiest way to make a website faster is to load less stuff. If you can’t remove it entirely, you can concatenate and minimize.

Testing is a big PITA. BrowserStack lets you test in a variety of browsers from the comfort of your own home.

Ad Code Manager and Rewrite Rules Inspector

This is the week of releasing plugins!

Ad Code Manager is a plugin designed to help you deal with ad codes, those short snippets of Javascript used to display advertisements on your website. This week, Rinat Khaziev of Doejo, Jeremy Felt of 10up, and I pushed v0.2, which includes these improvements:

  • Completely reworked user interface, one that now looks and feels like much of the rest of the WordPress admin.
  • Abstracted ad network logic, so you can integrate additional ad networks. Currently, Ad Code Manager fully supports Double Click for Publishers. Pull requests with support for other ad networks are always welcome.
  • In-plugin contextual help to get you properly configured.
  • Priorities for ad codes, which allow you to work around conflicts.
  • An [acm-tag] shortcode for placing ad codes within posts.
  • A widget for placing ad codes in widget areas. Thanks to Justin Sternburg at WebDevStudios for the contribution.

Rewrite Rules Inspector is a simple development tool for viewing all of the rewrite rules registered with your site. It’s been available for VIPs hosted on WordPress.com for a while — today it’s available for download from the WordPress.org repository.

Specifically, the Rewrite Rules Inspector helps you:

  • View a listing of all your rewrite rules.
  • See which rewrite rules match a given URL (and the priorites they match in).
  • Filter by different sources of rewrite rules.
  • Know when rewrite rules are missing in the database by showing an error message.

Both plugins are available for forking in the Automattic Github repo, and pull requests are always welcome. Coming up next are improvements to Co-Authors Plus, P2 Resolved Posts, and a new round of development on Edit Flow…