Oggi invece parliamo di iPhone.
Un oggettino estremamente controverso che nonostante le differenti opinioni a riguardo è riuscito a finire in una notevole quantità di tasche italiane, e per via delle sue innovative potenzialità a livello di browsing merita sicuramente un’analisi più approfondita.

Come possiamo dunque rendere migliori i nostri layout agli utenti iPhone?

Diciamo che sviluppare con un occhio ad iPhone è in qualche modo possibile anche senza averne acquistato uno. E’ sufficiente basarsi su Safari (in versione desktop), da qualche tempo disponibile anche per Windows e attenersi ad alcune basilari regole di buona scrittura durante la costruzione dei nostri layout (ah, gli standard).

Tuttavia, così facendo si sta solo iniziando a scalfire la superficie. La completa integrazione di Safari Mobile con le altre apps installate come Mappe o le chiamate telefoniche rendono possibili tutta una serie di interessanti ottimizzazioni che si possono sperimentare solamente “mettendoci la mani sopra”.

Lavoriamo su iPhone, e vogliamo letteralmente spremerlo al massimo.

Prima di iniziare

• Le tue dita non saranno mai precise come un mouse.
  Su iPhone si interagisce con le dita, e a meno di non fare un uso continuo dello zoom, la precisione di puntamento sarà leggermente inferiore rispetto a quanto siamo abituati a fare tramite mouse; layout ampi e spaziosi sono semplicemente l’ideale.
• Dimentica il concetto di finestra.
  Il concetto di finestra poi, lascia il tempo che trova quando la navigazione avviene una pagina alla volta, a tutto schermo e senza overlay di nessun tipo. Lo zoom tramite doppio tap su una parte del layout adatta la visuale al primo elemento blocco presente. Nessuna finestra, altro resize o scroll controllabili.
• Quando lo spazio è poco, “less is more”.
  Con una risoluzione portante di 480×320 pixel (in modalità landscape) è naturale che un contenuto a singola colonna sia il meglio che un vostro utente possa chiedere: tuttavia anche senza rivoluzionare il vostro layout in tale senso, ricordate che la chiarezza con la quale disponete i vostri contenuti verrà notata (e apprezzata) da chi altrimenti si troverebbe a scrollare continuamente a destra e sinistra.

Hey, ma Mobile Safari non se la sbrigava da solo?

Per la maggior parte è vero. Safari Mobile sarà in grado di visualizzare le vostre pagine web con l’esatta qualità della controparte desktop senza che voi dobbiate metterci mano in alcun modo.

Tuttavia come già detto la differente area di visualizzazione e i metodi che avete per interagire con essa (le vostre dita) possono richiedere qualche accorgimento aggiuntivo per agevolare la navigazione e sfruttare al massimo le caratteristiche dell’iPhone.

Un foglio di stile separato

Probabilmente già lo immaginavate. Anche in questo caso è bene prevedere un CSS separato dal resto della nostra struttura, contenente le sole regole volte a determinare la resa su Mobile Safari.

Possiamo filtrare il caricamento del nostro foglio di stile aggiuntivo riconoscendo la proprietà “max-device-width” settata a 480 pixel (la dimensione dello schermo dell’iPhone).

Inseriamo quindi nell’head del nostro documento la seguente riga, che permette a tutti gli altri device con una dimensione superiore ai 480 pixel di ignorare il caricamento del CSS dedicato all’iPhone.

<link media="only screen and (max-device-width: 480px)"
href="css_iphone.css" type="text/css" rel="stylesheet" />

Comprendere il Viewport

Mobile Safari effettua un resize automatico a partire dai 980 pixel verso i 320 pixel (modalità portrait). Consideriamola una buona base di partenza per poter ottenere la migliore resa qualitativa sull maggior parte dei siti web attualmente in circolazione (che sono dotati per l’appunto di una width massima di 980 pixel).

Questo non toglie che il vostro layout possa avere differenti dimensioni e richiedere un diverso livello di resize. Esiste a tale scopo un potente meta tag aggiuntivo: viewport in grado di indicare ad iPhone la dimensione di partenza da cui effettuare il resize.

<meta name="viewport" content="width=800" />

Nel caso il vostro layout sia leggermente più piccolo della media, un semplice accorgimento come questo può rendere i vostri testi direttamente leggibili senza bisogno di ulteriori zoom lato utente. Un bel vantaggio con poco sforzo.

Sempre tramite viewport possiamo definire il livello di zoom iniziale, tramite la proprietà “initial-scale=x.y” o bloccarla del tutto con “user-scalable = no” (ma ve lo sconsiglio).

<meta name = "viewport" content = "initial-scale = 1.0" />
<meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no" />

Lavorando sui dettagli potremo scoprire che agevolare uno zoom iniziale su una “area calda” del nostro layout può far risparmiare tempo prezioso ai nostri lettori e focalizzare l’attenzione su ciò che per noi è importante.

Testi

iPhone applica una sorta di ridimensionamento intelligente anche ai testi mano a mano che il livello di zoom aumenta. Ciò può portare ad effetti imprevisti nei menù di navigazione o quando ci troviamo a disporre i contenuti in spazi a dimensione fissa.

E’ possibile disattivare il ridimensionamento del testo o aumentarne la dimensione ad hoc tramite la regola “-webkit-text-size-adjust”.

-webkit-text-size-adjust: none; /* nessun ridimensionamento intelligente */
-webkit-text-size-adjust: 150%; /* ingrandisci il testo del 150% */

Integrazione con le apps

Esistono poi tutta una serie di proprietà che la versione mobile di Safari implementa per migliorare la user experience e che, per ovvi motivi, non sono implementate nella versione desktop.

Cliccare su un link ad una mappa di Google, ad esempio, porterà all’apertura dell’applicazione Mappe con il passaggio dei parametri associati. Iphone riconosce infatti i link che iniziano con “http://maps.google.com/maps” e ne dirotta l’apertura all’applicazione più consona anziché aprirne la pagina web.

Vengono anche riconosciuti i formati hCard, attivando i numeri telefonici in essi inclusi e permettendo la chiamata diretta dalla pagina web.

<div id="hcard-Francesco Gavello" class="vcard">
    <div class="fn">Francesco</div>
    <div class="tel">123-45667890</div>
</div>

O in alternativa è anche possibile passare un parametro al software telefonico tramite il classico link con tag “a”, inserendo nell’attributo href il prefisso “tel:”.
E’ da notare come link di tale costruzione possano quasi certamente generare problemi sui restanti browser, e dovrebbero essere mostrati solo tramite il foglio di stile riservato all’iPhone.

<a class="call" href="tel:123-4567890">Chiama Francesco Gavello</a>

CSS potenziati

Non vanno trascurate le potenzialità di Safari nell’implementare (come abbiamo visto in passato) le più recenti regole CSS3. Proprietà come “-webkit-border-radius”, “-webkit-border-image”, background multipli e l’utilizzo di PNG trasparenti possono finalmente venire applicati in maniera semplice e senza grattacapi.
Il paradiso del web designer, insomma

Il giusto equilibrio

Questa ovviamente è solo una parte di ciò che potete fare oggi con il vostro iPhone un pò di tempo da dedicare ottimizzazione. Le potenzialità sono moltissime e dipendono in gran parte dai risultati che volete ottenere.

Non credo tuttavia che sia una buona idea spingersi troppo oltre sino a sostituire la totalità del proprio layout con una versione “lite” dedicata alla navigazione mobile (a meno di non essere un grosso network come Digg, Facebook o eBay, ma in quel caso una apps dedicata risolve gran parte dei problemi).

La potenza di iPhone sin dall’inizio è stata quella di offrire la vera internet senza troppi compromessi. Questo è ciò che gli utenti si aspettano ed è ciò che dovremmo secondo me dargli. Voi che ne pensate?

foto: Apple

Se ti sei perso le puntate precedenti puoi leggere anche la prima e la seconda parte.

Colonne multiple

Stile di impaginazione preso di peso dall’ambito giornalistico, suddividere i contenuti su più colonne adiacenti può tornare molto utile in layout del tipo “magazine style” (per l’appunto) che sembrano andare tanto alla grande negli ultimi tempi.

Vediamo quindi come suddividere il testo contenuto in un contenitore in maniera totalmente automatica affidandoci ad alcune semplici regole CSS3.

Teoria

Otterremo il nostro scopo grazie ai selettori “column-count”, che definisce il numero di colonne sulle quali spezzare il contenuto

• column-count: 3;
• -moz-column-count: 3; /*  Mozilla */
• -webkit-column-count: 3; /* Webkit */

“column-gap”, che imposta lo spazio tra una colonna e l’altra

• column-gap: 20px;
• -moz-column-gap: 20px;
• -webkit-column-gap: 20px;

e “column-width” che come prevedibile va a definire la grandezza della singola colonna

• column-width: 150px;
• -moz-column-width: 150px;
• -webkit-column-width: 150x;

Come si può vedere abbiamo nuovamente a disposizione la regola “standard” CSS3 e le relative varianti per i browser attualmente in grado di supportarla: “-moz” per Mozilla (Firefox e derivati) e “-webkit” per Safari.

Pratica

Il nostro codice HTML è come al solito molto pulito ed essenziale, e anzi non richiede nessun tagging aggiuntivo. Abbiamo solamente bisogno di un contenitore e dei paragrafi al suo interno sui quali agire. Una condizione abbastanza classica, insomma.

<div class="esempio multi_colonne">
<h2>Fisso tre colonne con spaziatura 20px</h2>
<div id="colonna_tipo_1">
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>

<h2>Fisso la dimensione e la spaziatura</h2>
<div id="colonna_tipo_2">
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>

Nota: il “Lorem Ipsum” all’interno dei paragrafi è stato troncato per esigenze di impaginazione di questo post.

Andiamo quindi a puntare il div “colonna_tipo_1″ e impostiamo il numero delle colonne sulle quali fare fluire il testo a 3, con una spaziatura di 20 pixel ciascuna.

#colonna_tipo_1{
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;

-moz-column-gap: 20px;
-webkit-column-gap: 20px;
column-gap: 20px;
}

Oppure agiamo sulla proprietà “column width” per fissare la dimensione di una colonnna, definiamo poi la spaziatura e lasciamo che il browser si occupi di come suddividere il testo.

#colonna_tipo_2{
-moz-column-width: 150px;
-webkit-column-width: 150x;
column-width: 150px;

-moz-column-gap: 20px;
-webkit-column-gap: 20px;
column-gap: 20px;
}

4. Testo ombreggiato

Un’altra tecnica decisamente immediata da applicare sul testo per risaltarne l’effetto è la proprietà text-shadow.

Teoria:

La regola in questo caso è una sola

• text-shadow: 2px 2px 5px #333

che accetta quattro parametri: nell’ordine spostamento orizzontale, spostameno verticale, sfocatura e colore dell’ombra proiettata.

Pratica:

La proprietà viene applicata in maniera molto semplice, e rende al meglio se usata in maniera “sottile” e senza abusarne.

.ombra_su_testo h2 {
text-shadow: 2px 2px 5px #333;
color: #eee;
}

Background multipli

Ecco quindi l’ultima delle proprietà di oggi, probabilmente una delle più richieste da chi utilizza i CSS in maniera “massiva” con particolare attenzione agli effetti sullo sfondo: i background multipli.

Teoria

Utilizzare i background multipli con i CSS3 è molto più semplice di quanto possa sembrare. Si tratta sostanzialmente di un’espansione delle attuali regole:

• background-image
• background-position
• background-repeat

che vanno compilate esattamente come nelle specifiche CSS2, ma alle quali è possibile “appendere”, tramite il separatore virgola “,” ulteriori background, posizioni e proprietà di ripetizione.

Vediamolo in pratica.

Pratica

Nell’esempio che vi riporto ho utilizzato due diversi background: uno per realizzare una sfumatura in alto, ripetuta sull’asse X, e una in basso a destra, non ripetuta. Il tutto con tre regole e senza l’utilizzo di contenitori annidati a supporto.

.background_multipli {
background-image: url(img/top.jpg), url(img/bottom_right.jpg);
background-position: top left, bottom right;
background-repeat: repeat-x, no-repeat;
}

L’immagine in alto “top.jpg” viene quindi posizionata “top left” e ripetuta “repeat-x”. Le altre proprietà seguono la seconda posizione, un eventuale terzo background la terza, e così via teoricamente all’infinito.

Come potete immaginare gli utilizzi di una simile tecnica sono pressochè infiniti. Attualmente solo Safari supporta i background multipli.

Scarica i file con gli esempi

Arrivati al termine della terza puntata ecco per voi a disposizione lo zip contenente i file utilizzati sino ad ora (comprensivo anche degli argomenti trattati nella prima nella seconda puntata).

• Tecniche di progressive enhancement: file di esempio

E ora via, con altri tre selettori decisamente utili e rapidi da implementare.

4. Pseudo Elementi

Parlando di aspetti prettamente tipografici, definire in maniera particolare la prima riga di un paragrafo può agevolarne la lettura ponendo l’attenzione su ciò che state scrivendo. Utilizzeremo per questo compito l’attributo “first-line“, oramai utilizzato da gran parte dei browser (escluso Internet Explorer 6).

Teoria

Nel nostro contenitore con classe “esempio” andiamo a puntare tutti i paragrafi che seguono un titolo di secondo livello e in particolare solamente la loro prima linea (first-line, appunto).

Indichiamo una variazione del font sul maiuscolo completo, una maggiore grandezza regolata sui 18 pixel e una spaziatura delle lettere a 2 pixel rispetto allo standard.

Pratica

.esempio h2 + p:first-line {
font-variant : small-caps;
font-size : 18px;
letter-spacing : 2px;
}

La resa, come si può notare dall’immagine, è di colpire immediatamente il lettore rispetto ad un anonimo blocco di testo Un piccolo dettaglio che aggiunge quel qualcosa in più.

5. Ombre

Qualche ombra ben posizionata riesce a dare un senso di maggiore profondità e in genere un feeling meno “freddo”. Solitamente gestire le ombre sui contenitori richiede l’utilizzo di contenitori vuoti e in alcuni casi molto annidati, mentre con i CSS3 il tutto viene ridotto ad una essenziale quanto potente regola.

Attualmente solo Safari e Firefox 3.1 (alpha) supportano le ombre.

Teoria

I selettori per generare ombre tramite CSS3:

• box-shadow (standard CSS3)
• -webkit-box-shadow (specifico per Webkit, con il classico attributo -webkit che abbiamo imparato a conoscere)

I parametri che accettano sono quattro, rappresentanti rispettivamente

• spostamento orizzontale
• spostamento in verticale
• sfocatura
• colore dell’ombra proiettata

Pratica

box-shadow : 5px 5px 20px #333;
-webkit-box-shadow : 5px 5px 20px #333;

I selettori presentati producono come effetto un’ombra spostata a destra e in basso di 5 pixel, che sfuma a 20 pixel di distanza con colore #333333.

.attributo_not img { display: none; /* nascondiamo di default l'immagine */ } .attributo_not img:not([border]) { /*rendiamola nuovamente visibile solo se non ha bordo*/ display: block; float: left; margin: 0 10px 10px 0; }

L’attributo “:not([border])” va a colpire tutte le immagini all’interno della classe .attributo_not che NON hanno un bordo definito. Gli utilizzi sulla base della negazione di attributi sono pressoché infiniti e trovano ottime applicazioni come miglioramento estetico per i browser che se lo possono permettere.

Progressive Enhancement: migliorare l’esperienza utente per i browser moderni

Al prossimo appuntamento!

Come anticipato, iniziamo a prendere in esame alcune delle tecniche di progressive enhancement più semplici da mettere in pratica. Vorrei ricordare prima di iniziare come questi articoli trattino di tecniche atte a migliorare esteticamente i nostri layout, e che non non vanno pertanto considerate come basi con le quali costruirne la struttura stessa. Per una lettura più approfondita vi rimando all’articolo principale della serie.

Un foglio di stile separato

Anche se molti dei selettori che verranno esplorati in seguito possono essere implementati direttamente nel nostro foglio di stile principale, questa si rivela una cattiva pratica nell’ottica di un manutenzione futura.

Ricordiamo che l’obiettivo del progressive enhancement è di fornire un miglioramento ai nostri layout partendo sempre e comunque da una solida struttura di base, struttura che deve dimostrarsi autonoma e dotata della maggiore compatiblità cross browser realizzabile. E’ su di essa che andremo a lavorare apportandovi dei migliroamenti progressivi.

Converrà perciò aggiungere al nostro foglio di stile un secondo foglio “exra” dedicato a tutti i miglioramenti che vogliamo implementare.

I vantaggi di una simile scelta sono evidenti:

• maggiore mantenibilità del codice
• eventuale possibilità di filtrare il caricamento del secondo foglio di stile da javascript

Per i browser che se lo possono permettere (in virtù di una maggiore apertura all’implementazione di futuri standard), iniziamo quindi a considerare qualche utile selettore.

1. Selettori di attributo

Questi selettori, già spesso usati nelle specifiche CSS2 (qui una traduzione), con i CSS 3 acquistano nuove caratteristiche interessanti per ampliarne l’utilità.

Teoria:

• selettore[att^="val"]: dove l’attributo del selettore inizia con il valore “val”
• selettore[att$="val"]: dove l’attributo del selettore termina con il valore “val”
• selettore[att*="val"]: dove l’attributo del selettore contiene con il valore “val”

Il principale utilizzo dei selettori di attributo è di personalizzare in maniera automatica i link a seconda della loro destinazione. Un link esterno potrà beneficiare di un’icona che richiami l’apertura di una nuova finestra, mentre un link verso un file PFD potrà beneficiare della caratteristica icona di Acrobat.

Pratica:

I selettori, nell’esempio che consideriamo, vanno applicati su classici elementi “<a>”.

<div class="esempio">
<h2>Selettori di attributo</h2>
<a href="mailto:test@test.it">Sono un link di tipo "mailto"</a>
<a href="htto://test.pdf">Punto ad un PDF</a>
<a href="http://delicious.com">Contengo la parola "delicious"</a>
</div>

Andiamo ad associare dunque l’icona tipica dei PDF ad tutti i link che terminano con il valore “.pfd”, la tipica icona della busta ai link che iniziano per “mailto:” e (ad esempio) l’icona di Delicious a tutti i link che contengono la parola “delicious”.

a[href$=".pdf"]{
background: url(img/page_white_acrobat.png) no-repeat center right;
padding: 0 20px 5px 0;
}

a[href^="mailto"]{
background: url(img/email_open.png) no-repeat center right;
padding: 0 20px 5px 0;
}

a[href*="delicious"]{
background: url(img/delicious.jpg) no-repeat center right;
padding: 0 20px 5px 0;
}

Una volta individuato il giusto obiettivo, non si fa altro che posizionare come sfondo dei link corrispondenti la giusta immaine (più una spruzzata di allineamenti e padding per una corretta resa visiva). IE 6 e precedenti, assieme a tutti gli altri brower non in grado di interpretare correttamente le regole, continuerano correttamente a visualizzare il link senza immagini.

2. Selettori adiacenti

I selettori adiacenti permettono di differenziare un selettore particolare solo se questo si trova direttamente adiacente ad un atro da noi indicato.

Teoria:
Indicando come nell’esempio a seguire “h2 + p” andiamo a puntare direttamente ogni elemento “p” che si trovi in diretta successione ad un elemento “h2″. Una delle applicazioni migliori è, come nell’esempio, nel caratterizzare in maniera più forte il primo paragrafo di una pagina, ma gli utilizzi sono moltissimi e limitati solo dalla propria abilità.

Pratica:

<div class="esempio selettori_adiacenti">
<h2>Selettori adiacenti</h2>
<p>Questo &amp;egrave; il primo paragrafo, e come tale &amp;egrave; speciale.</p>
<p>Lorem ipsum dolor sit amet..</p><p>Lorem ipsum dolor sit amet..</p>
</div>

.selettori_adiacenti h2 + p {
font-size: 200%;
border-bottom : 1px dotted #000;
}

Il primo paragrafo ha dimensione doppia e bordo inferiore un singolo pixel nero. Tutti gli altri paragrafi successivi al primo non subiscono modifiche. Viene generata una resa di questo tipo.

3. Bordi arrotondati

L’applicazione di bordi arrotondati all’interno dei layout inizia diversi anni fa, quando ancora si lavorava a tabelle per definire le strutture e si faceva largo uso di immagini di sfondo, celle vuote e simili. Si è negli anni arrivati a soluzioni (ottimali) che abbandonavano le tabelle in favore di (x)HTML, CSS e qualche javascript per realizzare questo semplice effetto. I “Nifty Corners Cube” di Alessandro Fulciniti sono stati (e sono ancora per me) un punto di riferimento.

Teoria:

Con gli adeguati selettori CSS3 è possibile realizzare lo stesso effetto in sole tre righe, senza ricorrere a JS esterni e potendo controllarne con facilità raggio e angolo di applicazione.

I selettori “basilari” sono:

• “border-radius” (la versione standard CSS3)
• “-moz-border-radius” per Mozilla
• “-webkit-border-radius” per Webkit
• “-o-border-radius” per Opera
• “-icab-border-radius” per iCab
• “-khtml-border-radius” per Konqueror

(lista riaggiornata grazie a Undolog)

Con questa sintassi, la proprietà “border-radius” (e relativa variante -webkit) supporta due soli parametri: nell’ordine raggio orizzontale e raggio verticale. Da notare che Firefox non seque queste specifiche e la variante -moz accetta invece i due parametri considerandoli accoppiati come angoli superiore sinistro/inferiore destro e angoli superiore destro/inferiore sinistro.

Naturalmente possono venire indicati i singoli angoli.

Per Mozilla:

• -moz-border-radius-topright (angolo alto a destra)
• -moz-border-radius-bottomright (angolo basso a destra)
• -moz-border-radius-bottomleft (angolo basso a sinistra)
• -moz-border-radius-topleft (angolo alto a sinistra)

Per Webkit:

• -webkit-border-top-right-radius (angolo alto a destra)
• -webkit-border-bottom-right-radius (angolo basso a destra)
• -webkit-border-bottom-left-radius (angolo basso a sinistra)
• -webkit-border-top-left-radius (angolo alto a sinistra)

Pratica:

Definiamo quindi un bordo sui quattro angoli di 20 pixel di raggio.

border-radius : 20px;
-moz-border-radius : 20px; /* Specifico per Mozilla */
-webkit-border-radius : 20px; /* Specifico per Webkit */

Oppure andiamo a definire singolarmente ogni angolo.

.angoli_arrotondati {
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-webkit-border-top-left-radius: 20px;

-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-topleft: 20px;
}

O ancora, lavoriamo sulle coppie di parametri per qualcosa di più esteso.

.angoli_arrotondati {
-webkit-border-radius: 20px 10px;
/* Raggio orizzontale 20 pixel, raggio verticale 10 pixel */

-moz-border-radius: 20px 10px;
/* Angoli superiore sinistro/inferiore destro a 20 pixel e
angoli superiore destro/inferiore sinistro a 10 pixel*/
}

Il che ci permette di lavorare selettivamente sul tipo di browser su cui vogliamo andare a lavorare.

Sperimentate!

Si conclude con queste tre regole il nostro primo articolo sulle tecniche di progressive enhancement che sono applicabili oggi, subito, per migliorare l’esperienza dei nostri utenti. Molte di queste sono rapide da implementare e veloci da “mantenere” in futuro. Possono adattarsi con rapidità ai nostri layout migliorandone il feeling con pochi accorgimenti.

Altri appuntamenti come questo arriveranno nei giorni prossimi. Se siete interessati all’argomento e avete trovato questo articolo interessante prendete in considerazione l’idea di iscrivervi al Feed RSS.

Ci vediamo nei commenti!

Lavorano contro il coder le incompatibilità tra browser, le differenti modalità di resa e i conosciuti vincoli di Internet Explorer. Tanti grattacapi che portano a sacrificare -in nome della stabilità del progetto- una dopo l’altra le caratteristiche non fondamentali, entrando in un progressivo  “livellamento” verso il basso che penalizza soprattutto gli utenti dotati dei più recenti browser.

Un panorama dove l’avanzamento della qualità dei layout e dell’uso delle reali possibilità offerte da standard CSS3 e simili è purtroppo caratterizzato dall’andamento del “browser più lento”, come nel tipico esempio del battaglione in marcia.

Eppure, qualcosa per agevolare la navigazione a chi se lo può permettere, si può realmente fare. E lo si può fare senza compromettere alcunché verso browser più vecchi e in maniera modulare.

Mantenere la propria sanità mentale e realizzare un progetto in grado di adattarsi al meglio sul mezzo in cui viene presentato ?

Si. La risposta è il Progressive Enhancement. (Hurrà! ).

Di progressive enhancement (e del suo diretto opposto, la graceful degradation) si parla oramai da discreto tempo e la realtà è che questi due termini non nascondono nulla di trascendentale.

• Progressive Enhancement: Il codice viene scritto inizialmente nella sua forma più essenziale e compatibile, aggiungendo arricchimenti progressivi (enhancements) che vengono riconosciuti ed interpretati di volta in volta solo dai browser più recenti.
• Graceful Degradation: L’esatto opposto, sino ad ora praticamente una prassi in ambito lavorativo. Prima si completa il progetto alla sua massima espressione e solo dopo lo si testa scendendo di browser in browser, in modo da valutarne una degradazione accettabile anche su device più datati.

Miglioramento progressivo e degradazione ottimale rappresentano quindi due facce della stessa medaglia, due modi di gestire il proprio progetto (il primo sin dalle fasi iniziali di sviluppo) e se ben controllate permettono di fare vincere:

• gli sviluppatori, che contengono i tempi scrivendo del codice oculato e assicurano una compatibilità modulare puntata sempre verso la resa migliore
• gli utenti, che in maniera trasparente (ergo senza muovere un dito) beneficiano della migliore soluzione disponibile per fruire dei contenuti proposti

Vorrei iniziare a parlare nei prossimi post di alcune tecniche di progressive enhancement affidabili che potete mettere in pratica sin da ora per avvalervi di tutto ciò che è un miglioramento nella user experience nei browser più moderni.

Sia che siate blogger senza esperienza nel coding avanzato dei vostri temi o che siate pane e (x)HTML a pieno ritmo, potreste scoprire come ho fatto io che con i giusti metodi si ottengono risultati notevoli per tutti.

Che ne dite ?

Un paio di letture correlate

Qualcos’altro da leggere riguardo al Progressive Enhancement e la Graceful Degradation su questi altri ottimi articoli italiani.

• Graceful degradation e progressive enhancement ottimo articolo datato ma sempre valido che evidenzia pregi e difetti dei due diversi approcci, con qualche esempio sul campo in grado di rendere bene l’idea.
• E se esistesse un solo browser ? Parlando di standard, questa settimana sul blog di HTML.it.
  Un punto di vista alternativo dal blog di HTML.it.
• Accessibilità e Usabilità: unobtrusive Javascript. Ottimo articolo di undolog.com che parlando di javascript non intrusivo affronta entrambi i temi con uno sguardo generale
• Neal Grosskopf ci parla di Hack CSS per i vari browser

Articoli della serie

Sempre su FrancescoGavello.it, gli altri post di questa serie.

• Progressive Enhancement (1): Selettori di attributo, selettori adiacenti e bordi arrotondati
• Progressive Enhancement (2): Pseudo elementi, ombre e elementi NOT
• Progressive Enhancement (3): colonne, effetti su testo e background multipli

foto: 713 Avenue

Ask the CSS Guy ha realizzato una miniguida su come identificare i link tramite CSS risultando compatibile con IE, Firefox e Safari che spiega come realizzare il tutto in semplicità.

Buona visione!

Esiste tuttavia un vero e proprio “mondo” di ottimizzazioni che possono ridurre notevolmente il peso dei nostri CSS senza per questo renderli ingestibili o difficili da comprendere a posteriori.

Dustindiaz.com ci fornisce una completissima miniguida su come ottimizzare i CSS (cioè con le proprietà scritte una di seguito all’altra) analizzando il comportamento migliore per ognuna delle principali regole. Una interessante lettura se come me avete necessità di rendere sempre più leggero il vostro lavoro.