Using image icons for scalability

One of the major problems we have when creating responsive content is the use of icons: their bitmap format doesn't scale well when resizing them. This is often the same for icon sprites; for example, if you resize the battery icons demo from earlier in the chapter, then you will soon notice how pixelated it becomes when anti-aliasing kicks in!

To get around this, designers may simply drop the use of icons; the alternative is to replace them with vector-based web fonts, such as the Font Awesome icons, available at http://fortawesome.github.io/Font-Awesome/. There is an excellent article online by Jason Cranford Teague at http://webstandardssherpa.com/reviews/responsive-webfont-icons, extolling the benefits of using them in the main due to their scalability with no loss of fidelity.

To see how they work in action, we're going to use some social media icons from Entypo, created by Daniel Bruce and available at http://www.entypo.com. For this tutorial, we're going to use a simplified version of an example created by Teague, which uses a number of icons. You can see the original article at http://webstandardssherpa.com/reviews/responsive-webfont-icons.

Perform these steps for this tutorial:

1. Let's start by extracting a copy of webicons.html and webicons.css from the code download that accompanies this book. Instead of building this up (particularly as it uses a fair bit of CSS), we're going to take a look at some of the key concepts in use. Store the webicons.css file in the css subfolder of our project folder, while the webicons.html file should be stored at the root.
2. If we preview the file in a browser window, we will see a range of icons displayed; the screenshot shows them resized in Firefox at 67 percent:
   
3. Try zooming in and out. Notice how the icons increase and decrease in size without any apparent loss of quality? We've used web fonts, in place of standard images; this principle works beautifully for simple icons such as the logos used in our example. The key to this is the use of the rem sizes or root em. This sizes each character to the font size of the HTML element not the parent, which is used by em.

   Tip

   There's a useful article by Jonathan Snook that explains how rem and em work, available at http://snook.ca/archives/html_and_css/font-size-with-rem.

4. Notice the use of the format set for each icon? This is the Unicode Private Use area of the font; instead of using t from the font (which represents the Twitter icon), we can use this private use area. It achieves the same result. The only difference being that the letter t is not displayed when using the private area.

   Note

   For more information about Unicode Private Use Areas, take a look at the article on Wikipedia at http://en.wikipedia.org/wiki/Private_Use_Areas.

Let's move on and take a look at a couple of examples of real-world applications of responsive design, beginning with Building a responsive carousel.