Icons… resize or shrink?

Question

I've been redesigning my website for mobile use and realized that my icons are a bit too big. The standard 16 x 16 icon isn't really ideal for the small screen. Looking at other sites, i.e. facebook's notification icons, gmail's compose/search/refresh icons, and so on... they seem to be 12 x 12, at least on my phone (Galaxy Nexus... which is double pixel density, so truly 24 x 24 but I digress).

One, am I right in saying that these icons are 12 x 12 in size? If 16 x 16 is the "standard" for desktop website icons, would 12 x 12 be the "standard" for mobile website icons?

Also, in terms of shrinking the icons down... is it recommended to take the icons, which are fairly simple icons created as in vector software, and shrink the .svg file using vector software and then re-save as .png? Or will these icons keep their integrity if I shrink them using CSS?

What's best practice?

Any help is appreciated. Thanks!

Answer 1

CSS media queries are definitely the way to go:

#icon {
    backround:url(../images/sprites.png);
    background-position:0 0;
    height:20px;
    width:20px;}
//desktop
@media only screen and (min-width: 960px)  and (max-width: 1140px){

    body { min-width:960px; }

    #icon {
        background-position:-20px 0;
        height:15px;
        width:15px;}

}

//tablets
@media only screen and (min-width: 768px) and (max-width: 959px) {

    body { min-width:768px; }

    #icon {
        background-position:-32px 0px;
        height:12px;
        width:12px;}

}

//mobile
@media only screen and (min-width: 480px) and (max-width: 767px) {

    body { min-width:480px; }

    #icon {
        background-position:-50px 0px;
        height:10px;
        width:10px;
}

Each redraw, the browser tests against these rules and replaces them as needed. In the above example, the #icon has one consistent property (background), and several which change as the browser size changes.

Check out the 1040Grid or the Skeleton css frameworks for some great out of the box solutions. Or just roll your own.

Note that media queries are a css3 feature and will fail in older browsers. In which case the default rule set (normally for a 960 layout) will be used. (There are some javascript solutions that handle this issue as well..)

Cheers

Answer 2

Best practice is to design special small icons. It's impossible to get good qality images from vector icons automatically.