**Cet article traite de plusieurs produits et logiciels, et il contient des liens affiliés.
Il s’agit de 2 logiciels que j’utilise dans le cadre de mon travail, et donc (forcément) que j’apprécie : Divi et Showit**

Si vos visiteurs arrivent sur votre site et que tous les éléments sont en vrac, qu’ils doivent zoomer pour lire les textes, et que les images sont coupées, ça risque d’être un peu… embarrassant.

Heureusement, les Page Builder nous simplifient la tâche, et ils est assez simple de créer la version mobile de son site internet avec Divi sans trop se prendre la tête.

Un petit bouton vous permet de basculer entre la version ordinateur, la version tablette et la vue depuis un smartphone.

Vous pouvez donc faire des ajustements en quelques clics.

Sur le même thème :
Créer un site internet avec Divi et WordPress – les étapes
À quoi sert un Page Builder ?

Pourquoi mon site s’affiche mal sur mobile ? 

Votre site internet est différent sur les téléphones? (une façon polie de dire « C’est un vrai b****l tout est en vrac au secours« ).

En fait c’est (peut être) normal. En tout cas, il y a une explication toute simple : votre site internet a été conçu sur un ordinateur, qui possède un écran plus large que haut. Vous avez donc disposé tous les éléments, organisés en colonnes et en lignes, sur un écran au format paysage. 

S’il n’a pas été conçu pour s’ajuster automatiquement lorsqu’il est affiché au format portrait, le résultat risque d’être un peu bizarre. 

C’est comme prendre une photo horizontale (comme un coucher de soleil) et l’imprimer au format portrait. Il va en manquer des morceaux sur les cotés.

Si vous utilisez Divi, le système de lignes et de colonnes va s’ajuster automatiquement sur mobile.

C’est une conception réactive. Elle s’ajuste d’elle-même à la taille de l’écran, sans que vous n’ayez à créer plusieurs versions distinctes du même site. Heureusement, vous n’avez pas besoin de recréer plusieurs fois le site, pour chaque format d’écran .

• En gros, l’ensemble du site est conçu comme une sorte de grille invisible, et les lignes s’élargissent ou rétrécissent automatiquement.
• Les éléments vont s’aligner tout seuls sur la ligne suivante s’ils n’ont pas assez de place sur un écran plus petit.
• Et ils vont s’élargir ou s’écarter les uns des autres si vous passez sur un écran plus large ou si vous basculez votre téléphone. Par exemple en passant du format portrait au format paysage.

Avec du code, on peut aussi indiquer très (TRÈS) précisément des règles pour des types d’appareils très spécifiques et pour un élément particulier. Par exemple si vous voulez qu’un seul bouton d’une certaine page soit bleu turquoise uniquement sur les écrans qui mesurent entre 300 et 305 pixels, eh bien c’est possible.

Donc : si vous utilisez un page builder comme Divi, vous n’avez pas à vous en soucier, tout est quasiment automatique.  Par exemple, les colonnes vont s’élargir pour occuper toute la largeur sur les téléphones. Et elles vont s’empiler les unes sur les autres.

Mais vous pouvez aller plus loin. Divi propose de nombreuses options pour ajuster individuellement les éléments de la page (les textes, les images, les boutons etc.) pour que vos visiteurs qui voient votre site depuis sur téléphone profitent de la meilleure expérience possible.
Voire même pour créer une version mobile de votre site internet carrément indépendante. 

Le système de design sur mobile de Divi

Divi est un Page Builder : il permet de visualiser en direct l’apparence des pages pendant la construction du site.

Un bouton vous permet de basculer entre la vue classique (de votre écran d’ordinateur), tablette et mobile. 

Vous pouvez donc utiliser les outils habituels (section, lignes, modules) dans votre conception de page sur smartphone.

Créer un site compatible avec les mobiles est donc à la portée de tous les utilisateurs de Divi ! 

Dans le Divi Builder, lorsque vous ouvrez un module (gris), une ligne (vert) ou une section (bleu), vous avez accès à tous les réglages possibles sur celui-ci. Une fenêtre de paramètres vous permet de régler leur largeur, leur hauteur, la taille de la police, la couleur de fond, l’espacement, etc.

Regardez si une petite icône de téléphone s’affiche a coté du réglage qui vous intéresse.

Vous devrez survoler avec votre souris pour voir l’icône apparaitre. Dans ce cas ça veut dire que vous pouvez faire une modification qui s’appliquera uniquement sur mobile.

Par exemple, si vous changez la couleur de fond, et choisissez « rose », sur mobile uniquement (exemple nul…).

Les gens qui regarderont le site depuis leur ordinateur ou depuis une tablette ne verront rien de particulier.

Ceux qui sont sur leur téléphone verront le fond rose.

Divi crée automatiquement la version mobile de votre site internet 

Et vous n’avez même pas à le créer de toute pièces. 

Contrairement au système de Showit, Divi réplique de manière assez fidèle le site que vous venez de créer sur ces 3 tailles d’écrans.

Donc en général, on procède en 2 temps : 

1 – on crée le site internet depuis son écran d’ordinateur avec le système de Divi.

2 – on regarde ensuite ce que ça donne sur un petit écran de tablette ou de smartphone, et on procède à quelques petits ajustements. 

Il existe d’autres façons de faire (qu’on verra plus loin) mais globalement c’est comme ça que ça se passe.

Note : Si vous utilisez un template Divi, la version mobile a déjà été conçue pour vous. Vous n’aurez pas trop à vous en soucier, mais vérifiez quand même ce que ça donne sur différents écrans, en particulier si vous avez fait des gros changements dans la structure.
En savoir plus sur les templates Divi :
Utiliser les modèles Divi pour créer un site web plus vite

Régler l’affichage sur mobile de tout le site avec WordPress

Vous pouvez faire quelques réglages généraux qui vont s’appliquer à tout le site.

Par exemple, la hauteur des sections, qui peuvent avoir un réglage spécifique sur mobile qui va s’appliquer sur toutes les pages.

Pour cela, sortez du Divi Builder et rendez-vous dans les réglages généraux de WordPress. 

Dans Apparence -> Personnaliser -> Styles sur mobile, vous trouverez différents paramètres qui concernent la version mobile de votre site internet.  

Les bonnes pratiques de responsive design

A quoi faut il penser pour la version mobile d’un site Divi ?

La conception d’un site internet compatible avec les mobiles est un peu particulière.

Il ne s’agit pas simplement de faire apparaitre les bons éléments aux bons endroits. Il faut, en plus, penser à rendre l’ensemble facile à lire et pratique à utiliser. Sur un écran de 5 cm de large, c’est moins évident qu’il n’y parait ! 

Afficher les pages en plein écran

Généralement, comme on manque de place, on essaie d’occuper l’espace au maximum.
Mais attention, on ne remplit pas trop, il faut quand même que ça reste aéré ! Les éléments devraient prendre toute la largeur. 

Les marges qui sont habituellement sur les cotés ne feraient que vous faire perdre de la place. Donc on les enlève, et on affiche les textes en plein écran (en laissant quelques millimètres quand même).

Les éléments devraient tous s’afficher en pleine largeur et les uns en dessous des autres. Par exemple,  vous essayez de mettre deux colonnes sur un écran d’iPhone, ça risque de devenir illisible. Donc on essaie au maximum d’empiler des blocs les uns sur les autres.

Faites la liste de tout le contenu de votre page. Voyez ensuite ce qui est indispensable (généralement : les infos pratiques) et rayez ce qui peut être supprimé sur mobile sans que ça nuise à la compréhension.

Les images indispensables peuvent être conservées, mais dans ce cas, pensez à les redimmensionner en plus petit format.

Pensez aussi que certains éléments qui font tout le charme de votre site internet ne fonctionnent pas du tout pareil sur un téléphone.

• Les grandes et belles images en plein écran auront beaucoup moins de charme lorsqu’elles feront 5cm de large… 
• Les beaux effets au survol qui permettent d’attirer l’attention sur vos liens importants ne vont pas fonctionner sur un téléphone.  D’où l’importance de faire beaucoup de tests.

Les images de fond : 

Sur un écran d’ordinateur, vous allez peut être mettre des grandes images de fond, en format paysage. Pensez à préparer une autre image de fond spécialement pour les écrans verticaux, et à les remplacer par des images verticales, que vous aurez recadré et redimensionné avec un autre logiciel. Ça évitera qu’elles ne soient étirées ou coupées n’importe comment. 

Pensez si possible à préparer des images plus petites pour la version mobile de votre site internet. Remplacez les images fond de 2000px par des fonds de 500.  Vous diviserez par 4 le poids de vos images. (donc, en théorie, vous multipliez par 4 la vitesse de chargement).

En règle générale, sur la version mobile de votre site internet, vous devriez toujours donner la priorité au contenu. Et délaisser les éléments décoratifs sauf si vous maitrisez vraiment bien votre sujet. Les textes et les infos que les utilisateurs sont venus chercher doivent s’afficher rapidement sous leurs yeux et être faciles à lire, même sur un petit écran. 

Un affichage de bonne qualité a aussi une incidence sur votre référencement, et Google prend en compte l’affichage sur mobile de votre site.

Dans la Google Search Console, vous pouvez voir ce que Google a (entre autres) vérifié et si vous avez ces problèmes sur votre site.

Les erreurs possibles : 

• Texte illisible, car trop petit 
• Contenu plus large que l’écran : Les lignes n’apparaissent pas entièrement sur l’écran. Les utilisateurs doivent faire défiler de gauche à droite avec leur pouce pour voir la suite.
• Éléments cliquables trop rapprochés. Les utilisateurs peuvent cliquer par accident sur un mauvais lien ou un bouton. Parce que nos doigts sont beaucoup moins précis que la petite flèche de la souris. 
• Fenêtre d’affichage non configurée (concerne le code source de Divi, vous n’êtes pas concerné)

L’approche mobile first 

Par habitude, on crée d’abord la version bureau, puis, quand c’est terminé, on s’intéresse à la version mobile.

C’est parce qu’il y a quelques années encore, on créait un site internet pour qu’il soit consulté depuis un ordinateur uniquement. Puis on a commencé à rajouter une version allégée pour les téléphones portables, en ne gardant que l’essentiel. Or aujourd’hui c’est plutôt l’inverse : la plupart des sites web reçoivent beaucoup plus de trafic de smartphones que de PC. Parfois 90% !

Vous pouvez voir ça dans les outils Google si vous avez un compte Google Analytics (vous allez aussi recevoir ce genre d’infos dans les e-mails mensuels récapitulatifs). 

Désormais, certains développeurs et designers ont l’habitude de procéder dans l’autre sens : mobile en premier, puis on étoffe un peu plus la version qui va s’afficher sur de grands écrans. Vous aussi, au lieu de simplement faire des ajustements sur un site conçu pour les grands écrans, vous pouvez commencer par créer directement votre site pour les smartphones.

C’est une stratégie comme une autre, qui peut être utile si beaucoup de vos utilisateurs sont sur leur téléphone et si le design est important pour vous.

Dans ce sens là, vous aurez moins de grosses modifications à faire. Quand vous voudrez passer à la version bureau, vous allez ajouter des éléments et apporter des améliorations, et vous aurez moins l’impression de sacrifier votre joli design !

Créer une version mobile de son site internet complètement différente

De même, vous pouvez carrément créer une version entièrement différente pour l’affichage sur les téléphones.

Ne vous contentez pas d’alléger votre site, créez en un nouveau, sur quelques sections ou même sur des pages entières. Avec Divi, c’est assez rapide.

Pour celà, vous allez utiliser la fonction « Visibilité ».

Ces cases à cocher vous permettent de désactiver certains modules, certaines lignes ou même une section complète. Vous pouvez choisir de les faire disparaitre sur mobile, sur tablette ou sur bureau.

Vous avez également cette option lorsque vous cliquez sur les 3 points à droite d’un module (ils apparaissent au survol de votre souris).

De votre coté, vous les verrez encore dans le Divi Builder, mais ils apparaitront un peu grisés. 

Pour créer une section spéciale qui ne s’affichera que sur mobile avec Divi : 

1 – Créez une section, et remplissez la comme d’habitude avec une ligne, puis avec les modules dont vous avez besoin : textes, images, etc. 

2 – Désactivez « mobile » et « tablette » en cochant les cases.

3- Créez une seconde section juste en dessous, et remplissez-la avec des modules, avec une disposition spéciale pour les téléphones selon vos besoins

4 – Désactivez cette section pour « Bureau »

Vous avez désormais 2 sections différentes selon les appareils, mais qui s’afficheront au même endroit. La première va s’afficher sur les grands écrans d’ordinateur, l’autre va s’afficher sur les appareils mobiles. 

Comment tester l’affichage de la version mobile de son site internet sur plusieurs téléphones?

Ok, vous avez optimisé la version mobile de votre site WordPress dans les moindres détails. 

Mais le Divi Builder n’est pas 100% fiable quant au résultat final. Il vous donne une idée globale et vous permet de travailler facilement, mais le résultat qui s’affiche sur de vrais téléphone peut être un peu différent.

Alors comment on fait ? Est ce qu’on doit acheter 15 téléphones ? Passer une journée dans un Apple Store pour afficher son site sur tous les téléphones du magasin ? 

Pourquoi pas. 

Mais vous pouvez faire la même chose de chez vous en 30 secondes.

Non, le mieux c’est d’utiliser un outil qui simule l’affichage sur différentes tailles d’écran.

Vous pourrez voir comment ça va vraiment se présenter sur différentes marques, plusieurs modèles et plein de tailles différentes, y compris des tablettes, mobiles et montres connectées.

Comme par exemple l’extension Chrome Responsive Viewer.

Vous trouverez d’autres exemples d’émulateurs ici :
Tester l’affichage sur mobile de son site

En résumé

Les écrans d’ordinateur ont un format horizontal tandis que les écrans de smartphone on un format vertical et sont 10X plus petits.

Avec Divi, vous pouvez basculer entre les vues bureau, tablette et bureau pour construire la version mobile de votre site internet. Vous pouvez faire ces ajustements tut à la fin, lorsque le site est terminé, mais vous pouvez aussi commencer par là !
Et vous pouvez aussi créer une version inédite de votre site, juste pour les smartphones si vous êtes inspirée…

Si vous avez besoin d’aide pour cette partie, vous pouvez réserver une journée VIP avec moi en cliquant ici.

Et pour tester Divi, cliquez ici (*lien affilié) .