Quando parliamo di web design nel 2017, stiamo parlando di web design reattivo . In poco più di sei anni, il termine 'responsive' è diventato uno standard industriale pervasivo.

Il responsive web design è il processo di progettazione di un sito o di un'app web, in modo che il suo contenuto sia regolato in modo appropriato in base al dispositivo su cui è visualizzato. Alcuni anni fa ho visto un eccellente discorso in conferenza di Ethan Marcotte, che coniato il termine 'responsive web design' - in cui ha paragonato i siti responsive all'albero Pando dello Utah; un singolo organismo con una struttura radicolare connessa, che emerge dal suolo in luoghi diversi, in contesti diversi, di dimensioni diverse, ma tutti con la stessa genetica di base.

È indiscutibilmente l'adozione di un design reattivo che ha permesso la crescita del web mobile; senza di esso il costo di sviluppo di un sito mobile in parallelo con una versione desktop avrebbe significato che molte aziende si sarebbero attenute a quest'ultima.

le relazioni progettate per i dispositivi mobili vengono spesso trasposte su viewport molto più grandi

Ma il design reattivo non è privo di problemi. Per definizione, i responsive design 'rispondono' alle dimensioni del viewport, non al contenuto. Le varianti basate sui container sulle query multimediali CSS sono state proposte come soluzione, ma finora sono solo post-it sulla lavagna di qualcuno.

Il design riguarda ampiamente le relazioni tra gli elementi e tali relazioni sono limitate su un piccolo schermo. Inoltre, poiché il nostro markup è strutturato semanticamente, le relazioni progettate per i dispositivi mobili vengono spesso trasposte su viewport molto più grandi.

Una delle decisioni UI più criticate dell'anno scorso è stata il numero crescente di menu di hamburger utilizzati su desktop. Tuttavia, poca attenzione è stata dedicata ai layout mobili: bande orizzontali di contenuti suddivise in una griglia di 12 colonne, che è stata ridimensionata al desktop.

La questione se il responsive web design stia uccidendo la creatività è probabilmente ingiusto; presume che la diversità e l'innovazione siano la linfa vitale di un processo di progettazione. Dà anche la colpa a un concetto, se c'è la colpa per l'apporto, sicuramente sta nell'implementazione. In effetti, il design spesso fiorisce con le restrizioni più stringenti: conosco un designer che aggiunge i suoi limiti alle richieste dei clienti, perché sente che il suo lavoro è più forte quando viene sfidato.

se c'è una colpa per la ripartizione, sicuramente sta nell'implementazione

Il design reattivo funziona incredibilmente bene con il branding, ma non è l'ideale per il layout. È possibile che il modo migliore per implementare la progettazione reattiva sia creare design distinti per diverse classi di viewport e affidarsi a tecniche reattive solo per schermi simili. Potremmo non conoscere le dimensioni esatte di ogni schermo, ma sappiamo che un telefono deve stare in una tasca, sappiamo che un notebook non può essere più stretto della sua tastiera.

Il design reattivo può essere semplicemente un'idea che anticipa i tempi che realizziamo, e una volta implementati strumenti come le variabili CSS e le query sui contenitori, il design sul Web sarà nuovamente diverso.

Immagine in evidenza, Immagine Pando di Tony Frates via Flickr