Responsive design? Tutti possono sbagliare
7 errori da evitare
“Tutti possono sbagliare.”
— Un riccio scendendo dalla spazzola
Con la varietà di dispositivi oggi in grado di accedere al web (e senza che una dimensione dello schermo superi per diffusione il 20% del mercato) l’approccio responsive si sta rapidamente affermando come la strada da seguire per accontentare tutti: dal pendolare che naviga su iPhone al designer in ufficio davanti al desktop da 30", passando per chi si rilassa sul divano di casa col tablet (e non è detto che si tratti di persone diverse).
Se da una parte confezionare esperienze fruibili “ovunque” rappresenta una necessità e una sfida, dall’altra introduce un nuovo strato di complessità e di potenziali errori in cui incappare, ma che possiamo evitare. Eccone alcuni:
- Nascondere il contenuto
- Affossare le performance
- Disabilitare lo zoom
- Usare le dimensioni dei dispositivi come breakpoint
- Dimenticarsi del touch
- Pensare in piccolo
- Home screen icon
1. Nascondere il contenuto
Cosa fare con i contenuti che non stanno su uno schermo piccolo? Facile:
display: none;Peccato che gli utenti non si aspettino una versione “lite” quando navigano su smartphone, anzi: la maggior parte si aspetta di poter fare le stesse cose che fa su desktop (ad esempio effettuare un acquisto) e più o meno negli stessi tempi.
Senza scordare che il contenuto nascosto via CSS viene comunque scaricato, incidendo sulle performance del sito. Il che ci porta al prossimo punto.
2. Affossare le performance
Una delle sfide del responsive design è garantire agli smartphone un’esperienza d’uso completa in tempi accettabili, anche in presenza di una lenta connessione 3G.
Cosa si intende per “tempi accettabili” per il caricamento di una pagina web? 3 secondi su desktop e 5 su mobile, stando a un’infografica di KISSmetrics.
Per iniziare:
- Comprimi e concatena JavaScript e CSS (con Prepros o CodeKit).
- Carica immagini di contenuto di dimensioni inferiori per mobile (tramite Picturefill o Interchange).
- Ottimizza PNG (con TinyPNG) e JPG (con RIOT o ImageOptim) quando possibile.
- Sfrutta gli icon font (e IcoMoon) per le icone.
- Riduci le richieste http.
- Evita il pulsante “Mi piace” di Facebook e le soluzioni pronte all’uso per i pulsanti social (Tweet e +1 su tutti).
E più in generale segui le indicazioni suggerite da Google e Yahoo.
3. Disabilitare lo zoom
Potremmo essere tentati dall’usare
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />disabilitando così la possibilità di ingrandire le nostre pagine.
Del resto gli utenti sono soliti zoomare i siti che non sono ottimizzati per il mobile, ma non è questo il caso di un buon sito responsive, giusto?
Responsive o meno, il fatto è che un utente potrebbe comunque voler ingrandire una porzione di pagina: per vedere un’immagine più dettagliatamente, cercare di selezionare del testo da copiare e incollare altrove, o per leggere una nota troppo piccola. Ecco perchè dovremmo lasciare piena libertà, preferendo questa dichiarazione alla precedente:
<meta name="viewport" content="width=device-width, initial-scale=1" />4. Usare le dimensioni dei dispositivi come breakpoint
320px, 480px, 568px, 768px, 1024px. Per citare solamente iPhone e iPad. Basta un’occhiata a screensiz.es per convincersi che regolare i nostri layout sulle dimensioni decise dai produttori di smartphone e tablet non è una via percorribile.
L’unica alternativa sostenibile è quella suggerita da Stephen Hay:
“Start with the small screen first, then expand until it looks like shit.
Time to insert a breakpoint!”
— Stephen Hay
Parti dal layout mobile, allarga la finestra del browser, inserisci un breakpoint e cambia/adatta un nuovo layout quando il precedente “si rompe”.
Sono indispensabili molti test e molta pazienza, ma è l’unico modo per assicurarsi che il tuo design si presenti bene non solo sui dispositivi di oggi, ma anche su quelli di domani.
5. Dimenticarsi del touch
Ricordati che ogni cosa “cliccabile” su smartphone e tablet dev’essere a misura di polpastrello. Non a caso nelle sue linee guida Apple raccomanda pulsanti con dimensione minima di 44x44 pixel.
E non mettere i link testuali troppo vicini tra loro, o mio cugino (che ha le dita grosse) non ti perdonerà mai.
6. Pensare in piccolo
Responsive design significa andare in entrambe le direzioni: concentrati sul mobile, ma non dimenticarti che ci sono anche schermi da 30".
La buona notizia è che non servono un Cinema Display o un Thunderbolt Display, basta il bookmarklet di Malte Wassermann.
E per favore, agenzie creative ancorate alla stampa, smettiamola di parlare di “fold” e di utenti che non scrollano.
Scrolling, clicking, and the fold / Dave Tufts
Se gli utenti faticassero a scrollare, Apple e Amazon (per citare i primi grandi nomi che mi vengono in mente) non avrebbero pagine lunghe 10.000 o 25.000 pixel, no? Esatto, 25.000 pixel! Visita e misura apple.com/it/iphone-5s/features per credere.
7. Home screen icon
Si dice che il diavolo sta nei dettagli. Come le touch icon, icone da mostrare come scorciatoie negli home screen di smartphone e tablet.
Per i dispositivi iOS 7 (iPhone retina, iPad mini e 2, iPad retina) dobbiamo creare un set di 3 icone in formato png aventi le seguenti dimensioni: 120x120px, 76x76px e 152x152px.
Nell’head andremo a scrivere:
<!-- 120x120 per iPhone retina (iOS 7) -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/icons/apple-touch-icon-120x120-precomposed.png" /><!-- 76x76 per iPad non retina (iOS 7) -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/icons/apple-touch-icon-76x76-precomposed.png" /><!-- 152x152 per iPad retina (iOS 7) -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/icons/apple-touch-icon-152x152-precomposed.png" />
E se non bastasse tutto questo codice proprietario:
<meta name="apple-mobile-web-app-title" content="Billy" />Così puoi decidere il nome breve (massimo 12 caratteri) che accompagnerà la tua scintillante touch icon sugli home screen dei dispositivi iOS 7, evitando la troncatura automatica del title.
