CSS background-size per differenziare l’esperienza utente su mobile

Introduzione Gli ingegneri Apple hanno creato pixel larghi appena 78 micrometri, riuscendo così a quadruplicarne il numero nel display da […]
CSS background-size per differenziare l’esperienza utente su mobile

Introduzione

Gli ingegneri Apple hanno creato pixel larghi appena 78 micrometri, riuscendo così a quadruplicarne il numero nel display da 3,5 pollici di iPhone 4S e iPhone 4. È proprio grazie alla densità dei pixel (326 per pollice) se testo e grafica hanno un aspetto nitido e uniforme a qualsiasi dimensione.

Ti ho introdotto a questo nuovo articolo con un paragrafo prelevato dal sito apple. I nuovi smartphone, come iphone 4 o 4s, ma anche htc samsung e molti altri, stanno raggiungendo risoluzioni impressionanti e ognuno di loro chiama le proprie tecnologie a modo suo. Retina e Amoled ne sono un chiaro esempio.

L’obiettivo di questo articolo

La profondità di pixel e le risoluzioni nettamente superiori ai precedenti modelli di smartphone hanno creato non pochi problemi di visualizzazione e di resa grafica delle immagini di layout. E’ necesario per forza di cose differenziare l’esperienza utente e crearne due diverse versioni. Una prima versione dedicata agli smartphone con risoluzioni normali ed una variante per risoluzioni in HD. Come? Vediamolo insieme!

La soluzione al problema

Se siamo abituati a gestire le immagini di layout tramite sprite, possiamo risolvere il problema in due modi:

  1. Creando due varianti di sprite.
  2. All’interno di un unico sprite, inserire entrambe le versioni di icone.

L’importante è mantenere le stesse proporzioni in entrambi i casi affinchè non ci siano diseguaglianze di visualizzazione. Nel caso concreto che andremo ad analizzare verranno create due sprite differenti.

La tecnica da utilizzare

Non rimane altro da fare che illustrare le tecniche CSS coinvolte. Utilizzeremo la tecnica del mediaqueries e del background-size. La prima per differenziare la visualizzazione dello sprite in relazione alla risoluzione del device in uso. La seconda per ridurre le dimensioni dello sprite in alta risoluzione alle giuste dimensioni. In realtà non cambierà nulla tra uno sprite ed un altro durante il rendering del browser, poichè le icone dello sprite in HD risulteranno essere, dopo aver applicato le due regole css viste poc’anzi, delle stesse dimensioni di quelle in versione normale. Per facilitare le cose il secondo sprite lo creeremo esattamente il doppio del primo; con mediaqueries, mi ripeto, mostreremo uno piuttosto che l’altro in realzione alla risoluzione e infine con la regola del background-resize renderemo il secondo sprite (quello in HD) di uguale dimensioni rispetto al primo. Mettiamoci all’opera!

L’esempio concreto

L’esempio si basa su un semplicissimo menù. Ad ogni voce di menu sono state affiancate delle icone decorative. Questo è il classico caso che necessita di questo accorgimento. Se non ricordi bene in cosa consiste uno sprite CSS ti consiglio di rileggerti questo articolo. Ecco il codice html e css relativo all’esempio.

<ul id="mainmenu">
    <li class="home"><span class="icon"></span>Home Page</li>
    <li class="contact"><span class="icon"></span>Contact</li>
</ul>
/* Dichiarazioni comuni */
#mainmenu li{
    width:auto;
    height:35px;
    line-height:35px;
    background-color:#464646;
    border-bottom:1px solid #6e6e6e;
    position:relative;
    padding-left: 40px;
    color:#f0f0f0;
    font-family:arial;
}
#mainmenu li span{
    width: 20px;
    height: 20px;
    position:absolute;
    top: 7px;
    left: 10px;
    background-image: url(sprite.png);
    background-repeat: no-repeat;
}

/* Sprite per le risoluzioni in HD */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 240dpi) {
    #mainmenu li span{
        -moz-background-size: 20px 50px;
        -o-background-size: 20px 50px;
        -webkit-background-size: 20px 50px;
        background-size: 20px 50px;
        background-image: url("spriteHD.png");
    }
}

/* Dichiarazioni relative ad ogni singola voce di menu */
#mainmenu li.home .icon{
    background-position: left top;
}
#mainmenu li.contact .icon{
    background-position: left bottom;
}

Per prima cosa definiamo le caratteristiche generiche del menu e dello span che farà da contenitore delle immagini, definendo in questa fase anche il background sprite contente le icone per le risoluzioni “normali”. Immediatamente dopo definiamo, tramite il mediaqueries, l’eccezione per le risoluzioni in HD; agendo sulla risoluzione, andiamo a definire un nuovo background (spriteHD.png) e ad esso gli andiamo a settare, tramite il background-size, larghezza e altezza pari alle dimensioni dello sprite standard, cosi che non ci siano differenze alcune. La proprietà in questione, introdotta con i CSS3, consente di definire la larghezza e l’altezza di un background, ed è proprio quello che ci serve.

Conclusioni

Senza questo accorgimento, tutte le immagini risulterebbero sfocate e poco ben definite. Porta via un pò di tempo in più e qualche riga di codice, ma ne vale veramente la pena! Per testare la demo, avrete bisogno di due device differenti, come ad esempio un iphone 3g e un iphone 4. Per notare la reale differenza, disattivate nella demo il mediaqueries e vi renderete conto da soli della qualità delle immagini su iphone 4 o 4s.

Spero che questo articolo possa esserti stato utile e come al solito, per dubbi o perplessità lascia pure i tuoi commenti qui di seguito o sulla bacheca di facebook.

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github