Il design responsive (in italiano responsivo), indica una tecnica di web design per la realizzazione di siti in grado di adattarsi graficamente in modo automatico al dispositivo con i quali vengono visualizzati (computer, tablet, smartphone, cellulari, web tv, ecc…), riducendo al minimo gli errori grafici. Per quale motivo un sito deve essere responsive? Scopriamolo insieme.
Il responsive web design è fondamentale
Pensiamo a quante apparecchiature ogni giorno accedono ad internet; tutte diversi, per tipologia e dimensione ed ognuna di loro usa una risoluzione diversa. Quindi si può immaginare quanti elementi devono essere presi in considerazione e quanti fattori influiscono sulla visualizzazione dei contenuti sul web. Inoltre, è necessario tenere conto anche delle caratteristiche dell’utente (quali: capacità cognitive, vista, difficoltà fisiche, e così via).
Caratteristiche di un sito responsivo
L’impaginazione grafica deve avere proporzioni fluide, quindi una struttura flessibile per le immagini; in particolare di estensione regolabile, per adattare l’impaginazione grafica all’ambiente nel quale il sito è visualizzato. I punti fondamentali sono questi:
- media queries: consentono alla pagina di usare diversi fogli di stile in base alle caratteristiche del dispositivo utilizzato.
- griglia flessibile: richiede che gli elementi siano dimensionati tramite unità relative come percentuali, e non con unità assolute come pixel o punti.
- immagini flessibili: devono poter essere visualizzate con dimensioni diverse, in modo da potersi adattare all’impaginazione evitando di sovrapporsi agli altri elementi.
Il risultato finale sarà quello che l’utente, da qualsiasi browser o dispositivo utilizzato, avrà il contenuto del sito sempre proporzionato. I caratteri saranno quindi differenti ma sempre leggibili e i contenuti sempre facilmente consultabili. Quindi il ridimensionamento, lo scorrimento e lo spostamento non influenzeranno in maniera gravosa sul modo di navigare sul web.
Il concetto di resolution breakpoint
La Resolution breakpoint (punti di interruzione della risoluzione), stabilisce le soglie alle quali modificare la presentazione grafica in funzione della larghezza del dispositivo. Un po’ il concetto matematico del “direttamente proporzionale”.
Le soglie, espresse in pixel, vengono così riconosciute.
- extra small device con risoluzione inferiore a 768 pixel
- small device con risoluzione fino a 992 pixel
- desktop con risoluzione inferiore a 1200 pixel
- large device con risoluzione superiore a 1200 pixel
Tali tipologie possono essere più genericamente ricondotte a quattro principali dispositivi:
- mobile: per cellulari
- narrow: per tablet
- normal: computer fisso o portatile
- wide: schermi di grandi dimensioni
Impaginazione grafica
Rilevazione del dispositivo e compatibilità con i browser
Un argomento di particolare interesse per il design responsivo è quello della compatibilità con i browser. Infatti non tutti riconoscono le istruzioni più utilizzate per il ridimensionamento fluido dei contenuti o supportano le tecnologie necessarie.
I browser dei primi cellulari non sono in grado di interpretare alcune funzioni, ed è pertanto più conveniente creare una impaginazione specificamente adatta alla visualizzazione su smartphone e computer, piuttosto che tentare una “degradazione graduale” per adattare un sito complesso e carico di immagini.
L’unica soluzione è affidarsi a template (temi grafici del sito), studiati per garantire il massimo della compatibilità con i browser e i dispositivi più diffusi per assicurare una fluidità di navigazione multi-adattiva.
Per quanto ci riguarda, abbiamo selezionato i migliori “template” presenti sul mercato, fornendo un servizio con stili moderni, design accattivanti, ambienti fluidi e risoluzioni adattive. Grazie alla nostra esperienza siamo in grado di evitare gli errori grafici e i relativi problemi di navigazione sui siti web. Per ricevere ulteriori delucidazioni, puoi contattarci nelle modalità sotto indicate.
Ricordo a tutti i lettori che, oltre a realizzare siti internet professionali, impartiamo lezioni private o di gruppo su:
- CMS WordPress; cosa è WordPress e come funziona, personalizzare il layout (l’aspetto grafico del tuo sito), gestire pagine ed articoli e commenti, installare temi e i plug-in ideali per le tue esigenze.
- Posizionamento sui motori di ricerca; tecniche SEO e SEA, definire correttamente l’attività SEO o SEA, capire preventivamente se un sito web è indicizzabile, fare una corretta analisi preliminare (SEO Audit), padroneggiare le tecniche del posizionamento organico, analisi e scelta delle Keyword, ottimizzazione dei contenuti di un sito web, convertire le visualizzazioni in vendite.
Tutte le competenze di un web manager di successo saranno a tua completa disposizione grazie alle lezioni private (o di gruppo) impartite.
—
É vietata la copia e la riproduzione dei contenuti di questo articolo.
É vietata la redistribuzione e la pubblicazione dei contenuti non autorizzata espressamente dall’autore.
Copyright © Antonino Mariano · all rights reserved.
Vuoi realizzare un sito web?
Chiedi info