Design mobile e responsivo

Modelli di siti web reattivi per dispositivi mobili

I template responsive sono un approccio molto diffuso nel settore del web design, poiché non tutti i CMS offrono un'opzione dedicata per i dispositivi mobili. Il design responsive significa che il template è stato appositamente creato per adattarsi alle diverse larghezze dello schermo del browser. Tuttavia, la modifica dei template responsive può risultare complessa per gli utenti, in quanto ogni elemento deve essere adattato individualmente.

Ad esempio, i menu potrebbero essere compressi o spostati fuori pagina e visualizzati solo quando necessario. I siti web responsive tendono a essere più lenti da scaricare sui dispositivi mobili, poiché questi ultimi devono scaricare tutti gli stili/temi utilizzati nella versione desktop, anche se non presenti nella versione mobile. Alcuni web designer si concentrano sulla creazione di template esteticamente accattivanti, ma si dimenticano di questi problemi di velocità di download.

Se il tuo sito web è orientato al turismo, i tuoi clienti potrebbero trovarsi in zone con scarsa copertura di rete mobile e potrebbero avere difficoltà a scaricare tutte le librerie JavaScript e CSS aggiuntive non necessarie per la visualizzazione su dispositivi mobili. I template responsive spesso impiegano molto tempo per essere scaricati, ma abbiamo lavorato sodo per rendere i nostri nuovi template responsive il più veloci possibile, garantendo un rendering circa 3 volte più rapido rispetto alla media dei temi WordPress. I nostri siti web responsive possono essere personalizzati con diversi colori, font e immagini.

Modelli di siti web dedicati ai dispositivi mobili

Un template di sito web mobile dedicato è il metodo tradizionale che abbiamo utilizzato per garantire la compatibilità con le versioni precedenti di tutti i nostri siti web desktop, al fine di offrire ai clienti un'esperienza mobile ottimale. Il template mobile utilizza la stessa mappa del sito e gli stessi contenuti del sito web desktop. Tuttavia, abbiamo eliminato tutti gli elementi superflui per garantire che i clienti possano accedere rapidamente alle informazioni desiderate. Ad esempio, possono navigare verso i dettagli di contatto, visualizzare un link alla mappa o visualizzare i prodotti ed effettuare un acquisto facilmente sui loro piccoli schermi. Nel tempo abbiamo aggiunto banner, loghi e adattato automaticamente i colori al template desktop. Grazie alla messa a punto del design del template mobile dedicato, i tuoi clienti avranno un'esperienza eccezionale, poiché questo metodo è il opzione più veloce per i clienti che utilizzano connessioni mobili lente nelle zone rurali.

Siti web per dispositivi mobili completamente separati

Avere un intero sito web progettato esclusivamente per dispositivi mobili potrebbe inizialmente offrire un'ottima esperienza mobile, ma il più delle volte il webmaster si dimentica di aggiornarlo (o non è in grado di farlo) e le informazioni non sono più sincronizzate tra le due versioni del sito. Se gestite un sito di e-commerce, è fondamentale che sia l'esperienza mobile che quella desktop siano basate sullo stesso motore di carrello acquisti. Sconsigliamo vivamente questo approccio ai nostri clienti.

Come convertire il tuo sito web esistente in un template responsive

Abbiamo a disposizione tantissimi modelli responsive diversi tra cui scegliere. Li aggiorniamo costantemente. Quando passi a un modello responsive, il layout verrà aggiornato sia su desktop che su dispositivi mobili.

1. Nel CMS, vai alla scheda DESIGN
2. Seleziona CAMBIA TEMA
3. Esamina tutti i temi e prendi nota del pulsante RESPONSIVE o MOBILE. Questo pulsante ti permette di visualizzare l'anteprima del tema in una delle due modalità. Solo i temi con il pulsante RESPONSIVE sono modelli responsive.
4. SELEZIONA un tema per continuare.
5. Deseleziona le caselle relative alla modifica di banner, logo, sfondo e colori, se desideri mantenere invariati gli elementi del tuo marchio.
6. Seleziona la casella per eseguire il backup delle vecchie impostazioni di progettazione, nel caso in cui qualcosa vada storto.
7. Salva la modifica del tema.
8. A volte, quando visualizzi l'anteprima del tuo sito web dopo aver cambiato tema, potrebbe non apparire correttamente a causa delle impostazioni della cache del browser. Potrebbe essere necessario PUBBLICARE e svuotare la cache del browser per visualizzare correttamente il sito web.
9. A volte potrebbe essere necessario riapplicare le impostazioni di colore per i menu ecc., poiché alcuni modelli forniscono colori predefiniti e altri no, oppure le combinazioni di colori potrebbero non essere immediatamente compatibili con il modello e potrebbero richiedere alcune piccole modifiche.

Come selezionare un nuovo modello dedicato per dispositivi mobili

Abbiamo 8 diversi modelli dedicati per dispositivi mobili, ma ognuno utilizzerà i colori e il carattere del tema del tuo computer desktop.

1. Nel CMS, vai alla scheda DESIGN
2. Seleziona MODELLI PER DISPOSITIVI MOBILI
3. fai clic su SELEZIONA UN NUOVO TEMA PER CELLULARE
4. Esamina tutti i temi e prendi nota del pulsante RESPONSIVE o MOBILE. Questo pulsante ti permette di visualizzare l'anteprima del tema in una delle due modalità. Solo i temi con il pulsante RESPONSIVE sono modelli responsive.
5. SELEZIONA un tema per continuare.
6. Deseleziona le caselle relative alla modifica di banner, logo, sfondo e colori, se desideri mantenere invariati gli elementi del tuo marchio.
7. Seleziona la casella per eseguire il backup delle vecchie impostazioni di progettazione, nel caso in cui qualcosa vada storto.
8. Salva la modifica del tema.
9. A volte, quando visualizzi l'anteprima del tuo sito web dopo aver cambiato tema, potrebbe non apparire correttamente a causa delle impostazioni della cache del browser. Potrebbe essere necessario PUBBLICARE e svuotare la cache del browser per visualizzare correttamente il sito web.
10. A volte potrebbe essere necessario riapplicare le impostazioni di colore per i menu ecc., poiché alcuni modelli forniscono colori predefiniti e altri no, oppure le combinazioni di colori potrebbero non essere immediatamente compatibili con il modello e potrebbero richiedere alcune piccole modifiche.

Modificare il CSS per adattarlo ai dispositivi mobili

Se hai una predisposizione per la tecnologia, potresti voler semplicemente modificare il tuo template esistente per renderlo responsivo tramite CSS.

Cerca nel tuo foglio di stile le righe con le dimensioni massime di 600px, 750px o 900px:

#container { larghezza: 750px; margine: 0 auto; }

E modificali in modo che siano così, in modo che occupino il 90% della larghezza dello schermo fino a un massimo di 960.

#container { width: 90%; max-width: 960px; margin: 0 auto; }

Successivamente, individua le colonne e modifica la loro larghezza o i margini, passando da una larghezza fissa a una percentuale, ma applica queste modifiche solo se la larghezza dello schermo lo consente. Quando la larghezza dello schermo è inferiore a 600 pixel, le colonne si impileranno occupando l'intera larghezza del browser.

@media (min-width: 600px) { .leftColumn { width: 20%; float: left; }