Siti per mobile
Al giorno d’oggi chi utilizza ancora un computer per navigare su Internet? In molti, ma è facilmente intuibile che siano sempre di più gli utenti che lo fanno da smartphone o tablet, in quanto dispositivi che si hanno per più tempo sotto mano e più semplici da usare.
Alla luce di quanto appena detto, chiunque abbia un sito, sa (o almeno dovrebbe sapere) che non può prescindere dall’ottimizzazione mobile delle pagine, altrimenti andrà incontro a forti penalità da parte dei motori di ricerca, oltre che offrire un prodotto 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 (ma dipende dal servizio usato) e, in questa guida, ti darò le informazioni che cerchi. In primis vedremo cosa vuol dire ottimizzato per mobile, poi passeremo alla pratica.
Indice
Siti per mobile: come strutturarli
Bello ottimizzare i siti per mobile ma, se non hai la minima idea di cosa voglia dire, non ha nemmeno senso iniziare. Iniziamo quindi con un po’ di informazioni — spero utili — sull’argomento.
- Adattabilità delle pagine — la più fondamentale cosa da tenere in mente quando qualcuno naviga da mobile, è che lo schermo ha delle dimensioni molto differenti rispetto a quelle del PC, soprattutto in proporzioni. Si tratta di schermi lunghi e stretti, quindi non potrai mantenere la stessa disposizione dei contenuti anche per i telefoni. Le pagine dovranno quindi essere responsive, termine tecnico usato in gergo per indicare che si adattano allo schermo che le apre. Immagina quanto possa essere scomodo dover spostare la pagina a destra e sinistra solo per leggere una frase che continua fuori dallo schermo. Ecco, per questo serve adattabilità in questo senso. La parola chiave, qui, è siti responsivi, cioè in grado di cambiare layout e design e adattarsi automaticamente alle dimensioni dello schermo da cui naviga l’utente.
- Leggerezza — siccome spesso la connessione mobile è più debole di quella di casa, le pagine da mobile devono essere pensate anche per questo. Devono infatti essere in grado di caricarsi abbastanza velocemente anche in caso di connessione scadente.
- Dati strutturati identici — mantieni lo stesso schema di dati strutturati tra le varie versioni del sito. Cosa sono i dati strutturati? Fondamentalmente quei dati inseriti nel codice che dicono a Google lo scopo di quella pagina, il suo posizionamento all’interno del tuo sito, insieme ad altri fattori che invece possono essere visualizzati nell’anteprima di Google per i lettori. Un esempio? Orari di apertura e chiusura del tuo negozio.
- Immagini ad hoc — nel sito mobile dovrai caricare immagini di alta qualità, che non sono francobolli illeggibili solo per renderle più leggere. Questo non vuol dire dei poster da parete, ma solo qualcosa che sia adatto alla situazione. Inoltre tali immagini dovranno mantenere il medesimo testo alternativo, URL e utilizzare un formato supportato.
- Video ad hoc — per i video vale esattamente quanto detto per le immagini, quindi non cercare compromessi in questo senso. Metti quello che deve esserci, solo fallo nel mondo appropriato.
Queste sono le principali regole ma ci sono poi altri grandi piccoli accorgimenti che possono essere rilevanti nella ricerca di eventuali problemi o per essere al 100% in regola con le direttive di Google. Per questa ragione, se vuoi saperne di più, puoi leggere la pagina ufficiale.
Siti per mobile: come crearli
Iniziamo ora il viaggio verso la creazione di un sito mobile che sia bello ed efficiente, partendo da alcune soluzioni che consentono di realizzare siti Web perfettamente ottimizzati per smartphone e tablet in pochi passaggi.
Wix
Wix è una piattaforma che permette di creare siti Web davvero molto belli sfruttando i temi preimpostati e un editor molto semplice da usare, che rendono accessibile il design Web e siti di qualità anche a coloro che non sono esperti. I siti generati sono tutti perfettamente ottimizzati sia per il mobile (con design responsivo) che per i motori di ricerca.
Il piano di partenza è gratis, con dominio di terzo livello, impossibilità di monetizzare e personalizzazioni contenute. Per rimuovere questi limiti occorre passare a uno dei piani a pagamento, con prezzi a partire da 11 euro/mese.
Ora, per creare un sito con Wix non devi far altro che recarti su questa pagina, per poi premere il pulsante Inizia ora e scegliere se registrati con email e password, account Google o Facebook. Da qui dovrai poi procedere con una chat con una intelligenza artificiale che ti farà domande su come vuoi realizzare il tuo sito, oppure premere sulla voce Termina chat e procedere con le domande preconfezionate di Wix.
Dopo toccherà ancora alla scelta dello schema colori e del tema per poi essere rimandato alla dashboard. Per la procedura completa di creazione di un sito Web con Wix, ti lascio alla mia guida sul tema.
Passando alla parte più centrale del discorso, dalla dashboard del tuo sito devi premere sul pulsante Modifica che trovi nella parte alta della pagina. Da qui verrai rimandato all’interfaccia di editing, con il sito desktop ad attenderti ma, per vedere la versione mobile, fai clic sull’icona del telefono che si trova in alto a sinistra.
Ti verrà quindi chiesto se vuoi seguire i passi per la versione mobile che ti spiega Wix premendo sul pulsante Inizia, oppure procedere liberamente tramite Salta. Premendo Inizia, come prima cosa dovrai personalizzare l’intestazione del sito scegliendo tra gli effetti preconfezionati.
Premendo su Avanti dovrai poi scegliere se vuoi inserire una barra di azioni rapide, poi premi ancora su Avanti e scegli dove e se posizionare il tasto per tornare a inizio pagina. Ancora un clic su Avanti per concludere la procedura guidata e premendo su Vai all’editor mobile per passare all’editing manuale.
Superato questo passo, ti apparirà l’interfaccia di editing con la barra di sinistra dalla quale gestire tutti i vari elementi. Tutto quello che vedi a schermo può essere modificato con un clic e un’azione contestuale a ciò che devi modificare, ma puoi anche rimuovere e aggiungere cose.
Per esempio premendo sul pulsate + puoi scegliere se aggiungere immagini, decorativi, testo, codice e quant’altro. Dall’icona della paginetta gestisci le pagine, dal quadrato con due colori lo sfondo, con la chiave inglese aggiungi o modifichi ciò che hai impostato nella procedura guidata (ma non solo) e, dall’occhio, vedi eventuali elementi nascosti. Per tornare alla modifica desktop premi sull’icona dello schermo, per pubblicare il sito o per un’anteprima premi sui pulsanti Pubblica e Anteprima.
Dopo averlo pubblicato, ti consiglio di visionarlo da cellulare o da browser impostando la vista mobile.
Ti segnalo che Wix permette di creare anche degli ecommerce: per creare il tuo negozio online non devi far altro che collegarti a questa pagina e cliccare sul pulsante per creare il tuo store.
Come creare siti per mobile su Shopify
Vuoi dare vita a un ecommerce ma non sai come fare a renderlo adatto ai dispositivi mobili? Non ti preoccupare, tutte le piattaforme per dare vita a siti o negozio online sanno quanto sia importante la versione mobile, quindi ti mettono a disposizione tutto quello che ti serve. Shopify ne è l’esempio perfetto. Si tratta, infatti, di una piattaforma che consente di creare ecommerce completi di magazzino, catalogo e tutto ciò che può servire per vendere facilmente online, il tutto perfettamente ottimizzato per il mobile e per i motori di ricerca.
Shopify offre una prova gratuita con il primo mese a solo 1€, dopodiché occorre scegliere tra vari piani, adatti a vari volumi d’affari, con prezzi a partire da 21 euro/mese con fatturazione annuale.
Per creare un sito con Shopify non devi far alto che recarti su questa pagina, poi inserire la tua mail e premere il pulsante Inizia la prova gratuita. Adesso rispondi alle domande del sondaggio sulla tua attività, stabilisci la sede del tuo negozio e procedi alla dashboard del medesimo. Se vuoi la procedura completa per la creazione di un negozio con Shopify, ti lascio alla mia guida sul tema.
Detto questo, fai clic sul menu Negozio online nella barra di sinistra, seguito dalla voce Temi. Qui si aprirà la pagina dalla quale puoi scegliere il tuo tema attuale dall’elenco che si trova in basso, oppure semplicemente modificare quello che ti è assegnato di default.
Scegli quello che preferisci, poi premi sul pulsante Personalizza a fianco della casella che indica il tema in uso. Ora sei nella pagina di editing, ma quella della versione desktop, quindi non è qui che dovrai apportare le modifiche per la versione mobile.
Premi quindi sull’icona del telefono che si trova in alto a destra, per vedere l’interfaccia diventare più stretta e assumere le dimensioni mobile. Da qui in avanti, è tutta una questione di personalizzazione degli elementi presenti a schermo, i quali puoi modificare facendoci clic sopra e gestendoli dalla barra contestuale sulla destra.
Le varie parti delle pagine poi, sono racchiuse nella barra di sinistra. Puoi espanderle tramite la freccetta verso il basso e poi premere sul pulsante + Aggiungi […] per aggiungere quella cosa adatta a quella pagina, sia essa un blocco, una sezione o un annuncio.
Premendo invece sull’icona dell’ingranaggio sempre sulla sinistra, puoi modificare il tema e l’aspetto di ogni elemento in modo certosino. Cliccando per esempio sulla voce Pulsanti, puoi decidere la larghezza, opacità, sfocatura e ogni altro aspetto dei medesimi. Stessa cosa per ogni altro elemento indicato qui.
Infine, puoi anche scegliere di aggiungere delle applicazioni esterne per migliorare le prestazioni o l’interfaccia mobile. Per farlo clicca sull’icona dei 3 quadratini e una stellina sotto quella dell’ingranaggio, poi clicca sulla voce Visualizza app. Qui verrai rimandato all’app store di Shopify dove, spulciando tra le app (magari cercando per la parola mobile) ne troverai diverse con lo scopo di gestire la versione mobile del negozio. Una volta finite le modifiche, premi sul pulsante Salva in alto a destra. Anche qui, suggerisco la visualizzazione da mobile o con la vista mobile da browser (F12 + clic su icona del PC) per vedere che non ci siano stranezze. Per maggiori dettagli su come funziona Shopify, ti lascio alla mia guida sul tema.
Altre soluzioni per creare siti per mobile
Quelle che ti ho menzionato finora, naturalmente, non sono le uniche soluzioni per creare siti per mobile. Se, dunque, volessi approfondire ulteriormente l’argomento e scoprire altre piattaforme alle quali poterti rivolgere, dai un’occhiata al mio tutorial su come creare un sito Web gratis.
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 cura 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.
