Adventures in Interface Development

  • SVG Spriting

    SVG Spriting

    SVG sprites offer the same efficiencies as PNG sprites, but they can be trickier to implement because of their innate scalability.

  • Creating Social Icons from Glyphs

    Creating Social Icons from Glyphs

    Even though using font glyphs for social icons allows only one color, complex color can be added with background gradients in a CSS-styled structure around the glyph.

  • Making a Custom Icon Font for Your Website

    Making a Custom Icon Font for Your Website

    Reducing server calls for image resources will speed up your page load and enhance performance. A great way to do this is to replace sprited icons with mobile-friendly custom fonts.


  • Styling :before

    On the desktop version of a shopping cart I was styling I had “column headers” (flexed divs in a non-table layout) that had no relevance when the page was viewed in mobile, since the columns stacked vertically. I needed to remove the desktop headers and apply the labels to each individual element instead.   I…

  • Why I won’t pay for AdWords

    I did a search on my favorite unicode character site for the non-breaking hyphen character, which is very useful for phone numbers. I got this ad:

  • Design Fail: A cascade of bad decisions

    Design failures usually aren’t the result of one bad decision but rather a chain of mistakes that lead to an inevitable conclusion. When I see something in a design that doesn’t work I try to trace it back to the decisions that caused it.