Il design reattivo (noto anche come design "adattivo"), in cui la stessa pagina Web presenta la migliore versione di due o più layout realizzati a mano in base alla larghezza del browser, è l'opzione più efficace per la maggior parte dei siti Web. Per capire perché, è utile esaminare tutte le opzioni disponibili per i web designer:
Layout fissi
Una larghezza di pagina fissa, in cui la larghezza del contenuto è la stessa indipendentemente dalla larghezza del browser, offre un aspetto uniforme su tutti i dispositivi e può richiedere meno codifica, pensiero e manutenzione rispetto a progetti più flessibili.
Alcuni ritengono che i layout a larghezza fissa siano reliquie di un'epoca passata, in cui le persone bramavano la perfezione dei pixel e l'aspetto uniforme in tutti i browser. Andy Clarke, autore di Hardboiled Web Design, ritiene che questo modo di pensare sia morto:
"In passato era prassi normale lottare duramente per creare un sito Web che apparisse e funzionasse allo stesso modo su tutti i browser, indipendentemente dalle loro capacità. Fare questo significava scendere a compromessi ed evitare l'uso di tecnologie non supportate da tutti i browser.
È duro?
Non illuderti, guance dolci. Questo non è il modo di evolvere il nostro mestiere o costruire una rete migliore. Questo tipo di pensiero vecchio stile ci trattiene. Ci costringe a trovare delle scuse per non fare ciò che sappiamo essere la cosa giusta. Il peggio che noi, come attuali custodi del web, possiamo fare è permettere a qualsiasi cosa di limitare ciò che è possibile ".
- Andy Clarke, Hardboiled Web Design, p6 [Edizione PDF disponibile qui ]
Mentre alcuni vedono i layout fissi come l'altezza della pigrizia, i progetti a larghezza fissa sono ancora scelti da team di progettazione molto intelligenti rispetto ai layout fluidi o adattivi. Apple, ad esempio, attualmente offre agli iMac lo stesso layout di iPad e iPhone. Perché la società responsabile di portare la navigazione del Web mobile alle masse non ottimizza il suo sito Web per i dispositivi mobili?
Perché non pensa di doverlo fare.
Invece di adattare il suo sito Web per schermi di piccole dimensioni, Apple ha creato hardware e software per gestire comodamente siti Web di grandi dimensioni su tali schermi. Apple ritiene che un'esperienza "ottimizzata per dispositivi mobili" venga fornita al meglio in un'applicazione nativa, non in una finestra del browser. Ecco perché offre l' app di Apple Store invece di offrire un Web store ottimizzato per dispositivi mobili. Ed è per questo che incoraggia gli editori a offrire app per riviste su siti Web personalizzati. L'attuale filosofia del web design di Apple è chiara: un layout per domarli funziona perfettamente. Per tutto il resto, c'è un'app per questo.
Solo per questo motivo, alcuni sosterrebbero che i layout fissi rimangono pertinenti come non mai; direbbero che i layout fluidi e adattivi sono solo per fermare le lacune mentre aspettiamo che il software del browser mobile migliori, e HTML e JavaScript per evolversi e tentare gli sviluppatori di uscire dagli app store.
A mio avviso, però, toccare e trascinare e scorrere il Web per un certo periodo di tempo su un dispositivo mobile non è affatto divertente, nemmeno su un iPhone. Se ritieni che la migliore esperienza Web sia quella che rende la lettura, la pubblicazione e l'interazione con i siti Web un piacere anziché un lavoro ingrato, indipendentemente dal dispositivo che stai utilizzando, devi ammettere a un certo punto che servire contenuti su misura per ciascuno il visitatore vale la pena considerare.
Layout fluidi
I layout fluidi, in cui la larghezza della pagina scorre per riempire lo schermo (spesso fino a una larghezza massima imposta), promettono un'esperienza migliore su piattaforme diverse offrendo contenuti con una larghezza più adatta al viewport.
In pratica, i layout fluidi causano più problemi di quanti ne risolvano, come notato da Cameron Moll in questa battuta:
"... i progetti fluidi risolvono ogni problema di layout allo stesso modo in cui i computer rendono gli uffici senza carta, cioè non lo fanno."
- Cameron Moll, "Tutti i siti dovrebbero essere fluidi?", Settembre 2006
Quando si adotta un layout fluido, si rinuncia al controllo del proprio progetto e si accetta che il testo verrà riavvolto, le immagini si ridistribuiranno, le lunghezze delle linee varieranno imprevedibilmente, il testo, le immagini e gli elementi di navigazione potrebbero frantumarsi insieme a piccole larghezze e le colonne salteranno e fluttueranno in giro solo per farti dispetto.
Un layout fluido, si potrebbe dire, è anche un'opzione pigra. È l'approccio del fucile da caccia al web design adattivo. Invece di offrire un'esperienza su misura con tre o quattro design a larghezza fissa attentamente considerati, stai offrendo un'esperienza imprevedibile nella speranza che possa funzionare su schermi grandi e piccoli e, si spera, colmi tutti gli spazi che non hai considerato completamente nel mezzo.
Ciò non rende inutili i layout fluidi. Ci sono modi per farli funzionare. Il blog 456 Berea St , ad esempio, adotta un layout fluido fino a una determinata larghezza, dopodiché ne utilizza uno fisso per qualcosa di più grande. E a larghezze davvero ridotte, la barra laterale si allontana per utilizzare una singola colonna che semplifica la lettura su schermi di piccole dimensioni. Ma questo non è più un layout fluido. È qualcosa di meglio È un design reattivo .
Layout reattivi
Un layout 'reattivo' o 'adattivo' - in cui la stessa pagina Web presenta una versione di due o più layout predisposti a seconda della larghezza del browser del visitatore - è una parte fondamentale del miglioramento progressivo, che mira a rendere il sito web il migliore può per ogni visitatore.
Scegliere di adottare un layout adattivo è un "eccellente servizio clienti", nelle parole di Aaron Gustafson, l'autore di Adaptive Web Design. Se progettiamo bene i nostri siti, dice, ai visitatori dovrebbe essere presentata un'esperienza perfettamente realizzata senza rendersi conto che stiamo facendo storie:
"Come web designer e sviluppatori, dovremmo cercare di essere bravi nel nostro lavoro come quel cameriere attento e discreto, ma non è un compito semplice. Proprio come un cameriere non ha idea se un cliente che entra dalla porta richiederà frequenti ricariche o poche, non abbiamo modo di conoscere le esigenze di un determinato utente quando arrivano sul nostro sito. Invece, dobbiamo soddisfare per soddisfare tali esigenze. Se siamo davvero bravi, possiamo farlo senza che i nostri clienti si rendano conto di essere considerandole in modo speciale. Per fortuna, con il miglioramento progressivo dell'utente e l'approccio incentrato sui contenuti (in contrapposizione all'approccio più recente del browser con degrado grazioso), questo è facilmente realizzabile. "
- Aaron Gustafson, Adaptive Web Design, p12 [Edizione PDF disponibile qui ]
La consapevolezza che il nostro lavoro di web designer è quello di adattarci ai nostri visitatori e non forzarli ad adattarci a noi - come potrebbe far credere Apple - è uno sviluppo abbastanza recente nel web design. È, secondo me, una sorta di rinascita: abbiamo finito di scegliere le buone abitudini da anni di design della stampa. Ora dobbiamo buttare via le catene imposte lavorando in uno spazio predefinito sulla pagina stampata.
Dove una volta abbiamo trattato il browser come un canvas fisso, ora stiamo accettando che non esiste alcun canvas definito, e questo sta diventando sempre più chiaro dall'enorme mix di dimensioni dello schermo che senza dubbio inizierai a vedere nelle statistiche dei tuoi visitatori . Invece di considerare ogni nuovo dispositivo come un unico "formato di pagina" da target (e quindi dover radunare le truppe quando esce un nuovo dispositivo) possiamo seguire convenzioni più a prova di futuro.
Possiamo pensare in termini di bande - "grandi", "medie" e "piccole" - invece di pensare a telefoni e tablet specifici, quindi progettare siti per apparire al meglio in quelle bande. Qualunque siano i nuovi dispositivi che escono, si adatteranno in una banda o nell'altra e, anche se si trovano proprio sul confine tra due bande, avremo ancora più controllo sull'esperienza rispetto a se avessimo usato un dispositivo fisso o fluido disposizione.
In Responsive Web Design, Ethan Marcotte offre questa chiamata alle armi:
"Dobbiamo lasciar andare.
Invece di creare progetti disconnessi, ciascuno su misura per un particolare dispositivo o browser, dovremmo invece trattarli come aspetti della stessa esperienza. In altre parole, possiamo creare siti non solo più flessibili, ma che possono adattarsi ai media che li rendono.
In breve, dobbiamo praticare il
web design reattivo. Possiamo abbracciare la flessibilità intrinseca al web, senza rinunciare al controllo di cui abbiamo bisogno come designer. Tutto integrando nel nostro lavoro tecnologie basate su standard e apportando una leggera modifica alla nostra filosofia verso il design online ".
- Ethan Marcotte, Responsive Web Design, p8 [Edizione PDF disponibile qui ]
Ma quali bande usi? Ethan Marcotte raccomanda i tre seguenti in Responsive Web Design. (Per sapere cosa fanno e capire le avvertenze, ti potrebbe piacere prendere il libro. )
@media screen and (max-width: 768px) {
...
} @media screen and (max-width: 520px) {
...
} @media screen and (min-width: 1200px) {
...
}
Esistono anche una serie di framework CSS progettati per aiutare a creare siti Web adattivi, tra cui Less Framework di Joni Korpi .
Invece di usare punti di interruzione arbitrari, forse è meglio lasciare che il design del tuo sito imponga le bande. Riduci la larghezza dello schermo del tuo browser e, ogni volta che il tuo design si rompe, quella larghezza dovrebbe essere uno dei tuoi "punti di interruzione". Continua a ridurre la larghezza e ad aggiungere punti di interruzione con le query multimediali CSS fino a quando il tuo design non si adatta a tutte le larghezze. In questo modo, il tuo design sarà perfetto su tutti i dispositivi anziché solo sulle poche dimensioni dello schermo in cui hai provato a incastrarlo. Se usi Chrome, l'attivazione di Strumenti per gli sviluppatori (Visualizza> Sviluppatore> Strumenti per gli sviluppatori) e la riduzione della larghezza del browser ti dà una lettura utile della larghezza corrente nell'angolo in alto a destra che puoi utilizzare per capire dove dovrebbero trovarsi i punti di interruzione.
Un altro approccio popolare da prendere in considerazione è il design responsive Mobile First , in cui il foglio di stile principale gestisce gli stili per i dispositivi più piccoli e le query multimediali si occupano di larghezze dello schermo più grandi, invece del contrario. Ciò può comportare prestazioni più veloci sui dispositivi mobili, in particolare se si utilizzano molte immagini di sfondo CSS. (Costruiresti i punti di interruzione allo stesso modo - basta iniziare con la larghezza del browser al minimo e lavorare verso l'alto. E non dimenticare di testare su tutti i dispositivi reali su cui puoi mettere le mani - considera di visitare un dispositivo aperto Lab .)
In breve, quando è fatto bene, il design adattivo è una gioia da vedere e sperimentare sia come web designer che come utente di web in giardino comune. Prendi il sito dell'azienda giapponese Information Architects , ad esempio:
Su un iPhone
Su un iPad
Su un iMac
Proprio come previsto da Aaron Gustafson, non sai nemmeno di essere soddisfatto fino a quando non vedrai i disegni nella stessa pagina.
L'esperienza non potrebbe essere più piacevole in ogni caso; non devi pensare o interagire con la pagina per iniziare a leggere il contenuto, passare il tempo a chiederti perché appare strano sullo schermo o ingrandire per vedere gli elementi di navigazione prima di poterli toccare, perché qualcuno ha già risolto quei problemi per voi. E che è il motivo per il responsive design trionfi quasi sempre altre opzioni.