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

Site Web Twaino Agence SEO

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

Site Web Twaino Version ordinateur

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

Version ordinateur methode optimisee

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.

Version ordinateur optimisee

1) Controlli la visualizzazione del suo sito web su mobile

Site Twaino Slider revolution telephone

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
Version telephone non optimisée
  • 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;
Version telephone non optimisee
  • Le frecce nella “Metodologia della campagna SEO” non si adattano orizzontalmente, ma si susseguono verticalmente;
Version telephone non optimisee
  • Nella sezione “Blog” sono presenti grandi riquadri di immagini, mentre caroselli di due piccole immagini potrebbero rendere più piacevole l’esperienza dell’utente.
Version telephone non optimisee
Version telephone non optimisee

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 “.

Modifier les pages

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.

Modifier la page accueil

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

Les blocs de la page accueil

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.

Bloc Agence

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.

Création bloc agence pour mobile

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

Modification blog agence

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

Changement de nom agence mobile

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.

Option du bloc

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:

20 Container visibulity selection

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

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

22 deselectionner small screen

Quindi salvi questa modifica per continuare.

21 Container visibility Medium Large

4-3) Creare il blocco solo per i cellulari

24 Changement agence mobile

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

26 Small screen uniquement

  • 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.

25 Selectionner uniquement small screen

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.

27 Editer la partie texte

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

28 Appuyer pour editer le texte

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

29 Changer le titre de la page pour telephone

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.

30 Taille du texte avant changement

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

31 Taille du texte apres changement

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

34 Nouveau visuel telephone apres changement

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.

32 Emplacement de limage

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.

33 Modification place image

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.

35 Changement image emplacement

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.

36 Relocalisation image

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.

37 Changement methode

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

38 Creation page pour telephone

42 Image methode bloc apres changement

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.

40 Sauvegarde du bloc

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.

41 Image bloc avant changement

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.

43 Edit image methode

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.

44 Choix fleches methodes

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.

45 Sauvegarde des methodes

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.

46 Resultat methode

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.

47 Nos services avant changement telephone

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.
48 Dupliquer le bloc service

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

50 Visibilite pour telephone

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.

51 Bloc pour le service mobile

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.

52 Changement des images

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.

53 Allocation des images

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.

56 Se rendre sur onglet design

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”.

57 Changement de margin

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.

54 Resultat des services mobile

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.

69 Avant changement telephone partie blog

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.

63 Ajout du carousel pour images

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.

64 Choix des images

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;
65 Taille des images automatiques
  • Tipo di Hover” e selezionare “Solleva”;
66 Selectionner lift up
  • Autoplay” e selezionare “No”;
67 Nombre de colonne 2
  • Da “Colonne massime” e scelga il numero desiderato. Ne utilizzo due per le mie immagini;
  • Da “Mostra navigazione” e selezionare “No”.
68 Selectionner le bon parametrage

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.

70 Apres changement telephone partie blog

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.

71 Images avant changement

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

72 Parametrage images

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

77 Presentation blog avec images

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

76 Selection correct image

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

75 Choix image pour partie BLOG

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

74 Selection du padding

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”.

73 Choix images

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.

78 Telephone apres changement partie blog

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!

Lascia un commento