Ep 6 : Relume x Webflow | Formation Webflow Gratuite

Introduction au Live

Accueil et Présentation

• Bienvenue à tous pour ce nouvel épisode de la formation, avec une mention spéciale aux participants dans le chat.

• L'animateur espère que tout le monde va bien malgré un temps mitigé en France.

Format du Live

• Digidop, l'agence Webflow, organise des lives hebdomadaires pour apprendre à créer un site web de A à Z avec Webflow.

• Les vidéos seront disponibles en replay sur la chaîne YouTube de Digidop et sur la Digidop Academy.

Thème du Jour : Introduction à Rume

Retour sur le Live Précédent

• La semaine dernière, discussion autour du CMS de Webflow et comment créer des templates pour faciliter l'édition sans développement supplémentaire.

Présentation de Rume

• Aujourd'hui, focus sur Rume, un outil qui aide les développeurs à optimiser leur travail en créant une bibliothèque de sections réutilisables.

• L'animateur expliquera pourquoi cet outil est utile et comment il peut être intégré dans le processus de développement.

Utilisation Pratique de Rume

Origine et Fonctionnalité

• Rume a été développé par une agence Webflow qui a constaté des limites dans ses projets clients; ils ont donc créé une bibliothèque interne pour gagner du temps.

• Cette plateforme permet aux utilisateurs de copier-coller des composants d'un projet à un autre, facilitant ainsi le développement rapide.

Intégration avec Figma

• En plus des sections pour Webflow, Rume propose également des intégrations avec Figma pour aider les designers à créer des wireframes efficaces.

Présentation de Rum et de ses fonctionnalités

Introduction à Rum

• Rum est présenté comme un outil essentiel pour la création de maquettes, avec une structure en noir et blanc qui sert de base pour les projets.

• Une bibliothèque Figma a été créée, permettant aux utilisateurs de cloner des éléments et d'enrichir leurs projets avec une multitude d'icônes disponibles.

Outils et Écosystème

• Thomas et Floriant ont réalisé une vidéo explicative sur l'utilisation optimale de Rum pour les designers, développeurs, et web marketers.

• Rum propose un modèle freemium : accès gratuit à quelques composants, tandis qu'un abonnement payant permet d'accéder à l'intégralité de la bibliothèque.

Tarification et Composants

• L'abonnement commence à 32 dollars par mois, offrant plus de 1000 composants variés adaptés à différents besoins (e-commerce, marketing).

• Les composants incluent des éléments spécifiques tels que des bannières ou des animations, facilitant ainsi le développement.

Avantages Principaux

Gain de Temps

• Utiliser Rum permet un gain de temps significatif grâce aux composants préconstruits qui évitent le redémarrage complet du processus créatif.

• La méthodologie "client first" intégrée dans les composants assure une cohérence dans la structure des sections utilisées dans les projets.

Cohérence et Meilleures Pratiques

• Les composants sont conçus selon les meilleures pratiques, garantissant que le site web reste fonctionnel et uniforme entre différentes sections.

Simplicité d'Utilisation

• La bibliothèque permet un filtrage facile pour choisir rapidement le composant adapté aux besoins spécifiques du projet.

• Un bouton "copie" facilite l'intégration directe des éléments sélectionnés dans Webflow avec toutes les classes appropriées.

Introduction à l'outil et ses fonctionnalités

Présentation de l'outil

• L'outil est décrit comme pratique, mais les composants ne sont pas conçus avec des styles par défaut, ce qui permet une personnalisation selon le design souhaité.

• Il est important de considérer cet outil comme un assistant plutôt qu'une solution finale, soulignant la nécessité d'une compréhension des notions de développement.

Importance du développement

• Bien que l'outil facilite la création de pages, il est essentiel de comprendre comment fonctionne le développement dans Webflow pour éviter des erreurs lors de l'utilisation des composants.

• Les utilisateurs peuvent rencontrer des sections atypiques nécessitant des modifications supplémentaires pour s'adapter au projet.

Utilisation optimale de l'outil

Rôle de l'expertise

• L'utilisateur doit avoir une expertise plus large que le simple copier-coller pour adapter son développement aux meilleures pratiques.

• L'outil doit être utilisé comme un assistant pour gagner du temps tout en maintenant la cohérence et la facilité d'utilisation.

Méthodes d'utilisation

• Deux façons d'utiliser l'outil : via l'application web ou une extension Chrome. Le lien vers le site est fourni dans la description du live.

• Pour accéder à la bibliothèque de composants, il faut créer un compte sur renum.io et naviguer dans les produits disponibles.

Accès aux composants

Options d'accès

• Les utilisateurs peuvent trier les composants par type de section dans leur application ou utiliser une extension Chrome pour intégrer directement dans Webflow.

• L'installation de l'extension Chrome permet une interface minimaliste et intuitive lors du travail sur Webflow.

Fonctionnalités pratiques

• Après connexion à Webflow avec l’extension, une icône apparaît permettant d'accéder facilement à la bibliothèque de composants préconçus.

• Les utilisateurs peuvent copier directement les éléments nécessaires (comme une barre de navigation), facilitant ainsi leur intégration dans leurs projets.

Comparaison entre méthodes

Avantages et inconvénients

• La méthode via extension offre un accès direct mais peut être moins efficace pour choisir le bon composant en raison du manque d’options de filtrage.

• En revanche, utiliser la web app permet un filtrage complet pour trouver rapidement les composants désirés.

Transition vers le développement pratique

Questions fréquentes

• Une question se pose concernant les retouches après importation d'un composant ; cela sera abordé ultérieurement en raison des spécificités liées à la nomination des catégories.

Développement de la Navigation et des Sections

Introduction au développement

• L'objectif principal est de finaliser la barre de navigation, qui inclut des liens vers l'accueil, le suivi, le blog et les avis. La création d'une bannière est également prévue.

Création de la Bannière

• La première étape consiste à développer une bannière avec un titre, un paragraphe et trois cartes. Cette section sera simple à réaliser avec Rume.

• Une autre section plus complexe sera développée par la suite, intégrant Rume et du développement depuis zéro.

Utilisation de Rume pour le Design

• La bannière doit inclure un texte et un lien vers la page YouTube de Digidop. Des composants similaires ont été trouvés dans la librairie pour faciliter cette tâche.

• Un composant appelé "bannerner" a été identifié comme étant adapté au design souhaité. Il comprend un petit titre et une icône qui sera supprimée.

Intégration des Composants

• Le processus commence par copier le composant dans le projet en utilisant un bouton dédié sur WeFow.

• Avant d'aller plus loin, il est important d'adapter les éléments copiés aux spécificités du projet afin d'éviter des incohérences visuelles.

Synchronisation des Classes CSS

• Lorsqu'un élément est copié depuis la librairie, il utilise une logique de développement "client first", ce qui permet d'ajouter automatiquement les classes définies précédemment dans le style guide.

• Par exemple, une classe appelée "text siz small" a été ajoutée au paragraphe grâce à cette synchronisation automatique.

Importance de l'Extension Chrome Rume

• Pour éviter les doublons ou les conflits dans les styles CSS lors du collage d'éléments, il est recommandé d'utiliser l'extension Chrome Rume qui offre une option de synchronisation des classes.

• Si cette option n'est pas activée, cela peut entraîner l'importation non désirée de propriétés CSS inadaptées au design global du projet.

Questions sur le Design Initial

• Une question se pose concernant la phase initiale : faut-il créer une maquette sans s'inspirer directement des composants Rume ou utiliser ces derniers pour styliser ensuite ? Cela dépendra souvent du designer impliqué dans le projet.

Création d'une structure inspirée de Réume

Inspiration et personnalisation du design

• L'équipe s'inspire des éléments présents sur Réume pour établir une structure initiale, suivie d'une phase de design où les designers adaptent les sections aux besoins spécifiques des clients.

• Un exemple est donné avec un composant basique comprenant un titre et une image carrée, qui peut être personnalisé selon des sections spécifiques.

• Pour des besoins très particuliers, comme l'affichage d'un tableau, l'équipe ne s'inspire pas de Réume mais crée un croquis adapté à la maquette.

• Bien que certaines sections soient basées sur Réume pour accélérer le développement, il y a toujours un effort pour personnaliser le design final.

Gestion des composants et cohérence

• Il est conseillé de télécharger l'extension Chrome et d'activer le mode Sync pour éviter la duplication des classes dans le projet.

• Lors du copier-coller de la barre de navigation depuis Réume, les noms par défaut peuvent devenir confus; il est donc important de renommer les sections pour maintenir la clarté.

• La méthode "créen First" est mentionnée comme essentielle pour assurer que le projet soit compréhensible lors d'une inspection ultérieure.

Optimisation du code

• Une méthode sera présentée dans l'épisode suivant pour renommer efficacement plusieurs éléments en même temps afin d'améliorer la propreté du code.

• L'intervenant montre comment personnaliser sa bannière en fonction du design souhaité en appliquant différentes classes CSS.

Ajustements stylistiques

• Des ajustements sont effectués sur les styles tels que la couleur de fond et la taille du texte afin qu'ils correspondent au design prévu.

• Les marges (padding) sont modifiées pour correspondre aux spécifications visuelles fournies dans Figma, assurant ainsi une cohérence entre le développement et le design final.

Optimisation du Développement Web

Gestion des Éléments et Espacement

• Discussion sur l'utilisation de classes spécifiques pour appliquer un poids moyen au texte, permettant d'optimiser la structure HTML en retirant des éléments inutiles.

• Analyse de l'espacement entre le texte et le bouton dans Figma, avec une intention d'ajouter un gap de 32 pixels pour améliorer l'esthétique.

Intégration des Icônes

• Méthode pour copier une icône depuis Figma en tant que SVG, facilitant son intégration dans le projet.

• Avantages de Rume qui convertit automatiquement les icônes en code tout en préservant leur style et taille.

Alignement et Marges

• Importance du centrage des icônes à l'aide de Flexbox pour éviter que les éléments ne soient collés.

• Proposition d'utiliser Flexbox avec un gap d'un REM plutôt que des marges pour espacer les éléments efficacement.

Modifications CSS et Design

• Réflexion sur les modifications CSS nécessaires pour aligner le design avec la maquette originale de Quentin, illustrant un processus efficace de développement.

• Comparaison entre l'état initial du composant et le résultat final après modifications, soulignant le gain de temps réalisé grâce à ces ajustements.

Animation et Responsivité

• Présentation d'une animation intégrée où la croix permet à la bannière de se lever, démontrant une fonctionnalité interactive.

• Stratégie pour cacher certains éléments sur mobile afin d'améliorer l'expérience utilisateur sans affecter la structure globale du site.

Gestion des Classes Spécifiques

• Explication sur l'utilisation d'une classe spécifique (isbanner), garantissant qu'un bouton caché n'affecte pas d'autres instances sur différentes pages.

• Suggestion d'ajuster la taille du texte sur mobile pour une meilleure fluidité visuelle.

Questions et Clarifications

• Discussion autour des doublons potentiels dans les composants, clarifiant que chaque bannière est unique dans ce projet particulier.

• Confirmation qu'il n'y aura pas de doublon si une seule bannière est utilisée sur tout le site web, mais mise en garde contre cette situation si plusieurs bannières étaient présentes.

Gestion des Composants et Animations dans Webflow

Utilisation de la Bannière sur le Site

• La bannière utilisée est unique pour tout le site, ce qui permet d'éviter les conflits de nommage lors du développement.

• Une explication sur le fonctionnement de la croix de la bannière est donnée, avec une promesse d'un live dédié aux animations dans Webflow.

Animations et Interactions

• Lorsqu'on clique sur un élément, une icône d'animation apparaît, indiquant qu'une animation est associée à cet élément.

• L'animation "close" rend la bannière invisible en changeant son état d'affichage au clic.

Gestion des Classes et Éléments

• En copiant des éléments dans Webflow, chaque section reçoit un nom spécifique pour éviter les doublons.

• Si une classe existe déjà, elle sera synchronisée avec celle nouvellement copiée pour adapter son style sans conflit.

Création de Composants Globaux

• Transformation de la bannière en composant global afin que toute modification se répercute sur toutes les pages du site.

• Le composant est nommé "ashbannerner", facilitant ainsi sa gestion à travers le projet.

Structuration du Header

• La bannière et la barre de navigation sont regroupées dans un bloc div appelé "header component".

• Ce header global inclut à la fois la bannière et la navigation, assurant une cohérence visuelle sur l'ensemble du site.

Ajout d'une Nouvelle Section

• Introduction d'une nouvelle section intitulée "Pour qui est cette formation", utilisant un layout trouvé dans une librairie.

• Préparation pour modifier les noms des sections afin qu'ils soient plus descriptifs que simplement "layout 237".

Optimisation Future

• Discussion sur l'utilisation d'une extension pour renommer plusieurs éléments simultanément lors du développement futur.

• Suppression des éléments non nécessaires avant l'ajout final des titres, paragraphes et cartes requis.

Optimisation de l'Espace et des Éléments dans le Design

Suppression d'Éléments Inutiles

• L'intervenant supprime des boutons et un espace entre les cartes, indiquant qu'ils ne sont pas nécessaires pour le design souhaité.

• Il mentionne que la taille du texte est incorrecte, passant de "text size médium" à une taille normale en supprimant la classe associée.

Ajustement des Espacements

• Le titre est initialement contenu dans un élément avec une taille maximale. L'intervenant souhaite étendre ce titre sur toute la largeur.

• Un espacement de 64 pixels entre le titre et le paragraphe est noté, mais il y a un besoin d'ajuster cet espacement pour mieux correspondre au design.

Modification des Classes d'Espacement

• Un "spacer x large" qui ajoute un écart de 5 REM est remplacé par un écart de 4 REM pour respecter les spécifications du design.

• Les espacements entre les cartes sont examinés, avec une intention de modifier l'espacement à 32 pixels.

Personnalisation des Cartes

• Les éléments sont placés dans une carte blanche avec un rayon de bordure de 20 pixels. Un padding uniforme de 1 REM est appliqué sur tous les côtés.

• La couleur d'arrière-plan est définie comme blanche, et l'alignement du texte doit être modifié pour être à gauche plutôt qu'au centre.

Organisation Flex et Espacements Internes

• L'utilisation du Flexbox permet d'ajouter un gap entre les lignes. Les spacers internes sont supprimés car ils ne sont plus nécessaires.

• Une nouvelle div est créée pour regrouper le contenu (titre et paragraphe), permettant ainsi un meilleur contrôle sur l'espacement.

Finalisation du Design des Cartes

• Des ajustements supplémentaires sont faits concernant l'espacement vertical entre les titres, fixant celui-ci à 20 pixels.

• L'intégration d'une icône se fait via SVG copié depuis Figma, assurant que son alignement soit également à gauche.

Répétition et Adaptation des Éléments

• Après avoir conçu une carte satisfaisante, l'intervenant prévoit de copier cette carte pour créer deux autres cartes similaires tout en modifiant leur contenu respectif.

• Attention portée aux espacements globaux afin que chaque section respecte la structure prédéfinie avec des paddings appropriés.

Création d'une section responsive avec espacement

Ajout de padding et classes

• L'ajout d'un espacement de 128 pixels en haut et 64 pixels en bas est nécessaire. Un padding large est appliqué pour gérer cet espacement.

• Une classe supplémentaire, nommée bottom médium, est ajoutée pour modifier la propriété de l'espacement à 4m en bas, tout en prenant en compte le design responsive.

Adaptation pour tablette

• Sur tablette, il est décidé d'adapter la mise en page afin que les éléments occupent toute la hauteur disponible dans la grille.

• La mise en page passe à une seule colonne au lieu de trois colonnes pour assurer une meilleure réactivité sur mobile.

Réduction des gaps

• Les gaps entre les éléments sont réduits à un REM pour centrer correctement tous les éléments.

• Des ajustements supplémentaires sont faits sur la taille du paragraphe intérieur pour optimiser l'apparence générale.

Création rapide d'une nouvelle section

Utilisation de classes utilitaires

• Une nouvelle section est créée rapidement avec des modifications spécifiques. Le contenu est copié depuis une librairie existante.

• Une classe utilitaire appelée texting tag est introduite, permettant une utilisation cohérente dans plusieurs sections.

Style et alignement

• Des styles spécifiques sont appliqués : fond blanc, radius de 26 pixels converti en REM, texte noir secondaire.

• L'utilisation du display inline-flex permet aux éléments de prendre uniquement l'espace nécessaire tout en maintenant un espacement adéquat entre eux.

Ajustements finaux et personnalisation

Espacements et alignement

• Un espacement spécifique de 16 pixels est ajouté entre les éléments. Les colonnes doivent être alignées vers le bas plutôt qu'en haut.

• Les gaps sont vérifiés et ajustés pour garantir une cohérence visuelle dans la grille.

Configuration des cartes

• Un espacement supplémentaire de 64 pixels est requis entre le haut et la liste d'items. Quatre colonnes seront utilisées avec un écart approprié.

• Chaque item sera personnalisé avec un radius uniforme de 28 pixels, sans bordures, sur un fond blanc.

Création d'une section web avec Noemi médium 24

Configuration de la typographie et des éléments de design

• La fonte utilisée est Noemi médium 24, avec une taille de 64 pixels.

• Un divider est ajouté sous le titre, mesurant un certain nombre de pixels en hauteur, avec une couleur noire (950). Un espacement d'un REM est appliqué au-dessus et en dessous pour créer un gap entre les éléments.

Gestion des couleurs et duplication des sections

• Les éléments du body sont configurés pour avoir une couleur noire. L'utilisation de "texte primary secondary" assure que la couleur est bien appliquée.

• Les sections sont copiées trois fois pour être remplacées par le contenu approprié.

Problèmes techniques et récapitulatif du processus

• Des problèmes peuvent survenir lorsque le web bug se produit ; il suffit d'actualiser la page.

• Le processus consiste à copier-coller des sections depuis la librairie, puis à supprimer ou modifier les éléments non désirés pour respecter la maquette.

Responsive Design et ajustements nécessaires

• En mode responsive, il peut être nécessaire d'ajouter plus d'espace pour éviter que certains éléments ne se chevauchent.

• La mise en page fonctionne bien sur mobile ; cependant, il pourrait être préférable de passer à une colonne unique dans certaines situations.

Ajout d'éléments supplémentaires

• Pour ajouter deux autres éléments simples, il est possible de les créer manuellement plutôt que de les copier depuis la librairie.

• Un spacer x-large est ajouté, ainsi qu'une div nommée "stat 37 content wrapper", qui utilise un display grid avec deux colonnes.

Structuration sémantique et ajout d'images

• Un H3 sémantique est utilisé comme titre tout en étant stylisé comme H4. Un paragraphe suit ce titre avec un espacement défini.

• Une image est intégrée dans le wrapper correspondant. Des styles tels que fit cover sont appliqués pour garantir l'adaptabilité responsive.

Ajustements finaux et accessibilité

• L'image doit être redimensionnée correctement ; une largeur maximale de 412 pixels est définie pour optimiser le chargement.

• Il faut également penser à ajouter des attributs alt aux images pour améliorer l'accessibilité web.

Optimisation de la mise en page responsive

Positionnement des éléments dans une grille

• L'application des styles se fait uniquement sur l'élément sélectionné, permettant un contrôle précis sans affecter toute la classe.

• Proposition d'inverser le placement des images pour améliorer l'esthétique en mode responsive, en plaçant toujours l'image en haut.

• Flexibilité dans le positionnement manuel des éléments enfants dans les grilles, facilitant ainsi la personnalisation sans toucher au reste du design.

Cohérence et structure visuelle

• Importance de maintenir une cohérence visuelle (image texte image texte) plutôt que d'avoir des arrangements moins harmonieux.

• Discussion sur les balises H1 à H4 et leur rôle crucial pour le SEO, avec un accent sur l'unicité de la balise H1 par page.

Sémantique et SEO

• Les sections doivent être correctement titrées avec H2 pour les sections principales et H3 pour les sous-sections afin de respecter la hiérarchie sémantique.

• Utilisation stratégique des balises H3 pour éviter les sauts non conformes entre les niveaux de titres, ce qui pourrait nuire au SEO.

Réutilisation et efficacité dans le développement

• Introduction à l'utilisation de classes spécifiques tout en préservant la nature sémantique des balises HTML.

• Préparation à réutiliser Rume pour accélérer le développement tout en maintenant une qualité élevée.

Questions et perspectives futures

• Invitation aux questions concernant l'utilisation de Rume ou les styles appliqués dans le projet actuel.

• Annonce d'un prochain live dédié à l'apprentissage d'outils Webflow pour optimiser encore davantage le processus de développement.

Utilisation de l'IA dans le développement web

Réflexions sur la valeur ajoutée pour les clients

• La question centrale est de savoir si un développeur utilisant uniquement des outils comme ChatGPT peut voir son TGM (Tarif Global Moyen) diminuer, surtout s'il n'apporte pas de valeur ajoutée.

• Il est crucial d'utiliser ces outils comme assistants plutôt que comme solutions finales. L'expertise personnelle doit toujours être intégrée au processus.

• Un développeur doit être capable d'identifier et de résoudre des problèmes dans son code, sinon il risque de ne pas fournir une solution satisfaisante à ses clients.

Importance de l'expérience utilisateur (UX)

• La réflexion sur l'UX et le parcours utilisateur constitue une part essentielle de la valeur ajoutée qu'un freelance peut offrir.

• Les spécialisations telles que le SEO ou les animations peuvent également enrichir un projet, en optimisant sa visibilité ou en améliorant son attrait visuel.

Rôle des outils d'intelligence artificielle

• Les outils comme ChatGPT doivent être utilisés pour gagner du temps sans sacrifier la qualité. Ils permettent d'accélérer le développement tout en personnalisant les éléments selon les besoins du design.

• L'utilisation intelligente de ces technologies peut booster la productivité, mais leur utilisation comme finalité peut mener à une baisse de qualité.

Conclusion et prochaines étapes

• Le présentateur conclut en invitant à se retrouver pour apprendre des techniques permettant un développement plus intelligent et rapide.

• Un rappel est fait concernant la disponibilité du replay sur YouTube et Digidop Academy pour ceux qui souhaitent revoir certains passages ou poser des questions supplémentaires.