Comment créer un site internet responsive avec Showit

Dans ce poste, je vous montre comment créer un site responsive avec Showit, autrement dit, qui s’adapte à toutes les tailles d’écran.

Je me souviens de cette période où je passais des heures à essayer de créer un design qui fonctionnait pour tous les écrans avec Elementor pour mon site WordPress. Sur les design de base, c’était simple. Mais quand il s’agissait une position absolue (pas trop dans une case), c’était une vraie galère.

Si vous vous intéressez un peu à Showit, vous savez que le design du mobile fait partie de ses grands atouts. Mon objectif dans ce post est de vous montrer comment ça fonctionne, quels sont les avantages et les inconvénients.

Pourquoi créer un site optimisé pour les appareils mobiles

Voici quelques chiffres qui devraient attirer votre attention : 

• 85% des internautes s’attendent à ce qu’un site web s’affiche correctement sur leur appareil mobile.
• 60% du trafic internet mondial provient des smartphones.
• 50% des utilisateurs abandonnent un site web si celui-ci n’est pas optimisé pour les mobiles.

Si aujourd’hui, vous créez un site web, ce n’est absolument pas un luxe de veiller à ce qu’il soit responsive, c’est une nécessité.

De plus, on sait qu’à l’air de l’IA, Google fait très attention à l’expérience utilisateur sur un site web. Il met en avant les sites avec une bonne rétention, car c’est en quelque sorte un gage de qualité.

D’ailleurs, Google a introduit le Mobile-First Indexing, où la version mobile d’un site est désormais prioritaire dans l’indexation et le classement SEO. Cela signifie qu’un site web non optimisé pour les mobiles sera lourdement pénalisé en termes de visibilité et de référencement.

Contrairement à d’autres plateformes, Showit vous donne un contrôle total sur la version mobile de votre site. Voyons comment cela se fonctionne en pratique.

L’interface de design de Showit pour créer un site responsive

L’interface de design de Showit met la création de la version “bureau” et de la version mobile sur le même piédestal. Vous avez la possibilité de travailler simultanément sur les deux versions.

Quelle que soit la version sur laquelle vous travaillez, lorsque vous ajoutez un élément, celui-ci est également ajouté sur l’autre version. Pourquoi ? Parce que le contenu est le même (à moins de spécifier le contraire), seul le visuel diffère.

Avec l’éditeur “Côte à côte”, vous pouvez voir directement comment les modifications que vous faites se reflètent sur chaque version.

Note : Avec Showit, vous n’avez pas à vous inquiéter de l’adaptation aux différentes tailles d’écran, car votre design va s’afficher EXACTEMENT comme vous l’aviez visualisé en cran votre site.

Cette interface change vraiment la donne en matière de créativité et de design pour la création de votre site web.

 Quand les autres plateformes ne donnent pas beaucoup de contrôle sur la version mobile, avec Showit, vous avez une totale liberté créative.

Il existe également des outils intégrés pour personnaliser indépendamment votre conception mobile et de bureau, ou pour supprimer des éléments, voire des sections entières, d’une mise en page ou de l’autre.

Outils intégrés de Showit pour designer un site responsive

Synchronisation ou séparation des paramètres

Vous pouvez contrôler l’expérience utilisateur de façon personnalisée sur l’une ou l’autre des versions de votre site Showit.

Pour tous les éléments que vous ajoutez dans une section (textes, images, formes, etc) vous pouvez décider de synchroniser ou non les paramètres de styles, les effets et les transitions.

Les deux fonctionnalités pour contrôler la synchronisation des paramètres sont :

• Split Mobile & Desktop : Pour désynchroniser le paramètre.

• Merge Using Mobile : Si vous aviez désynchronisé le paramètre et que vous souhaitez synchroniser à nouveau en gardant la valeur de la version mobile.
• Merge Using Desktop : Si vous aviez désynchronisé le paramètre et que vous souhaitez synchroniser à nouveau en gardant la valeur de la version bureau.

Note : Vous pouvez utiliser cette fonctionnalité sur plusieurs éléments du site. Ci-dessous, vous observez le changement de la couleur de fond d’une section.

Note : Pour synchroniser à partir de la version mobile, vous devez être sur la version mobile. Et inversement.

Afficher des éléments en fonction des versions

Vous pouvez afficher ou masquer des éléments d’une section sur votre page web en fonction des versions (mobile ou bureau). 

Pour cela, il vous suffit d’activer ou non l’icône correspondant au mobile et à la version bureau dans la partie gauche de l’interface. 

Lorsque les icônes sont blanches, cela signifie que l’élément est visible dans la version respective du site. Si elles sont grisées, cela signifie que l’élément est désactivé pour la conception respective.

Masquer une section en fonction des versions

Vous pouvez également masquer une section entière pour l’une ou l’autre des versions mobile ou bureau. 

Pour cela, rendez-vous dans l’onglet “Page” dans la partie gauche de l’interface et cliquez sur les trois points à droite du nom de la section, puis décochez l’une des cases qui indiquent “Visible on Mobile/Desktop” pour supprimer la visibilité de cette section entière dans l’une des deux versions.

Lorsque qu’une section est visible uniquement sur la version mobile, l’icône téléphone s’affiche à côté du nom de la section. Si c’est la version mobile, l’icône correspondante s’affiche.

La navigation mobile sur Showit

Vous pouvez aussi créer une navigation mobile 100% personnalisée grâce aux fonctionnalités mises en place par Showit.

Vous pouvez par exemple faire apparaitre votre menu mobile au-dessus du reste du contenu grâce à un ordre de superposition élevé et une fonction « sticky » en haut de l’écran.

Par défaut, le menu est caché et n’apparaît que lorsqu’on clique sur l’icône de menu (généralement sous forme d’un hamburger). Chaque option du menu, ainsi que l’icône de fermeture, inclut des actions intégrées pour rediriger l’utilisateur et refermer automatiquement le menu une fois la sélection faite, offrant une expérience de navigation épurée et fluide. 

Aide au design mobile (Mobile Layout Assistance)

Si vous commencez la conception de votre site par la version bureau, la bone nouvelle c’est que vous n’avez pas besoin de tout recréer manuellement. 

L’assistance au design mobile vous permet de copier les mêmes paramètres et la position des éléments pour refléter l’apparence de la version bureau.

Il existe 4 options pour gérer pour aider à organiser la mise en page des éléments du chaque section sur la version mobile.

• Disposition (Layout)
  Auto : génère une version de votre site pour mobile en fonction des dimensions et de la disposition mobile.
• Scaled : crée une version dupliquée de la disposition de la version bureau les tailles de police peuvent nécessiter une optimisation pour l’affichage mobile.
• Stacked : centre et redimensionne tous les éléments sur le canvas afin de permettre un placement manuel facile des éléments.
• Do Not Layout : n’ajuste pas la disposition du format mobile (peut être utilisé lorsque vous souhaitez copier uniquement les paramètres de conception, mais pas la disposition).

Il y a deux options pour copier les paramètres de la section elle-même

• Copy Desktop Canvas : copie tous les paramètres du canvas bureau et les applique au canvas mobile.
• Copy Desktop Elements : copie les paramètres des éléments du bureau vers la version mobile.

Lire aussi : Site internet Showit – Le guide complet pour débutant

Lire aussi : 8 bénéfices de Showit – Incontournables pour un site web impactant rapidement

Comment vérifier que votre site Showit fonctionne bien sur tous les écrans

Si vous voulez vous assurer que votre site web fonctionne bien sur tous les supports, que l’expérience utilisateur est fluide et homogène, vous allez devoir faire des tests.

Voici quelques méthodes simples et efficaces pour vous assurer que votre site s’adapte facilement à différentes tailles d’écrans..

Utiliser l’option de prévisualisation pour vérifier que votre site Showit s’affiche bien

Vous pouvez prévisualiser votre site web depuis l’interface Showit, en client sur le bouton “Preview” en haut à droite de l’interface de design.

Lorsque vous cliquez sur le bouton “Preview”, c’est la page sur laquelle vous travaillez qui s’ouvre.

Vous pouvez visualiser la version bureau comme la version mobile. En basculant entre les vues, vous pouvez rapidement évaluer la cohérence de votre mise en page, des images, des textes, et de la navigation.

Utiliser une extension Google pour contrôler l’affichage de votre site sur plusieurs modèles de téléphones et différentes tailles d’écran

Pour tester votre site sur des appareils et écrans spécifiques, des extensions Google Chrome comme Responsive Viewer sont très utiles. 

Avec Responsive Viewer, vous pouvez par exemple sélectionner les appareils sur lesquels vous souhaitez faire la simulation.

Cela vous donne une vue réaliste de votre site même si vous n’avez pas ces appareils en physique.

Astuce : Vous pouvez utiliser cette méthode avant même que votre site soit publié. Il faut pour cela copier le lien qui s’affiche en haut de votre fenêtre de prévisualisation.

Vérifier l’adaptation de votre site à plusieurs tailles d’écran sans extension

Une méthode simple pour tester l’adaptation responsive de votre site Showit sans extension, ni programme particulier, c’est d’utiliser quelque chose que vous avez déjà : le navigateur de votre ordinateur.

Il suffit de réduire la taille de votre fenêtre à l’horizontale et/ou à la verticale. Vous pourrez observer comment votre site s’adapte aux différents ratios.

Note : Sinon, vous pouvez simplement tester sur votre téléphone, et tous les appareils de vos proches (s’ils veulent bien).

Conseils pratiquent pour créer la version mobile de vos pages Showit

Travaillez sur les deux versions simultanément

Travailler simultanément sur la version mobile et bureau a deux avantages selon moi.

Le premier, c’est que si vous attendez de faire la partie mobile APRÈS avoir créé entièrement votre page, la charge peut vous décourager parce que vous aurez déjà l’impression d’avoir fini quand la version bureau sera prête (quand y’en a plus y’en a encore).

Le second avantage est que vous voyez en direct comment les modifications d’un élément se répercutent sur les deux versions.

Personnellement, je travaille section par section. Je commence par la version bureau avec elle seule ouverte sur l’éditeur. Ensuite, j’édite la version mobile en gardant ouvert la version bureau.

Parfois, on oublie que les paramètres sont synchronisés ou pas. Donc pour éviter les surprises, quand je travaille sur le mobile, j’aime bien avoir les deux versions ouvertes. 

Utilisez le copier-coller pour reproduire les styles

Vous pouvez copier un élément (un texte par exemple), et coller les paramètres de style de ce dernier sur un autre élément de même type en utilisant le raccourci suivant : 

• Sur Windows : Ctrl+Maj+V.
• Sur Mac : Cmd+Maj+V

C’est un des raccourcis qui me servent plus sur Showit, il peut faire gagner beaucoup de temps. Vous pouvez par exemple copier le style d’une version à l’autre.

Nommez vos éléments de façon distincte

Pour éviter la confusion lorsque vous avez plusieurs éléments sur votre section, donnez des noms très distincts.

Si chaque élément de votre section est facilement repérable et modifiable, cela limite les risques d’erreurs et vous évite de perdre du temps inutilement.

Testez l’assistance “mobile layout assistance”

Au lieu de partir de zéro sur votre design mobile, n’hésitez pas à tester les différentes propositions de l’assistance de design.

Comme expliqué plus haut, les propositions ont chacune leurs avantages, vous pouvez choisir celle qui se rapproche le mieux de votre idée.

Bonus : Aérez votre design

Vous avez toute la liberté de disposer vos éléments sur la version mobile de votre site. N’essayez pas à tout pris de vous coller à la version bureau : aérez.

Dites-vous que lorsque les gens ouvriront votre site sur leur téléphone, il faut qu’ils aient une expérience agréable. Cela passe par la lisibilité et le confort de navigation.

Conclusion

Comme vu dans l’article, Showit met à disposition une interface de design qui facilite considérablement la création d’un site web adapté à la fois aux ordinateurs comme aux mobiles. 

Vous pouvez créer un site qui reflète votre image de marque et s’adapte à tous les écrans de vos utilisateurs. Vu que la plupart du trafic internet se fait sur un smartphone, c’est un indispensable pour votre réputation en ligne et votre référencement sur les moteurs de recherche.

Maintenant, vous avez tous les éléments pour construire un site responsive avec Showit. N’hésitez pas à laisser un commentaire rapide pour dire ce que vous en pensez.

Vous pouvez bénéficier d’un mois gratuit de votre abonnement Showit (en plus de la période d’essai de 14 jours) en cliquant sur mon lien ou en utilisant le code kimpoba.