{"id":1462,"date":"2013-05-03T09:00:33","date_gmt":"2013-05-03T07:00:33","guid":{"rendered":"http:\/\/www.wmtools.com\/news\/?p=1462"},"modified":"2013-05-03T09:04:23","modified_gmt":"2013-05-03T07:04:23","slug":"10-consigli-utili-per-un-sito-responsive","status":"publish","type":"post","link":"https:\/\/www.wmtools.com\/news\/web-marketing\/10-consigli-utili-per-un-sito-responsive","title":{"rendered":"10 Consigli utili per un sito Responsive"},"content":{"rendered":"

Dopo aver visto nel precedente post, i motivi per cui un sito deve essere “responsive”<\/a>,<\/strong> e quali sono i vantaggi rispetto a creare una App, o una versione mobile del proprio sito, passiamo alla fase operativa. Vediamo ora qualche suggerimento pratico<\/strong> per fare al meglio il nostro sito responsive<\/em>. Vista l’importante di avere un sito responsive<\/em>, cogliamo alcuni consigli tecnici<\/strong> dall’Infografica di Splio<\/a>.<\/p>\n

10 Consigli tecnici per un sito “Responsive”<\/h2>\n

Consiglio n.1 – Semplicit\u00e0<\/strong><\/h3>\n

Sembra una banalit\u00e0, ma la regola numero 1 per avere un sito che si adatti a ogni dispositivo \u00e8 mantenere una struttura semplice,<\/strong> un codice pulito<\/strong> e libero<\/strong> da ogni ridondanza. Perci\u00f2 via javascript e Flash, a CSS troppo elaborati e div intricati. Affidati all’HTML 5<\/strong> e mantieni un men\u00f9 di navigazione semplice.<\/p>\n

\"Schermata
\n<\/a><\/p>\n

Consiglio n.2 – Media Queries<\/strong><\/h3>\n

Usa le Media Queries<\/em>, ovvero le istruzioni (introdotte dal CSS 3) che possono rilevare il media usato e alcune caratteristiche (per esempio la risoluzione) e applicare id + classi per quel media. Si pu\u00f2 infatti scrivere le condizioni come la larghezza minima e massima del display<\/strong>, con min-width e max-width,<\/em> oppure l’orientamento del display<\/strong>, con orientation:landscape e orientation:portrait.<\/em><\/p>\n

\"Schermata<\/a><\/p>\n

Consiglio 3 – Ottimizza per le risoluzioni pi\u00f9 comuni<\/strong><\/h3>\n

Statisticamente le risoluzioni pi\u00f9 frequenti sono al massimo 6, se il tuo sito si vede bene con quelle, il grosso del lavoro \u00e8 fatto.<\/p>\n

\"Schermata<\/a><\/p>\n

Consiglio n.4 – Layout flessibile<\/h3>\n

Crea un layout che sia flessibile, dove i contenuti siano organizzati in colonne che possano adattarsi<\/strong> alle diverse impostazioni e dimensioni, grazie a dimensioni in percentuale anzich\u00e9 fisse.<\/p>\n

\"Schermata<\/a><\/p>\n

Consiglio n.5 – Ricordati anche delle immagini!
\n<\/strong><\/h3>\n

Anche le immagini devono essere flessibili e adattarsi correttamente allo schermo.<\/p>\n

\"Schermata<\/a><\/p>\n

Consiglio n.6 – Pensa a una misura minima e una massima.<\/h3>\n

Se imposti che tutto si debba “allargare” al 100%, potresti creare effetti bizzarri su schermi grandi. Se al contrario dai una misura minima e una massima, eviterai effetti troppo strani.<\/p>\n

\"Schermata<\/a><\/p>\n

Consiglio n.7 – Organizza le cose in modo “relativo”<\/span>
\n<\/span><\/h3>\n

Questo \u00e8 un passaggio un po’ pi\u00f9 tecnico. Organizza i tuoi contenuti in modo che una volta stabilito lo standard, l’unit\u00e0 “base”, tutto il resto ne sia collegato o secondo un metodo “a cascata<\/strong>” oppure secondo un metodo “em<\/strong>” (=emphemeral unit).<\/p>\n

\"Schermata<\/a><\/p>\n

Consiglio n.8 – In colonna!<\/h3>\n

Quando passi dalla versione desktop a risoluzioni mobile piccole, conviene dislocare i vari contenuti su un’unica colonna<\/strong>, anche se si allunga.<\/p>\n

\"Schermata<\/a><\/p>\n

Consiglio n.9 – Elimina ci\u00f2 che non serve<\/h3>\n

Nella versione mobile molti contenuti non servono (per esempio gli annunci, l’archivio..), in tal caso eliminali!<\/p>\n

\"Schermata<\/a><\/p>\n

Consiglio n.10 – Usa il Meta tag viewport<\/h3>\n

Per evitare che il browser del dispositivo mobile mostri la risoluzione desktop (accade spesso!), possiamo inserire nell’head della nostra pagina web l’istruzione <meta name=”viewport” content=”width=device-width” \/><\/strong>. In questo modo diciamo al browser di visualizzare il sito esattamente della larghezza del nostro dispositivo.<\/p>\n

\"Schermata<\/a><\/p>\n

Per riassumere i 3 punti chiave quando si parla si RESPONSIVE sono:
\n<\/strong><\/p>\n

\"Schermata<\/a><\/p>\n

Ora che abbiamo visto i consigli pi\u00f9 tecnici, facciamo qualche ultima considerazione strategica.<\/p>\n

=> Pensa in termini di obiettivi e non di tecnologia.<\/strong><\/p>\n

Come dice Ted Schadler di Forrester<\/strong>: le aziende dovrebbero smettere di pensare al mobile, come a un piccolo sito su un computer minuscolo, ma dovrebbero porsi il problema di come coinvolgere gli utenti<\/strong> su diversi dispositivi.<\/p>\n

\"Schermata<\/a><\/p>\n

Bisogna partire dagli obiettivi finali<\/strong> (vendita? prenotazione?) e “muoversi all’indietro”. Se vogliamo che i nostri utenti acquistino da noi, su un dispositivo mobile dovr\u00e0 essere ben evidente fin da subito l’opzione “compra ora”. In altre parole dobbiamo esplicitare la CALL TO ACTION.
\n<\/strong>Nel caso di un ristorante non ha senso che la pagina di apertura sia piena di informazioni non utili (la storia, il men\u00f9, ecc.); sar\u00e0 molto pi\u00f9 utile avere il telefono, gli orari di apertura, il dove siamo e un testo che sintetizzi la value proposition<\/em> di quel ristorante.
\n<\/strong>Nel caso di un hotel o una strutura ricettiva, il bottone con la possibilit\u00e0 di sapere la disponibilit\u00e0 o prenotazione, dovr\u00e0 essere immediatamente accessibile e ben visibile.
\n<\/strong><\/p>\n

Un sito che ottimizza le conversioni per il Mobile \u00e8 AirBnB<\/strong><\/p>\n

\"Schermata<\/a><\/p>\n

Credits foto: Aleyda Solis <\/a><\/p>\n

Alcune Case History di successo<\/h2>\n

Concludiamo con alcune case history che hanno avuto successo e incrementato le loro vendite, dopo l’introduzione del sito in modalit\u00e0 responsive.<\/p>\n

Il negozio di abbigliamento per surfisti<\/strong> O’Neill<\/a>, dopo aver sviluppato un sito responsive, ha visto incrementare notevolmente le sue vendite. Per verificare l’impatto hanno monitorato alcune metriche per 3 settimane prima dell’introduzione del sito responsive e poi 3 settimane dopo, le stesse metriche.<\/p>\n

\"sito<\/a><\/p>\n

Ecco i risultati:<\/p>\n

Dispositivi iPhone\/iPod:<\/p>\n