Sviluppo Web
Fai in modo che il tuo layout sia cross-browser, ovvero visivamente identico in tutti i differenti browser
Saper realizzare un layout accattivante non basta per competere nel mondo del Web Design moderno: devi fare in modo che il tuo layout sia cross-browser, ovvero visivamente identico in tutti i differenti browser che il mercato ti mette a disposizione. Solo a questo punto il tuo compito è realmente completo.
Se anche tu, come me, ami l'universo del Web Development, ti sarai accorto che questo è tanto affascinante quanto ricco di insidie, che si rivelano in maniera direttamente proporzionale alle tue capacità ed alla tua esperienza.
Lungo la linea del percorso evolutivo infatti, una delle scoperte più eclatanti che compiono i programmatori Web, che di fatto li evolve dallo status di principianti, è realizzare che il codice che sviluppano non è interpretato in maniera equa sui differenti browser che propone il mercato.
Ti è mai capitato di produrre un layout, che sembra funzionare alla perfezione su Chrome, per poi scoprire che su Safari o su Edge la resa grafica risulta differente o errata?
Se la risposta è affermativa, non ti preoccupare. In questo articolo analizzeremo le tecniche segrete utilizzate dai migliori Web Designer utili ad omogeneizzare le proprie creazioni HTML e renderle perfette in ogni condizione di utilizzo.
Possiamo distillare l'anima del cross-browsing in due regole fondamentali, necessarie alla produzione di un lavoro di qualità professionale.
1. Utilizzare un CSS di reset
La pratica di "reset" del CSS è il primo, fondamentale step utile a produrre un layout cross-browser. Possiamo definirla come l'ingrediente segreto senza il quale la ricetta della resa equa non sarebbe di fatto possibile. Ogni client Web, infatti, utilizza un proprio motore che interpreta i codici HTML e CSS e produce la corrispondente resa grafica in maniera personalizzata.
Ad esempio, Internet Explorer gestisce le dimensioni dei margini e dei padding con valori differenti rispetto a Chrome, cosi come Firefox implementa un box model (le dimensioni e le caratteristiche strutturali degli elementi) differente da Opera e Safari.
Per comprendere meglio questo concetto, prova ad immaginarti i browser Web come se fossero un gruppo di persone, in cui ognuno parla una lingua differente. Se nella tua esposizione ti esprimessi in una sola lingua, un browser potrebbe capirti correttamente, ma gli altri faticherebbero a stare al passo con i tuoi discorsi. Al posto di imparare a memoria tutti i linguaggi dei componenti del gruppo, sarebbe più facile cancellare i loro collegamenti sinaptici e reimpostarli in maniera tale da comprendere solo la "tua" lingua. Sebbene questo scenario non sia (fortunatamente) applicabile con le persone, risulta invece perfettamente adatto nell'ambito dei browser Web.
Il reset (letteralmente "reimpostazione") del CSS agisce infatti su tre importanti fronti:
- desensibilizza il browser dalle impostazioni di default
- omogenizza la situazione di partenza
- fornisce una solida base per tutti i controlli avanzati
Non occorre sapere precisamente in che modo un browser gestisce i margini, le dimensioni del testo, le interlinee o qualsivoglia proprietà CSS, per realizzare un layout dalla resa cross-browser. Grazie al reset, le regole le andiamo a definire noi.
Nella reimpostazione del CSS dobbiamo tenere conto di tutte le proprietà, da quella più famosa a quella meno conosciuta, e di tutti gli elementi HTML che possono comparire in una pagina, senza trascurane nessuno.
Lo sappiamo entrambi, la teoria è sempre molto più facile della pratica, ed è molto più facile spiegare il reset che applicarlo nel concreto. Tuttavia ricorda: una delle qualità fondamentali di un Web Designer esperto è la sua capacità di scrivere meno codice possibile e di produrre gerarchie di contenuti modulari e riutilizzabili in una moltitudine di contesti. Per questo motivo, è sconsigliato faticare per crearsi il proprio foglio di reset, quando si ha la possibilità di utilizzarne uno di qualità professionale.
Senza scrivere una linea di codice di nostro pugno infatti, possiamo omogeneizzare la resa HTML in due modalità di altissima qualità: tramite un framework CSS, come Bootstrap, w3.css, Bulma, Foundation e molti altri, oppure utilizzando un semplice foglio di stile CSS dedicato. Anche in questo caso possiamo scegliere tra più opzioni, come ad esempio il famoso "reset.css" di Eric Meyer.
In entrambi i casi, basterà aggiungere la soluzione prescelta tramite l'apposito tag "link" e le nostre strutture HTML avranno un'interpretazione comune su tutti i browser disponibili nell'universo Web.
Ad esempio, nel caso in cui abbiamo scelto di utilizzare il foglio di Meyer, scriveremo:
<link rel="stylesheet" type="text/css" href=" https://meyerweb.com/eric/tools/css/reset/reset.css">
Facile anche la pratica, vero?
2. Non utilizzare feature troppo "moderne"
Le capacità fornite dalle nuove specifiche CSS sono davvero affascinanti: grazie a loro possiamo realizzare layout di rara bellezza, ricchi di interattività e caratteristiche decisamente user-friendly.
Tuttavia, in ottica di cross-browsing è bene tenere a bada l'entusiasmo quando si tratta di utilizzare controlli troppo moderni. Ci sono tre motivazioni fondamentali per cui devi utilizzare il contagocce quando hai intenzione di addentrarti nell'avanguardia del Web Design.
Primo: non tutti i browser implementano in maniera completa tutte le proprietà ed i valori delle specifiche HTML5 e CSS3. Ne consegue che un layout può essere interpretato correttamente da un browser che gestisce in modo adeguato le caratteristiche che stai utilizzando, ma non da un browser che le implementa in maniera parziale, o che non le implementa affatto. Realizzare una struttura che si basa principalmente su controlli troppo moderni è un errore che produce un alto grado di instabilità nel design di un sito Web.
Un esempio molto convincente è rappresentato dalla tecnologia "Flexbox", un recente modello di interpretazione e resa grafica che permette di realizzare layout fluidi e responsive, ovvero che si adattano dinamicamente alle dimensioni del dispositivo in uso. Realizzare layout tramite Flexbox è davvero un piacere, sia perché grazie a questo particolare strumento si possono ottenere risultati di altissimo livello, sia perché si ottiene un notevole risparmio di codice rispetto a modelli di strutturazione più antiquati. Tuttavia, Flexbox non è supportato in maniera completa da tutte le versioni dei maggiori browser in circolazione, specialmente da quelle di casa Microsoft: per ottenere una buona compatibilità, dobbiamo infatti utilizzare le versioni di Internet Explorer successive alla 10!
Secondo: il fatto che tu sia una persona all'avanguardia, non significa che anche i tuoi utenti lo siano. Quando realizzi un layout, devi focalizzarti soprattutto sull'esperienza di navigazione dei tuoi visitatori, non sulla tua. È possibile che molti di loro utilizzino versioni di dispositivi mobili e desktop anche molto antiquate, con conseguenti versioni datate di browser che non supportano assolutamente le ultime specifiche w3c. Credere che la totalità del proprio pubblico disponga di tecnologie cutting-edge e dare scarsa importanza alle versioni più attempate dei browser è il modo migliore per allontanare una grande fetta di utenti, che nella maggior parte dei casi sono di fatto clienti.
Nel corso dell'esplorazione di un sito Web, niente è più irritante di un layout distorto che non permette di vivere un'esperienza di navigazione pulita e priva di ostacoli.
Terzo: hai già a disposizione tutto il necessario per ottenere risultati eccellenti in tema di produzione di layout, senza l'occorrenza di implementare tecnologie troppo poco mature.
Per ovviare a problematiche di interpretazione cross-browser, è meglio affidarsi a modelli di sviluppo solidi, stabili e totalmente supportati da almeno tre versioni precedenti a quella corrente di tutti i maggiori client Web.
Non ti sto dicendo di tornare al medioevo e produrre layout basati sulle tabelle, bensì di utilizzare i posizionamenti fluidi ottenibili tramite le proprietà CSS "float" e "position", che sono correttamente supportate da qualsiasi browser, moderno o datato che sia.
In un futuro (più o meno) prossimo arriverà il momento in cui le specifiche Flexbox o altri nuovi modelli di design che stanno emergendo in questi anni saranno maggiormente compatibili con i motori di interpretazione, e solo allora produrre layout basati su queste tecnologie risulterà una scelta saggia.
