fbpx

IL RESPONSIVE DESIGN

responsive-layout-pc-tablet-device-andrea pasciucco, web designer, social media manager, seo consulting - roma, lazio

Con il termine “responsive design” si attribuisce ad un sito la caratteristica di adattare il proprio contenuto quali oggetti, testo, layout, banner, immagini, ecc. al dispositivo che in quel momento lo sta visualizzando. Un sito Internet è raggiungibile da qualsiasi piattaforma in modo diretto, conoscendo l’indirizzo web oppure tramite una semplice ricerca su Google o simili e per questo il suo contenuto deve essere visualizzabile con informazioni ordinate e precise. Desktop, tablet, smartphone sono i dispositivi principali su cui un sito web può essere visionato.

COM’E’ FATTO UN SITO WEB?

La creazione di un sito web che in modo automatico si adatta al dispositivo che lo sta visualizzando non è affatto semplice. Partiamo dall’inizio. Un sito web è rappresentato da un codice HTML (definito come HyperText Markup LanguageScopri di più) che specifica quali sono gli “oggetti” che il browser dovrà visualizzare. Questo tipo di linguaggio è definito come “linguaggio di marcatura”, composto quindi da vari tag che specificano un oggetto. Ad esempio il tag <img></img> indica che in quella determinata sezione ci sarà un immagine da visualizzare. Ogni oggetto che comprende il sito ha delle proprietà e sono queste che determinano una differente visualizzazione del contenuto di una pagina a seconda del dispositivo. Immaginate quindi un tag come un abito e le sue proprietà come le diverse taglie disponibili. Più taglie sono presenti, maggiori saranno i clienti che si riuscirà a soddisfare! Queste proprietà sono definite all’interno di un codice CSS (definito come Cascading Style SheetsScopri di più) e vengono utilizzate per formattare un sito web. Nel CSS infatti sono specificati attributi come la dimensione di un immagine, la posizione relativa, la grandezza di un testo, la disposizione di colonne o righe e molto altro. Più queste proprietà sono dettagliate e maggiormente una pagina web risulterà ottimizzata per la visualizzazione.

COME SI CREA UN SITO RESPONSIVE DESIGN?

Per rispondere a questa domanda, prendiamo come esempio la seguente immagine.

responsive-design-explain-graph-andrea pasciucco, web designer, social media manager, seo consulting - roma, lazio

Questa mostra una pagina web che in automatico viene adattata allo schermo che la sta visualizzando. Un desktop avrà più spazio orizzontale e quindi le varie colonne che compongono il sito web potranno essere visualizzate una di fianco all’altra. Con la riduzione dello spazio di visualizzazione, le informazioni vengono sempre più scalate in modo tale da renderle chiare e visibili. Nella visualizzazione mobile ad esempio le colonne vengono messe in scorrimento verticale in modo tale da sfruttare la grandezza orizzontale per rendere maggiormente leggibile il contenuto. Il modo base con cui un browser riconosce come visualizzare un sito web è tramite il seguente metatag da inserire all’interno della pagina che si sta creando:

<meta name="viewport" content="width=device-width">

Questo tag fondamentale specifica al browser che dovrà adattare il contenuto della pagina web a seconda della dimensione dello schermo che ha richiesto la risorsa. Le informazioni su “come” adattare i vari elementi, sono sempre contenuti nel codice HTML e CSS. Tutto questo basta? Ovviamente no e la procedura sopra descritta risulta, ad oggi, essere molto complessa e laboriosa considerando i vari parametri da dover configurare e le scelte stilistiche da prendere.

IL RESPONSIVE DESIGN OGGI

Negli ultimi anni la proprietà che ha più acquisito importanza è proprio quella del responsive. Ogni sito, che non gestisce il responsive, taglia fuori una buona parte di utenti che quotidianamente utilizzano dispositivi come smartphone e tablet per navigare sul web. Ecco perchè ad oggi, esistono numerosi strumenti per rendere un sito responsive e non dover per forza scrivere “a mano” l’interno codice HTML di un sito web. Vediamo i principali.

VUOI SAPERNE DI PIU’? CONTATTAMI

VUOI SAPERNE DI PIU’? CONTATTAMI

TI E’ PIACIUTO L’ARTICOLO?
CONDIVIDILO!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.