Come pianificare l'assenza di JavaScript
Anche se i metodi utilizzati per raccogliere le statistiche sul traffico dei siti Web mettono in discussione la validità delle statistiche stesse, il fatto è che alcuni dei visitatori del tuo sito Web avranno JavaScript disabilitato .
Puoi dividere le tue sorgenti di traffico in quattro ampie categorie:
Motori di ricerca, visitatori mobili, visitatori che utilizzano screen reader e visitatori che hanno disattivato JavaScript .
Quando si pianifica l'architettura e il design delle informazioni, è necessario capire come gestire questi gruppi speciali.
Ho raccolto alcuni recenti scenari del mondo reale per trovare chiarezza sulla questione.
Quando si desidera nascondere il contenuto lungo dietro uno scroller animato o ruotare attraverso prodotti o testimonianze in sequenza, o presentare contenuti classificati a livello di pagina categorizzati, è possibile utilizzare fisarmoniche, caroselli o qualsiasi altra soluzione immaginativa.
Se continui con le best practice JavaScript o usi una miriade di librerie JavaScript, probabilmente conosci già JavaScript non invadente, che è la tecnica per presentare l'interattività JavaScript solo quando JavaScript è abilitato.
Questo principio dovrebbe essere esteso anche alla presentazione: crea le tue caratteristiche dinamiche e imposta i valori di visualizzazione e visibilità solo dopo che il documento è pronto e solo se il visitatore ha abilitato JavaScript, piuttosto che impostare le proprietà nel codice HTML o definire loro lato server.
Come molti screen reader, il crawler di Google tende a ignorare il contenuto racchiuso in un elemento impostato su display: none , mentre esegue la scansione di qualsiasi contenuto impostato su display: visible .
Quindi il tuo compito come designer è di pianificare lo spazio e il layout attorno alle tue caratteristiche dinamiche , e anche di preparare le istanze quando "dinamico" non è un'opzione.
Se il contenuto di una delle tue pagine sarà sempre visibile nei browser di determinati utenti, come dovrebbe essere visualizzato? I contenuti nascosti dovrebbero rimanere nascosti anche se JavaScript è disabilitato? Tutti i contenuti dovrebbero essere disponibili per screen reader e motori di ricerca? Se un pezzo di contenuto diventa visibile solo dopo una chiamata AJAX, come riempire adeguatamente lo spazio quando JavaScript è disabilitato?
La fisarmonica
Una fisarmonica è una struttura che di solito consiste in un modello di coppie di intestazione e contenuto. I blocchi di contenuti si espandono uno alla volta, in risposta a un evento attivato nell'intestazione.
Fisarmonica di Hulu
Recentemente ho aiutato un cliente a superare il problema di avere pagine molto lunghe. Questo cliente disponeva di un catalogo online di corsi di formazione e stipulava che tutte le informazioni per un determinato programma devono essere disponibili in anticipo: nessuna pagina saltata o pop-up per le descrizioni dei corsi di base o le definizioni dei programmi.
Tutte le informazioni del programma dovevano essere disponibili per il visitatore sulla stessa pagina, senza dover navigare avanti e indietro nel catalogo del corso.
La soluzione giusta qui era una fisarmonica , descrizioni dei corsi che crollavano sotto intestazioni per ogni area di studio (matematica o storia, per esempio). Una cattiva implementazione sarebbe stata quella di impostare la visibilità di quelle descrizioni dei corsi compressi prima che l'HTML venisse visualizzato sullo schermo.
Se il contenuto era nascosto in pre-rendering, quindi alcuni visitatori e motori di ricerca perderebbero gran parte del contenuto importante.
Usando jQuery, ho scelto come target il contenuto per il collasso e ho impostato l'attivazione della fisarmonica dopo che la pagina era stata caricata e il documento era pronto. Per questo cliente, rendere il contenuto disponibile a tutti i pubblici era estremamente importante. Alcuni dei contenuti potevano essere eseguiti molto a lungo e pertanto era necessario un progetto che potesse contenere un'espansione verticale estrema.
Il carosello
Vedrai i caroselli abbastanza spesso nei portafogli e nei riflettori dei prodotti.
Tipicamente nei caroselli, i contenuti scorreranno in risposta a un intervallo di timeout oa qualche interazione dell'utente (consultare "Cronologia recente" su Amazon). Mi piacciono i caroselli per la loro flessibilità e perché ti permettono di fissare almeno una dimensione del contenitore.
Il carosello di Amazon
Un altro cliente ha recentemente chiesto informazioni sull'area "Notizie e highlight" della loro home page. Come molti altri blocchi di contenuti di questo tipo, questo mostrava le otto aggiunte più recenti alle loro pagine di notizie (sebbene quel numero potesse variare).
I teaser in questo blocco contenevano un riassunto dell'articolo e un'immagine. Le immagini potrebbero essere grandi e il contenuto lungo, quindi una giostra che ruotava tra i teaser era la soluzione giusta qui.
Usando ancora jQuery, ho preso di mira il wrapper DIV per il carosello e, dopo che la pagina è stata caricata e il documento era pronto, ho applicato il carosello e impostato le mie transizioni. Con JavaScript abilitato, la home page resa piacevolmente: ogni 15 secondi, il carosello passa al prossimo teaser. Per impostazione predefinita, tutti i teaser erano visibili, ma ho nascosto tutto tranne il primo quando ho creato il carosello.
Per questo client, abbiamo scelto nuovamente di visualizzare tutti i contenuti nascosti se JavaScript è stato disabilitato . In tal caso, la pagina iniziale si espanderebbe verticalmente per contenere il contenuto aggiuntivo.
Avevamo alternative, però. Considerando le quattro categorie di utenti che abbiamo identificato all'inizio di questo articolo, la priorità di questo contenuto era l'accessibilità, con il posizionamento del motore di ricerca al secondo posto. Avremmo potuto soddisfare questi due gruppi lasciando visibili tutti i teaser ma fissando le dimensioni del contenitore DIV e l'impostazione overflow a scroll , auto o hidden .
Qualsiasi di queste opzioni avrebbe mantenuto le dimensioni del layout. E anche i lettori di schermo e i motori di ricerca avrebbero ripreso il contenuto, perché il contenuto non sarebbe stato nascosto con il display o visibility proprietà.
The Content Swapper
Questa tecnica è simile alla giostra in quanto il contenuto di un blocco viene ruotato utilizzando alcune animazioni.
La differenza principale è che l'animazione di interpolazione non viene utilizzata; invece, un pezzo di contenuto svanisce mentre un altro si dissolve (o si può avere una transizione difficile senza dissolvenza). Lo swapper è abbastanza simile alla giostra che le soluzioni alternative no-JavaScript sopra menzionate sono vere.
Ancora un altro cliente venne da me con il compito di mostrare un numero indefinito di testimonianze sul loro sito web. Abbiamo optato per uno swapper di contenuti in questo caso, perché non avevamo bisogno di paginare in genere nei caroselli (l'utente non avrebbe bisogno di scorrere indietro una testimonianza o saltare alla fine).
Per i visitatori che avevano disabilitato JavaScript, abbiamo rispettato il design. Dopo un'attenta considerazione, il cliente ha giustamente stabilito che le testimonianze avrebbero avuto un effetto così piccolo sui visitatori che l'impostazione display a none non sarebbe dannoso
La decisione mi ha offerto un po 'più di libertà nella pianificazione della colonna di destra del sito web, dove dovevano apparire le testimonianze.
Il Sorter
Chiunque abbia regolato la propria coda Hulu ha visto il selezionatore drag-and-drop. Questo bit di JavaScript consente agli utenti di trascinare e rilasciare righe (righe della tabella, voci di elenco, DIV indipendenti, ecc.) In un ordine diverso.
Il selezionatore di Netflix
Prendi come esempio un mio ultimo cliente, che aveva una serie di procedure standard che tutti i dipendenti dovevano seguire.
Ogni procedura consisteva in un numero qualsiasi di compiti. Un amministratore può aggiungere o rimuovere attività e potrebbe modificare l'ordine delle attività.
Questo era un esempio da manuale di ordinamento , un'implementazione del riordino drag-and-drop .
Grazie a Scriptaculous e Prototype.js, creare l'elenco ordinabile è stato facile. Quando il codice è stato scritto e la pagina è stata pubblicata, abbiamo avuto un rendering perfettamente funzionante del design comp. Poi ci siamo resi conto che senza JavaScript avevamo solo l'equivalente HTML di un peso di carta. Non c'era il drag-and-drop o il riordino al volo.
Alcune riflessioni e modifiche del design ci hanno dato lo stesso set di righe che avevamo prima, ma con l'aggiunta di caselle di input del testo che potevano contenere l'inserimento dell'ordine delle righe (nota, però, che senza JavaScript, siamo stati costretti ad aggiungere alcuni significativa validazione lato server per queste caselle di input). Abbiamo perso il riordino al volo, ma almeno abbiamo riacquistato la funzionalità di ordinamento.
Poi tornammo ai browser abilitati per JavaScript e nascosi le caselle di testo sopra menzionate; dopotutto, avevamo la funzionalità di trascinamento della selezione per questo gruppo. A questo punto, abbiamo avuto un rendering perfettamente funzionante del comp del design che era anche utile per i visitatori che avevano JavaScript disabilitato. La prossima volta, saprò di pianificare questa condizione.
Conclusione
L'evoluzione del web continuerà e i visitatori dei nostri siti web dovrebbero essere in grado di continuare a godere di un tocco dinamico.
Continua a pianificare le risposte interattive con le interpolazioni animate: dissolvenza, dissolvenza, collasso, espansione, scorrimento delle cose. Considerando tutta questa animazione, pensa a come apparirà il tuo sito ai visitatori che non possono vedere l'animazione a causa delle limitazioni JavaScript. I tuoi clienti saranno più felici e sarai un designer migliore per questo.
http://www.thecounter.com/stats/2008/January/javas.php
http://www.w3schools.com/browsers/browsers_stats.asp
Jason Corns è uno sviluppatore web freelance e sviluppatore GUI a tempo pieno per Systems Alliance, Inc., specializzato in usabilità per tutti i tipi di pubblico.
Come pianifichi l'assenza di JavaScript? Per favore condividi i tuoi consigli con noi ...