Une grande partie de vos visiteurs va parcourir votre site avec un smartphone, en provenance d’une application de réseaux sociaux, ou simplement des résultats de recherche. Donc quelle que soit votre profession, vous avez besoin d’un site web adapté aux mobiles. Si vous pensiez pouvoir faire l’impasse sur cette partie et vous en sortir avec un « à peu près », oubliez tout de suite. Vous ne pouvez pas y échapper, même si ça peut sembler un peu intimidant.
Mais rassurez vous, concevoir un site web adapté aux mobiles avec Showit (ou avec un autre Page Builder) n’a rien de très complexe. Ça n’a aucun rapport avec la création d’une application mobile par exemple.
Mais rassurez vous, concevoir un site web adapté aux mobiles avec Showit (ou avec un autre Page Builder) n’a rien de très complexe. Ça n’a aucun rapport avec la création d’une application mobile par exemple.
Non, vous allez simplement créer une version miniaturisée et plus légère de votre site internet « classique », en utilisant les mêmes outils.
Il faudra juste réfléchir à la manière de rendre les choses faciles à utiliser sur un écran minuscule.
Dans cet article nous allons voir plus en détails comment créer un site web adapté aux mobiles avec Showit et son éditeur en glisser-déposer.
Et quelles erreurs éviter à tout prix pour que votre site mobile soit pratique et facile à comprendre.
Sur le même thème :
Créer un site web adapté aux mobiles avec Showit : les avantages et inconvénients de la plateforme
La création d’un site web adapté aux mobiles avec Showit est différent des systèmes habituels, notamment celui de Divi.
Avec Divi, ou (d’autres plateformes de création de sites web, comme Squarespace ou Wix) les choses sont un peu automatisées. Ce sont généralement des conceptions réactives, sous forme de grilles, qui s’adaptent automatiquement à la largeur de l’écran. Donc quand vous passez d’un écran d’ordinateur à un écran de smartphone, le contenu de chaque page va de toute façon s’adapter à peu près correctement, même si vous n’avez fait aucun réglage particulier.
Divivous permet par contre de faire des améliorations sur une version ou sur l’autre, ainsi que pour les tablettes :
Pour en savoir plus :
Avec Showit, c’est différent.
Vous allez créer 2 versions du site : une pour les téléphones et une autre pour les grands écrans.
A l’intérieur de l’éditeur Showit, vous allez voir les deux version cote-à-cote.
Mais les modifications que vous allez apporter d’un coté ne vont pas forcément se répercuter de l’autre. Ce sont en quelque sorte deux sites indépendants.
En fait vous allez procéder en 2 fois : on commence généralement par créer son site internet tel qu’il va s’afficher sur les écrans d’ordinateur.
Ensuite, lorsque vous allez passer à la version mobile, les éléments vont s’importer grossièrement (ce qui est mieux que rien et vous évitera d’en oublier). Ils seront vaguement présents dans votre canvas mais vous devrez quand même les réorganiser pour qu’ils s’affichent correctement.
Les avantages de Showit pour créer un site mobile :
-
Ce système vous encourage à concevoir la version mobile en partant de zéro. Donc celle-ci sera vraiment pensée pour une utilisation sur un smartphone.
Vous ne vous contenterez pas d’une version allégée de vos pages classiques : vous pourrez aller plus loin avec une vraie version mobile spécialement pensée pour offrir la meilleure expérience à vos visiteurs sur leur téléphone. Ce ne sera pas juste une adaptation de votre site de base, ce sera un vrai site mobile. -
Le système de glisser-déposer de Showit permet de concevoir le design facilement. Tout les éléments (boutons, textes, images, icônes) sont juste déposés sur la page, sur le téléphone fictif de l’éditeur, permettant de voir en direct à quoi ça va ressembler. Créer un site web adapté aux mobiles est beaucoup moins impressionnant de cette manière.
Les inconvénients de la plateforme pour la version mobile :
-
Il faut forcément le faire manuellement : la conception de la version pour les téléphones ne peut pas être 100% automatisée. Le site mobile Showit n’est pas une version réduite de la version classique. Vous devez donc forcément prévoir un peu de temps pour cette étape supplémentaire. Tandis que sur d’autres plateformes de création de sites web, comme Divi ou Squarespace, c’est automatique et vous pouvez vous contenter de quelques ajustements pour que tout soit parfait.
Le système de design sur mobile de Showit
Lorsque vous construisez votre site avec Showit, la fenêtre est divisée en 2 parties :
-
d’un coté la version classique, qui s’affichera sur les écrans d’ordinateurs et certaines grandes tablettes
-
de l’autre, la version mobile
Passez simplement de l’une à l’autre avec les icônes situées en bas de page :
Vous pouvez laisser les deux cote à cote, ou n’en afficher qu’un seul à la fois pour vous concentrer sur une seule tâche.
Quoi qu’il en soit, le constructeur fonctionne de la même manière pour les deux versions.
Votre page est divisée en plusieurs canvas (« canva » veut dire « toile », rien à voir avec le logiciel du même nom), qui sont en fait des sections.
Par exemple : l’entête, une section pour vos services, une section portfolio etc.
Par exemple : l’entête, une section pour vos services, une section portfolio etc.
Et vous pouvez remplir chaque canvas avec des textes, des images, des icônes, des couleurs, etc.
Vous avez la même liste qui s’affiche pour les deux types d’appareils, mais certains peuvent être masqués à l’aide de l’icône « Ordinateur » ou « Smartphone ».
Comment créer la version mobile de son site web avec Showit?
Généralement, on commence par créer la version bureau, qui est le site « classique ». Et ensuite, on fait la même chose de l’autre coté, pour les appareils mobiles.
Vous allez tout simplement vérifier chaque élément, le déplacer, et le redimensionner si nécessaire.
Vous devrez peut être les aligner ensemble afin de créer un ensemble harmonieux.
Et n’oubliez pas le menu de navigation !
Vous devrez peut être les aligner ensemble afin de créer un ensemble harmonieux.
Et n’oubliez pas le menu de navigation !
Sur le même thème :
5 astuces pour un menu de site internet efficace
Travaillez petit à petit
Évitez de vous garder la totalité du design mobile pour la fin. Quand vous aurez enfin fini votre site web, vous aurez envie de célébrer et de sortir prendre l’air, pas de refaire tout le travail pour les petits écrans !
Donc gardez les deux versions ouvertes côte-à-côte, et travaillez section par section.
Lorsqu’une section est entièrement terminée, faites sa version mobile. Procédez ainsi jusqu’en bas de page, puis passez à la page suivante.
Lorsqu’une section est entièrement terminée, faites sa version mobile. Procédez ainsi jusqu’en bas de page, puis passez à la page suivante.
Un pas après l’autre, vous allez avancer au fur et à mesure sur les deux sites, et vous serez plus efficace.
Revenir sur une page qu’on a faite il y a plusieurs jours, voire plusieurs semaines peut demander un petit temps d’adaptation, ou vous faire oublier des détails. Tout faire en même temps vous rendra plus cohérente.
Revenir sur une page qu’on a faite il y a plusieurs jours, voire plusieurs semaines peut demander un petit temps d’adaptation, ou vous faire oublier des détails. Tout faire en même temps vous rendra plus cohérente.
Autre technique – L’approche mobile first : commencer par créer la version mobile de son site
La conception de la page sur mobile étant plus compliquée, il peut être pertinent de commencer par là.
Il est toujours plus facile d’ajouter des éléments sur site mobile pour l’afficher sur un grand écran.
Dans l’autre sens, il faut faire plus de manipulations pour tout faire rentrer sur écran minuscule. Et surtout, amputer son joli design de beaucoup d’images, ce qui est un peu frustrant.
Dans l’autre sens, il faut faire plus de manipulations pour tout faire rentrer sur écran minuscule. Et surtout, amputer son joli design de beaucoup d’images, ce qui est un peu frustrant.
Donc puisque Showit vous en laisse le choix, n’hésitez pas à en profiter. Créez d’abord une jolie version smartphone, et complétez ensuite avec des éléments supplémentaires pour l’afficher sur de grands écrans.
Ou créez un site mobile complètement différent avec Showit
Si vous êtes courageuse, vous pouvez aussi le faire deux fois. Et donc créer deux sites complètement indépendants : un pour mobile et un les ordinateurs.
Cette technique vous permet de créer une version encore meilleure pour les visiteurs sur smartphone. Mais elle prend 2 fois plus de temps, bien sûr..
Quelques astuces pour créer un site web adapté aux mobiles avec l’éditeur Showit :
Sur Showit, rien n’est automatique, vous avez vraiment une toile vierge qui s’offre à vous. Vous êtes donc libre de tout créer vous-même de A à Z.
Et attention, vous ne pouvez pas vous contenter de faire une version plus étroite de votre site ! Ça ne serait pas du tout pratique : un écran de smartphone mesure moins de 10cm de large. Il ne peut contenir qu’une seule colonne sinon ce serait illisible. Il faut optimiser cet espace pour que toutes les informations soient faciles à lire.
Il va donc falloir respecter les bonnes pratiques de responsive design (oui oui, carrément). Ou partir d’un modèle pour profiter d’une version mobile déjà terminée.
C’est le revers de la médaille d’un outil aussi flexible que Showit : puisque vous pouvez déposer tout le contenu de la page là où vous voulez, vous n’avez aucun cadre.C’est un freestyle complet, et vous pouvez tomber dans les travers inverse : faire un site trop original, voire même pas du tout pratique, et qui va déstabiliser vos visiteurs…
Afficher des éléments différents sur mobile et sur bureau :
Des petites icônes (en forme de téléphone et d’ordinateur) vous permettent de masquer chaque élément du site sur une version ou sur l’autre.
Si une image vous parait superflue sur les smartphones, vous pouvez la masquer : cliquez sur son icône smartphone pour qu’elle soit grisée, mais laissez l’icône ordinateur active.
Attention, il faut masquer l’élément (avec les 2 icônes qui servent à activer/désactiver) et non pas le supprimer. Sinon il serait supprimé entièrement ! Si vous supprimez avec cette image, certes elle ne s’affichera plus sur mobile, mais elle disparaitra aussi de la version pour les grands écrans, laissant juste un énorme trou.
Vous pouvez aussi masquer un canvas entier en suivant la même procédure. Soit par qu’il n’est pas essentiel sur mobile, soit parce que vous voulez en créer un complètement différent pour l’afficher sur téléphone.
Vous pouvez ainsi avoir une version mobile beaucoup plus légère et plus rapide à créer.
Showit peut aussi créer automatiquement un site web adapté aux mobiles
Si vous avez déjà commencé par la version bureau, il est possible que vous ayez une surprise quand vous allez vous attaquer à la version mobile.
Vous vous attendez à voir une version un peu désordonnée de votre site, et finalement… c’est plutôt l’apocalypse sur mobile : plein de carrés noirs et de textes écrits n’importe comment et disposés n’importe où…
Pas de panique, c’est normal. C’est nul mais c’est normal.
Showit a simplement transposé la même liste de modules dans les deux versions (ça vous évite d’oublier certains boutons ou texte par exemple) mais ils n’ont pas été mis en forme.
C’est à vous de vous occuper de tout ça, mais vous n’êtes pas obligée de le faire 100% manuellement.
Vous pouvez laisser Showit reproduire les mêmes paramètres, et ensuite faire quelques ajustements.
Le rendu n’est pas parfait du premier coup, mais c’est toujours mieux que rien (ou que des carrés noirs). Il vous permet de gagner beaucoup de temps, et surtout de reconnaitre plus facilement les différents modules que vous si vous aviez juste des carrés noirs.
Le rendu n’est pas parfait du premier coup, mais c’est toujours mieux que rien (ou que des carrés noirs). Il vous permet de gagner beaucoup de temps, et surtout de reconnaitre plus facilement les différents modules que vous si vous aviez juste des carrés noirs.
D’ailleurs, dans l’éditeur, un petit message explicatif vous dit que « Si vous avez uniquement construit la version bureau de ce canvas, ces dispositions imparfaites générées par des robots peuvent vous faire gagner un temps significatif quand vous concevez l’expérience mobile parfaite » (traduction non-contractuelle à peu près effectuée par moi-même).
Donc si vous cliquez sur les points à coté du nom d’un canvas, vous aurez 4 possibilités :
-
Auto : disposition automatique en fonction des paramètres que vous avez indiqués
-
Scaled : l’éditeur va reproduire la version bureau, et pourra par exemple rétrécir la taille des polices pour un meilleur rendu.
-
Stacked : (empilé) Showit va reprendre tous vos éléments et les mettre les uns au dessus des autres. Vous pourrez ainsi les déplacer facilement et les mettre où vous voulez.
-
Do not layout : il ne fait rien et vous gérez vous-même.
Si vous souhaitez enlever certains éléments pour alléger votre vue sur un smartphone, il vous suffira de désélectionner l’icône « smartphone » en face de chacun.
Ensuite, c’est à vous de jouer : prenez vos images, vos textes, vos boutons, redimmensionnez-les avec la souris, mettez les à la bonne place, puis alignez-les avec les outils d’alignement (surtout verticalement pour les mobiles).
Conseil : donner des noms précis à chaque élément.
Lorsque vous ajoutez un élément, Showit le nomme juste « forme » ou « texte ».
C’est facile de vous repérer quand vous les voyez sur un grand écran, et que chacun est à sa place respective. Mais lorsqu’ils sont tous agglutinés sur votre brouillon de site mobile, ça peut vite être un cauchemar !
C’est facile de vous repérer quand vous les voyez sur un grand écran, et que chacun est à sa place respective. Mais lorsqu’ils sont tous agglutinés sur votre brouillon de site mobile, ça peut vite être un cauchemar !
Donc pensez à les nommer aussi précisément que possible pour vous y retrouver d’un coup d’œil. Par exemple :
-
Avec une numérotation pour les listes à puces (puce-1, puce-2, puce-3, etc.)
-
Pareil avec des boutons ou les icônes qui seraient cote à cote (bouton-1, bouton-2, bouton-3)
-
Les images doivent avoir un titre très clair, qui évite de les confondre avec une autre. ce titre n’apparait nulle part, c’est juste pour vous aider à gérer tout le contenu de votre page.
-
Pour les textes : nommez-les avec les premiers mots de la phrase, ce sera plus facile à retrouver.
Sinon vous allez vous perdre et tout mélanger sur mobile. Encore pire, vous risquez de mélanger les colonnes, en associant par exemple une image avec le mauvais bouton ou le mauvais titre, etc.
À quoi faut il penser pour la version mobile d’un site Showit
Showit vous offre beaucoup de liberté pour la conception d’un site web adapté aux mobiles. Vous êtes même complètement libre de faire tout ce que vous voulez sur votre site.
C’est comme créer un projet sur Canva (le logiciel Canva cette fois), et y ajouter des textes et tout un tas de trucs que vous avez piochés dans le menu « elements » : des icônes, des illustrations, des photos,etc.
Donc vous êtes sûre de pouvoir créer un site web parfaitement adapté aux mobiles, et d’arriver au résultat exact que vous voulez.
Sauf que : vous avez surement remarqué un truc sur Canva… Entre les jolis modèles proposés par l’équipe et vos propres créations en mode freestyle… il y a de la marge! Les vôtres vous laissent peut être une impression de … Moins bien que ceux des designers disons !
Avec Showit, le problème est exactement le même. Vous êtes tellement libre que vous êtes un peu tentée de faire n’importe quoi. Le risque est d’avoir un site qui ne soit pas très pratique à utiliser sur mobile, avec des bugs d’affichage ou des designs trop déstabilisants.
Sur la version ordinateurs, bon ok passe encore. Vos lecteurs feront avec, disons que vous êtes créative.
Mais sur la version mobile, c’est une autre histoire : un site mal conçu risque d’avoir de sérieux problèmes d’affichage. Et vos lecteurs pourraient tout simplement abandonner et partir (chez un concurrent par exemple…)
Donc pensez à respecter quelques règles pour une bonne lisibilité et pour que ça reste pratique pour vos visiteurs (en plus d’être joli)
Minimaliste
L’écran est petit, il ne faut pas le surcharger. Une disposition aérée, et une fonction à la fois.
Intuitif
Faites en sorte que les visiteurs retrouvent leurs repères habituels. Utilisez des icônes classiques, des textes clairs et des couleurs significatives (par exemple du vert valider et du rouge pour supprimer). En utilisant les codes habituels du web, votre site aura l’air familier, les visiteurs ne se poseront pas de question sur le rôle de chaque élément.
Assez d’espace blanc.
Comme toujours ! Entre les éléments, entre les lignes, mais aussi sur les cotés de l’écran.
Lisible
Utilisez une taille de police assez grosse (souvent 12) et une typographie facile à lire.
Il y beaucoup d’autres choses auxquelles il faut penser, qui sont vraiment du domaine de l’UX design, qui est un métier à part entière.
Par exemple, la navigation et l’accessibilité avec les pouces : puisque vos utilisateurs cliquent souvent avec le pouce, il est utile de disposer les bouton et liens essentiels là où leurs pouces pourront facilement aller. Les coins de l’écran sont par exemple assez peu accessibles sans prendre son téléphone à 2 mains.
Mais ça reste des choses techniques dont vous n’aurez pas forcément à vous soucier pour un site vitrine.
Pour aller au plus simple, vous pouvez juste demander autour de vous si le site mobile est simple à utiliser et à comprendre.
Vous pouvez aussi directement opter pour un modèle crée par un webdesigner pour être sure que toutes les bonnes pratiques de responive design soient respectées.
Comment vérifier si son site web est adapté aux mobiles de différentes marques ?
L’éditeur Showit vous donne un bon aperçu de votre site une fois terminé, et vous permet de travailler confortablement depuis votre ordinateur sur un smartphone fictif.
Mais le résultat ne sera pas parfaitement identique entre :
- cet outil
- l’outil de prévisualisation de Showit (qui s’affiche lorsque vous cliquez sur « Preview »)
- et de vrais téléphones.
Car il existe aujourd’hui une infinité de formats de smartphones et de tablettes.
Vous devriez donc vérifier régulièrement comment les pages s’affichent, sur votre propre téléphone bien sûr, mais aussi avec des outils spécialement conçus pour ça.
Vous pouvez par exemple utiliser une extension Chrome conçue pour cette tâche, comme Responsive Viewer, et laisser un onglet ouvert avec votre site (s’il est publié).
À chaque fois que vous avez terminé une section ou une page rafraichissez la pour voir le résultat sur différents appareils.
Pour en savoir plus, consultez cet article complet :
Tester l’affichage sur mobile de son site internet
Concevoir la version mobile d’un site web Showit n’est pas la partie la plus amusante.
Mais ça reste quand même à la portée de chacune, y compris des débutantes grâce à l’éditeur en glisser-déposer.
Ça vous demandera juste un peu de méthode, et surtout de patience !
N’hésitez pas à vous entrainer d’abord sur une page vierge pour bien comprendre le fonctionnement de l’outil. Ensuite, lorsque vous maitrisez le processus, c’est très rapide !
Si vous préférez confier cette partie à quelqu’un d’expérimenté, vous pouvez réserver une journée VIP. Je travaille une journée (ou une demi-journée) sur votre site Showit pour tout mettre en ordre.
Notez aussi que si vous achetez un template, la version mobile est évidemment déjà conçue. Et vous n’avez à ajouter votre contenu qu’une seule fois pour qu’il se mette à jour partout.Par exemple :
Sur le même thème :
