Ti sei chiesto: "Che cos'è il responsive web design?" Il responsive web design è un approccio con cui un designer crea una pagina web che "risponde a" o si ridimensiona a seconda del tipo di dispositivo che viene visualizzato. Potrebbe trattarsi di un monitor per computer desktop di grandi dimensioni, un laptop o dispositivi con schermi piccoli come smartphone e tablet.
Il responsive Web design è diventato uno strumento essenziale per chiunque abbia una presenza digitale. Con la crescita di smartphone, tablet e altri dispositivi di mobile computing, sempre più persone utilizzano schermi più piccoli per visualizzare le pagine web.
$config[code] not foundQuesti siti web devono considerare anche l'indice mobile-first appena annunciato da Google nell'aprile 2018. Mentre sempre più piccole imprese aumentano la loro presenza mobile, il loro sito Web, eCommerce, la pagina Google Business, le pagine dei social media e altre risorse devono essere facilmente accessibili a tutti dispositivi.
Cos'è il responsive Web Design?
Lo scopo del design reattivo è quello di avere un sito, ma con diversi elementi che rispondono in modo diverso se visualizzati su dispositivi di dimensioni diverse.
Prendiamo un sito web "fisso" tradizionale. Ad esempio, se visualizzato su un computer desktop, il sito Web potrebbe mostrare tre colonne. Ma quando visualizzi lo stesso layout su un tablet più piccolo, potrebbe costringerti a scorrere orizzontalmente, cosa che agli utenti non piace. O gli elementi potrebbero essere nascosti alla vista o apparire distorti. L'impatto è anche complicato dal fatto che molte tavolette possono essere visualizzate con orientamento verticale o ruotate lateralmente per la visualizzazione orizzontale.
Su un piccolo schermo dello smartphone, i siti Web possono essere ancora più difficili da vedere. Le immagini di grandi dimensioni possono "rompere" il layout. I siti possono essere lenti da caricare sugli smartphone se sono pesanti.
Tuttavia, se un sito utilizza un design reattivo, la versione tablet potrebbe adattarsi automaticamente per visualizzare solo due colonne. In questo modo, il contenuto è leggibile e facile da navigare. Su uno smartphone, il contenuto potrebbe apparire come una singola colonna, forse impilata verticalmente. O forse l'utente avrebbe la possibilità di scorrere verso il basso per visualizzare altre colonne. Le immagini verranno ridimensionate invece di distorcere il layout o di essere tagliati.
Il punto è: con il responsive design, il sito web si regola automaticamente in base al dispositivo in cui lo vede.
Come funziona il responsive web design?
I siti reattivi usano griglie fluide.Tutti gli elementi della pagina vengono ridimensionati in proporzione, anziché in pixel. Quindi, se hai tre colonne, non diresti esattamente quanto dovrebbero essere ampie, ma piuttosto quanto dovrebbero essere ampie rispetto alle altre colonne. La colonna 1 dovrebbe occupare metà pagina, la colonna 2 dovrebbe occupare il 30% e la colonna 3 dovrebbe occupare il 20%, ad esempio.
Anche i media come le immagini vengono ridimensionati relativamente. In questo modo un'immagine può rimanere all'interno della sua colonna o elemento di design relativo.
Problemi correlati
Mouse v. Touch: La progettazione di dispositivi mobili solleva anche il problema del mouse contro il tocco. Sui computer desktop, l'utente normalmente ha un mouse per navigare e selezionare gli elementi. Su uno smartphone o un tablet, l'utente utilizza principalmente le dita e tocca lo schermo. Quello che può sembrare facile da selezionare con un mouse, può essere difficile da selezionare con un dito su un punto minuscolo su uno schermo. Il web designer deve prendere in considerazione il "tocco".
Grafica e velocità di download: Inoltre, c'è il problema della grafica, degli annunci e della velocità di download. Sui dispositivi mobili, potrebbe essere consigliabile visualizzare un numero minore di immagini rispetto alle visualizzazioni desktop, in modo che un sito non richieda per sempre il caricamento su uno smartphone. Potrebbe essere necessario sostituire le dimensioni di annunci più grandi con annunci più piccoli.
App e "versioni mobili": In passato, potresti aver pensato di creare un'app per il tuo sito web, ad esempio un'app per iPad o un'app per Android. Oppure avresti una versione mobile specifica per BlackBerry.
Ma con così tanti dispositivi diversi oggi, è sempre più difficile creare app e versioni diverse per ogni dispositivo e piattaforma operativa.
Perché le piccole imprese devono passare a un responsive web design
Altre persone stanno usando i dispositivi mobili. Un recente studio del Pew Il 77% degli americani possiede ora gli smartphone nel 2018, che rappresentano solo il 35% del primo sondaggio sulla proprietà degli smartphone effettuato dal Pew Research Center nel 2011.
Controlla il tuo traffico e potresti rimanere scioccato dal numero di visitatori che raggiungono il tuo sito web tramite dispositivi mobili. (Nel tuo Google Analytics, seleziona "Pubblico" sul lato sinistro, quindi "Cellulare" per vedere quale percentuale di traffico proviene da dispositivi mobili. Puoi anche eseguire il drill down per vedere quali dispositivi stanno inviando il traffico.)
I modelli di progettazione reattivi sono ovunque ora, per l'acquisto. Se, ad esempio, disponi di un sito WordPress, puoi visitare una galleria di modelli attendibili come ThemeForest e cercare "temi reattivi per WordPress". Acquistane uno per meno di $ 50. Il tuo sviluppatore Web può quindi personalizzarlo per il tuo logo e il tuo marchio.
Nota del redattore: qui a Small Business Trends, stiamo lavorando a un nuovo design reattivo. Non dovresti?
Foto tramite Shutterstock
Altro in: Content Marketing, What Is 95 Comments ▼
