Do We Really Need Responsive Icons?

Responsive Icons is the result of responsive design combined with vectorized icons. Recently we have seen some interesting demos, but as with all new things we should consider the drawbacks and benefits of this new technique.

Recently we interviewed design technologist P. J. Onori of Waybury about the Iconic KickStarter project. The goal of the project is to make icons “smart” so they can be styled with CSS and manipulated with JavaScript. The abbreviated explanation of how this is achieved is by adding the SVG icon and its elements, with properly named class attributes, to the DOM just like any other element. As part of the web page’s DOM, the SVG DOM is exposed to web page’s CSS and JavaScript.

A secondary aspect of the Iconic project is that the new and improved set will also be responsive, with three versions of each icon designed and optimized for display at very small, medium, and very large sizes. The concept of responsive icons is the same, at least functionally speaking, as responsive images. When a user accesses a site that implements the technique, they will see a different version of an image (or icon) that is optimized for their screen size.

British designer Joe Harrison has also created a simple, yet impactful, web site at ResponsiveIcons.co.uk, that demonstrates his own, more elaborate, version of the concept. It appears that both designers have arrived at the concept independently of one another. Waybury’s primary concern is developing a standard for making SVG icons and the elements therein accessible to CSS and JavaScript. Responsiveness is not a primary concern of the project. Joe Harrison’s site focuses solely on responsive icons.

Responsive Icons Demos

Waybury and Joe Harrison have created demos of their respective takes on the responsive icon concept. Waybury’s demo shows a microphone icon at three sizes and with various levels of detail. Joe Harrison’s demo shows the Home icon, similarly, at several different sizes and with progressively more detail.

ResponsiveIcons.co.uk
Icon Responsive Icons

Mixed Reactions to Responsive Icons

Reactions to the Responsive Icon concept have been mixed. Some designers are on board with the idea but many are not. The primary objection is that icons are an important element of the user experience and changing the look of the icons from experience-to-experience will degrade usability and create inconsistent experiences for users. I am inclined to agree with the objection that delivering icons that look different from experience-to-experience is a usability error. P. J. Onori said it best in our interview when he said, “icons have become the native language of computer interfaces”.

Allow me to clarify here, though, that I am not opposed to the Responsive Icon concept, quite the contrary. I am only opposed to the idea of showing significantly different visual representations of the icons in different experiences. This is a different issue than delivering a different file.

A Proper Use Case for Responsive Icons

In our recent interview, icon designer Tom Nulens (a. k. a., Sodafish) compared icon design to both logo and typeface design. Icon design shares many of the concerns of both design disciplines. Because the size at which icons will likely be displayed can vary quite a bit (24/48 pixels on Android, 30/60 pixels on iOS, etc) a single icon design may not be ideal for every context.

Seasoned logo designers and typographers are well aware of the subtle, and not-so-subtle, visual differences that can occur in a design depending on the size at which the logo or type face is displayed. It is often necessary to thicken the strokes of a typeface displayed very small or to widen and/or letter space characters at smaller sizes.

Similarly, stroke weights, proportions, type, and negative space may need to be adjusted on logo versions intended to be displayed at very small or very large sizes. Very small areas of white space in a larger dark area will tend to fill in. Lines that look thin at small sizes can seem quite chunky in very large reproductions.

In the example below, the negative spaces that form the lines on the ruler are legible and proportional in the smaller size but as the icon is enlarged, the white lines take on as much visual prominence as the surrounding black of the ruler.

However, if we make the lines on the ruler thinner across-the-board, the larger sized icon looks aesthetically pleasing, but the lines fill in at the smaller size and become illegible.

Responsive Icons allow us to optimize the relative proportions and line weights for the reproduction size and to maintain the aesthetic integrity of the icons. We have not altered the meaning or even the look of the icon. In fact, most users would likely not even notice the difference between the two icons. It is this last example where Responsive Icons can fully express their usefulness.

Conclusion

As a professional icon designer, I want my icons to be the best and most useful they can be. The Responsive Icon technique can be a very useful tool for icon designers in the use case described in this article. This technique has benefits and drawbacks just like any other tool. In closing let’s look at some of them.

Drawbacks

• Risk of confusing users by presenting significantly different icons across experiences
• Increased amount of work for icon designers due to the need to design multiple versions of each icon
• Potential for abuse and increase in page size

Benefits

• More fine-grained control for designers over icons at different sizes
• Icons optimized for different grid sizes on different devices such as Android, Windows Phone, and iOS
• Aesthetic consistency of icons at different sizes through visual rather than mathematical scaling

Whether or not Responsive Icons catch on remains to be seen. The idea is new and we have yet to see a fully-functioning example in a production implementation, let alone enough implementations to draw any conclusions based on data. The idea is worth exploring to understand the potential impact, both positive and negative. Just like the evolution and adaptation of the different species of life, innovations make false starts and through adaptation to their environment, often head in unexpected but beneficial directions, and ultimately the usefulness of something new determines its longevity. Let’s wait to see how this idea evolves before drawing hard and fast conclusions.

Photo Credit: The house icons in the banner image on this post were created by and used with the permission of Joe Harrison.