News

Web Design Responsive: come la grafica può rilanciare un’attività

Responsive è la parola chiave del webdesign all’avanguardia. E non stiamo parlando di una moda passeggera, ma di un punto chiave a livello di efficacia e navigabilità.

E’ sufficiente prestare attenzione a Google Analytics, sotto la voce Pubblico/Mobile per capire un concetto fondamentale: se il nostro sito non è responsive, tutta la fetta di visitatori oltre la voce “desktop” possiamo darla per persa.
Ma non lasciamoci prendere dallo sconforto, è sufficiente rivalutare il nostro sito web e procedere ad un responsive restyling.
Facciamo insieme il punto della situazione.

Il Web Design Responsive è fondamentale per non perdere traffico:

  1. Qual è il target delle web agency?
    Non tutti i siti web vengono penalizzati allo stesso modo da un layout fisso. Se abbiamo una tipologia di attività che – ad esempio – ha come core business l’acquisto d’impulso, allora possiamo stare sicuri che un layout responsive ben strutturato fa la differenza. Immaginate di fare acquisti su ebay dal vostro smartphone utilizzando la classica interfaccia desktop… comprereste molto poco!
  2. Prima il desktop o prima il mobile?
    Prima il mobile, of course! E’ come la stesura di un libro, prima si butta giù la traccia e successivamente si amplia.
    Nella progettazione di un sito webex novo“, dobbiamo prima pensarlo in piccolo. Questo non solo aiuta a fare un lavoro intenso di sintesi che porta a galla solo le informazioni più importanti, ma ci consente di migliorare la user experience evitando all’utente di sprecare tempo e byte nella visualizzazione di informazioni poco utili al contesto della navigazione mobile. E con questo introduco il prossimo punto.
  3. Cosa fa l’utente mentre visita il nostro sito web?
    È in bagno! Forse questa constatazione vi strapperà un sorriso, ma dà un’idea dei contesti ambientali del mobile surfing. Quando navigate con lo smartphone siete comodamente seduti alla scrivania? Dobbiamo immedesimarci nella situazione in cui si trova il cliente mentre visita il nostro sito web: in piedi durante il viaggio in autobus, con la ventiquattrore tra le caviglie, aggrappato con una mano per non cadere e il telefono nell’altra. Possiamo forse pensare che in un momento del genere lui sia ben disposto a trovarsi davanti un sito innavigabile?
  4. E quindi, come lo devo sviluppare questo sito responsive?
    Innanzitutto dobbiamo progettare accuratamente i vari breakpoint, cioè le dimensioni chiave che deve avere il nostro sito a seconda del dispositivo di riferimento.breakpoint
    All’interno di questo range dobbiamo inserire immagini e testi adatti all’area utilizzabile.
    Per esempio, se per un layout desktop a 1024px possiamo far corrispondere un’immagine da 800px e un testo di alcune centinaia di parole, la pagina corrispondente per un dispositivo in modalità portrait (verticale) dovrà comprendere un’immagine di massimo 320px (che quindi occuperà tutta la width dello schermo) seguita da un testo di poche righe.
    In questo caso possiamo utilizzare un tweakpoint per ridimensionare e riorganizzare gli elementi secondo la struttura di riferimento.
    Nel realizzare un sito responsive, dimentichiamo le dichiarazioni in pixel, d’ora in avanti si ragionerà in percentuali.
    Per esempio, se vogliamo distribuire tre immagini in 600px di spazio, non utilizzeremo tre blocchi da 200px l’uno, bensì tre blocchi con width:33,33%.
    Idem per il font. Se per il nostro sito desktop abbiamo abusato dei 12px, ora dobbiamo parlare in “em”, unità di misura che si adatta dinamicamente al dispositivo: utilizziamo la regola font-size:100% per il nostro body e font-size: 1.5em per H1 e così via.
  5. E per tutto il resto?
    C’è Mastercard! Ma noi non abbiamo bisogno di chiamare in causa le banche, per tutto il resto esistono componenti e plugin preventivamente realizzati da solerti programmatori, con i quali puoi ampliare il tuo sito mobile senza penalizzare la user experience.
    Video: caricando un video su YouTube, non solo ci risparmiamo l’investimento in una CDN (Content Delivery network), ma possiamo beneficiare di plugin come fitvids.js che faranno lo sporco lavoro al nostro posto.
    Slideshow e form compilabili: tutti i migliori componenti (anche gratuiti) per slideshow e progettazione di form, allo stato attuale garantiscono ottime performance responsive su tutti i dispositivi.
    Font-Family: i nostri visitatori arrivano con tecnologie completamente differenti tra loro, perchè un iPhone non ha installato lo stesso font pack di un Android, ed entrambi hanno caratteri ancora diversi da quelli di Windows. Per stare sul sicuro, basta affidarsi alle sapienti mani di BigG. I Google Font sono accessibili gratuitamente e l’implementazione è facilissima:
    Scegli il font da: http://www.google.com/fonts
    Clicca su “quick use”
    Incorpora la regola nel tuo sito:
    Usa il font nel tuo CSS: font-family: ‘nomeFont’;
  6. Ora che ho gli strumenti, come li utilizzo per ottenere il meglio?
    responsiveCon tutti questi strumenti, assicurati che il tuo sito in versione mobile sia una buona landing page che porti un’alta percentuale di conversione.
    Utilizza una bella immagine e una call to action originale, sai il classico pulsante irresistibile, che da touch è ancora più efficace? Ecco, proprio quello. E ricorda di inserirlo above the fold, perchè gli scroll sono deleteri dal punto di vista della conversione: il cliente mobile è pigro (è sull’autobus, o in bagno, non dimenticarlo!), ha bisogno di trovare velocemente quello di cui ha bisogno, come tu hai bisogno del suo click.

  7. Che ROI ho dal mio investimento per un sito responsive?
    Hai presente quella percentuale di visitatori non-desktop nel tuo Analytics? Ecco, se prima entravano nel tuo sito e ne uscivano disperati pochi secondi dopo (verifica tu stesso, guarda la frequenza di rimbalzo relativa alle visite mobile), ora noterai che non solo aumentano la permanenza, ma iniziano a contattarti o ad acquistare attraverso la tua comodissima CTA abilmente sistemata davanti ai loro occhi. Sei anche pronto per una bella campagna di brand engagement, che ora sarà libera di dare i suoi frutti grazie alla piattaforma funzionale su cui atterreranno i visitatori.

Concludendo…
Non è il pubblico che deve cercarti, sei tu che ti devi fare trovare. Non pretendere che il cliente sappia che vendi il migliore prodotto al prezzo più basso del mercato, se lo nascondi nell’ultimo ripiano dell’ultimo scaffale, in un angolino impolverato.
Riordinare la vetrina e renderla accessibile è un gesto d’amore nei confronti del visitatore, che acquisterà in modo agevole e soddisfacente… e non c’è migliore investimento di un cliente soddisfatto.

Paolo Conti
Paolo Conti
Art Director