Design

Resolution Independence

Posted on: March 8th, 2012 by Mason Brown + Comment

Interface design is rapidly shifting towards a resolution-independent model. As mobile devices, and screens of all sizes continue to increase pixel density we can no longer rely on 72 pixels per inch (ppi) as an interface design standard for the web. Retina displays pack up to 326 ppi, which render legacy web graphics fuzzy and pixelated. It's not a good idea to simply "up-res" raster graphics because higher resolution raster graphics generate too much overhead causing slower load times, even for users with high speed internet. Luckily, different vector-based solutions are making it easier to implement resolution-agnostic interfaces.

Unicode symbols were among the frist web graphics to be vectorized, which evolved into dingbat fonts, which paved the way for the now mainstream icon fonts. Icon fonts are great for certain interface graphics, but doesn't promise to be a perfect solution for every graphical need. You still have to deal with font-smoothing and anti-aliasing issues for different browsers, causing icons to render slightly different depending on which browser is rendering the font face. SVG offers a more robust solution over icon fonts for a number of reasons, but icon fonts are still a good alternative for most interface icons and pictograms.

It's no doubt that resolution independence has become a key factor in creating responsive web designs. Tools and technical standards will always evolve, but great design is timeless. It’s a delicate challenge to gracefully adapt to emerging technologies while also remaining focused on using design to communicating effectively.

Here are a few of my favorite fonts and vector resources for resolution responsive icons:

Modern Pictograms

Pictos

Entypo

IcoMoon

Fontomas

Font Awesome

Iconic

The Noun Project

Copy Paste Character

Responsive Ready

Posted on: March 7th, 2012 by Mason Brown + Comment

Responsive design is all the rage these days, and it's no surprise the term "responsive" has become an automatic score on most buzzword bingo games. It's been exciting to see responsive design practices emerge beyond a niche philosophy and become an expected barrier to entry for nearly every website moving forward. Growing volumes of people are viewing web content primarily on mobile devices and have grown to expect immersive experiences on even the smallest screens. It's widely expected to see all aspects of a website's interface adapt gracefully for a sundry of screen sizes, including buttons, text, images, video and navigation.

Fortunately, there’s a growing community of responsive design enthusiasts openly sharing various tools and techniques for others to discover and re-purpose. I certainly encourage people to create custom tailored solutions that are content-specific, but you can influence your approach by exploring many of the pre-baked tools that help solve common responsive design challenges. Here’s a collection of the responsive design guides that I find useful and inspirational.