Quando crei contenuti per una vasta gamma di utenti e dispositivi, prendi in considerazione sia i contenuti sia il layout e la progettazione grafica.
Come le persone leggono sul web
La guida alla scrittura del governo statunitense riassume ciò che le persone si aspettano dalla scrittura sul web:
Le ricerche dimostrano che le persone non leggono le pagine web, ma le scansionano. In media, le persone leggono solo il 20-28% dei contenuti delle pagine web. La lettura dagli schermi è molto più lenta della lettura dalla carta. Le persone abbandoneranno il tuo sito se le informazioni non sono facilmente accessibili e comprensibili.
Come scrivere per i dispositivi mobili
Concentrati sull'argomento in questione e racconta la storia in anticipo. Per scrivere contenuti che funzionino su una vasta gamma di dispositivi e aree visibili, assicurati di comunicare i punti principali all'inizio: in genere, idealmente nei primi quattro paragrafi, in circa 70 parole.
Chiediti cosa si aspettano le persone dal tuo sito. Stanno cercando di scoprire qualcosa? Se le persone visitano il tuo sito per trovare informazioni, assicurati che tutto il testo sia orientato ad aiutarle a raggiungere il loro obiettivo. Scrivi in forma attiva, offri azioni e soluzioni.
Pubblica solo ciò che vogliono i tuoi visitatori e nient'altro.
Anche le ricerche del governo britannico mostrano che:
In altre parole: usa un linguaggio semplice, parole più brevi e strutture di frasi semplici, anche per un pubblico colto e tecnico. A meno che non ci sia un buon motivo per non farlo, mantieni un tono di voce colloquiale. Una vecchia regola del giornalismo è quella di scrivere come se stessi parlando con un bambino intelligente di 11 anni.
Il prossimo miliardo di utenti
L'approccio di scrittura semplificato è particolarmente importante per i lettori su dispositivi mobili ed è fondamentale quando crei contenuti per smartphone economici con aree visibili piccole che richiedono più scorrimento e potrebbero avere display di qualità inferiore e schermi meno reattivi.
La maggior parte del prossimo miliardo di utenti che si connetterà a internet avrà dispositivi economici. Non vorranno spendere il loro budget di dati per navigare tra contenuti prolissi e potrebbero non leggere nella loro lingua madre. Riduci il testo: usa frasi brevi, punteggiatura minima, paragrafi di cinque righe o meno e titoli su una sola riga. Valuta la possibilità di utilizzare testo adattabile (ad esempio, utilizzando titoli più brevi per aree visibili più piccole), ma fai attenzione agli svantaggi.
Un approccio minimalista al testo renderà anche più facile la localizzazione e l'internazionalizzazione dei contenuti e aumenterà la probabilità che i tuoi contenuti vengano citati sui social media.
Il risultato:
- Semplicità
- Riduci il sovraccarico visivo
- Dritto al punto
Elimina i contenuti non necessari
In termini di dimensioni in byte, le pagine web sono grandi e stanno diventando sempre più grandi.
Le tecniche di progettazione adattabile consentono di pubblicare contenuti diversi per aree visibili più piccole, ma è sempre consigliabile iniziare semplificando testo, immagini e altri contenuti.
Gli utenti web sono spesso orientati all'azione, "si sporgono in avanti" alla ricerca di risposte alla loro domanda attuale, anziché appoggiarsi per leggere un buon libro.
Jackob Nielsen
Chiediti: cosa cercano di ottenere le persone quando visitano il mio sito?
Ogni componente della pagina aiuta gli utenti a raggiungere il loro obiettivo?
Rimuovi gli elementi della pagina ridondanti
Secondo HTTP Archive, i file HTML costituiscono quasi 70.000 byte e più di nove richieste per la pagina web media.
Molti siti popolari utilizzano diverse migliaia di elementi HTML per pagina e diverse migliaia di righe di codice, anche sui dispositivi mobili. Le dimensioni eccessive dei file HTML potrebbero non rallentare il caricamento delle pagine, ma un payload HTML pesante può essere un segno di contenuti eccessivi: file .html più grandi significano più elementi, più contenuti di testo o entrambi.
La riduzione della complessità dell'HTML ridurrà anche il peso della pagina, contribuirà a consentire la localizzazione e l'internazionalizzazione e renderà più facile la pianificazione e il debug della progettazione adattabile. Per informazioni su come scrivere HTML più efficiente, vedi HTML ad alte prestazioni.
Ogni passaggio che fai eseguire a un utente prima che possa trarre valore dalla tua app ti costerà il 20% degli utenti
Gabor Cselle, Twitter
Lo stesso vale per i contenuti: aiuta gli utenti a trovare ciò che vogliono il più rapidamente possibile.
Non limitarti a nascondere i contenuti agli utenti di dispositivi mobili. Punta alla parità dei contenuti, perché indovinare quali funzionalità non mancheranno ai tuoi utenti di dispositivi mobili è destinato a fallire per qualcuno. Se hai le risorse, crea versioni alternative degli stessi contenuti per diverse dimensioni dell'area visibile, anche se solo per gli elementi della pagina ad alta priorità.
Valuta la gestione dei contenuti e il flusso di lavoro: i sistemi legacy generano contenuti legacy?
Semplifica il testo
Con il passaggio del web ai dispositivi mobili, devi cambiare il modo in cui scrivi. Mantieni uno stile semplice, riduci il sovraccarico visivo e vai dritto al punto.
Rimuovi le immagini ridondanti
Le immagini possono essere belle, divertenti e informative, ma occupano anche spazio nella pagina, aumentano il peso della pagina e aumentano il numero di richieste di file. La latenza peggiora con il peggioramento della connettività, il che significa che un eccesso di richieste di file immagine è un problema crescente con il passaggio del web ai dispositivi mobili.
Le immagini consumano anche energia. Dopo lo schermo, la radio è il secondo elemento che consuma più batteria. Più richieste di immagini, più utilizzo della radio, più batterie scariche. Anche solo il rendering delle immagini richiede energia, proporzionale alle dimensioni e al numero. Consulta il report di Stanford Who Killed My Battery?
Se puoi, elimina le immagini.
Ecco alcuni suggerimenti:
- Valuta la possibilità di utilizzare design che evitino del tutto le immagini o le utilizzino con parsimonia. Anche solo il testo può essere bello! Chiediti: "Cosa cercano di ottenere i visitatori del mio sito? Le immagini aiutano in questo processo?"
- In passato, era comune salvare i titoli e altro testo come elementi grafici. Questo approccio non risponde bene alle modifiche delle dimensioni dell'area visibile e aumenta il peso della pagina e la latenza. L'utilizzo del testo come elemento grafico significa anche che il testo non può essere trovato dai motori di ricerca e non è accessibile da screen reader e altre tecnologie assistive. Utilizza il testo "reale" ove possibile: i caratteri web e i CSS possono consentire una tipografia accattivante.
- Utilizza i CSS anziché le immagini per sfumature, ombre, angoli arrotondati e texture di sfondo, funzionalità supportate da tutti i browser moderni. Tieni presente, tuttavia, che i CSS potrebbero essere migliori delle immagini, ma potrebbero comunque comportare una penalità di elaborazione e rendering, soprattutto sui dispositivi mobili.
- Le immagini di sfondo raramente funzionano bene sui dispositivi mobili. Puoi utilizzare le query supporti per evitare le immagini di sfondo su aree visibili piccole.
- Evita le immagini della schermata iniziale.
- Utilizza i CSS per le animazioni dell'interfaccia utente.
- Impara a conoscere i tuoi glifi; utilizza simboli e icone Unicode anziché immagini, con caratteri web, se necessario.
- Valuta la possibilità di utilizzare i caratteri "icona"; si tratta di elementi grafici vettoriali che possono essere scalati all'infinito e un intero set di immagini può essere scaricato in un unico carattere. (Tieni presente queste considerazioni.)
- L'elemento
<canvas>può essere utilizzato per creare immagini in JavaScript da linee, curve, testo e altre immagini. - Le immagini SVG in linea o URI di dati non riducono il peso della pagina, ma possono ridurre la latenza riducendo il numero di richieste di risorse. L'SVG in linea è ampiamente supportato sui browser per dispositivi mobili e desktop e gli strumenti di ottimizzazione possono ridurre significativamente le dimensioni dell'SVG. Allo stesso modo, gli URI di dati sono ben supportati. Entrambi possono essere inseriti in linea nei CSS.
- Valuta la possibilità di utilizzare
<video>anziché GIF animate. L'elemento video è supportato da tutti i browser sui dispositivi mobili (ad eccezione di Opera Mini).
Per ulteriori informazioni, vedi Ottimizzazione delle immagini ed Eliminazione e sostituzione delle immagini.
Progetta contenuti che funzionino bene su diverse dimensioni dell'area visibile
"Crea un prodotto, non reinventarne uno per schermi piccoli. I fantastici prodotti per dispositivi mobili vengono creati, non portati."
Mobile Design and Development, Brian Fling
I grandi progettisti non "ottimizzano per i dispositivi mobili", ma pensano in modo adattabile per creare siti che funzionino su una vasta gamma di dispositivi. La struttura del testo e di altri contenuti della pagina è fondamentale per il successo cross-device.
Molti dei prossimi miliardi di utenti che si connetteranno a internet utilizzano dispositivi economici con aree visibili piccole. Leggere su uno schermo da 3,5" o 4" a bassa risoluzione può essere difficile.
Ecco una foto dei due insieme:
Sullo schermo più grande, il testo è piccolo ma leggibile.
Sullo schermo più piccolo, il browser esegue il rendering corretto del layout, ma il testo è illeggibile, anche con lo zoom. Il display è sfocato e presenta una "dominante di colore" (il bianco non sembra bianco), il che rende i contenuti meno leggibili.
Progetta contenuti per dispositivi mobili
Quando crei contenuti per una vasta gamma di aree visibili, prendi in considerazione sia i contenuti sia il layout e la progettazione grafica, progetta con testo e immagini reali, non con contenuti segnaposto.
"I contenuti precedono il design. Il design in assenza di contenuti non è design, ma decorazione."
Jeffrey Zeldman
- Inserisci i contenuti più importanti nella parte superiore, perché gli utenti tendono a leggere le pagine web con uno schema a forma di F.
- Gli utenti visitano il tuo sito per raggiungere un obiettivo. Chiediti di cosa hanno bisogno per raggiungere questo obiettivo ed elimina tutto il resto. Sii rigoroso con gli abbellimenti visivi e testuali, i contenuti legacy, i link eccessivi e altri elementi superflui.
- Fai attenzione alle icone di condivisione sui social media; possono ingombrare i layout e il codice può rallentare il caricamento della pagina.
- Progetta layout adattabili per i contenuti, non per le dimensioni fisse dei dispositivi.
Contenuti di test
- Verifica la leggibilità su aree visibili più piccole utilizzando Chrome DevTools e altri strumenti di emulazione.
- Testa i contenuti in condizioni di larghezza di banda ridotta e latenza elevata; prova i contenuti in una varietà di scenari di connettività.
- Prova a leggere e interagire con i tuoi contenuti su uno smartphone economico.
- Chiedi ad amici e colleghi di provare la tua app o il tuo sito.
- Crea un semplice laboratorio di test dei dispositivi. Il repository GitHub per il Mini Mobile Device Lab di Google contiene le istruzioni su come crearne uno tuo. OpenSTF è una semplice applicazione web per testare i siti web su più dispositivi Android.
Ecco OpenSTF in azione:
I dispositivi mobili vengono utilizzati sempre più spesso per consumare contenuti e ottenere informazioni, non solo come dispositivi per la comunicazione, i giochi e i contenuti multimediali.
Ciò rende sempre più importante pianificare i contenuti in modo che funzionino bene su una vasta gamma di aree visibili e dare la priorità ai contenuti quando si considera il layout, l'interfaccia e la progettazione dell'interazione su più dispositivi.
Comprendi il costo dei dati
Le pagine web stanno diventando sempre più grandi.
Secondo HTTP Archive, il peso medio della pagina per il milione di siti principali è ora superiore a 2 MB.
Gli utenti evitano i siti o le app che percepiscono come lenti o costosi, quindi è fondamentale comprendere il costo del caricamento dei componenti di pagine e app.
La riduzione del peso della pagina può anche essere redditizia. Chris Zacharias di YouTube ha scoperto che quando hanno ridotto le dimensioni della pagina di visualizzazione da 1,2 MB a 250 KB:
In altre parole, la riduzione del peso della pagina può aprire nuovi mercati.
Calcola il peso della pagina
Esistono diversi strumenti per calcolare il peso della pagina. Il riquadro Rete di Chrome DevTools mostra le dimensioni totali in byte per tutte le risorse e può essere utilizzato per determinare i pesi per i singoli tipi di asset. Puoi anche controllare quali elementi sono stati recuperati dalla cache del browser.
Firefox e altri browser offrono strumenti simili.
WebPagetest consente di testare i caricamenti delle pagine iniziali e successivi. Puoi automatizzare i test con script (ad esempio, per accedere a un sito) o utilizzando le API RESTful. L'esempio seguente (caricamento di developers.google.com/web) mostra che la memorizzazione nella cache è riuscita e che i caricamenti delle pagine successivi non hanno richiesto risorse aggiuntive.
WebPagetest fornisce anche una suddivisione delle dimensioni e delle richieste per tipo MIME.
Calcola il costo della pagina
Per molti utenti, i dati non costano solo byte e prestazioni, ma anche denaro.
Il sito What Does My Site Cost? ti consente di stimare il costo finanziario effettivo del caricamento del tuo sito. L'istogramma riportato di seguito mostra il costo (utilizzando un piano dati prepagato) del caricamento di amazon.com.
Tieni presente che questo non tiene conto dell'accessibilità economica rispetto al reddito. I dati di blog.jana.com mostrano il costo dei dati.
| Piano dati da 500 MB costo (USD) |
Salario minimo orario (USD) |
Ore di lavoro per pagare il piano dati da 500 MB |
|
| India | 3,38 $ | 0,20 $ | 17 ore |
| Indonesia | 2,39 $ | 0,43 $ | 6 ore |
| Brasile | 13,77 $ | 1,04 $ | 13 ore |
Il peso della pagina non è un problema solo per i mercati emergenti. In molti paesi, le persone utilizzano piani mobile con dati limitati ed eviteranno il tuo sito o la tua app se li percepiscono come pesanti e costosi. Anche i piani dati cellulari e Wi-Fi "illimitati" in genere hanno un limite di dati oltre il quale vengono bloccati o limitati. Per questi motivi, è consigliabile essere il più trasparenti possibile sulla quantità di dati consumati dalla pagina. Il seguente post del blog fornisce best practice specifiche: Nurture trust through cost transparency
Il risultato: il peso della pagina influisce sul rendimento e costa denaro. L'articolo Ottimizzare l'efficienza dei contenuti spiega come ridurre questo costo.