Esempio di impostazione di un sito web responsive - Layout 1 o 2 colonne
- Dettagli
- Pubblicato Sabato, 31 Ottobre 2020 12:09
- Visite: 4455
Esempio di impostazione di un sito web responsive con codice HTML, CSS e JQuery
Le pagine Web possono essere visualizzate utilizzando molti dispositivi diversi: dai pc desktop ai tablet, dagli smartphone agli schermi interattivi di grandi dimensioni. Per questo motivo, la regola d'oro del web designer è quella di realizzare pagine web responsive, cioè pagine che si adattano automaticamente alla grandezza dello schermo del dispositivo e risultano funzionali, facili da usare e di aspetto gradevole indipendentemente dal dispositivo utilizzato.
Un responsive design si ottiene sostanzialmente attraverso codice HTML e CSS e consiste nell'ingrandire, rimpicciolire, nascondere e spostare i contenuti per adattarli alle dimensioni dello schermo. Nella realizzazione di siti web e come base per lo sviluppo della grafica, si utilizzano quasi sempre dei template responsive, ovvero dei modelli che hanno lo scopo di impaginare in modo fluido e dinamico i contenuti di una pagina web. Inoltre molti degli strumenti utilizzati dagli sviluppatori web, quali ad esempio Bootstrap e Skeleton, permettono di creare facilmente siti web responsive e sono spesso improntati alla strategia "Mobile first" che, come suggerisce il nome, significa partire dal design per i dispositivi più piccoli, con maggiori criticità e restrizioni, ed espanderlo successivamente a tablet e pc-desktop.
Del sito qui proposto, chiaramente di pura fantasia e che riprende il progetto GigaWebIIIBI realizzato in una classe terza informatica dell'ITIS Alessandrini di Teramo, sono state sviluppate due pagine: la Home page con un layout a due colonne, una per i contenuti (colonna-sx) e l'altra a destra (colonna-dx) per box, widget, link ecc., e la pagina "Che facciamo" con una sola colonna centrale (colonna-cn). Quando si utilizza un dipositivo mobile, uno smartphone o un piccolo tablet, viene disabilitato il menù tadizionale e viene abilitato il menù "smartmenu" che si apre e si chiude (grazie ad un piccolo uno script JQuery) cliccando sulla classica icona con 3 barre orizzontali.
La grafica è essenziale e codice HTML e costrutti CSS sono volutamente semplici e didattici. Gli studenti più motivati, una volta acquisite le competenze per impostare correttamente un sito web responsive, potranno modificare le impostazioni tipografiche o aggiungere gli effetti grafici e di animazione desiderati. Sicuramente saranno in grado di adoperare al meglio i tanti template e framework per il responsive design, disponibili sul web e generalmente freeware ed open-source.