Siti web e browser: la graceful degradation
La seguente immagine rappresenta quattro link di un fantomatico e-commerce che permettono di aggiungere un qualche prodotto al proprio carrello. Il codice scritto per creare il link è lo stesso in tutti e quattro i casi, ma i risultati sono diversi a seconda dei browser con cui vengono visualizzati.
Probabilmente non c’è bisogno di essere un designer per rendersi conto che il migliore dei quattro link è il primo: i bordi arrotondati (anche se di poco) rendono il link meno pesante alla vista, mentre il gradiente dello sfondo e le ombreggiature aggiungono un senso di tridimensionalità. Inoltre, i caratteri del testo “Aggiungi al carrello” del primo link sono decisamente più leggibili. Si tratta di piccoli dettagli che sono in grado di aggiungere valore all’esperienza dell’utente.
Non è una questione di estetica. O almeno, non solo. Avere un link che dia immediamente l’idea di “pulsante” aiuta a far capire subito che quell’elemento è cliccabile, e soprattutto può contribuire ad invogliare l’utente al clic. Ovviamente non tutti i link hanno bisogno dello stesso “trattamento” poiché non tutti i link svolgono le stesse funzioni. Nel caso del nostro fantomatico e-commerce, però, l’azione che consente di aggiungere un prodotto al carrello è una delle azioni fondamentali, il primo passo verso l’acquisto. Il vantaggio di avere un link ben fatto è funzionale, piuttosto che estetico.
Perché il link appare in modo diverso nei vari browser?
Esistono alcune proprietà per realizzare una pagina web che non sono supportate dai browser più datati. Le versioni 6, 7 e 8 di Internet Explorer non supportano l’arrotondamento dei bordi, i gradienti e le ombreggiature: ecco perché l’ultimo link è diverso rispetto al primo.
La graceful degradation è un tipo di approccio al web design per cui il web designer sceglie di non tenere conto delle differenze tra i vari browser a patto che non compromettano la funzionalità del sito. Il fatto che su Internet Explorer il colore di sfondo sia piatto o non abbia ombreggiature non toglie il fatto che il link sia sufficientemente in evidenza. Se il colore di sfondo fosse verde o se il link fosse largo la metà, ovviamente sarebbe compito del web designer intervenire per sistemarlo.
Non è necessario che un sito web sia identico in tutti i browser. Bisogna considerare la questione in questa prospettiva: non si tratta di togliere qualcosa agli utenti che hanno browser più vecchi, ma piuttosto di aggiungere qualcosa per gli utenti che hanno browser più moderni.
Ecco come risponde alla domanda “I siti web devono essere uguali in tutti i browser?” il sito http://dowebsitesneedtolookexactlythesameineverybrowser.com
La soluzione per avere un link uguale in tutti i browser ci sarebbe, in realtà: si potrebbe fare un’immagine e sostituirla al link che ora impiega solamente le capacità grafiche del browser. In questo caso però utilizzare un’immagine ha molti più svantaggi:
- C’è bisogno di creare l’immagine, ed eventualmente ricrearla se si decidesse di cambiare il testo;
- Le immagini potrebbero essere disabilitate (mai capitato di dover abilitare le immagini in un’email?).
- Le immagini, avendo un peso decisamente superiore al semplice testo, rallentano i tempi di caricamento delle pagine web. Potrebbe sembrare un problema irrilevante viste le velocità delle attuali connessioni Internet, ma non lo è affatto se si pensa alla navigazione su dispostivi mobili che non è potente come quella sui computer desktop.
Voi che browser usate?
La soluzione vera sarebbe che tutti gli utenti utilizzassero un browser moderno. Se il vostro browser è Internet Explorer, aggiornatelo alla versione 9, la più recente; ma se davvero volete un browser più veloce, affidabile e all’avanguardia, vi consigliamo di scaricare (gratuitamente) Safari, Google Chrome o Firefox.
Articoli correlati
- Quali incentivi e finanziamenti nel 2024?
- Quali prospettive per l’UX?
- I pilastri del Made in Italy: settore Alimentare. Perché è così venduto all’estero?
- Il nuovo viaggio phygital del cliente 2024
- Web reputation del tuo sito web
- Data entry – come realizzare un sito web di successo
- Le tendenze per l’eCommerce 2023 -parte 2
- Landing page per convertire
- Sito web responsive significato
- Phygital experience
concordo. il problema è del browser non del sito web. 🙂
A volte questo è un problema. Occorre sensibilizzare gli utenti ad utilizzare browser aggiornati, e detto tra noi, magari ad abbandonare internet explorer che è quello che da’ sempre piu’ problemi 🙂