Come realizzare un sito responsive

Come realizzare un sito responsive

Un sito web efficace oggi deve essere mobile friendly, per offrire agli utenti una esperienza di navigazione soddisfacente. Scopriamo di più sul responsive design.

 

Oggi è impossibile creare un sito web senza un’attenta riflessione sul design responsive. Ovvero su quelle tecniche che ti permettono di rendere il tuo progetto web adatto a qualsiasi schermo.

Pensa alle prime volte che hai navigato con uno smartphone: qual era l’operazione più noiosa? Ad esempio zoomare con indice e pollice lo schermo per leggere il testo, manovra che portava i margini fuori dal monitor. Risultato? Trenta minuti per leggere pochi paragrafi. E scoprire altre risorse del sito? I link della navigazione erano impossibili da trovare e cliccare.

Sembra un brutto sogno, vero? O la descrizione di un passato lontano. In realtà esistono ancora molti siti web che non rispondono alle esigenze dei vari dispositivi.
Google ha adottato severi provvedimenti per chi continua a rifiutare un approccio mobile friendly. Ecco un passaggio significativo del comunicato stampa pubblicato nel Febbraio 2015:

Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results.

Nelle serp viene indicata, con una stringa di testo, la natura mobile friendly del risultato. E saranno preferiti (a parità di altri elementi) i siti attenti alle esigenze dei vari dispositivi.

Per rientrare in questa categoria il primo passo da muovere è, ovviamente, avere un sito responsive.

Cosa è il design responsive?

Come realizzare un sito responsive

Il design responsive è un tecnica di web design che ha un obiettivo ben preciso: ridurre al minimo le azioni dell’utente per adattare i contenuti tra i vari dispositivi. Quasi inutile ricordare che la penetrazione degli smartphone e dei tablet in Italia è sempre più incisiva: le persone si aspettano di poter leggere articoli sul telefonino, ma non solo. Vogliono guardare video, condividere post, prenotare servizi e verificare orari.

Il design responsive adatta un prodotto alle abitudini del pubblico. Tutto questo avviene grazie alle immagini flessibili, alle media query e al metatag viewport inserito nell’head del documento per indicare al browser le dimensioni e le proporzioni della pagina rispetto allo schermo.

Questi elementi permettono alla pagina web di usare diversi fogli di stile. In particolar modo, come suggerisce w3schools.com”It uses the @mediarule to include a block of CSS properties only if a certain condition is true”.

Il responsive design è ormai diventato uno standard: per creare un sito web devi conoscere il codice HTML, ma devi anche avere ben chiara la strada da percorrere.

Come realizzare un sito web responsive

Come realizzare un sito responsive

Tutte queste indicazioni (insieme a quelle indicate nella guida ufficiale di Google) sono fondamentali per i web designer che vogliono realizzare un sito web responsive. O vogliono modificare dei progetti già esistenti. Ma nella maggior parte dei casi il sito web si basa su un CMS, un content management system, che permette di gestire i contenuti. E ottimizzare il design.

Il CMS prevede l’uso dei template, soluzioni grafiche che permettono al sito o al blog di rispettare colori e stili. Esistono temi per creare magazine online, blog, siti monopagina. Quasi tutti sono responsive (altrimenti sarebbero tagliati fuori dal mercato) e per ottenere i vantaggi di un sito adatto al mobile devi seguire queste semplici istruzioni:

  • Vai nel catalogo template.
  • Cerca tutti i template con la caratteristica “responsive”.
  • Scegli quello adatto al tuo progetto.
  • Installa il template sul tuo sito.

Non devi fare altro. Questo vale per la maggior parte dei CMS come WordPress, Joomla, Drupal, Magento e Prestashop. Oggi tutti i temi hanno questo obiettivo, danno la possibilità di scegliere un template responsive. Per approfondire ogni singolo CMS puoi dare uno sguardo ai tutorial pubblicati sempre da Google.

Oltre il design responsive: i contenuti

Come realizzare un sito responsive

Un aspetto interessante della digital strategy: avere un sito responsive è importante, ma non basta. Devi strutturare il calendario editoriale intorno all’abitudine degli utenti di leggere un articolo sul telefonino. Poi sul tablet e ancora sul computer.

I tuoi contenuti devono essere leggibili, ben organizzati in paragrafi e liste puntate. Devi eliminare tutto quello che non serve. Soprattutto quando lavori con i contenuti multimediali. Il web è sempre più aperto al visual, ma immagini e video devo essere utili. Devono trasmettere informazioni o emozioni. Inserire l’ennesima foto di bassa qualità, solo per spezzare il testo, è inutile. Rischi solo di interrompere le lettura.

Non basta installare plugin

Come realizzare un sito responsive

Oggi avere una formazione legata al mondo del web design è importante. Sembra facile creare dei siti responsive, vero? Devi seguire delle regole ben precise, e non devi lasciarti influenzare dalle prime impressioni: per trasformare il tuo diario personale basta poco, installi un tema responsive e sei in regola.

Ma per lavorare su un blog aziendale, o per trasformare la tua passione in un lavoro, hai bisogno di una formazione specifica. Una formazione capace di unire pratica e teoria.

Devi conoscere le sfumature delle tecniche che permettono a un sito web di adattarsi a tutti i dispositivi.

Allora, sei pronto per creare il tuo primo sito web responsive?


Se vuoi diventare un web designer e realizzare siti web efficaci, abbiamo il corso che fa per te. Clicca qui per scoprirne di più.