Il grosso problema sono i responsabili della progettazione che trattano una pagina web come carta , con una dimensione fissa, e vogliono che anche i componenti su quella pagina web abbiano una dimensione fissa . Questa è una pessima decisione di progettazione, perché interrompe la reattività incorporata dei browser web. Rende deliberatamente meno accessibili le pagine web che hanno creato .

E poi ne sono orgogliosi .

Il responsive design è una pessima soluzione a questo problema, perché in primo luogo non dovrebbe esistere. La vera soluzione, ovviamente, è rimuovere lo stile - il CSS - che interrompe la reattività. Ma poiché i responsabili del design insistono nel costringere i designer e gli sviluppatori Web a inserire quello stile nella pagina Web, per interrompere la reattività, per distruggere l'accessibilità, il design reattivo offre una via d'uscita e, sebbene sia terribilmente brutto, potrebbe semplicemente passare l'ispezione garanzia di conformità dell'accessibilità. ( Ce l' hai , vero?)

Diamo un'occhiata a cosa fa il responsive design.

Supponiamo di avere uno schermo stretto. Tiri su una pagina web. Ti mostra un'immagine, un testo, un'immagine, un testo, uno sotto l'altro, in questo modo:

Ora apri la stessa pagina web su un ampio schermo. Ti mostra righe di immagini e testo, in questo modo:

Questo è ciò che può fare il design reattivo: può spostarsi e ridimensionare i componenti sullo schermo, in base alla larghezza e alla densità di pixel del viewport. (Può cambiare completamente tutti gli stili, ma ciò accade raramente.)

Ma aspetta! C'è più!

Le modifiche comuni includono:

• Comprimere o mostrare le barre laterali,
• Visualizzazione di immagini più piccole o più grandi,
• Utilizzando una dimensione del carattere più grande o più piccola,
• Provocando il ritorno a capo attraverso parole che sono troppo larghe per stare sullo schermo,
• Rendere i pulsanti più grandi (supponendo che i dispositivi più piccoli vengano azionati con le dita) o più piccoli (supponendo che i dispositivi più grandi siano azionati dal mouse),
• Spostamento delle etichette dei campi da accanto a, sopra i campi del modulo,
• Passando da uno stile di collegamento ipertestuale che costringe a cercare collegamenti ipertestuali, a uno che li fa risaltare (supponendo che i dispositivi più piccoli siano azionati con le dita e non possano eseguire il passaggio del puntatore del mouse),
• e altro ancora!

Invece di chiedere al browser web chi è il suo fornitore, il CSS gli chiede quanto è ampio il viewport, quanti colori può visualizzare lo schermo e quanti pixel per pollice visualizza. Mozilla Developer Network ha un eccellente articolo sulle media query , che questo articolo non ripeterà. Vai su MDN.

Questa tecnica è annunciata come il modo migliore per affrontare i problemi di accessibilità causati dalle stesse persone. Che ironia.

Il modo corretto per evitare questi problemi è non causarli per cominciare.

Ad esempio: perché dovresti interrompere la visualizzazione di un'immagine a tutta larghezza del viewport? Quello che potresti voler fare è cambiare un'immagine ad alta definizione adatta per uno schermo ad alta risoluzione, con una a bassa definizione adatta per uno schermo a bassa risoluzione... ma non puoi nemmeno presumere che gli schermi più stretti abbiano un'immagine inferiore risoluzione rispetto agli schermi più ampi, visti i display ad alta densità sfoggiati da alcuni smartphone . Pertanto, mentre potresti utilizzare una media query per fornire la migliore qualità dell'immagine , ciò non ha nulla a che fare con la risoluzione dell'accessibilità non funzionante.

Allo stesso modo, non dovresti impostare la dimensione del carattere su unità dipendenti dallo schermo come i pixel. Dovresti impostarlo su unità assolute come i punti. (Impostarlo in relazione alla larghezza dello schermo è l'errore più stupido di sempre: fa sì che le lettere diventino illeggibilmente piccole su schermi stretti a bassa densità.)

Inoltre, non dovresti impostare i margini e i padding usando i pixel. Invece, dovresti impostarli usando n-width e m-width: relativi alla larghezza delle lettere.

Non c'è nemmeno una buona ragione per rendere i pulsanti minuscoli per gli utenti di schermi di grandi dimensioni. Il presupposto intrinseco che tutti siano in grado di usare un mouse è terribilmente abile. Se rendi i pulsanti abbastanza grandi da poterli toccare con le dita per cominciare, un utente di uno schermo grande può ancora utilizzare quegli stessi pulsanti.

Oh, dici, ma allora come si fa a creare una barra degli strumenti piena di piccoli pulsanti?

Beh, forse non dovresti farlo. I produttori di barre degli strumenti hanno trovato il modo di affrontare la mancanza di spazio: menu di overflow e ritorno a capo . I pulsanti minuscoli sono fatti per le persone che possono usare puntatori del mouse accurati. Mostrano una completa e assoluta mancanza di rispetto per le persone che non possono, per qualsiasi motivo.

Altre modifiche includono la compressione di una barra laterale. Se quella barra è così poco importante da poter essere compressa, sicuramente puoi trovare una visualizzazione migliore. Magari ometterlo del tutto .

Quindi... non c'è mai una buona ragione per usare le media query?

No. C'è infatti 1 buona ragione: le interruzioni di parola.

L'inglese è una lingua con poche parole lunghe comuni. Le lunghe parole che conosce sono prese in prestito dal latino e usate in scienze come la chimica, per denotare composti chimici. Ma altre lingue comunemente usano parole lunghe . E a molti designer piace che la loro pagina web mostri quelle parole senza costringere l'utente a scorrere orizzontalmente.

A tale scopo, i CSS hanno la capacità di consentire ai browser Web di interrompere una parola in punti casuali , piuttosto che su spazi e altri simboli non alfabetici. Ma non ci aspetteremmo che ciò accada su un grande schermo dove ci sono molte opportunità per trovare un'interruzione di parola naturale. (Ci sono eccezioni ovviamente, per parole estremamente lunghe.)

E quindi, è perfettamente OK applicare le regole innaturali del word-wrapping solo in situazioni limitate: un'ottima ragione per usare le media query.

Se dovessi trovare altre buone ragioni per le media query, che non sono utilizzate solo per prevenire l'interruzione dell'accessibilità, sentiti libero di raggiungere e arricchire questo articolo con il tuo feedback.

Circa l'autore

Veltstra ha 40 anni di esperienza nell'uso di strumenti e software mal progettati e li ha trasformati in una ferma difesa dell'usabilità e dell'accessibilità . Veltstra crea software da oltre 30 anni, 25 dei quali professionalmente, cercando sempre di rendere i prodotti usabili e accessibili.

Non esiste disabilità che non venga trascurata ed emarginata da una persona abile, da qualche parte.