Il web design reattivo e adattivo sono entrambi metodi per creare siti web compatibili con dispositivi diversi che funzionano bene su una varietà di dimensioni dello schermo. Sebbene il web design reattivo sia raccomandato da Google ed è il più popolare tra i due approcci, entrambi questi metodi per il web design multi-dispositivo hanno i loro punti di forza e le loro debolezze.
Diamo un'occhiata alle differenze tra il design web reattivo e adattivo, concentrandoci in particolare su queste aree chiave:
- Facilità di sviluppo
- Il livello di controllo che hai sul design
- Larghezza del dispositivo / supporto dello schermo
- Quanto è amichevole la soluzione del futuro
- Velocità complessiva di download e prestazioni del sito
Alcune definizioni
Prima di entrare nei nostri confronti paralleli di progettazione web reattiva e adattiva, dedichiamoci un momento per esaminare una definizione ad alto livello di questi due approcci.
I siti Web reattivi presentano un layout fluido che cambia e si adatta indipendentemente dalle dimensioni dello schermo utilizzate. Le query multimediali consentono ai siti reattivi di cambiare anche "al volo" se il browser viene ridimensionato.
Il design adattivo utilizza dimensioni fisse basate su punti di interruzione predeterminati per fornire la versione di layout più appropriata per le dimensioni dello schermo rilevate al caricamento iniziale della pagina.
Con queste ampie definizioni, concentriamoci sulle nostre principali aree di interesse.
Facilità di sviluppo
La differenza più significativa tra il responsive e il web design adattivo sta nel modo in cui queste soluzioni vengono applicate a un sito web. Poiché la progettazione reattiva crea un layout completamente fluido, è consigliabile utilizzarla nei progetti in cui si sta riprogettando il sito da zero. Provare ad aggiornare un codice di un sito web esistente per diventare reattivo è spesso un affare estenuante perché semplicemente non si ha il livello di controllo che si avrebbe se si stesse sviluppando quel codice da zero e tenendo conto del design reattivo per le prime fasi di quel processo. Ciò significa che quando si esegue il retrofit di un sito per essere reattivi, si è costretti a scendere a compromessi per rimanere all'interno di quella base di codice esistente.
Se si sta lavorando con un sito web esistente a larghezza fissa, un approccio adattivo significa che è possibile lasciare la dimensione per cui il sito è stato progettato per intatto e aggiungere ulteriori punti di rottura adattivi secondo necessità. In alcuni casi, se il budget di un progetto è ridotto e se si limiterà a soddisfare una piccola quantità di lavoro di sviluppo, è possibile scegliere di aggiungere nuovi punti di interruzione adattivi solo per schermi di piccole dimensioni e dimensioni mobili. Ciò significa che si consente agli schermi più grandi di utilizzare tutti lo stesso layout, forse una versione del breakpoint 960 che era probabilmente destinata a quel sito.
Il vantaggio di un approccio adattivo è che puoi sfruttare meglio il codice di un sito esistente, ma uno dei lati negativi è che stai creando diversi modelli di layout per ogni punto di interruzione che scegli di supportare. Ciò che avrà un impatto sul carico di lavoro richiesto per sviluppare e mantenere questa soluzione a lungo termine.
Controllo del design
Uno dei punti di forza dei siti Web reattivi è che la loro fluidità consente loro di adattare e supportare tutte le dimensioni dello schermo anziché solo i breakpoint preimpostati determinati in un approccio adattivo. La realtà, tuttavia, è che i siti reattivi possono sembrare grandi ad alcune dimensioni dello schermo chiave (in genere dimensioni corrispondenti ai dispositivi più diffusi disponibili sul mercato), ma il design visivo spesso si rompe tra quelle risoluzioni popolari.
Ad esempio, un sito può avere un bell'aspetto con un layout widescreen di 1400 pixel, una dimensione dello schermo centrale di 960 pixel e uno schermo piccolo con una risoluzione di 480 pixel, ma per quanto riguarda gli stati intermedi di queste dimensioni? Come designer, hai poco o nessun controllo su queste dimensioni intermedie e l'aspetto visivo della pagina a quelle dimensioni è spesso meno ideale.
Con un sito Web adattivo, hai molto più controllo del design sui vari layout utilizzati perché sono formati fissi in base ai punti di interruzione stabiliti. Quegli imbarazzanti stati intermedi non sono più un problema perché hai progettato attentamente ognuno di essi (che indica la visualizzazione di ogni punto di interruzione) che verrà consegnato ai visitatori.
Per quanto attraente possa sembrare questo livello di controllo del design, devi essere consapevole del fatto che ha un prezzo. Sì, hai il pieno controllo sull'aspetto di ogni punto di interruzione, ma ciò significa che devi investire i tempi di progettazione necessari per progettare ciascuno di questi layout unici. Maggiore è il numero di punti di interruzione che si sceglie di progettare, maggiore sarà il tempo che si dovrà dedicare a tale processo.
Ampiezza di supporto
Sia il design reattivo che quello adattivo godono di un supporto piuttosto solido, specialmente nei browser moderni.
I siti Web adattivi richiedono componenti lato server o Javascript per il rilevamento della dimensione dello schermo. Ovviamente, se un sito adattivo richiede Javascript, significa che un browser deve averlo abilitato affinché il sito funzioni correttamente. Questo potrebbe non essere una preoccupazione importante per te dal momento che la maggior parte delle persone avrà Javascript nei loro browser, ma ogni volta che un sito ha una dipendenza critica da qualcosa, dovrebbe essere notato.
I siti Web reattivi e le query multimediali che li alimentano funzioneranno bene in tutti i browser moderni. Gli unici problemi si avranno con le versioni più vecchie di Internet Explorer poiché le versioni 8 e seguenti non supportano le query multimediali. Per ovviare a questo problema, viene spesso utilizzato un polyfill di Javascript, il che significa che esiste anche una dipendenza da Javascript, almeno per quelle versioni antiquate di IE.Anche in questo caso, ciò potrebbe non essere una grande preoccupazione per te, specialmente se l'analisi dei tuoi siti mostra che non ricevi molti visitatori utilizzando quelle versioni di browser meno recenti.
Futura cordialità
La natura fluida dei siti Web reattivi offre loro un vantaggio rispetto ai siti adattivi in termini di compatibilità futura. Questo perché quei siti responsive non sono costruiti per ospitare solo una serie di punti di interruzione stabiliti in precedenza. Si adattano per adattarsi tutti gli schermi , compresi quelli che potrebbero non essere effettivamente sul mercato oggi. Ciò significa che i siti reattivi non dovranno essere "riparati" se una nuova risoluzione dello schermo diventa improvvisamente popolare.
Osservando l'incredibile varietà del panorama dei dispositivi (ad agosto 2015 c'erano oltre 24.000 dispositivi Android distinti sul mercato), un sito che fa del suo meglio per ospitare questa vasta gamma di schermi è di fondamentale importanza per il futuro. Questo perché è improbabile che il paesaggio diventi meno diversificato in futuro, il che significa che la progettazione di schermi o dimensioni specifici diventerà impossibile, se non abbiamo già raggiunto quella realtà.
Dall'altra parte di questo scenario di confronto, se un sito è adattivo e non accetta nuove risoluzioni che potrebbero diventare importanti nel mercato, allora potresti essere costretto ad aggiungere quel punto di interruzione ai siti che hai creato. Ciò aggiunge design e tempi di sviluppo ai progetti e significa che quei siti adattivi devono essere costantemente monitorati per garantire che non siano stati introdotti nuovi breakpoint nel mercato che devono essere aggiunti al sito. Ancora una volta, con la diversità dei dispositivi che è ciò che è, dover costantemente verificare nuove dimensioni e adattarle a nuovi punti di interruzione è una sfida continua che avrà un impatto sul lavoro necessario per supportare un sito e il costo di tale manutenzione per la società o l'organizzazione a cui è destinato il sito.
Prestazione
Il web design reattivo è stato a lungo accusato (ingiustamente così in molti casi) di essere una soluzione scadente dal punto di vista della velocità di download / prestazioni. Ciò è in gran parte dovuto al fatto che nei primi giorni di questo approccio, molti web designer hanno semplicemente attaccato le medie dei piccoli schermi su un CSS esistente di un sito. Ciò ha costretto le immagini e le risorse destinate agli schermi più grandi a essere consegnate a tutti i dispositivi, anche se quegli schermi più piccoli non li usavano nei loro layout finali. La progettazione reattiva ha fatto molta strada da quei giorni e la realtà è che oggi i siti di qualità reattiva non soffrono di problemi di prestazioni.
Velocità di download ridotte e siti Web gonfiati non sono un problema del sito Web reattivo: si tratta di un problema che può essere riscontrato su tutti i siti Web. Immagini troppo pesanti, alimentate dai social media, da script in eccesso e altro ancora e che pesano un sito verso il basso, ma sia i siti web reattivi che quelli adattivi possono essere creati per essere caricati rapidamente. Ovviamente , possono anche essere costruiti in un modo che non rende le prestazioni una priorità, ma questo non è un tratto della soluzione stessa, ma piuttosto un riflesso della squadra che è stata coinvolta nello sviluppo del sito stesso.
Oltre il layout
Uno degli aspetti più interessanti del web design adattivo è che non solo si ha il controllo sul design del sito per i punti di interruzione impostati, ma anche le risorse fornite per quelle versioni del sito. Ad esempio, questo significa che le immagini retina possono essere inviate solo ai dispositivi retina, mentre gli schermi non retina ottengono immagini più appropriate che sono più piccole nella dimensione del file. Altre risorse del sito (file Javascript, stili CSS, ecc.) Possono essere consegnate in modo intelligente solo quando sono necessarie e verranno utilizzate.
Questo uso del web design adattivo va ben oltre la semplice equazione di "se si aggiorna un sito web, adattativo può essere un approccio più semplice da utilizzare". Tutti i siti, comprese le riprogettazioni complete, possono beneficiare di un approccio più intelligente a un'esperienza più personalizzata.
Questo scenario mostra la natura sfumata di questo dibattito "reattivo contro adattivo". Se è vero che un approccio adattivo può essere più adatto rispetto a quello reattivo per il retrofit del sito, può anche essere un'ottima soluzione per riprogettazioni complete. Allo stesso modo, in alcuni casi un approccio reattivo può essere aggiunto alla base di codice di un sito esistente, dando a quel sito tutti i benefici di un approccio pienamente reattivo.
Quale approccio è migliore?
Quando si parla di design web reattivo o adattivo, non esiste un chiaro "vincitore", anche se la risposta è sicuramente l'approccio più popolare. In verità, l'approccio "migliore" dipende dalle esigenze di un progetto specifico. Inoltre, questo non deve essere una situazione "o / o". Ci sono molti professionisti del web che stanno costruendo siti che combinano il meglio del responsive web design (larghezze fluide, supporto futuro) con i punti di forza del design adattivo (migliore controllo del design, caricamento intelligente delle risorse del sito).
Comunemente noto come RESS (Responsive Web Design with Server Side Components), questo approccio dimostra che non esiste davvero una soluzione unica per tutte le soluzioni. Sia il web design reattivo che adattivo hanno i loro punti di forza e le loro sfide, quindi è necessario determinare quale funzionerà al meglio per il tuo progetto specifico, o se una soluzione ibrida potrebbe essere più adatta alle tue esigenze.
