Skip to main content


Zach Saucier's thoughts

  • Why do we use responsive units like em instead of px when designing responsive sites?

    I understand that the overall goal is to stay responsive, but what is the purpose of avoiding pixels?

  • Proper usage of the picture element

    I know how to use the <img> element, but I’ve been hearing things about the upcoming <picture> element to be used for responsive images. The articles I’ve read on the subject are kind of mixed up about the usage of the <picture> element and I’d like to get some clarification.

    How is the <picture> element different from the <img> element? Should I always use it instead of the <img> element given that I want all of my sites to be responsive?

  • The responsive design primer

    Countless articles, many quite useful, have been written on the subject of responsive design since Ethan Marcotte’s post that started it all, but finding one that directly helps people understand some specific techniques while also explaining the why behind each action and decision is exceedingly hard. I’ll try my best to do so concisely here.

  • The creative process

  • Single element shapes with gradients

    Making basic shapes

    It’s easy to make CSS shapes with solid colors by using borders, but it’s more difficult to make them with gradient backgrounds. The main trick is to use pseudo elements and `overflow: hidden“ to cut out the desired shape. There are many more shapes that this technique could be applied to, include many listed here, but I didn’t include them for brevity. See them on CodePen.