Siti per mobile
Al giorno d'oggi chi utilizza ancora un computer per navigare sui siti Internet? In molti, ma è facilmente intuibile che sono molti di più gli utenti che lo fanno da smartphone o tablet, in quanto sono dispositivi che si hanno più spesso a portata di mano e sono più semplici da usare.
Alla luce di quanto appena detto, chiunque abbia un sito Web sa (o almeno dovrebbe sapere) che non può prescindere dall'ottimizzazione delle pagine per dispositivi mobili, altrimenti andrà incontro a forti penalizzazioni da parte dei motori di ricerca, oltre a offrire un prodotto con un'esperienza poco “appetibile” da parte degli utenti.
Ma come creare siti per mobile che siano efficaci, veloci, funzionali e magari anche semplici da mettere in piedi? In realtà non è difficile (se si utilizza il servizio giusto) e, in questa guida, ti darò le informazioni che cerchi. In primis vedremo cosa vuol dire avere un sito ottimizzato per mobile, poi passeremo alla pratica.
Indice
Siti per mobile: come strutturarli
Ottimizzare i siti per mobile è un'idea grandiosa, ma se non sai nemmeno cosa significa, difficilmente potrai iniziare nel modo corretto. Iniziamo quindi con delle informazioni preliminari per capire l'argomento nel modo più completo.
- Adattabilità delle pagine — l'aspetto più importante di cui tenere conto per quando un utente naviga da dispositivi mobili è che lo schermo che utilizza ha delle dimensioni molto diverse rispetto a quelle del PC (e soprattutto molto più piccole). Cambiano inoltre le proporzioni, dato che spesso si tratta di schermi lunghi e stretti, quindi la disposizione dei contenuti deve necessariamente cambiare. Per adattare al meglio un sito a tutti i dispositivi, inclusi quelli mobili, è buona norma usare un design responsive, termine che in gergo indica l'adattamento delle pagine allo schermo che le visualizza. Senza un design adattato, dover spostare la pagina a destra e sinistra solo per riuscire a leggere una frase può risultare molto frustrante e indurre gli utenti ad abbandonare il sito. I siti responsive forniscono un'ottima esperienza utente e sono quelli in grado di cambiare layout e design per adattarsi alle dimensioni dello schermo utilizzato per la navigazione. Per maggiori informazioni, questa mia guida potrebbe fare al caso tuo.
- Leggerezza — molto spesso la connessione dei dispositivi mobili ha prestazioni di gran lunga inferiori rispetto alle connessioni domestiche, per questo motivo le pagine da mobile devono avere anche un occhio di riguardo per le prestazioni. Devono infatti essere in grado di caricarsi velocemente anche con una connessione scarsa e affinché ciò sia possibile devono tendenzialmente essere leggere e ben ottimizzate a livello di codice. Puoi analizzare le prestazioni del tuo sito con strumenti come PageSpeed Insights di Google.
- Dati strutturati identici — i dati strutturati sono delle informazioni inserite nel codice che indicano ai motori di ricerca, alle intelligenze artificiali e agli altri algoritmi lo scopo della pagina, il suo posizionamento all'interno del sito e come devono essere mostrate tali pagine in termini di anteprime. Un esempio? Orari di apertura e chiusura del tuo negozio. Per avere siti ben ottimizzati su mobile e a livello di SEO (ottimizzazione per i motori di ricerca), è importante mantenere lo stesso schema di dati strutturati tra le versioni mobile e desktop.
- Immagini ad hoc — nel sito mobile devi caricare immagini in alta qualità, che non devono risultare poco nitide solo per essere più leggere. Le immagini non devono avere una qualità eccelsa, ma nemmeno essere insufficienti. Inoltre, il testo alternativo, l'URL e il formato delle immagini non devono cambiare tra le varie versioni del sito.
- Video ad hoc — per quanto riguarda i video vale esattamente quanto detto per le immagini, quindi non cercare compromessi in questo senso. Inserisci ciò che deve esserci, ma fallo nel modo più appropriato.
Queste sono le principali regole che mi sento di consigliarti, ma ci sono altri accorgimenti che possono aiutare nella risoluzione di eventuali problemi e per essere perfettamente in regola con le linee guida di Google. Per questo motivo, se vuoi saperne di più sull'argomento, puoi leggere la pagina ufficiale sul sito di Google che indica le best practice per l'indicizzazione di siti per mobile.
Siti per mobile: come crearli
Iniziamo ora il viaggio verso la creazione di un sito per smartphone e tablet che risulti valido a livello di interfaccia utente ma anche efficiente, partendo da alcune soluzioni che permettono la creazione di siti per mobile perfettamente ottimizzati sia per smartphone che per tablet in modo semplice e veloce.
Wix
Wix è una piattaforma con un'interfaccia molto pratica e intuitiva che permette agli utenti di creare siti eccellenti nel design senza competenze nell'ambito della programmazione. Il servizio include un editor facile da usare per impostare il design del sito e consente di creare siti perfettamente ottimizzati per il mobile, con tanto di design responsive, nonché per i motori di ricerca.
Wix è un servizio utilizzabile gratuitamente con un dominio di terzo livello incluso (es. tuosito.wixsite.com) e 1 GB di spazio di archiviazione, tuttavia propone anche piani in abbonamento con costi a partire da 14 euro/mese che offrono vantaggi aggiuntivi, tra cui un maggior spazio di archiviazione, un dominio gratis di secondo livello per un anno, la funzione ecommerce e molto altro.
Se desideri usare Wix per creare il tuo sito per mobile, collegati alla pagina principale della piattaforma, digita il tuo indirizzo email nel campo di testo visualizzato e poi clicca su Inizia ora. Fatto ciò, scegli se registrarti tramite indirizzo email e password inserendoli negli appositi campi, oppure clicca su Continua con Google, Continua con Facebook o Continua con Apple, per registrarti tramite un account Google, Facebook o Apple.
Effettuata la registrazione, devi scegliere l'obiettivo del tuo sito: clicca su Per me, per la mia azienda o per un amico e poi premi il pulsante Continua. Ora, decidi se creare il tuo sito in modalità automatizzata con intelligenza artificiale cliccando su Avvia chat, o se crearlo manualmente cliccando su Configura senza Chat. Dopo questo importante passaggio, potrai accedere alla dashboard di Wix. Per la procedura completa di creazione di un sito Web con Wix, ti lascio alla mia guida sul tema.
Per procedere alla configurazione e all'ottimizzazione del tuo sito per i dispositivi mobili, fai clic sul pulsante Modifica collocato in alto a destra, al fine di accedere all'editor visuale del tuo sito Web. Al termine di un breve caricamento, visualizzerai l'anteprima del tuo sito in versione desktop: per passare alla versione mobile, pigia sull'icona del telefono posizionata in alto a sinistra.
A questo punto, fai clic su Inizia per cominciare la personalizzazione del sito per mezzo di una procedura guidata che la renderà più facile. In alternativa, puoi procedere alla personalizzazione manuale del sito premendo su Salta.
Se hai scelto la personalizzazione guidata, decidi come personalizzare l'intestazione (ovvero la parte superiore del sito con logo, eventuale titolo e menu) scegliendo tra Scorre con pagina, Sparisce, Si dissolve e Fisso, dunque premi su Avanti.
Ora, seleziona il luogo dove posizionare le azioni rapide, se desideri farlo, scegliendo tra Galleggiante, In fondo e Senza barra, quindi premi ancora su Avanti. Decidi se inserire o meno il pulsante per tornare in cima alla pagina selezionando Sì o No e premi ancora su Avanti. A questo punto, puoi procedere all'apertura dell'editor per dispositivi mobili cliccando su Vai all'Editor mobile.
Effettuata anche questa operazione, sei di fronte all'interfaccia di editing per la libera personalizzazione del tuo sito. Tramite la barra di sinistra puoi gestire vari elementi, tra cui l'aggiunta di testo e immagini, l'aggiunta di menu e pagine, l'impostazione dello sfondo e la barra per le azioni rapide.
Tutto ciò che puoi vedere nell'anteprima del sito posizionata al centro dello schermo si può modificare con un clic e un'azione contestuale a ciò che desideri modificare, ma come avrai capito puoi anche aggiungere e rimuovere elementi nella più totale libertà.
Per farti un esempio, se premi sul pulsante + puoi aggiungere testo, immagini, tasti, elementi decorativi, riquadri, icone dei social network per collegare il sito a questi ultimi o per consentire la condivisione delle pagine e perfino del codice personalizzato.
Per la gestione delle pagine, ti basta toccare l'icona della pagina. Se premi sul simbolo del quadrato bicolore, puoi trovare tutte le impostazioni per modificare lo sfondo, dall'icona della chiave inglese puoi aggiungere o modificare ciò che hai impostato nella procedura guidata e altri aspetti, mentre dall'icona dell'occhio puoi visualizzare eventuali elementi nascosti.
Se desideri tornare alla modifica della versione desktop del sito, premi sull'icona del monitor, mentre per pubblicare il sito o visualizzarne un'anteprima puoi premere rispettivamente sui pulsanti Pubblica e Anteprima.
Dopo la pubblicazione, per controllare che tutto sia andato per il verso giusto, ti consiglio di visualizzare il sito dal tuo smartphone oppure usando la vista mobile per il browser del tuo computer (se usi Google Chrome, ad esempio, ti basta premere su F12 e poi sull'icona del computer).
Se invece che un sito tradizionale il tuo obiettivo è quello di creare un ecommerce ottimizzato per dispositivi mobili, puoi collegarti a questa pagina e cliccare su Crea negozio online. Per soluzioni alternative, ti rimando alla mia guida su come aprire un ecommerce.
Come creare siti per mobile su Shopify
Vorresti creare un ecommerce ma non sai come renderlo adatto alla fruizione su smartphone e tablet? Non preoccuparti, perché praticamente tutte le piattaforme per realizzare negozi online considerano l'importanza della versione mobile, quindi creare siti per mobile è sempre possibile. Shopify è una delle piattaforme più valide per questo scopo, in quanto consente di realizzare ecommerce con gestione ordini, catalogo e tutto ciò che serve per vendere facilmente online, il tutto ottimizzato per il mobile e per i motori di ricerca.
Shopify è utilizzabile con una prova gratuita di 3 giorni, poi offre la possibilità di utilizzare la piattaforma per 3 mesi pagando solo 1€. Successivamente, è possibile sottoscrivere un piano in abbonamento a partire da 19 euro/mese che include hosting, dominio gratuito, banda illimitata, certificato SSL, catalogo illimitato di prodotti e altro. Maggiori info qui.
Per creare un sito per mobile con Shopify, collegati a questa pagina, clicca su Inizia gratis e digita il tuo indirizzo email nell'apposito campo di testo, dunque fai clic su Continua con l'email. In alternativa, puoi registrarti con un account Google, Apple o Facebook cliccando su Continua con Google, Continua con Apple o Continua con Facebook.
Completato l'accesso, ti verrà proposto di rispondere ad alcune domande necessarie per accedere al servizio, ossia dove ti piacerebbe vendere, se hai già cominciato a vendere e quali prodotti vorresti vendere. Fatto ciò, attiva la prova gratuita di 3 giorni cliccando su Salta, per atterrare sulla dashboard di Shopify dalla quale potrai personalizzare il tuo sito. Se vuoi la procedura completa per la creazione di un negozio con Shopify, ti lascio alla mia guida sul tema.
Per cominciare a personalizzare la versione mobile del tuo sito, fai clic su Negozio online nella barra laterale a sinistra, premi su Temi e, se lo desideri, scegli un tema tra quelli proposti premendo su Aggiungi nel riquadro del tema desiderato. Per modificare il tema impostato, invece, pigia il pulsante Modifica tema.
Dopo questa operazione, ti trovi sicuramente nella pagina di editing, ma quella della versione desktop, quindi non è qui che dovrai apportare le modifiche per la versione mobile. Per passare alla versione mobile, premi sull'icona del telefono posizionata in alto a destra.
Da qui in avanti non devi fare altro che personalizzare gli elementi visualizzati a schermo: puoi farlo semplicemente cliccandoci sopra e gestendoli dalla barra contestuale posizionata sulla destra.
Nella barra laterale a sinistra, invece, puoi trovare le varie parti delle pagine in una struttura gerarchica. Per espanderle, ti basta cliccare sulla freccetta verso il basso e, se desideri aggiungere al loro interno un elemento, devi solo premere su Aggiungi blocco o Aggiungi sezione, dopodiché scegliere il singolo elemento da aggiungere dal menu contestuale che si apre.
Per modificare il tema e l'aspetto grafico di ogni elemento, puoi premere sull'icona dell'ingranaggio posta in alto a sinistra. Per esempio, cliccando sulla voce Pulsanti, puoi impostare larghezza, opacità, sfocatura e altri aspetti riguardanti i tasti; vale la stessa cosa per ogni elemento elencato.
Puoi perfino scegliere di aggiungere delle applicazioni esterne per aumentare le prestazioni o migliorare l'interfaccia su mobile. Per farlo, fai clic sull'icona con i tre quadratini e il simbolo +, dopodiché premi su Shopify App Store: verrai rimandato all'app store di Shopify dove potrai trovare diverse applicazioni per gestire la versione mobile dell'ecommerce e aggiungere altre funzioni utili.
Dopo aver terminato le modifiche nell'editor, fai clic sul pulsante Salva in alto a destra per metterle online. Per verificare che tutto sia andato per il verso giusto, visualizza il sito da mobile o con la vista mobile del browser. Per maggiori dettagli su come funziona Shopify, ti lascio alla mia guida sul tema.
Altre soluzioni per creare siti per mobile
Quelle di cui ti ho parlato finora, ovviamente, sono solo alcune delle tantissime soluzioni per creare siti per mobile. Se desideri approfondire l'argomento e scoprire anche altre piattaforme per le quali optare, ti lascio la mia guida su come creare un sito Web gratis nel quale esse vengono illustrate con dovizia di dettagli.
Autore
Salvatore Aranzulla
Salvatore Aranzulla è il blogger e divulgatore informatico più letto in Italia. Noto per aver scoperto delle vulnerabilità nei siti di Google e Microsoft. Collabora con riviste di informatica e ha curato la rubrica tecnologica del quotidiano Il Messaggero. È il fondatore di Aranzulla.it, uno dei trenta siti più visitati d'Italia, nel quale risponde con semplicità a migliaia di dubbi di tipo informatico. Ha pubblicato per Mondadori e Mondadori Informatica.
