Coucou 👋
Nouvelle semaine, nouveaux tips.
Vous avez encore été nombreux à me contacter pour me parler de votre projet : merci pour ces échanges pleins de tips et d’inspiration !
Du coup pas de blabla, on balance la sauce direct 👇
L’image de la semaine
J’aurai pu la mettre juste en texte dans le corps du mail, mais j’ai préféré la coller en format Poster pour que tu l’imprimes et que tu la fixes à côté de l’écran ou sur ta table de nuit.
Si tu ne connais pas Simon Sinek, je t’invite à voir sa vidéo “Commence par le pourquoi” disponible sur Youtube ici (pense à activer les sous-titres 🇫🇷).
J’insiste sur ce point parce que je vois beaucoup de porteurs de projets qui s’égarent dans des considérations trop théoriques, trop longtemps.
👉 ma recommandation pour lancer enfin ton projet : pense large et définis rapidement un angle d’attaque actionnable pour lancer ton MVP et ensuite itérer à partir de cette première version. Basta.
Les tips Bubble
1. Les derniers seront les premiers
Tu paramètres tes conditions sur un élément mais tu vois que ça ne conditionne pas comme prévu ?
Tu as sûrement oublié que les conditions sont priorisées de bas en haut. Pour notre élément Text du screen, l’utilisateur n’est pas connecté donc le mail est vide -> le texte sera bleu #03B4C6
Si tu veux revoir l’ordre de tes priorités, cliques sur move up ou move down.
Tips en rab’ puisqu’on est là : en cliquant sur OFF, tu vas activer le rendu de cette condition afin de vérifier qu’elle s’affiche comme tu le souhaites lorsque sa condition d’activation sera validée. Ré-appuis dessus pour basculer.
2. Juste envie de disparaitre
La question revient souvent : comment je fais disparaitre un élément dans un contexte particulier ?
Par exemple, tu dois masquer un groupe confidentiel lorsque le Current User ne remplit pas la condition est_administrateur ? -> Yes.
Je te conseille de décocher dans les propriétés du groupe This element is visible on page load, afin de ne pas avoir de latence entre le chargement de ta page complète et le calcul de la condition de masquage.
Ensuite, dans les conditions du groupe, tu coches When Current user est_administrateur? is Yes -> ✔️ This element is visible.
Tu remarqueras cependant que l’emplacement du bloc disparu est toujours marqué, et que ça fait bizarre.
👉 coche la case ✔️ Collapse this element’s height when hidden. Comme ça le bloc disparait physiquement en se contractant verticalement et les éléments en dessous remontent.
Tu peux même animer cette contraction avec un effet élégant si tu souhaites que ton visiteur s’en aperçoive en cochant ✔️ Animate the collapse operation qui apparait quand tu as coché la case Collapse this element’s height when hidden.
👉 seuls les éléments de type Groupe peuvent disparaitre de cette façon. Donc si tu veux faire disparaitre un texte ou un input : tu le mets dans un groupe, et c’est le groupe que tu masques !
3. Petit cours de fitness
Maintenant que tu es un magicien accompli 🧙♂️ et que tu gères les disparitions d’éléments en hauteur grâce à ✔️ Collapse this element’s height when hidden, tu te demandes comment faire l’équivalent quand tu compresses ta page dans la largeur.
Le bloc rose pâle reste présent même si la condition Visible est décochée quand ma Current Page Width <= 572.
Et pour le bloc bleu ciel, tu remarques que quand la taille de la page <= 572 il disparait et laisse sa place au bloc bleu foncé !
Le secret ? C’est …. argh….
Plus sérieusement : pour obtenir une compression totale dans la largeur, tu dois te mettre en vue Responsive et c’est dans ce panneau que tu auras accès à l’option Hide when parent width en cliquant sur le bloc à faire disparaitre.
Tu peux choisir de le faire disparaitre quand la largeur est inférieur ou égale à un chiffre, ou quand elle lui ai strictement supérieure. A noter que tu ne peux pas modifier ce chiffre une fois défini : tu dois le supprimer et recréer une règle.
Pour voir d’un coup d’oeil les éléments qui auraient été masqués avec cette technique, le panneau Hiding rules apparait lorsque la condition de masquage est remplie et te permet de supprimer la règle.
Le mini-tuto : exercices pratiques
Cette semaine, on passe à la pratique : apprentissage par mise en situation. C’est un peu l’équivalent des cahiers de vacances, pour nocodeur (ça a l’air fun mais en fait c’est carrément sérieux, voire totalement chaud)
Je t’ai sélectionné 4 jeux pour t’entrainer, parmi une sélection de 7 jeux de @saedaher.ui
https://color.method.ac : entraine-toi à retrouver une couleur exacte
https://www.pixact.ly : arriveras-tu dessiner une zone précise en pixels ?
https://www.supremo.co.uk/designers-eye : es-tu capable de dire si le point est au centre ou non ?
https://cantunsee.space : le meilleur pour la fin. Entraine-toi à voir ce qui ne va pas dans un design !
L’inspiration Bureau
Une belle page d’accueil et de recherche, idéale pour les sites de voyage. Créée par @matt.wojtas
➕ des blocs bien distincts
➕ une belle part réservée aux visuels qui donnent envie
➕ un carrousel avec une navigation originale
➕ une organisation claire et efficace : recherche, inspiration, raccourci vers le profil, suggestions.
L’inspiration Mobile
Besoin de faire tes courses dans un univers allégé ? Zuairia Zaman te propose une solution.
➕ un écran d’accueil épuré proposant un onboarding et la possibilité de le passer
➕ des choix évidents, peu de couleurs
➕ un panier rappelant le store choisi avec des petits dessins pour les articles. Ce choix permet de conserver une cohérence visuelle entre les différents items.
➖ il faut plutôt générer le code barre une fois la commande validée, en cas d’échec c’est plus simple (à cette étape il n’y a qu’un panier, pas de commande ferme)
Et maintenant, que vas-tu faire de tout ce temps ?
Le week-end approche à grand pas. Tu vas pouvoir mettre en application les quelques conseils vus ici.
Tu peux reproduire les inspirations pour te faire la main avec l’éditeur de Bubble, et surtout l’onglet Responsive : tu verras, il ne mord pas et deviendra sûrement ton meilleur ami rapidement ❤️ !
Comme d’habitude, j’adore tes feedbacks donc n’hésite pas à m’en faire et à venir me parler de ton projet.
Bonne continuation et à vendredi ;)
Charles-Édouard Turquais
CTO nocode & formateur Bubble
Bonjour Charles-Édouard,
Super ton conseil pour les conditions. Je n'ai pas eu de cas pour l'instant où une même propriété différait selon une condition, mais je ne savais pas que l'ordre était de bas en haut (ma logique Excel et Access surement puisque sur ces derniers la priorité vient en premier et on peut même interrompre après une condition).
Super aussi l'idée des petits jeux. Celui des couleurs au début ça va et quand il commence à y avoir 3 curseurs on finit par s'arracher les cheveux lol.
Pour le dernier (bien/pas bien), justement, ce matin je cherchais sur Google des images de ce genre, il n'y en a pas des masses (ou alors je n'ai pas utilisé les bons mots-clés), j'en avais plus trouvé sur Instagram. Je trouve que c'est bien et que ça donne des idées de design :)