Se hai iniziato a studiare il linguaggio HTML e vuoi capire come creare un sito Web mobile; in questo articolo introduttivo al “Responsive Web Design” è espresso il concetto di griglia dinamica, importantissimo per capire la struttura di un sito per smartphone e Tablet. La compatibilità “Cross Browser” dei dispositivi moderni per la navigazione internet; è possibile grazie ai nuovi standard per il Web HTML5 CSS3 Web. I vantaggi di un sito strutturato per contenuti che si adattano automaticamente allo schermo del dispositivo, ad effetto (molla) per intenderci; sono apprezzati specialmente dagli utenti che lo visitano.
Perché un sito mobile?
Il come e gli strumenti li vedremo tra poco ma il perché dell’importanza di creare un sito Web mobile; basta guardare gli indicatori attuali che stanno alla base del successo di un sito Web. Stando alle stime degli ultimi anni; ormai gli utenti che si connettono ad internet con un dispositivo mobile sono la maggioranza. Impostare un progetto per la creazione di un sito escludendo la parte mobile danneggia non solo la percentuale di possibili utenti ma anche il posizionamento.
Responsive Web Design
Google e gli altri motori di ricerca utilizzano algoritmi con criteri d’ indicizzazione che tutelano l’ utente; cercando di offrire contenuti di qualità; questo porta a privilegiare nei risultati di ricerca i siti che coprono maggiormente alcuni parametri tra cui anche il Responsive Web Design.
Come creare un sito Web mobile
A questo punto se si hanno almeno le conoscenze minime in HTML e CSS diventa facile intuire come si crea un sito Web mobile; quindi esaminiamo le due componenti su cui lavorare per impostare un sito con le tecniche di Responsive Web Design inserendo:
- le media query nei css che servono ad impostare le proprietà per differenti display con dimensioni diverse tra i dispositivi; come in questo esempio
body { background: white; @media screen and (min-width: 480px) { body { background: red; } }Con questo esempio dopo i 480 pixel lo sfondo della pagina diventa di colore rosso; puoi invertire i valori con la proprietà max-width (valore massimo) al posto di “min” che sta per minimo.
- la meta view port che va inserita tra i Tags di apertura e chiusura head per indicare al browser di scalare le pagine.
<meta name="viewport" content="width=device-width, initial-scale=1">
Nulla di più che l’approfondimento di questi due elementi per gestire le dimensioni sui più svariati device. Se hai letto questa guida per sviluppare siti responsivi e seguito i collegamenti che ho indicato, non ti resta altro che fare pratica.
Creare un sito Web in cinque minuti
Se ritieni che per te sia troppo impegnativo capire come creare un sito Web da zero ma non vuoi rinunciare ad averlo; sappi che puoi crearne un sito in cinque minuti nel vero senso della parola! Come? Senza elencarle tutte le soluzioni; pui creare il tuo sito in pochi clic su:
- Wix
- Blogger
- WordPress
- Altervista
Tutto ciò di cui hai bisogno per farlo è registrarti alla piattaforma. Il codice del tuo sito Web è scritto per te da sviluppatori di primo piano; quindi sei libero di dedicarti solo ai contenuti Web.