I have been involved in an interesting discussion on how best to create responsive icons for a website. There are various methods available, and each of these has its pros and cons. What started the discussion was a post by Specky Boy Design showing an example of responsive icons using SVG images.
This example displays a method of using the CSS property of @media to pull in different images based on the screen size of the device. This allows the icons to display at an appropriate size for each device.
The pros of this method is that the browser automatically displays the correct icon sizing for the device, however you have to create all the various icons to display for each size. That becomes a lot of extra graphics work when building the website.
Another method is to use a single SVG image, which is a vector based graphic available in all modern browsers. Because an SVG image is vector based, it can scale without losing quality in the image. These images can be created using Adobe Illustrator.
You could also use CSS and the @media property to display a CSS sprite, and adjust the position of the image to show the correct icon for the screen size. Since icons are smaller images to begin with, using a sprite makes sense provided the download time is small for the sprite image.
Adobe just introduced a new JavaScript framework called Snap.svg which allows you to work with SVG images and JavaScript to accomplish a variety of image features. Check out Snap at http://snapsvg.io/.
What method is the best method for you to use? You have to weigh the various options that are available, and more and more methods for accomplishing the same task are being created everyday.
Web designers have a more difficult job in the modern web. You have to focus on the website audience and each specific website’s needs in order to determine the best method for that site design. More and more methods are being introduced weekly, and it is the web designers job to stay on top of the various methods available. You can no longer create every website in the same way as the previous one you created.
