responsive

Responsive

Home / Esempi (Responsive - sito a scopo didattico)

Nel 2019 e` fondamentale che un sito Internet sia responsive, ossia possa essere visualizzato da diversi dispositivi. a maggior ragione che - stando alle statistiche - la visualizzazione di portali web via tablet e soprattutto smartphone ha superato quella da pc.

Ma come va costruito un sito con queste caratteristiche?

Qualunque sia il livello del progetto, è importante decidere sin dal principio quale approccio si desideri utilizzare tra i due che seguono:
- content first (prima i contenuti): in questo caso la gestione dei contenuti deve essere fulcro centrale nell’affrontare un progetto.
I contenuti non sono solamente le immagini, i testi e gli elementi multimediali che costituiscono la base del sito, ma anche il logo, il menu di navigazione principale, le sezioni secondarie, i moduli per la ricerca sul sito, le inserzioni pubblicitarie, etc.
Fondamentale è porsi le domande giuste in fatto di strategia per la gestione dei contenuti, passando dal “cosa” (quali contenuti) al “come” (tecniche e modalità di presentazione degli stessi).

- mobile first (prima il mobile): secondo questo approccio, nella progettazione del sito, è necessario partire dalla strutturazione dei contenuti per lo scher- mo limitato nelle dimensioni dei dispositivi mobili.
Non si parte, quindi, da un layout e da un set di funzionalità concepiti per il desktop per poi adattarli per il mobile. Al contrario, si parte dai limiti posti dai dispositivi mobili per concentrarsi al meglio sui contenuti essenziali, per poi arricchire il tutto sui dispositivi più capaci, man mano che aumentano le dimensioni dello schermo (ma anche la potenza dell’hardware).

Qualunque sia il punto di vista che si sceglie di seguire, è necessario definire anzitutto i breakpoints del sito attraverso le media queries, ossia i cosiddetti punti di rottura, che tendenzialmente sono per poter visualizzare correttamente il sito con smartphone, tablet e dekstop per pc.

Questo esempio (che si puo` vedere sia cliccando sul titolo Responsive, che sull'occhiolino dal titolo "in breve" dell'aside di destra) e` costruito sulla base di queste specifiche, e quindi:
- con un layout per tablet definito dalle regole css @media only screen and (min-width:768px) and (max-width:991px);
- con un layout per mobile, definito dalle regole css @media only screen and (max-width:480px) ,
oltre a quello per desktop per pc.

Infine, la galleria di immagini e` implementata con il Flexslider, uno slider Responsive basato sulla libreria jQuery e che puo` essere installato seguendo la procedura disponibile a questo link.

Il risultato finale del progetto lo puoi vedere a questo link.

termoidraulica

Termoidraulica

Home / Esempi (Termoidraulica - sito a scopo didattico)

Termoidraulica e` un sito realizzato come esercizio per un'ipotetica attivita` del settore che si compone delle pagine servizi, assistenza e contatti (oltre all'home, con possibilita` di linkare le pagine assistenza e contatti anche dalle immagini e descrizioni che ci sono li`), e con l'icona social di Facebook in caso l'attivita` possa avere una pagina Facebook dove dare informazioni ai propri clienti.

Il sito e` pienamente responsive e puo` quindi essere visionato da dispositivi mobile, con variazione del menu` che si presenta col classico burger al passaggio alle visualizzazioni per tablet o smartphone.

Tutte le immagini sono state "captate" e scaricate dal sito pixabay.com che, come alternativa a pexels, unsplash o altri analoghi consente di reperire risorse di ottima risoluzione liberamente scaricabili e riutilizzabili anche a scopi commerciali (in caso bisogna comunque leggere sempre la didascalia, per sicurezza che l'autore lo consenta).

Oltre all'effetto di animazione sul menu` in alto allo scroll della pagina (che si restringe, e cambia di colore diventando piu` chiaro e cambiano da bianco a nero i colori dei testi e l'icona Social) e` ben visibile l'animazione allo scroll dei vari box che e` ottenuta grazie all'implementazione di wow.js in aggiunta alla libreria animate.js.

Tutte le immagini sono state ottimizzate con TinyPNG (che permette tale operazione senza perderne in qualita`), cosi` da non creare intoppi o comunque ritardi nei caricamenti delle pagine.

In caso di necessita` posso tranquillamente adattare il sito ad altre attivita` andando a variare le varie descrizioni, a sostituire le immagini con altre e a modificare tutti i riferimenti, i contatti, e il link al canale Social (eventualmente anche sostituendo l'icona di Facebook con quella di un altro, che potrebbe essere per esempio Instagram).

PS: la favicon del boiler, visibile in alto dove c'e` il titolo della pagina sopra la barra orizzontale di navigazione del browser, e` presa da flaticon.

Il risultato finale del progetto lo puoi vedere a questo link.