Quando si progetta il proprio sito Web, è importante assicurarsi che abbia un bell'aspetto su qualsiasi dispositivo, indipendentemente dalle dimensioni e dalla forma dello schermo. I siti Web responsive sono progettati per avere un bell'aspetto su tutti i tipi di dispositivi moderni come computer, telefoni, tablet, TV, dispositivi indossabili e persino schermi per auto. Per rendere reattivo un sito web, dovrai modificare il tuo codice CSS e HTML per ridimensionare automaticamente i suoi elementi in base a condizioni specifiche. Questo articolo spiega come pianificare e implementare un web design reattivo di base.
Passi
Metodo 1 di 3: Pianificazione del design reattivo
Passaggio 1. Scopri come il tuo pubblico utilizza il tuo sito web
Al giorno d'oggi, la maggior parte delle persone che navigano sul Web lo fanno da telefoni cellulari e tablet. Affinché un sito sia reattivo, devi assicurarti che venga visualizzato correttamente indipendentemente da dove viene visualizzato. Se tempo e denaro sono essenziali, concentrati sui tipi di dispositivi più popolari tra i tuoi utenti (se queste informazioni sono disponibili) e su come utilizzano il tuo sito. Usando il tuo software di analisi o qualche altra forma di ricerca, scopri:
- Quali tipi di dispositivi utilizzano più spesso per visualizzare il sito Web, prestando particolare attenzione alle marche di telefoni cellulari/tablet/computer e alle dimensioni dello schermo/risoluzione.
- Quali browser sono più popolari tra i tuoi utenti. Per quanto riguarda le statistiche globali, Google Chrome è il browser Web più popolare al mondo, ma Safari è al secondo posto.
- Come i tuoi visitatori utilizzano il tuo sito web, ad esempio quanto tempo trascorrono a visualizzarlo, dove lo visualizzano e quali contenuti sono più popolari. Questo può aiutarti a determinare quale tipo di contenuto è importante includere e quali possono essere omessi.
Passaggio 2. Progetta layout diversi per dispositivi diversi
Puoi utilizzare una combinazione di CSS e JavaScript per rilevare il dispositivo di un utente, nonché le sue capacità (se supporta Java, Flash, ecc.) e visualizzare di conseguenza una versione particolare del tuo sito. Le CSS Media Queries sono particolarmente utili per determinare la dimensione/risoluzione del dispositivo.
Passaggio 3. Considera i diversi tipi di interazioni
Il tuo visitatore potrebbe interagire con il tuo sito web utilizzando un mouse, una tastiera, un touchscreen o persino uno screen reader per le persone ipovedenti. Considerando questo, il tuo sito web dovrebbe rispondere ai clic del mouse, ai tasti della tastiera (Tab, Invio, Invio, ecc.) e al tocco delle dita sullo schermo.
Gli effetti al passaggio del mouse non funzionano con nulla tranne che con il mouse. Invece di utilizzare questi effetti, puoi richiedere al visitatore di fare clic su un pulsante o un'icona per visualizzare tutto ciò che è stato precedentemente visualizzato al passaggio del mouse
Passaggio 4. Considera l'utilizzo di un sistema di gestione dei contenuti (CMS)
Un modo semplice per garantire che il design del tuo sito sia reattivo è utilizzare un CMS con un tema reattivo predefinito. L'utilizzo di un CMS come Joomla, Drupal o Wordpress ti consente di assicurarti che il tuo sito Web abbia un bell'aspetto su tutti i dispositivi senza dover codificare da solo gli elementi reattivi. Verifica con il tuo provider di web hosting per vedere quali strumenti CMS sono disponibili con il tuo servizio.
Passaggio 5. Utilizza gli strumenti online per testare il tuo sito web
Ora che il web design reattivo è diventato sempre più popolare, ci sono una varietà di strumenti gratuiti che puoi utilizzare per testare il tuo sito web. Se hai già codificato il tuo sito web, usa questi strumenti per testare come appare in varie condizioni in modo da sapere dove è necessario migliorare la reattività:
- Test di ottimizzazione mobile di Google: ti consente di sapere se il tuo sito funziona bene sui dispositivi mobili come sugli schermi dei computer.
- resizeMyBrowser: ti consente di visualizzare il tuo sito in diverse risoluzioni.
- Responsabile: visualizza il tuo sito su schermi di dispositivi diversi in layout diversi (lateralmente o con il lato destro in alto).
Metodo 2 di 3: rendere il layout di pagina reattivo
Passaggio 1. Considera un framework di fogli di stile reattivo gratuito
Un framework è un insieme pre-scritto di HTML, CSS e/o JavaScript che puoi utilizzare come scheletro per il tuo sito. I framework sono tutti testati e ottimizzati per funzionare con tutti i browser, quindi tutto ciò che devi fare è inserire i tuoi contenuti, aggiungere i tuoi media e le tue preferenze di colore e pubblicare il tuo sito. Alcuni framework popolari sono:
- Bootstrap
- Scheletro
- Fondazione
Passaggio 2. Imposta il viewport con un meta tag
Se non stai utilizzando un framework, ti consigliamo di iniziare con l'aspetto più importante della codifica di un sito Web reattivo: il Viewport. Il viewport è la parte del sito web che è visibile all'utente. La chiave per visualizzare correttamente il tuo sito indipendentemente dalle dimensioni dello schermo è ridimensionare le dimensioni dell'area visibile nel tag META. Per fare ciò, includi questo tag nella parte superiore di ogni pagina del sito:
Passaggio 3. Specificare la dimensione del testo in relazione alla finestra
Una volta impostata la visualizzazione, il testo sulla pagina verrà ridimensionato per adattarsi allo schermo. Tuttavia, i caratteri potrebbero essere visualizzati troppo grandi o troppo piccoli se le loro dimensioni non sono specificate in relazione alla finestra. Puoi farlo definendo la dimensione del carattere come una percentuale specifica della finestra con l'unità vw. Questo esempio dice alle intestazioni H1 di essere visualizzate al 10% della larghezza del viewport, indipendentemente dalle sue dimensioni:
wikiHow
Passaggio 4. Utilizzare le query multimediali per mostrare stili diversi per le diverse dimensioni dello schermo
Le query multimediali consentono di scegliere se visualizzare determinati elementi CSS a seconda delle dimensioni dello schermo. Puoi specificare le specifiche della tua media query nel tuo file CSS. In questo esempio, il colore di sfondo del corpo diventerà rosso se la dimensione dello schermo dell'utente è di 480 px o superiore:
wikiHow
@media screen e (min-width: 480px) { body { background-color: aqua; } }
Metodo 3 di 3: rendere le immagini reattive
Passaggio 1. Utilizzare la proprietà larghezza CSS per ridimensionare le immagini
Invece di impostare la larghezza dell'immagine su una quantità specifica di pixel (ad es. 500 px), utilizzare una percentuale (ad es. 100%) in modo che l'immagine guardi alla larghezza del genitore e si regoli di conseguenza. L'impostazione della larghezza di un'immagine al 100% forza l'ingrandimento e la riduzione dell'immagine a seconda delle dimensioni dello schermo del visualizzatore. Per farlo in linea:
Passaggio 2. Utilizzare la proprietà larghezza massima per limitare il ridimensionamento delle dimensioni effettive dell'immagine
Se utilizzi la proprietà width nel passaggio precedente per ridimensionare un'immagine al 100%, l'immagine si ingrandirà o si ridurrà per adattarsi al 100% del suo contenitore, indipendentemente dalle dimensioni. Ciò significa che se l'immagine è sul lato più piccolo, verrà ridimensionata in dimensioni maggiori rispetto alle dimensioni originali e avrà un aspetto di qualità inferiore. Per evitare che ciò accada, utilizzare la larghezza massima per impostare la dimensione massima di ridimensionamento dell'immagine al 100% (la sua dimensione effettiva). Ecco come:
Passaggio 3. Utilizzare l'elemento immagine HTML per visualizzare immagini diverse su schermi di dimensioni diverse
Se desideri creare immagini di dimensioni personalizzate da visualizzare su schermi di dimensioni diverse, puoi specificare quali foto visualizzare nel codice HTML. Crea le immagini di dimensioni diverse, quindi usa questo codice come esempio per specificare quale immagine utilizzare su schermi di larghezza 600px e 1500px:
