Come posso adattare le pagine del mio sito web al telefono?

Secondo Hootsuite e We Are Socialsecondo Hootsuite e We Are Social, il 55% della popolazione mondiale utilizza Internet, ovvero quasi 4,2 miliardi di persone. Il mezzo tecnologico che attira il maggior traffico internet rimane il mobile con una quota del 51,6%, seguito dal computer con il 44,1% contro il 4,3% degli altri mezzi. Ciò significa che più della metà degli utenti di Internet accede ai siti web tramite il cellulare. Per questo motivo, il progetto di creazione del suo sito web deve tenere conto del fatto che deve proporre un’interfaccia che si adatti alle diverse interfacce. In effetti, si tratta di renderlo reattivo, per godere del traffico proveniente da utenti che non utilizzano necessariamente un computer. Per farlo, la guiderò attraverso il processo di adattamento di una pagina del suo sito web al telefono. Questo articolo, che fa parte di una lunga serie, si occuperà di mostrarle tutti i passaggi “passo dopo passo”, in modo che possa farlo da solo. Non dimentichi di guardare il video di accompagnamento, che probabilmente le sarà molto utile.

Ottenga pagine “responsive”!

Scopra in questo video

come adattare le pagine del suo sito web al telefono:

Che cos’è un sito web responsive?

Con l’evoluzione della tecnologia, sempre più persone si collegano a Internet. La maggior parte di loro lo fa tramite il cellulare, quindi il suo sito web deve essere perfettamente adattato al formato del telefono, per garantire agli utenti un’esperienza di navigazione ottimizzata.

A proposito, Mobify ha rilevato in uno studio che il 30% degli utenti di Internet interrompe una transazione quando un sito web non si adatta al loro formato mobile. Inoltre, se un sito web impiega più di 3 secondi per caricarsi, il 57% dei clienti mobili tende ad abbandonarlo.

Per esempio, è probabile che sia infastidito da un sito web che richiede di zoomare con le dita, di scorrere verso l’alto e verso il basso o di scorrere a destra e a sinistra per leggere il contenuto.

Pertanto, un sito web responsive deve essere in grado di adattarsi automaticamente ai diversi dispositivi degli utenti. E ci sono diversi motivi per cui dovrebbe passare a un sito web responsive.

Perché dovrebbe avere un sito web responsive

Ci sono molte ragioni per adottare un sito web responsive, ma le dirò quelle più importanti che possono avere un grande impatto sulla sua attività.

Google raccomanda i siti web responsive

Con oltre 90,6 % della quota di mercato mondiale, Google rimane il motore di ricerca più utilizzato dagli utenti di Internet. Si tratta quindi di un punto di riferimento in termini di esperienza utente e il fatto che favorisca i siti web responsive non è una coincidenza.

Infatti, l’azienda di Mountain View evidenzia nei suoi risultati di ricerca i siti web che si adattano al formato mobile. In questo senso, Google non ha esitato a creare il Mobile Friendly in questo senso, Google non ha esitato a creare l’etichetta “Mobile Friendly” per consentire ai webmaster e agli amministratori di siti di determinare se le pagine del loro sito web sono visualizzate correttamente su mobile.

In questa logica, per un utente di Internet che sta per effettuare una ricerca tramite il suo cellulare, Google si occuperà di classificare per prime, nei risultati, le pagine che sono “Mobile Friendly” a scapito di quelle che non lo sono.

Migliorare le vendite o i contatti

È probabile che i visitatori abbandonino automaticamente il suo sito web se vedono che le pagine del suo sito non vengono visualizzate correttamente sui loro cellulari. Eppure, 12,1 milioni

i francesi effettuano acquisti tramite cellulare su un totale di 37,5 milioni di persone che hanno acquistato su Internet.

Ecco perché questa categoria di utenti di Internet è di grande interesse per lei.

Il suo sito è più facile da gestire

In passato, è capitato che alcuni proprietari creassero due siti diversi, uno per i cellulari e l’altro per i computer. Questo ha avuto lo svantaggio di moltiplicare per due i compiti legati alla gestione dei siti, dei contenuti, ecc..

Per questo motivo, le suggerisco di optare per un sito web responsive, che eviterà tutti questi problemi, trattandosi di un unico sito.

Come adattare la pagina del mio sito web al telefono: i passi per farlo da soli

Per farle comprendere appieno come rendere il suo sito web phone friendly, utilizzerò il sito web della mia agenzia SEO, Twaino.com.

Funziona con il CMS WordPress e il tema che utilizzo è “Avada”.

Prima di tutto, si noti che ho iniziato una una serie di articoli su come creare un sito web che può leggere a seconda della fase in cui si trova nella creazione della sua.

1) Controlli la visualizzazione del suo sito web su mobile

Può semplicemente usare il suo smartphone per vedere come appare il suo sito su questo supporto, ma può anche usare il browser del suo computer. Per farlo, è sufficiente ridurre la larghezza della finestra del browser di almeno un terzo, mantenendo l’altezza.

Quando faccio questo per il mio, noto che sulla pagina iniziale, tra le altre cose

• Il titolo “Twaino: Agenzia SEO” è un po’ troppo grande per un telefono

• La disposizione delle immagini non è buona, perché ho due immagini che si susseguono l’una con l’altra e ne sposterò la posizione mettendole tra un testo e l’altro;

• Le frecce nella “Metodologia della campagna SEO” non si adattano orizzontalmente, ma si susseguono verticalmente;

• Nella sezione “Blog” sono presenti grandi riquadri di immagini, mentre caroselli di due piccole immagini potrebbero rendere più piacevole l’esperienza dell’utente.

Questi sono alcuni dei cambiamenti che apporterò. Seguiteci!

2) Acceda alla dashboard del suo sito web

Per apportare le modifiche necessarie, deve accedere alla console di WordPress.

Per farlo, basta aggiungere “…./wp-admin” all’URL del suo sito web nel browser. Il mio è ” https://twaino.com/wp-admin “.

Nella pagina di login, compili le caselle con i suoi identificativi e poi convalidi per accedere al dashboard.

3) Vada alla pagina iniziale

Una volta entrato nella sua dashboard, vada alla pagina che desidera rendere responsive. Nel mio caso, questa è la pagina iniziale e, una volta entrato, clicchi sulla finestra “Modifica pagina” con l’icona di una matita, situata proprio a destra di “Crea” e proprio nella parte superiore della pagina.

Una volta nella nuova interfaccia, vedrà tutti i blocchi che compongono la sua pagina web, grazie al tema del suo sito. Il mio è “Avada” e utilizzerò questa interfaccia per realizzare le diverse configurazioni

A questo livello, le suggerisco di duplicare la finestra della home page nel suo browser e di ridurla. Questo le permetterà di apprezzare tutte le modifiche che dovrà apportare man mano che procede.

4 Creazione di blocchi per telefoni cellulari o per computer e tablet

Dovrà farlo più volte, poiché creerà dei blocchi mobili per tutti i blocchi che desidera modificare. Utilizzerò la prima modifica che intendo apportare per illustrare questo aspetto.

Se ha dei titoli sulla sua pagina, potrebbero non essere ottimizzati per la visualizzazione su un telefono. Questo è il caso del titolo “Twaino: Agenzia SEO” che è troppo grande e che ridurrò.

4-1) Duplichi il blocco da modificare

Per farlo, trovi il blocco dove si trova il testo e ci clicchi sopra. Il blocco che voglio modificare è “Agenzia” e clicco sulla piccola freccia a destra per vedere il suo contenuto.

Le suggerisco quindi di duplicare il blocco premendo la seconda icona da sinistra. Questo le permette di creare il blocco da visualizzare sui cellulari.

Quindi, dia un nome a questo nuovo blocco, in modo da poterlo trovare facilmente. Per me, utilizzo “Mobile Agency”.

4-2) Crei il blocco solo per computer e tablet

Il primo blocco che ha duplicato, che nel mio caso è “Agenzia”, è quello che verrà visualizzato su tutti i media per impostazione predefinita. È quindi necessario disattivare l’opzione di visualizzazione del telefono.

Questa azione le permette di riservare solo il primo blocco per la visualizzazione su computer e tablet e il secondo blocco, “Agence Mobile” nel mio caso, per la visualizzazione sui telefoni.

Per farlo, clicchi sull’icona di modifica, la prima da sinistra. Quindi scorra verso il basso fino a “Visibilità del contenitore”, che le offre tre opzioni:

• Schermo piccolo: per schermi piccoli, compresi i telefoni;
• Schermo medio: per schermi medi, compresi i tablet;
• Schermo grande: per schermi grandi, compresi i computer.

Poiché voglio che questo blocco sia visibile solo sui computer, deselezionerò “schermo piccolo” e manterrò solo “schermo medio” e “schermo grande”.

Quindi salvi questa modifica per continuare.

4-3) Creare il blocco solo per i cellulari

Si tratta dello stesso processo del passo precedente, ma in questo caso deselezionerà :

• Schermo medio
• Schermo grande

Si assicuri che il loro colore diventi grigio, il che le permetterà di utilizzare la configurazione del secondo blocco, “Agenzia mobile” al mio livello, per la visualizzazione solo sui telefoni.

Salvi questa modifica in modo che venga presa in considerazione. A questo punto, le consiglio di ridurre sempre i blocchi che non utilizza per non commettere errori. Infatti, se non è così, rischia di apportare alcune modifiche nel blocco sbagliato e di dover ricominciare tutto da capo, il che non è auspicabile.

5) Modifichi la dimensione del carattere del suo titolo

Dopo questi passaggi, può passare alla fase di editing vera e propria. Per modificare le dimensioni del testo, sposti il cursore del mouse sull’area in cui il testo è visualizzato in forma di miniatura. Vedrà un’icona di modifica a forma di matita, che si trova nella prima posizione a sinistra, che dovrà premere.

Nella pagina che appare, ha un campo contenente il suo testo e diverse opzioni per formattarlo.

Quindi clicchi sulla scheda “Testo” nell’angolo superiore destro del campo di testo.

Si dispone del formato html del testo e si cerca la parola “font-size” seguita da un numero. Questa è la dimensione del testo che desidera modificare.

Al mio livello, ho “font-size: 50 px”, che si trova sulla stessa riga del titolo che voglio modificare, “Twaino: Agenzia SEO”.

Questo indica che la dimensione del titolo è di 50 pixel, che io cambio in 40 pixel.

6) Sposti le sue immagini

Ci sono due immagini che si susseguono nel blocco “Agenzia mobile”, che non si vedono bene sul telefono. Per farlo, sposterò uno di essi sotto il testo che lo segue. Ecco come fare se vuole fare lo stesso.

Si tratta di un’operazione molto semplice e una volta nel blocco, faccia clic con il tasto sinistro del mouse sulla cornice dell’immagine e trascini nell’area in cui desidera posizionarla.

Al mio livello, lo trascino verso destra e prende il posto del secondo testo, quindi l’ho appena posizionato nell’ultima posizione.

Salvi questa modifica cliccando sul pulsante blu “Aggiorna” nell’angolo in basso a destra. Può verificare se le impostazioni sono state prese in considerazione.

Per farlo, aggiorno la homepage della scheda ridotta del mio browser e le modifiche sono state prese in considerazione con un buon rendering che è diverso quando si passa dalla vista del computer a quella del telefono.

7) Disporre il layout delle forme

Nel blocco “Metodo”, ho delle frecce che si adattano bene al display del computer, ma che danno un risultato diverso per il telefono.

Per eseguire la mia stessa azione, prima duplichi e dia un nome. Nel mio caso, scrivo “Methode Mobile” per poterlo differenziare dal primo.

Poi, come ha fatto nel passo 4, disattivi :

• La visualizzazione su “Schermo piccolo” nel primo blocco.
• La visualizzazione su “Schermo medio” e “Schermo grande” sul nuovo blocco.

Questo le consente di effettuare le modifiche per il telefono.

7-1) Cancellare le vecchie frecce

Clicchi sulla piccola freccia all’estrema destra per vedere il contenuto del nuovo blocco che desidera modificare, “Methode Mobile” nel mio caso.

Elimino gli altri elementi lasciandone solo uno, che mi permetterà di avere tutti i contenuti sulla stessa linea. Per farlo, basta cliccare sull’icona del cestino che li accompagna.

7-2) Inserire un’immagine

Trascini il suo cursore sull’immagine e prema l’icona della matita a sinistra per apportare le varie modifiche.

Nell’interfaccia che appare, selezioni il pulsante “Modifica”, che si trova all’estrema destra e appena sotto l’immagine. Questo la condurrà alla “Libreria multimediale” del suo sito web.

Ha la possibilità di selezionare una delle immagini già presenti nella sua libreria o di caricare una nuova immagine. Al mio livello, ho già creato una piccola immagine con il software Adobe Illustrator che posso utilizzare.

Per farlo, clicco su “Carica file” e poi su “Seleziona file” per caricare l’immagine dal mio computer.

Mi preoccupo di dare un nome all’immagine e di premere il pulsante “Inserisci nella pagina”. Dopo aver salvato cliccando su “Salva”, clicco su “Aggiorna” che tiene conto delle mie modifiche.

Una volta aggiornata la homepage, posso vedere che ho l’aspetto desiderato.

Tenga presente che a questo punto abbiamo inserito una sola immagine per il display del telefono, invece di tre immagini diverse per il display del computer. Pertanto, ci saranno solo un link e un’immagine cliccabile per la visualizzazione mobile, invece di tre nel secondo caso.

8) Crei un cubo di diverse immagini ben strutturate

Nel blocco “Servizi”, la visualizzazione reale su mobile è distorta. Infatti, delle tre immagini che si susseguono sotto il banner “RIFERIMENTO NATURALE”, ne compaiono solo due.

Per correggere questo, creerò un cubo in cui inserirò le tre immagini e un’immagine quadrata di “RIFERIMENTO NATURALE”.

8-1) Creare il nuovo blocco

Per apportare queste modifiche, che riguarderanno solo il display mobile, proceda inizialmente come al punto 4. In altre parole:

• Duplica il vecchio blocco;
• Rinomini il nuovo blocco;
• Configuri la visualizzazione per entrambi i blocchi.

Nel mio caso, ho “Service” come vecchio blocco e “Mobile Service” come nuovo blocco.

8-2) Creare un cubo di 4 immagini

Clicchi sulla piccola freccia all’estrema destra per vedere il contenuto del nuovo blocco. Per ottenere il risultato che desidero, elimino il banner “RIFERIMENTO NATURALE”. Poi modifico l’organizzazione delle tre immagini.

Clicco sull’icona di modifica a forma di matita ed elimino una delle immagini per avere le due che formeranno una linea nel mio cubo. Per farlo, basta cliccare sull’icona del cestino sulla stessa barra del nome dell’immagine e salvare.

Finalmente ho due immagini che duplico per avere la seconda riga del mio cubo. Per farlo, clicchi sull’icona che viene subito dopo l’icona della matita e si trova nella seconda posizione.

Li regoli in modo che le due sezioni siano correttamente allineate una sotto l’altra. Ora cambi le immagini duplicate inserendo le altre due immagini al loro posto dalla sua “Libreria multimediale” o caricandole dal computer.

Ora ho ottenuto le mie quattro immagini con i miei servizi:

• RIFERIMENTO NATURALE ;
• SCRITTURA WEB ;
• FORMAZIONE ;
• AUDIT SEO.

8-3) Modificare la distanza tra le immagini

Salvo le modifiche e aggiorno la homepage per vedere come appare. Il mio cubo con le quattro immagini è apparso bene, ma la distanza verticale è piuttosto grande.

Per ridurlo, prema l’icona di modifica nella prima fila di immagini del blocco “Servizio mobile”. Poi clicchi sulla finestra “Design”, che si trova al centro di “Generale” e “Animazione”.

In “Margine” inserisca un numero inferiore, io ho inserito “-15%” al mio livello. Poi salvi e aggiorni la pagina per vedere come appare. Il mio è perfetto e consiglio di variare il “Margine” per ottenere il risultato ideale, se non si ha tutto in una volta.

9) Aggiungere caroselli di immagini

Nel blocco “Blog” del mio sito web, ho immagini di grandi dimensioni che si susseguono orizzontalmente, il che non ha un bell’aspetto. Per farlo, creerò delle righe con due immagini ciascuna.

Quindi vado al blocco “Blog” e lo duplico per creare il “Mobile Blog”. Per farlo, utilizzi lo stesso processo descritto al punto 4.

9-1) Scegliere il carosello e inserire le immagini

Quindi apra il contenuto del blocco “Mobile Blog” cliccando sulla piccola freccia a destra. Poi clicchi su “+ Elemento” e cerchi la parola “Carousel” nella barra apposita.

Apparirà il pulsante “Carosello di immagini”, sul quale potrà cliccare. Nella pagina che appare, prema “Seleziona immagini” sotto “Caricamento massivo di immagini”, che la porterà alla sua “Libreria multimediale” per selezionare le immagini.

Nel mio caso, prendo prima le due immagini contrassegnate come “ON SITE” e “OFF SITE” per il carosello “SEO”.

9-2) Impostare il carosello

Dopo aver selezionato le immagini, scenda al livello :

• Da “Dimensione immagine” e premere “Auto” per rendere automatico il dimensionamento;

• Tipo di Hover” e selezionare “Solleva”;

• Autoplay” e selezionare “No”;

• Da “Colonne massime” e scelga il numero desiderato. Ne utilizzo due per le mie immagini;
• Da “Mostra navigazione” e selezionare “No”.

Poi salvo queste modifiche per vedere il rendering sulla home page del mio sito web.

Il risultato è definitivo e per continuare, dovrà eliminare gli elementi superflui dal suo blocco. Per farlo, clicchi sulle icone del cestino nella parte superiore degli elementi.

9-3) Creare più caroselli

Se desidera aggiungere altri caroselli di immagini, duplichi il primo che ha appena creato. Questo le permette di mantenere le diverse configurazioni che ha già realizzato.

Dopodiché, vada a scegliere le immagini che desidera inserire al posto di quelle già presenti.

Questo si fa cliccando sull’icona di modifica presente su ogni vecchia immagine. Questo le permette di selezionare le nuove immagini una per una.

Al mio livello, prendo le due immagini contrassegnate con “ROBOT” e “USER EXPERIENCE” per il carosello “Creazione di siti web”.

Faccio lo stesso per un altro carosello di immagini, questa volta importando “WORDPRESS” e “WEBSITE”.

Colgo anche l’occasione per impostare il “Margine” del parametro “Design” su “-19%”, in modo che la distanza tra le immagini sia ridotta.

9-4) Regolare gli spazi

Salvo le modifiche e aggiorno la home page. L’aspetto è buono, tranne che per lo spazio tra i blocchi “Mobile Blog” e “Contatti”.

Per ridurlo, clicchi sull’icona di modifica sulla stessa riga del nome del blocco e clicchi sulla finestra “Design”.

Diminuisca o aumenti il “Padding” a seconda che desideri diminuire o aumentare la distanza.

Non esiti ad andare avanti e indietro più volte per trovare il risultato perfetto.

10) Controlli le modifiche un’ultima volta

Ha appena finito di ottimizzare il suo sito web per i telefoni cellulari. Ma per assicurarsi che tutto funzioni correttamente, faccia un controllo finale. Ciò comporta il controllo della visualizzazione finale su ogni supporto.

Questo le permetterà di sapere se ha toccato il display widescreen senza saperlo. Da lì saprà esattamente cosa fare per risolvere il problema.

E questo è tutto! Avete appena adattato il vostro sito web al telefono.

Conclusione

Oggi, più della metà degli utenti di Internet utilizza i cellulari per connettersi a Internet. Poiché questo numero è in crescita, è importante creare un sito web responsive che si adatti automaticamente a tutti i tipi di media. Questo aumenterà notevolmente l’esperienza dell’utente. Un fattore molto importante anche per Google, che non esita a classificare i siti web responsive nelle prime posizioni. Le suggerisco di seguire i diversi passaggi presentati in questo articolo per offrire la migliore esperienza ai suoi utenti.

A presto!