#124: A Modern Web Designer’s Workflow

This is a presentation I gave at conferences in late 2012 and early 2013. In this screencast I give it one last time to you, o' CSS-Tricks subscriber.

It talks about many aspects of what it's like to be a designer and front end developer these days. What it takes to start designing and the tools in use there. Why working locally is important. How hiring might happen if you need to do that. Using version control and preprocessors. Caring about performance and making that a part of your workflow. Cross browser testing. All that, and more!


  1. User Avatar

    Ahhh thanks for the links to the older browsers, sweet. Now I can run ie 8/9 over with parallels and

  2. User Avatar

    Thanks for this screenshot. There’s lot of great information in this but there’s a couple of things that I’d like to ask about.

    1) On the slide “Because Because Because”, you say the text looks better. But text looks much better in Photoshop. I can understand working on the Web because this is more accurate to how it will look, but I don’t understand what you mean that text looks like a bummer in PS.

    Also, I’m not clear on your process and how it works with clients. Depending on what is requested, I make 1-3 different designs for a client to choose from. It seems much easier to make these changes and adjustments in PS than to actually build a page. What’s your process on working out the design with the client?

  3. User Avatar

    I am very impressed with this presentation! Very well written and presented and absolutely points local development and version control which speeds things up greatly.

  4. User Avatar

    Thanks so much for putting this together! Really helps me visualize the whole picture and pick out areas that i need to improve on.

  5. User Avatar

    Thanks for the screencast Chris! I believe Brackets by Adobe is gaining success with its open-source model. I guess it’s one of the best free editors! Just wanted to mention it =) Btw it already has almost every feature you’ve mentioned in the screencast!

  6. User Avatar
    Jens Ahrengot Boddum

    On top of what Chris says about HTTP requests, compression and caching I’d recommend getting familiar with the developer tools in Chrome (Not just the CSS editor and inspector). When it comes to optimizing, they’re your most powerful tool. And that’s both in terms of server-side performance (Load time, caching, etc.) and client-side performance (CSS and JavaScript).

    This free course on Code School tought me a lot: http://www.codeschool.com/courses/discover-devtools

    A note on concatenating JavaScript

    I used to do like Chris and use Codekit to concatenate my JavaScript. If you’re just one designer/developer this is okay I guess, but once you start working with other people, this requires that they use CodeKit as well, and since CodeKit is mac-only, this excludes everybody on Windows.

    Instead I like to use Require.js. It’s a little trickier to learn because it’s not just for concatenation, but rather a full blown script loader. Require.js is cross platform and really forces you into the best-practise way of doing things.

    While Require.js is best known as a script loader (Which means it’s a tool that loads JavaScript files on the fly as they’re needed), but it also has a build function that let’s you concatenate your JavaScript and CSS with lots and lots of options on how it should go about that optimization.

    To get started with Require.js, I recommend this course on Nettuts+

    • User Avatar
      Sean Michael
      Permalink to comment#

      Thanks for the overview Jens. Both are great recommendations and are things that I’ve been waiting to level up on. Maybe now is the time :)

  7. User Avatar

    Just a quick and big thank you sir!

  8. User Avatar

    Awesome talk, and as always very insightful and loaded with great ideas to consider in new projects.
    This may be crazy and completely irrelevant, but i noticed a syntax error in your .js files towards the end (slide 96)… missing the closing { in the IIFE…

    Again, great talk and sorry for being so nit picky xD Keep up the great work!!!

  9. User Avatar

    Epic podcast Chris! Well Done!

  10. User Avatar

    Hei Chris. Great video! Perhaps you did not notice that that he video in the iTunes podcast get stuck at minute 38.

    • User Avatar
      Chris Coyier

      You may have luck deleting it and re-downloading it. The right file is now in place (it was my fault for publishing while still uploading), so hopefully it grabs the right one.

  11. User Avatar

    Sorry, in iTunes it stops in minute 17:56

  12. User Avatar

    Unbelievable talk. This was a crash course in everything a long-time Dreamweaver user needs to get current and move to the next level. (Everything except for the 100 hours of experimentation and additional tutorials I’m going to have to learn to understand SASS, Sublime Text, WAMP, GIT/Beanstalk, Mixture.io [Windows alternative to CodeKit] and so on.] And here I was just starting to get good at floats. Thanks for all the effort to put this together and to let the rest of us peer into your workflow. I’ve always wanted to be a fly on the wall around a small, nimble development shop, and this is the next best thing.

  13. User Avatar
    Jacob Roman

    Really enjoyed watching this, thanks for taking the time to make this vid Chris. Good Stuff.

  14. User Avatar
    Permalink to comment#

    Awesome presentation, Chris. I’m a beginner and found this info so helpful in creating a solid foundation and getting some insight into the tools available to developers.

    Quick question: are show notes available that list or link to all of the software/web apps discussed in the presentation?

    Thanks again!

  15. User Avatar
    Permalink to comment#

    Well done, Chris. I really enjoyed your presentation. I found it very useful and I share many of your preferences when it come to develop for the web. BTW, what’s the font you are using in your slides? It’s very neat :)

  16. User Avatar
    Permalink to comment#

    Hi Chris,

    I hope you have the chance to try Sketch soon to get away from Photoshop.
    Your text to link here…
    It totally replaced Photoshop for me. I feel good :)

    Kind regards

  17. User Avatar
    Siedah Mitchum
    Permalink to comment#

    I appreciate this video on so many levels. Business and design wise. Tools can save you time and eventually money. So thank you for sharing. I’ve heard of Dribble from time to time. I’ve been through the coroflot and behance – so I will check out Dribble.

    Thanks for touching on various aspects of design.

  18. User Avatar
    Phil Tune
    Permalink to comment#

    I’m confused.

    0:52:17 – “IE9 doesn’t support gradients in any way”.

    Do you mean it just doesn’t support the “linear-gradient” property? Cuz this works just fine in IE9, albeit quite ugly and unwieldy: filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#F2F2F2',endColorStr='#CECECE',GradientType=0) Now IE8 is a headache with gradients. I just spitefully give my IE8 users a flat color as their penance for sticking with IE8. I won’t even take the time to whip up an SVG.

    BTW, thanks for the presentation. Gives me ammo to take to my project manager and also gives me new stuff to chew on.

  19. User Avatar
    Permalink to comment#

    Great presentation – thank you.
    being in web design and teaching since 1998 the only constant has been the continuous change.
    nevertheless the last couple of years development with HTML 5 and CSS3 and retrospective all the new tools emerging means like playing with a new deck of cards. I am in the process of creating a whole new workflow where pretty much every tool I use is new. very challenging when actually working on “real” projects. your screencast helped me and encouraged me to pursue further.

  20. User Avatar
    Permalink to comment#

    Hey Chris,

    What were the fonts used on this presentation (both for the speaker deck one and the font used for the Git screencast)? They look pretty awesome. Also, btw wonderful screencast as usual!

  21. User Avatar
    Eric B
    Permalink to comment#


    your screencasts bro!
    They are the best!

    Says Me…

    …Also just learned markdown, hoping I can use it or a form of it in my ASP.Net MVC apps.

  22. User Avatar
    Daniel Dogeanu
    Permalink to comment#

    I was totally against preprocessing up until now, but after I saw this video, I think I’m gonna try SASS and Compass. I’m not sure that I’m gonna try it for other languages because I have a feeling that I have to work as cleanly as possible and to understand what I’m doing at the root level and I also didn’t do it because I wanted to have a deep understanding of the languages that I use… But damn! I really liked what you did in SASS!

  23. User Avatar
    Tim Severien
    Permalink to comment#

    I’ve been quite conservative so far considering workflow. The topics version control (I’m the only developer) and preprocessing (I kind of assumed preprocessing is done server-side) is unknown territory for me, yet to explore. Because of this fantastic screencast I now know there’s nothing to fear. I will look into them tomorrow.

    Thanks Chris!

  24. User Avatar
    Brendan Tronconi
    Permalink to comment#

    I was looking for something like this for a while. Very helpful and informative. Thanks for including it here on the site.

  25. User Avatar
    Kenny McNett
    Permalink to comment#

    What can we do about local vs production databases? I mean, what if I need to add a new page to my site locally and fiddle with it…I can’t wholesale my database back up to production without losing changes that happened while I was editing (e.g. comments on posts, other admins adding content). Am I missing something obvious? I’ve scoured the web, but I come up dry.

  26. User Avatar
    Jacob Perl
    Permalink to comment#

    This is such a great presentation…I’ve learned a lot from it – thank you! Now regarding version control and the database…have you found any good solutions for keeping local and remote DBs in sync in situations with multiple collaborators on a site? Have you tried or head anything good/bad about DBV (http://dbv.vizuina.com/)?

  27. User Avatar
    Bijay Pakhrin
    Permalink to comment#

    Awesome! I Really loved this presentation.

  28. User Avatar
    Min Wang

    Thank you for this video! I appreciate the way you treat your audience as human beings. Im fed up with getting the dumbed-down version elsewhere. If my sister was Amanda Righetti you could have her for a week or two.

  29. User Avatar
    Rezan Ferdous
    Permalink to comment#

    Mind blowing presentation !!

  30. User Avatar
    Adrian Arroyos
    Permalink to comment#

    Found this only recently, but LOL’d at the “Photoshop text sucks” remarks. I’ve thought so for AGES! Glad you included the comment :)

  31. User Avatar
    Raj Tyagi

    Absolutely love this. I spend so much time with my nose down in design that it’s refreshing to see it from the other side (sorta). Great vid!

  32. User Avatar
    Permalink to comment#

    Thanks for sharing.

  33. User Avatar
    Permalink to comment#

    Hi good presentation but it more better if explain bootstrap.min.css,jquery.min.js step by step……Otherwise Presentation ok so concentrate on my statement.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.