Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

All About Responsive Iconography

by
Gift

Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

This article is the third in a three-part series showing the new approaches to iconography Iconic will be delivering. If you like what you see in this article, please consider backing Iconic on Kickstarter


What is Responsive Iconography?

Responsive iconography is the approach of displaying icons of appropriate fidelity based on an icon's display size to ensure optimal legibility.


Why This is Relevant

The content we create is viewed in more permutations than ever. Device, screen density, resolution, platform, browser. So many variables—all of which have an impact (to varying degrees) on our content's legibility. Icons in particular can be quite sensitive to the size in which they are displayed.

The prime directive of an icon is to be understood. To that end, an icon's legibility must be ensured when it is displayed. There are ways to design icons for greater legibility—especially at smaller sizes. Designing in this fashion can often come at the expense of aesthetics—or at least aesthetic options.

Aesthetics also play a vital role in iconography. Unfortunately, legibility and aesthetics can often be opposing forces. An icon's design usually has an optimal size where legibility and aesthetic are well balanced. Very few, if any, icons can strike a perfect balance of legibility and aesthetic at every size. So if we want our icons to be legible and attractive across a wide size range, it requires multiple versions of icons optimized for specific size ranges.

sizes

This idea is not new. This approach used to be common for raster icons. With the permeation of vector imagery on the web, we as icon designers mistook scalability for legibility. So what makes Iconic's take on this old approach unique? Iconic is shipping with three sizes of every icon and it comes with code for the icons to provide the optimally legible version of each icon automatically.


The Easy Way and the Hard Way

There are two basic ways to adjust icons. One plays on assumption, the other is more accurate. One is simple, the other more complex. The simple approach uses media queries to adjust icons at specific screen widths. This can work since content size often scales down in relation to screen size—meaning an icon viewed on a desktop screen is likely to be set at a larger size than on a mobile screen. Maybe.

responsive

The right way to do this is to apply an icon's responsive functionality at the element level—meaning that the right icon is displayed based on the icon's dimensions, not the screen's dimensions. The best approach is for icons to be aware of their dimensions and simply change to the most appropriate legible/aesthetic version. This ends up being a little more complex…

So, how can we do this?


Nuts and Bolts

Note: The examples below are still proof-of-concept prototypes. None of the following code is final, let alone beta. We're still in the R&D phase of this approach and we know there are many issues that still need to be addressed. We will be working on a more concrete direction for this method after the Kickstarter campaign is complete.

There are a few ways we're tackling responsive iconography at this point and the "final" directions are still up in the air. We'll share three different ways we're thinking about the technique at the moment.

Simple media-queries

First, the simplest approach. SVG has always been at the core of Iconic, but it's easy to forget that Iconic was one of the first sets to also ship as a web font. As it turns out, web fonts work tremendously well for responsive iconography. The reason why web-fonts work well for responsive iconography is that all icons are added to a single font. This allows size ranges to be treated as a different weight (e.g., Iconic-Large.otf, Iconic-Medium.otf, Iconic-Small.otf). Every icon on the screen can be changed simply by changing the font-weight for the web-font. In the demo below, the icons respond to screen width.

icon-demo-1

See demo

Web-fonts and element-query polyfills

As previously mentioned, adjusting icons based on screen width is not the best approach to ensure legibility. Icons need to respond to their own display dimensions. Unfortunately, we do not yet have the ability to create element queries within CSS. The good news is that people are thinking about this and creating workarounds. The demo below uses element queries and web fonts for a dynamically-adjusting icon based on its display size.

See demo
See demo

SVG breakpoints

There's been some great thinking in this space, specifically from Andreas Bovens who has been talking about SVG breakpoints for quite some time now. This approach relies on the fact that media queries within an SVG file referenced as an img, embed or object use the display dimensions of the SVG. Meaning a media query of min-width:400px within the SVG would trigger if the image was 400 pixels or more—regardless of screen width. The demo below shows that functionality in action.

See demo
See demo

There's currently one problem with this approach. Those internal breakpoints no longer work when the SVG file is injected in DOM. SVG DOM-injection is vital to other features of Iconic, so this will be something we'll need to figure out in the near future.


Conclusion

An illegible icon fails in its most important duty. We need to stop thinking of vector imagery as the catch-all for icon legibility. We need to design icons that accommodate different size ranges and we need tools that display icons at the proper fidelity based on their display size. None of the current opinions are perfect. But they're a step forward in the right direction.


Back Iconic on Kickstarter

The goal of Iconic is to help provide new approaches to iconography.

iconic-logo

Please consider backing Iconic on Kickstarter

Advertisement