Differenza tra Responsive Design, Bootstrap, Mobile First e Progressive Web App

Applicazioni per dispositivi mobili

Con l’inizio della diffusione degli smartphone, di spositivi mobili dallo schermo di dimensioni molto ridotte ma capaci di navigare tra le pagine web, gli sviluppatori del settore hanno dovuto apportare grandi e sostanziali modifiche ai loro contenuti.
Alcuni hanno intrapreso la via della doppia versione del servizio, web e mobile, a seconda del dispositivo utilizzato per accedere al sito o dalle dimensioni rilevate dello schermo. Avere due differenti versioni è sicuramente la scelta migliore per sfruttare al massimo le caratteristiche di entrambe le tipologie di accesso al servizio. La cosiddetta versione Desktop avrà solitamente queste caratteristiche:

• Schermo molto grande, solitamente esteso in larghezza.
• Possibilità di suddividere i contenuti in più colonne.
• Menu di navigazione fisso.
• Ampi spazi per inserire banner pubblicitari.

Mentre per quanto riguarda la rispettiva versione Mobile, tra le varie caratteristiche si troveranno:

• Schermo molto piccolo, solitamente esteso in altezza ma con la possibilità di venir ruotato, estendendolo nuovamente in larghezza.
• Quasi obbligatorio l’utilizzo di una colonna unica. Utilizzarne due significherebbe forzare l’utente ad usare lo zoom per leggere i contenuti di una colonna alla volta.
• Menu di navigazione a scomparsa.

Responsive Design

L’alternativa alla creazione di due diverse versioni dello stesso servizio web è creare una struttura dinamica, Responsive o Responsive web design (RWD), in grado di adattarsi autonomamente allo spazio concesso dalle dimensioni dello schermo.
Le pagine web dovrebbero essere in grado di adattarsi, e per farlo Marcotte in un suo articolo parla delle media query introdotte con i CSS in versione 2.1, in grado di identificare soltanto la tipologia di device fisico in uso. Per una versione più stabile ed accolta dai principali browser però, è necessario attendere fino alla versione CSS3 dove l’ente W3C ha incluso le media queries come parte integrante dello standard. Questa nuova versione di media queries era in grado di ispezionare il dispositivo fisico in tutte le sue caratteristiche (utili per il caso in uso) fornendo quindi molte più informazioni e dando più possibilità allo sviluppatore di adattar il proprio contenuto al device.
Le media query sono esattamente quel che serve al browser per essere a conoscenza del dispositivo che sta visitando la pagina.

Bootstrap

Per fortuna esiste la regola del non reinventare la ruota ogni volta! Nel 2010, direttamente dagli uffici di Twitter, due sviluppatori decidono di creare il framework che nel giro di poco tempo diventerà il più diffuso in assoluto, Bootstrap.
Questo framework permette di costruire pagine web, dalle più semplici alle più complesse, riducendo al minimo lo sforzo semplificando al massimo il processo della costruzione di una pagina web responsive. Grazie ad un intuitivo sistema di griglie e colonne ben istruite su come e dove muoversi al variare delle dimensioni dello schermo, la pagina si adatta quasi automaticamente. Tutti i componenti aggiuntivi che offre il framework sono già costruiti e pensati di default per adattarsi, quindi anche per lo sviluppatore alle prime armi sarà facile ottenre un discreto risultato.

Un altro fattore vincente di Bootrap, oltre alla semplicità d’uso e all’efficacia, è senza dubbio la personalizzazione. Oltre a poter sovrascrivere le regole CSS a mano creando a cascata nuove regole legate alle classi preesistenti del framework, Boostrap offre la possibiltà di customizzare interamente lo stile tramite UI direttamente sul sito, permettendo quindi di generare e scaricare direttamente la versione personalizzata.
Per versione personalizzata non si parla solo di colori, dimensioni, proporzioni e spazi, ma anche di contenuti potendo aggiungere/togliere eventuali altre funzioni o componenti, rendendo il codice scaricato ed incluso nei propri progetti più veloce e leggero possibile, rimuovendo eventualmente componenti non utilizzati o non necessari. Questa scelta può essere molto conveniente nel caso si stia lavorando ad un progetto piuttosto ampio e pesante in termini di sforzo richiesto al dispositivo per usufruirne, e sicuramente alleggerire il carico rimuovendo contenuti non utilizzati non può far altro che avere un beneficio a livello di prestazioni.

Mobile First

Grazie alla praticità ed alla semplicità d’uso degli smartphone, come già detto più volte, la tipologia di utenza è in continuo cambiamento. Gli utilizzatori del computer stanno diminuendo in contrasto agli utilizzatori degli smartphone sempre più velocemente.

Basta pensare al fatto che ormai la maggior parte degli adulti, anche se non in grado di utilizzare al meglio il proprio computer (sempre che ne abbiano uno), hanno ora uno smartphone. E lo usano spesso. La breve ricerca di informazioni su internet è tutta un’altra cosa se fatta da uno smartphone. Sei una persona è in cucina ed ha bisogno di rinfrescarsi la memoria su una determinata ricetta, le opzioni sono due: andare in un’altra stanza, accendere il vecchio e lento computer, aspettare diversi minuti che si accenda per poi aprire il browser e cercare finalmente la ricetta, oppure estrarre dalla tasca il proprio smartphone, due tocchi sullo schermo e parte immediatamente la ricerca. Non c’è paragone.

Un altro caso: chi, magari per lavoro, ha particolari esigenze e necessità preferisce solitamente sedersi comodamente al computer, davanti ad uno schermo molto più grande ed una tastiera fisica, e rispondere alle email. Ma chi non ha nessuna particolare esigenza e sta solamente aspettando l’email di conferma per l’iscrizione ad un sito di viaggi, magari ad un’applicazione, non ha nessuna voglia di andare ad accendere il computer.
Ha ancora senso creare quindi contenuti originariamente per schermi desktop, che si limitano ad adattarsi (seppur con una certa qualità) ai piccoli schermi dei dispositivi mobili? Ecco che entra in gioco la filosofia del Mobile First.

In un interessante articolo, già dal 2009 guarda verso il futuro ed intuisce come possa aver molto più senso progettare e sviluppare contenuti pensando prima di tutto alla loro visualizzazione su cellulare, ed in secondo luogo gestire, adattare ed espandere il contenuto per una visualizzazione gradevole e funzionale anche da uno schermo desktop.
Analizza la situazione in tre principali punti:

1. La diffusione dei cellulari sta spopolando. Già dal 2009 era palese come il mercato avrebbe completamente spostato la concetrazione verso i dispositivi mobili piuttosto che computer desktop. Iniziare il prima possibile a concentrarsi su questa nuova piataforma era logicamente una scelta vincente.
2. Lo spazio ridotto di costringe a mettere a fuoco. Sviluppare un sito web pensando all’utilizzo principale tramite cellulare, costringe lo sviluppatore a doversi concentrare solo ed esclusivamente sulle funzioni veramente importanti e necessarie. Nello sviluppo di un contenuto per desktop si ha molto spazio sullo schermo, e può essere una fonte di distrazione per l’utente così come una tentazione per lo sviluppatore di aggiungere contenuti su contenuti per riempire e sfruttare tutto lo spazio, confondendo solamente l’utilizzatore. Pensare ad un contenuto in uno spazio ridotto quindi rende anche la navigazione migliore per l’utente, che troverà immediatamente quel che cercava.
3. Il browser mobile offre più possibilità. Il Web inteso come World Wide Web negli anni 90 è stato costruito come una biblioteca, un insieme di testi e collegamenti, a cui sono poi state aggiunte immagini, formattazione e script per interagire e dare dinamicità. Nel mondo mobile ci sono molte più possibilità di funzioni non pensabili o insensate da vedere nella vecchia ottica di pagina web, tra le quali alcune usufriibili solamente da cellulari grazie a caratteristiche interamente assenti nei computer.

Con l’introduzione della filosofia Mobile First quindi, gli sviluppatori hanno iniziato a sfruttare al meglio le nuove possibilità offerte dalla nuova piattaforma di accesso ai contenuti e di conseguenza i browser mobile hanno subito e stanno subendo una grossa e rapida crescita in fatto di prestazioni e funzionalità, per permettere appunto la creazione di siti web sempre più interattivi, complessi e utilizzatori di tutti gli strumenti a disposizione.

Progressive Web App

La ricerca e l’innovazione non si fermano mai ed anche per i siti web, seppur impostati secondo la filosovia Mobile First, è stata introdotta una nuova metodologia per sfruttare ancora di più le risorse del dispositivo mobile in uso, andando ben oltre il limite del controllare le dimensioni dello schermo e qualche sensore o attuatore fisico. In questo caso si può parlare di Progressive Web App.

Come istanziare una classe secondo il pattern di programmazione Decorator, una Progressive Web App (PWA) non è altro che un semplice sito web mobile first, circondato da un’armatura piena di ulteriori funzionalità per sfruttare al 100% (compatibilità permettendo) il dispositivo in uso, andando ad inserire quello che era partito come un semplice sito web, tra le applicazioni installate. Un altro grosso passo avanti per le PWA rispetto ai normali siti web non riguarda strettamente la tecnologia in uso, ma soprattutto l’usabilità. Inserire un collegamento diretto alla nostra PWA tramite un’icona, in mezzo alle altre app, non è semplicemente un fattore grafico. Accedere ad un sito web significa dover digitare un indirizzo nella barra dell’URL e farlo con la tastiera virtuale del telefono può risultare molto scomodo e macchinoso, mentre raggiungere il servizio con un click (o meglio, un tap) invoglia molto di più l’utilizzatore!
Se quindi le PWA non sono altro che siti web che vanno a confondersi tra le applicazioni installate nel dispositivo, perchè puntare direttamente ad un’applicazione standard? Le differenze in realtà sono parecchie e significative tra PWA e applicazione nativa:

• Funziona anche offline. Tramite un meccanismo chiamato service worker (che verrà approfondito più avanti) le PWA hanno la possibilità di fornire contenuti anche se il dispositivo non è al momento connesso alla rete, grazie ad una intelligente gestione della cache.
• Codice sorgente unico da mantenere. Purtroppo esistono diversi sitemi operativi in dotazione per i vari dispositivi mobile, con architetture completamente diverse ed incompatibili. Oltre ad i più famosi Android ed iOS ne esistono molti altri, nativi di alcuni brand di smartphone, che rendono ancora più complicata la programmazione di applicazioni 100% native. Grazie alle PWA è possibile scrivere un unico sorgente unico che verrà poi interptetato dal browser, permettendo quindi di funzionare nella stragrande maggioranza delle situazioni senza nessun problema. Compatibilità a parte, ma anche questo discorso verrà approfondito più avanti.
• Si comporta come un’app, ma è costruita con tecnologie web. Non è necessario utilizzare particolari linguaggi di programmazione diversi da quelli già utilizzati nell’ambito web. Sarà quindi possibile costruire layout in HTML ed animarlo con i più moderni SASS e Typescript.

Un elemento in comune tra PWA ed applicazioni native è il file manifest. In generale un file di questo tipo, presnte per tutte le applicazioni in tutti i sistemi operativi, serve a dichiarare in anticipo alcune caratteristiche dell’app, fondamentali per il funzionamento della stessa. Solitamente i manifest vengono scritti in JSON o XML.