Icons have always been a web design staple, but mobile interfaces have changed how we think about them - icons are no longer decorations; they're powerful cues that tie interfaces together.

Unfortunately, the demands placed on icons can make them difficult to use on large projects. The variations required (size, color, pixel density, texture) can bloat your icon pool to an unmanageable size pretty quickly, requiring extra bandwidth and front-end development time.

The best fix at the moment? Chris Coyier's Icon Font method. If you haven't seen this going around, it suggests using the @font-face at-rule to serve vector icons to your users. Advantages:

• Widely supported (@font-face works on a huge number of platforms and browsers)
• Scaleable
• Colorable
• Animateable(!)
• Works with effects like text-shadow and background-clip: text
• Easy to serve in retina and standard pixel density
• Competitive filesize, especially when compared to icon sets with lots of variations

Whether you are a hater of the technique or not, Responsive Design is one of the most important things happening on the web right now. I am finally getting a chance to work on a project where we are taking a responsive approach to the site, and it’s been great, but I have definitely come across a few gotchas here and there.

For some time now, we've been kicking around the idea of attending conferences that talk more about big ideas and less about the nuts and bolts of designing for the web. Gravity Free, a two-day multidisciplinary design conference in Chicago, provided just that for myself and my trusty companion, Mark. The theme this year was "Outlaws and Icons" which I originally read as "Outlaws OR Icons." What I didn't realize beforehand was how important the "AND" part of the theme would become. While I was attracted to the conference by the 20+ "icons" of design that were listed as speakers, it became clear very quickly that the conference "icons" were more comfortable as "outlaws." Therefore, the first takeaway for me became the very notion that these design icons were outlaws first and foremost and that they might not have ever been icons if not for their outlaw nature. 

Conference schedule

The 9th floor of the Spertus Institute was filled with circular tables draped in white tablecloths. In the middle of each table sat a sign with names like James Victore, Alex Lieu, and Brian Collins; each famous in their own fields of design. Groups of people poured out of the elevators and crowded around the tables to talk with their favorite designers. This was the scene last week in Chicago at the multidisciplinary Gravity Free design conference.

As I debated which table to join, a crowd quickly gathered in the back corner. Weaving through the maze of people and tables, I heard laughter from the circle of people that surrounded the table. Clearly this was the place to be, so I took my place in the standing room only crowd. On one side of the table sat an older man. His circular stainless steel framed glasses and sharp black suit sharply contrasted his otherwise grandfatherly look. The crowd hung on every word of the stories that he told in a thick Bronx accent. This table certainly was special, because the sign on the table read George Lois.

Today’s program is brought to you by:

.example {
  pointer-events: none;
}

What the property does:

The pointer-events property allows you to specifiy how the mouse interacts with the element it is touching. Although it was originally intended for SVG elements, browser support for pointer-events on other elements is pretty good, except for IE, which in some cases may not matter (I'll explain why towards the end of this post). The most common use case is to set an element’s pointer-events to none, which allows clicks to pass through the element, or hover actions on the element to be ignored.