Un portale di tutto rispetto con Design Responsivo.

07 May 2019 | M.A.D.R.

Creare un sito con design resposnivo, elegante e facile da implementare.

In passato la creazione di un sito web era notevolmente più semplice rispetto ad oggi, in quanto molte tecniche erano in fase embrionale; una di queste approdata intorno al 2010 è l’adeguamento del portale con implementazione della logica Design Responsivo, ossia la possibilità di adeguamento del nostro sistema ai diversi dispositivi mobili.

Le cose oggi si complicano, diventa sempre più difficile identificare la corretta strada da intraprendere per usufruire delle molteplici features messe a disposizione da “mamma google", mamma che con occhio vigile detta le regole per il web. Nell’articolo “Framework UI a confronto. Chi vince la sfida" ho parlato di alcuni Kit pronti all’uso messi a disposizione degli sviluppatori per facilitare la creazione di portali, oggi prenderemo come esempio il più noto ed utilizzato Bootstrap.

La Filosofia

Bootstrap come tutti sappiamo significa non solo facilità nello scrivere pagine web, ma anche ad avere a disposizione una serie di utility atte a facilitare il compito, di chi come me, progetta e implementa le strutture adeguate per la visualizzazione di un portale, con filosofia “Mobile First" ossia creiamo un layout partendo prima dai dispositivi mobili per poi arrivare ai dispositivi desktop.

Le Classi CSS

Alcuni criticano la pesantezza di bootstrap, ma ritengo opportuno specificare un paio di questioni:

  1. É gratuito
  2. Pronto all’uso
  3. Ha componenti di terze parti per ogni esigenza
  4. Ha uno sviluppo costante nel tempo, con rilasci regolari
  5. Ha imposto una sorta di standard di scrittutra
  6. Le ultime versioni sono ottimizzate per i dispositivi mobili (anche le versioni vecchie sono ottimizzate, ma con le nuove hanno riscritto un pò il tutto ottimizzandolo ancora di più).
  7. Supporto assicurato da qualsiasi community

Detto questo parliamo di come sono gestite le classi (CSS) di questo framework: naturalmente in prima battuta avremo i dispositivi mobili (col-xs-), successivamente i tablet (col-sm- & col-md-) ed infine i desktop  (col-md- & col-lg).

Cosa significano queste sigle: Bootstrap individua dei break point attraverso le classi css con “xs, sm, md, lg" che rispettivamente sono :

  1. Minore di 768px (xs)
  2. Maggiore di 768px (sm)
  3. Maggiore di 992 px (md)
  4. Maggiore di 1200px (lg)

Effettivamente ci permette di eseguire diversi rendering di una pagina in base alle dimensioni del dispositivo senza dover scrivere duplice codice, questo comporta una riduzione dei tempi di sviluppo, e sicuramente un maggiore controllo su quelle che sono le classi standard ed ottimizzate per il WEB.

Mobile First

Nella progettazione di questa nuova filosofia d’approccio, si mettono in risalto solo gli aspetti centrali della pagina che si sta costruendo, evitando il caricamento di contenuto inutile e soprattutto non ottimizzato, un classico esempio di una griglia di bootstrap è la seguente:

Come potete notare nella colonna centrale è stato definita prima la dimensione xs e successivamente la dimensione md, in quanto i fogli di stile del nostro framework seguono esattamente questa logica, prima le dimensioni più piccole, questo comporta un vantaggio fondamentale, il caricamento ed il rendering quasi immediato della pagina evitando il classico warning Above The Fold.

I reali vantaggi di questo approccio:

  • É limitato all’essenziale
  • Programmazione unificata tra desktop e mobile
  • Facilità di scrittura
  • Riduzione di scrittura di codice
  • Pagine abbastanza performanti e idonee alle nuove tecnologie

Quando riusciamo a capire se abbiamo fatto un buon lavoro?

Prima di tutto dobbiamo essere in linea con questi postulati:

  1. I contenuti sono velocemente intuibili
  2. I contenuti sono responsive e quindi anche facilmente leggibili
  3. Ha un tempo di caricamento breve
  4. I link sono leggibili e cliccabili con facilità

Dopo aver testato la nostra pagina web, potremo andare a verificare tramite Google, il quale mette a disposizione degli utenti molti tools tra cui il Test di Ottimizzazione di Pagine Web (qui), dove possiamo testare le nostre pagine ed apportare modifiche strutturali in base alle specifiche segnalate da google.

Buon Lavoro a tutti.

Soluzioni complete per ogni esigenza