Breaking Development: Modern Web Designer's Workflow

by September 25, 2012

In his A Modern Web Designer's Workflow talk in Dallas, TX Chris Coyier outlined how he designs and builds Web site including the tools and techniques that work for him. Here's my notes from his talk:

  • Workflow is what works for you. It’s ok to start your design process in Photoshop if that’s what works for you even if others claim you need to design in the browser.
  • The advantage of a blank canvas is that you can be creative and exploratory: draw shapes, move colors around, play with textures, etc. Photoshop is a good tool for this.
  • Wireframes are useful when you don’t know what you have to work with. They help to think through the content and information that needs to be included on screens.
  • That said, don’t spend too much time in Photoshop: you’ll start to create work you’ll need to redo eventually; the Web doesn’t have a fixed canvas size (don’t depend on it too much); some kinds of styling and design is actually slower in Photoshop; there’s no interactivity.
  • Move quickly to the Web browser. “Let’s change the phrase from designing in the browser to deciding in the browser.”
  • Need to hire a designer? Try Dribbble or Authentic Jobs.
  • You need to be developing locally. Developing a big redesign or new feature is almost impossible to do on a live site. As soon as you have two or more people local development is needed. You can use version control, preprocessors, deploy at will, and work offline.
  • MAMP Pro: allows you to create a local domain easily.
  • Git and Github allows you to push changes to the server but you still need to deploy your code. You can use tools like Beanstalk to do deployment.
  • Get to know your code editor. Know what it can do so you are as productive as possible. Sublime Text, for example, has super fast find in project; per project settings; autocomplete functions; easy to enforce spacing preferences; etc.

CSS Preprocessors

  • CSS Preprocessors (like SASS) allow you to use CSS variables and mixins. Both help you keep code DRY and allow you to change once to change everywhere. But it also prevents you from doing stupid stuff.
  • Compass gives you a set of mixins that help you manage CSS3 pre-fixes and requirements.
  • You can nest CSS declarations in SASS. This is the thing you’ll miss the most when you go back to writing regular CSS.
  • Media queries are typically included at the end of a CSS file. With a pre-processor, you can nest them inside of code where they are more natural to understand.
  • Preprocessors make writing CSS fun again.
  • The best way to learn a preprocessor is to use it on an actual project.
  • CodeKit allows you to write preprocessor code and compiles for you locally on your machine. It also enables code injection: where you can change styles even in a stateful application.

Performance

  • Loading less resources helps improve performance. Use the 1,2,3 rule to load a global stylesheet, followed by a local one, followed by (maybe) a highly specific one. If you have more than three stylesheets, you’re probably doing it wrong.
  • You can then concatenate CSS and Javascript using a tool like CodeKit that creates a single file from all your CSS and Javascript files.
  • CodeKit also has a single click action for compressing images to cut down on file size. There’s other tools that do image compression as well.
  • You can test in older browsers by running multiple versions, VMs, or using Browserstack which does all your browser and OS testing (including mobile) through a browser.