Share
C'era una volta nel web design, tutto quello che dovevi fare per rendere i tuoi siti compatibili con cross era di 960px e risolvere i problemi che si presentavano in IE6. Ah, i vecchi tempi ...
Oggi Internet è composto da così tante parti in movimento è quasi certo che almeno alcuni dei tuoi utenti finali stanno avendo esperienze non perfette, a causa di problemi che probabilmente non avevi idea che stessero accadendo.
Abbiamo appena aperto le porte a un nuovissimo corso intitolato Bombproof Web Design che ti aiuterà a scacciare eventuali gremlini furtivi che potrebbero nascondersi negli angoli di Internet, facendo esplodere i tuoi siti quando non stai guardando.
In questo articolo, saremo in esecuzione 7 modi in cui potresti non sapere che i tuoi siti stanno esplodendo, ognuno dei quali viene abilmente gestito nel corso di Bombproof Web Design.
Se riesci a esaminare tutti e sette questi punti e dire che i tuoi siti sono solidi su tutti i fronti, rimarrò molto impressionato e otterrai una grande stella d'oro!
Il primo modo in cui potresti non sapere che i tuoi siti stanno esplodendo è:
Potresti non rendertene conto, ma i tuoi caratteri web possono effettivamente sembrare notevolmente diversi da un sistema operativo all'altro, anche nello stesso browser. Ad esempio, i seguenti tre screenshot sono tutti dello stesso sito, con le stesse identiche impostazioni e il codice del font.
Il primo è preso in Chrome su un Mac:
Ok, sembra che tutto vada bene. Controlliamo di nuovo lo stesso sito su Chrome, questa volta tramite Ubuntu:
Hmm, questo è uno sguardo piuttosto sgradevole nei titoli lì. Si riesce a malapena a distinguere la lettera "s" e le lettere "A" e "e" sono quasi chiuse. Che ne dici di Chrome su Windows?
Gah, guarda quei manufatti! Ogni curva di lettere ha un piccolo cartellino appeso e nel complesso è pixelata e brutta.
Ci sono diversi modi in cui puoi essere catturato con caratteri resi in modo inconsistente o addirittura completamente assenti a meno che tu non abbia un piano per valutare e distribuire le tue scelte tipografiche.
Anche il peggior rendering dei font web renderà i tuoi siti ancora più belli rispetto ai browser che non rendono affatto font web, come Opera Mini. E i caratteri web non sono l'unica cosa che Opera Mini non esegue. Questo è lo stesso sito che vedi sopra, questa volta in Opera Mini:
Come puoi vedere, praticamente tutto è fallito, a parte i colori e il testo di base. Opera Mini è un browser mobile progettato per gestire i siti in modo molto leggero, consentendone l'utilizzo su dispositivi con specifiche inferiori e per coloro che cercano di conservare la larghezza di banda o le risorse di sistema. Sfortunatamente, parte del modo in cui lo fa non supporta un'intera gamma di proprietà CSS, in particolare CSS3.
Opera Mini ha una base di utenti piccola ma significativa. Per dirla in prospettiva, le statistiche che ho visto hanno mostrato che Opera Mini utilizzava circa un terzo degli utenti di IE totali e superiore rispetto a Android Browser e Opera Desktop. Probabilmente è il browser più difficile da affrontare oggi, ma in un modo o nell'altro vorrete avere un qualche tipo di piano per questo.
Su Firefox, quando vai Preferenze> Contenuto vedrai questo:
Su Chrome, quando vai Impostazioni> Mostra impostazioni avanzate> Contenuto web vedrai questo:
Entrambi questi pannelli di impostazioni sono progettati per consentire agli utenti di regolare le dimensioni del carattere del browser in base alle proprie esigenze. Le persone con disabilità visive usano comunemente queste impostazioni per aiutarle a leggere più facilmente. Sono anche a portata di mano per le persone che utilizzano la loro TV in salotto per la navigazione, qualcosa che sta diventando sempre più popolare.
È una pratica molto comune impostare una dimensione del carattere di base per un sito come 14px o 16px contro il html e corpo elementi. Tuttavia, questo impedisce che le preferenze sulla dimensione dei caratteri dell'utente abbiano effetto. Se un utente è ipovedente, l'impossibilità di ingrandire il testo rende la vita molto più difficile, o se la dimensione del carattere è stata modificata per adattarsi a una particolare dimensione del display, può rendere il testo molto difficile da leggere.
Inoltre, se un utente ha selezionato una dimensione di carattere non predefinita, è importante che l'intero layout sia in grado di ridimensionarlo. Non vuoi finire con un layout tutto fuori gioco perché si adatta solo a una dimensione del testo.
Ad esempio, ecco di nuovo il nostro stesso sito demo, ma costruito senza la possibilità di ridimensionare e la dimensione del font di base impostata su 22px:
Tuttavia, con il ridimensionamento incorporato nel codice, lo stesso sito con una dimensione del font impostata dall'utente di 22px si presenta così:
Potresti non essere in grado di vedere cosa succede nello screenshot qui sopra, poiché l'immagine è stata ridotta per rientrare in questa colonna. A prima vista potrebbe sembrare proprio come il primo screenshot dell'articolo, ma solo perché è stato ridimensionato proporzionalmente con le impostazioni della dimensione del carattere dell'utente.
Per darti un'idea migliore, ecco una sezione del sito alle sue dimensioni reali:
Costruire i tuoi siti in questo modo significa offrire all'utente la stessa esperienza di visualizzazione indipendentemente dalle preferenze impostate nel browser.
Quasi tutti i web designer hanno già effettuato la transizione dai layout solo desktop ad includere il supporto per le comuni risoluzioni tablet e telefono, ma questa è ancora solo una parte dell'immagine.
L'elenco delle risoluzioni possibili oggi è più lungo del braccio, e quindi dobbiamo anche tenere in considerazione la densità dei pixel, la porzione di schermo occupata dal viewport e la dimensione fisica effettiva del display.
In questo momento i tuoi siti potrebbero essere visitati dagli utenti su schermi minuscoli e giganteschi, ed è quasi impossibile prevedere quale combinazione di risoluzione, densità di pixel, dimensioni del viewport e dimensioni fisiche dei tuoi visitatori. Uno smartphone da 5 "può avere la stessa risoluzione di un TV da 65", tuttavia la navigazione di un sito su ciascun dispositivo è molto diversa dal punto di vista dell'utente.
Detto questo, in realtà non è affatto difficile creare layout che siano completamente flessibili per tutti i display. Con il giusto insieme di principi alla base del tuo codice di layout, tutti i tuoi siti saranno ugualmente a loro agio su qualsiasi display, dai televisori all'estremità dello spettro:
La mia TV da 40 "mostra il nostro sito demo ad una dimensione che è totalmente comoda per leggere dal divano.Per piccoli piccoli orologi intelligenti all'altra estremità dello spettro, ad esempio tramite l'app WebBrowser per Sony SmartWatch 2:
Sito mostrato con le dimensioni effettive del display per l'app WebBrowser su Sony Smartwatch 2È facile presumere che tutti gli utenti abbiano JavaScript funzionale da cui possiamo assolutamente dipendere. JavaScript tende a svolgere un ruolo in quasi tutti i siti e, in alcuni casi, guida completamente il contenuto attraverso elementi come i componenti web e il rendering lato client.
Ma cosa succede se JavaScript non è presente come potremmo pensare?
Esistono in realtà molte ragioni per cui un visitatore potrebbe non vedere un sito dipendente da JavaScript come si desidera che appaia.
La linea di fondo è che anche se la percentuale di utenti che non hanno un JavaScript pienamente funzionale è piccola, è ancora presente e diventa sempre più significativa, più i tuoi siti di successo e ben trafficati sono.
Se non hai un piano, invece del tuo sito altrimenti sfarzoso, veloce e veloce, lato client, i tuoi visitatori potrebbero vedere solo un mucchio di HTML non restituito:
O invece dei tuoi fantastici componenti web, i tuoi visitatori potrebbero vedere un layout compresso:
Per molto tempo l'interazione con i siti Web era quasi interamente dipendente da un mouse, tuttavia non è più possibile presumere che un utente abbia un mouse o sia in grado di utilizzare comodamente un mouse. Spesso le persone non sono alla scrivania quando visitano i tuoi siti, ma guardano attraverso un dispositivo touch o dal divano.
Ciò significa che se il tuo sito richiede interazioni con il mouse per andare in giro, potresti scoprire che alcuni dei tuoi visitatori non potranno mai accedere ad alcune parti del tuo sito.
Idealmente i siti dovrebbero essere navigabili non solo senza un mouse, ma anche in modo specifico per la tastiera. Se il tuo sito può essere navigato tramite una tastiera, molto probabilmente può essere navigato tramite altri dispositivi di input come telecomandi TV o controller della console.
Inoltre, le persone con difficoltà motorie, come ad esempio chi soffre di artrite o ictus, possono preferire navigare attraverso un dispositivo di assistenza come una tastiera con tasti grandi.
Tastiere assistive. Immagine per gentile concessione di https://www.flickr.com/photos/oregondot/6235420475E a proposito dei tuoi siti che lavorano con dispositivi di assistenza ...
Non fraintendermi, so che probabilmente stai già facendo la cosa giusta e incorporando i ruoli WAI-ARIA nei tuoi siti e cercando di renderli il più accessibili possibile.
Ma quello che ho trovato nella mia esperienza personale è che potresti pensare di aver reso i tuoi siti accessibili, finché non ci provi accesso loro allo stesso modo di una persona con disabilità.
In pochi attimi di tentativi di navigare sul web tramite screen reader e tastiera per la prima volta mi sono sentito piuttosto male per alcuni dei siti che avevo costruito in passato, siti che avrei onestamente pensato di creare secondo le linee guida per l'accessibilità.
Uno dei problemi principali che ho riscontrato mentre tentavo di leggere lo schermo era la mancanza di ruoli di riferimento ottimizzati WAI-ARIA, che aiutano gli utenti a saltare ai "punti di riferimento" principali dei siti.
Quello che ho scoperto è che molti siti ben intenzionati hanno incorporato i punti di riferimento di WAI-ARIA, ma in un modo che sfortunatamente non ha fornito alcuna informazione all'utente che li avrebbe aiutati a orientarsi nel sito:
Cinque aree di navigazione ma nessuna area di contenuto principale a cui gli utenti di screen reader possono accedere.Alcuni altri siti ben noti non hanno utilizzato alcun codice di accessibilità:
Includere i ruoli di riferimento WAI-ARIA nel tuo codice è in realtà molto semplice e aggiunge solo pochi minuti a un progetto, è solo questione di sapere come aggiungerli nel modo giusto.
Sareste sorpresi di quanto sia facile avere una solida base di accessibilità con alcune semplici tecniche, come l'ottimizzazione della struttura delle intestazioni, il controllo del contrasto del colore, oltre ad alcuni dei punti di cui abbiamo parlato sopra come consentire il ridimensionamento delle dimensioni dei caratteri e supportare diversi dispositivi di input.
Se hai spuntato tutti gli elementi della lista in alto e ti sei detto: "Già inchiodandolo" allora ben fatto, sei incredibile! Come ho detto, hai una grande stella d'oro per essere epico.
Tuttavia, se ti ritrovavi a dire "Oh non me ne rendevo conto" o "Non sono sicuro se sono coperto su quello", allora è del tutto possibile che i tuoi siti potrebbero esplodere su Internet mentre parliamo - e con " esplodendo "Non intendo nel buon modo!
Se ci fosse più di uno di questi punti di cui non eri a conoscenza, non preoccuparti. In realtà è molto più facile "bombardare" i tuoi siti di quanto tu possa pensare. È solo una questione di essere pienamente consapevoli delle informazioni necessarie e lanciare alcune semplici soluzioni.
Questo è ciò che il nostro nuovo corso "Bombproof Web Design" ti fornirà. Attraverso quindici video lezioni facili da seguire ti guiderò personalmente attraverso esattamente ciò a cui fare attenzione, e i passi da seguire per "Bombardare" tutti i tuoi siti da qui in poi.
I primi due video sono completamente gratuiti, quindi vai avanti e fai subito un salto nel "Bombproof Web Design":
Guarda 2 video gratuiti da Bombproof Web Design
Ci vediamo lì!
Accentsconagua