C’est probablement le point qui surprend le plus quand on commence à créer son site sur Showit.
Sur la plupart des plateformes, tu crées ton site en desktop et le mobile s’adapte automatiquement. Sur Showit, ce n’est pas comme ça que ça fonctionne.
Et c’est une très bonne chose, même si ça demande un petit temps d’adaptation au départ. Dans cet article, je t’explique la logique, comment basculer entre les deux vues et comment travailler efficacement sur les deux en même temps.
Sur Showit, Desktop et Mobile sont deux designs indépendants
C’est la règle fondamentale à intégrer : ta version desktop et ta version mobile sont des designs distincts. Showit te donne une liberté créative totale sur chacun, mais ça veut dire que tu dois penser les deux.
Quand tu ajoutes un élément dans ta version desktop, cet élément apparaît aussi dans la version mobile. Mais sa position, sa taille et son comportement ne s’adaptent pas automatiquement. C’est toi qui ajustes.
C’est pour cette raison que je recommande fortement de travailler en vue côte à côte dès le début, pour voir les deux versions en temps réel pendant que tu crées.
💡 Prends l’habitude de travailler en vue côte à côte (side-by-side). Tu vois les deux versions en simultané et tu peux ajuster au fur et à mesure, sans accumuler un gros travail de rattrapage mobile à la fin.
Vue côte à côte Desktop et Mobile dans Showit avec un exemple de page
Comment basculer entre Desktop et Mobile
Dans la Bottom Toolbar en bas de ton écran, tu trouves trois icônes pour gérer tes vues :
L’icône écran : vue desktop uniquement.
L’icône mobile : vue mobile uniquement.
Les deux icônes ensemble : vue côte à côte, desktop et mobile en simultané.
Quand tu travailles sur un format, les modifications que tu fais s’appliquent uniquement à ce format, sauf si les réglages sont encore synchronisés entre les deux.
Zoom sur la Bottom Toolbar avec les icônes Desktop, Mobile et vue côte à côte
Synchroniser ou séparer les réglages
Par défaut, beaucoup de réglages sont synchronisés entre desktop et mobile : une modification s’applique aux deux en même temps. Mais tu peux choisir de les séparer (Split) pour personnaliser chaque version indépendamment.
Pour cela, il suffit de survoler le réglage que tu veux modifier dans le Properties Panel et de cliquer sur les trois points qui apparaissent. Tu as alors l’option Split Mobile & Desktop.
Par exemple : tu peux avoir une police en taille 48px sur desktop et 28px sur mobile. Tu splittes le réglage de taille, tu ajustes sur chaque vue. Chaque version garde sa propre valeur.
Tu veux re-synchroniser ? Tu cliques sur l’icône desktop ou mobile dans les réglages et tu choisis Merge. Attention : si tu mergeas depuis la vue mobile, c’est la version mobile qui écrase la version desktop, et inversement.
💡 Quand tu modifies les Design Settings (typographies, couleurs), tu peux aussi splitter desktop et mobile pour avoir des tailles de texte différentes selon le format. Super utile pour l’harmonie visuelle.
Masquer un élément ou un canvas sur un format
Parfois, certains éléments n’ont tout simplement pas leur place sur mobile, ou au contraire tu veux afficher quelque chose uniquement sur mobile. Showit te permet de masquer n’importe quel élément ou canvas sur l’un des deux formats.
Pour masquer un élément : dans le Page Tab, survole l’élément en question. Tu vois apparaître deux petites icônes (un écran et un mobile). Clique sur celle du format sur lequel tu veux masquer l’élément. L’icône grisée signifie que l’élément est invisible sur ce format.
Pour masquer un canvas entier : clique sur les trois points à droite du nom du canvas dans le Page Tab, et décoche Visible On Desktop ou Visible On Mobile selon le cas.
Masquer un élément ne le supprime pas. Tu peux le réafficher à tout moment. C’est une façon propre de gérer les différences visuelles entre les deux formats sans dupliquer ou supprimer du contenu.
Page Tab avec les icônes de visibilité Desktop/Mobile sur un élément et le menu trois points d’un canvas
En résumé
Desktop et Mobile sur Showit, c’est deux designs indépendants que tu contrôles. C’est plus de travail qu’une adaptation automatique, mais c’est aussi ce qui te donne une liberté créative totale sur les deux formats.
La clé : travailler en vue côte à côte dès le début pour ne pas avoir de mauvaises surprises au moment de vérifier le rendu mobile.
→ Découvrir l’interface Showit
