Grow your CSS skills. Land your dream job.

#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!

Comments

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

  2. Luciann

    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. 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. 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. 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. 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+

    • 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. LiggettMeyers

    Just a quick and big thank you sir!

  8. TJ

    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. Kokako

    Epic podcast Chris! Well Done!

  10. Narcís

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

    • 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. Narcís

    Sorry, in iTunes it stops in minute 17:56

  12. 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. Really enjoyed watching this, thanks for taking the time to make this vid Chris. Good Stuff.

  14. Chris
    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. Fernando
    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. Oliver
    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
    Oliver

  17. 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. 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. ajara
    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. Ameen
    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. Permalink to comment#

    !HEART

    your screencasts bro!
    They are the best!

    Says Me…

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

  22. 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. 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. 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. 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. 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. Awesome! I Really loved this presentation.

  28. 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. Mind blowing presentation !!

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".