Les dernières mises à jour Webflow 2023 en détail

Webflow fait l'objet d'une série de mises à jour continues depuis le début du mois de janvier, et cette dynamique positive ne montre aucun signe de ralentissement pour le reste de l'année. L'entreprise est déterminée à maintenir cette trajectoire ascendante avec des plans ambitieux pour quatre conférences de développeurs prévues plus tard dans l'année.

Bien que toutes les mises à jour de Webflow présentées dans la dernière annonce diffusée en ligne ne soient pas entièrement nouvelles — certaines ayant été introduites plus tôt dans l'année —, elles sont significatives et méritent un examen plus approfondi. Webflow a saisi l'opportunité de cette annonce de mise à jour pour mettre en lumière ces améliorations mineures mais importantes, captant l'attention du public et soulignant leur pertinence.

Ainsi, dans la suite de cet article, nous classerons les mises à jour annoncées en trois catégories : celles récemment ajoutées, les mises à jour de mai et les mises à jour à venir dans l'année !

Mises à jour récemment ajoutées

Dans nos vies trépidantes et avec un temps libre limité, il est courant de ne pas être au courant de tout ce qui nous entoure, surtout lorsque nous sommes plongés dans un travail sérieux et que nous ressentons la pression des échéances. Ainsi, des nouvelles importantes peuvent parfois nous échapper. 

C'est précisément pourquoi, même si vous avez manqué certaines des mises à jour récentes déployées depuis le début de l'année, Webflow a utilisé cette annonce comme une occasion de présenter brièvement ces mises à jour en même temps que les nouvelles.

Voici les récentes fonctionnalités Webflow et les mises à jour d'améliorations lancées depuis le début de l'année, dans l'ordre :

1. Améliorations du Page Branching

Webflow a introduit de nouvelles améliorations du Page Branching, offrant plus de puissance, de contrôle et de visibilité aux grandes équipes. 

Les améliorations incluent les capacités suivantes :

• Modifier les classes et les paramètres de page sur les branches, 
• Examiner et résoudre les conflits de classes entre une branche et le site principal
• Suivre l'activité des branches dans le journal d'activité du site
• Créer des interactions avec des animations prédéfinies. 

Ces mises à jour Webflow visent à faciliter le développement collaboratif de sites web et à permettre aux équipes de travailler simultanément sur le même site. Les clients Enterprise et les partenaires Enterprise peuvent accéder à ces fonctionnalités Webflow.

2. Améliorations de l'éditeur Webflow pour les grands sites

Webflow a introduit des améliorations de performances significatives dans son éditeur, spécifiquement pour les grands sites web, offrant une expérience d'édition plus fluide. 

Certaines des améliorations incluent :

• Chargement de projet jusqu'à 15 fois plus rapide
• Utilisation de la RAM réduite de 5 fois pour l'édition et l'accès aux données de collection
• Pression mémoire diminuée jusqu'à 6 fois
• Exigences de bande passante réduites de 86 fois.

De plus, des mises à jour UX mineures ont été apportées au filtrage et à la navigation, permettant d'affiner les éléments d'une collection et de les parcourir une fois que 100 éléments de données ont été préchargés.

3. Mises à jour de l'intégration Google Analytics

Webflow a mis à jour plus tôt dans l'année son intégration Google Analytics pour prendre en charge la transition imminente d'Universal Analytics vers Google Analytics 4. Les utilisateurs ne peuvent désormais utiliser que les ID de mesure Google Analytics 4 via l'intégration. 

Ceux qui possèdent des ID de mesure Universal Analytics seront invités à les remplacer, tandis que ceux qui ont des ID de mesure Google Analytics 4 devront réenregistrer et republier leurs sites pour que le suivi continue. Les boutons d'activation pour l'anonymisation des IP et gtag.js ont également été supprimés, car ils sont désormais des configurations obligatoires dans Google Analytics 4.

4. Définir un espace de travail par défaut pour votre tableau de bord

Les utilisateurs de Webflow peuvent désormais définir un espace de travail par défaut, ce qui facilite la navigation entre différentes équipes pour les membres d'agence et les freelances. Vous pouvez maintenant simplement spécifier votre espace de travail préféré et il s'ouvrira automatiquement lors de l'accès au tableau de bord. 

Par ailleurs, des améliorations de design ont également été apportées au menu déroulant de changement d'espace de travail, garantissant une expérience plus organisée et rationalisée.

5. Améliorations des polices variables

Une autre mise à jour de Webflow concerne les polices variables. Les designers peuvent désormais animer des axes personnalisés de polices variables, leur offrant plus de possibilités créatives, et bénéficient d'un accès plus facile aux polices personnalisées.

De plus, un nouvel indicateur facilite la distinction entre les polices variables et les polices statiques, et les designers peuvent accéder plus facilement aux contrôles de variation. Qui plus est, la personnalisation des variations peut désormais être effectuée en une seule étape, éliminant ainsi le besoin d'ajout manuel. 

6. Choisissez votre profil d'espace de travail

En passant du format précédent à un format plus rationalisé, Webflow a introduit une mise à jour permettant aux utilisateurs de choisir leur @handle d'espace de travail et leur URL de profil. Ce changement offre une meilleure image de marque pour les profils et donne aux utilisateurs un contrôle direct sur la sélection de leur URL. 

Les utilisateurs peuvent accéder à la page des paramètres de l'espace de travail et utiliser le champ « URL du profil d'espace de travail » pour choisir toute URL disponible de leur préférence. Les anciennes URL seront automatiquement redirigées vers le nouveau format, garantissant un accès transparent au profil public de l'utilisateur.

7. Utiliser les données CMS dans des blocs HTML personnalisés

Suite à de nombreuses demandes d'utilisateurs, Webflow a introduit la mise à jour permettant aux utilisateurs d'utiliser les données CMS dans des attributs personnalisés, rendant le code personnalisé et les attributs HTML encore plus puissants. Cette amélioration permet aux designers de lier des champs de données CMS ou des propriétés de composants à des attributs personnalisés ou des ID d'éléments, réduisant ainsi la dépendance au code personnalisé pour les données dynamiques.

Les utilisateurs peuvent désormais améliorer l'accessibilité du site, contrôler les intégrations ou les widgets utilisant des attributs de données HTML, personnaliser le style des pages en fonction des valeurs de champs, et bien plus encore. 

8. Prise en charge des fichiers d'animation dotLottie

Les fichiers d'animation DotLottie sont désormais pris en charge dans Webflow. Cela permet aux utilisateurs d'ajouter des animations Adobe After Effects à leurs sites Webflow avec des tailles de fichiers plus petites et des temps de chargement plus rapides. Avec cette intégration, les utilisateurs peuvent créer des expériences interactives en connectant ces animations à des déclencheurs tels que le chargement de page, le défilement de page et le mouvement de la souris via Webflow Interactions. 

9. Filtres du journal d'activité du site

L'introduction de filtres pour le journal d'activité du site permet aux grandes équipes de trouver rapidement et efficacement ce dont elles ont besoin. Grâce à ces filtres, les clients Webflow Enterprise et les partenaires Enterprise peuvent personnaliser les types d'activités qu'ils souhaitent voir, comme les classes, le code personnalisé et les événements de branche. 

Les utilisateurs peuvent également filtrer par auteur, en affichant les résultats de tous les auteurs ou de personnes spécifiques. De plus, les événements de modification de classe incluent désormais une icône « liste » cliquable qui permet d'accéder rapidement aux éléments et aux pages impactés par les changements de classe. Ces améliorations rationalisent le processus de suivi et de résolution des problèmes de site, améliorant la collaboration et la productivité des équipes.

10. Encapsuler des éléments dans des blocs div

Ce qui nécessitait auparavant plusieurs étapes, Webflow avec l'introduction de nouveaux raccourcis clavier et d'options dans le menu contextuel du canevas permet désormais aux designers d'encapsuler des éléments dans un bloc div ou de lien beaucoup plus facilement.

11. Prise en charge des nouvelles unités de viewport CSS dynamique

Pour offrir aux designers plus de flexibilité lors de la création de designs responsifs pour les navigateurs mobiles, Webflow a introduit de nouvelles unités de largeur et hauteur de viewport CSS.

Ces nouvelles unités (petite, grande et dynamique) résolvent le problème des barres d'outils dynamiques sur les appareils mobiles, garantissant que les éléments fixes ne sont pas coupés et améliorant l'expérience globale du visiteur. Elles peuvent être utilisées dans le panneau de style du designer Webflow. 

12. Améliorations du plugin Figma

En réponse à une demande fréquente de la communauté concernant la correction de la dénomination des classes, Webflow l'a réalisé avec ce correctif du plugin Figma. La mise à jour améliore la dénomination des classes lors de la copie et du collage d'éléments de Figma vers Webflow.

Ce qui provoquait auparavant la duplication des classes lors de la copie et du collage d'éléments de Figma vers Webflow, entraînant un système de classes encombré, les utilisateurs peuvent désormais coller sans craindre cela. Ils peuvent coller en utilisant les classes Webflow ou coller en mettant à jour les classes Webflow. Notez que l'accès au presse-papiers doit être accordé à Webflow pour le premier collage.

13. Introduction du style de contour de texte

Le style de contour de texte est une fonctionnalité très attendue qui élimine le besoin pour les designers d'utiliser du code personnalisé ou des plugins tiers. La fonctionnalité permet aux utilisateurs d'ajouter facilement un contour ou une bordure à leurs éléments de texte, offrant plus de flexibilité et rationalisant leur processus de design.

14. Améliorations de l'authentification SSO

Pour répondre aux besoins des grandes entreprises, des améliorations SSO ont été apportées pour les équipes avec plusieurs espaces de travail, les équipes avec plusieurs domaines d'e-mail, et l'authentification au niveau de l'espace de travail pour une sécurité améliorée.

15. Mises à jour d'ergonomie des composants

Les nouvelles modifications apportées aux composants visent à améliorer l'expérience d'édition en revenant à un comportement précédent plus fluide et plus intuitif. Les utilisateurs peuvent désormais double-cliquer pour éditer le composant principal et éditer les propriétés du composant directement sur le canevas. 

Un étiquetage plus clair et une navigation dans les menus plus facile ont également été mis en place. Ces fonctionnalités Webflow facilitent désormais la mise à jour des composants sans modifications involontaires.

16. Imbriquer des pages de collection dans des dossiers

Pour un meilleur contrôle et une meilleure gestion du contenu CMS, Webflow a introduit cette mise à jour permettant aux utilisateurs d'imbriquer des pages de collection dans des dossiers pour un meilleur contrôle des URL. Cette fonctionnalité permet aux utilisateurs d'optimiser leur référencement en publiant des éléments de collection dans un sous-répertoire d'URL. 

Les utilisateurs peuvent également désormais empêcher la publication de pages de modèle pour des collections spécifiques et dupliquer des structures de collection pour accélérer la création de bibliothèques de contenu. 

‍

Mises à jour Webflow de mai

Cette liste comprend les mises à jour Webflow déployées au cours du mois de mai avant l'événement d'annonce vidéo !

1. Améliorations des performances du Designer

Ciblant les grands sites web avec 50 pages ou plus, cette mise à jour Webflow apporte des améliorations à la vitesse et à la réactivité de diverses fonctions du Designer, notamment l'ouverture du Designer, le passage d'une page à l'autre, la navigation dans le panneau Pages, les paramètres d'élément, le Navigateur et le Style Manager, ainsi que le travail avec les mises en page en grille. 

2. Rechercher rapidement des nuances de couleur

La recherche de nuances dans le panneau de style est désormais plus rapide que jamais grâce à cette mise à jour. Lors de la sélection d'une couleur dans le champ de saisie de couleur, une liste déroulante de nuances avec leur couleur et leur nom correspondants apparaîtra, facilitant la recherche et le choix des couleurs. 

De plus, les utilisateurs peuvent prévisualiser les changements de couleur en temps réel en survolant les nuances sur le canevas. 

3. Se retirer d'un espace de travail

Une fonctionnalité très demandée, mentionnée en premier dans l'annonce vidéo, permet aux utilisateurs de se retirer d'un espace de travail sans avoir besoin de l'assistance d'un administrateur ou d'un client. 

Pour ce faire, vous pouvez accéder au menu déroulant de l'espace de travail dans votre tableau de bord, cliquer sur « Gérer les espaces de travail », sélectionner les points de suspension pour l'espace de travail spécifique, et choisir l'option « quitter l'espace de travail ».

4. Les composants peuvent désormais être utilisés dans les listes de collection

Faire glisser des composants dans des listes de collection et connecter des données CMS aux propriétés des composants est désormais possible avec cette mise à jour Webflow, permettant la réutilisation de modèles de design courants sur plusieurs instances. 

Non seulement cela, mais désormais les éléments à l'intérieur des éléments de liste de collection peuvent également être convertis en composants, comme tout autre élément, améliorant l'efficacité du design et de la synchronisation des mises en page sur l'ensemble du site.

5. Staging privé

L'amélioration de la confidentialité et de la sécurité pour l'examen des modifications du site avant leur mise en ligne publique est rendue possible grâce à cette fonctionnalité qui permet aux utilisateurs de restreindre l'accès à leur domaine de staging webflow.io aux utilisateurs connectés au sein de leur espace de travail.

Cette mise à jour Webflow est particulièrement bénéfique pour les clients Enterprise qui peuvent désormais s'assurer que seuls les membres autorisés de l'équipe ont accès à l'environnement de staging. 

6. Prise en charge des classes combo pour le plugin Figma

Webflow a récemment également lancé la prise en charge des classes combo pour son plugin Figma, répondant à une fonctionnalité très demandée. Cette mise à jour permet aux utilisateurs de créer automatiquement des classes combo Webflow lorsqu'ils collent des designs Figma dans Webflow. Pour créer des classes combo, les utilisateurs doivent nommer leurs calques Figma avec la classe et la classe combo séparées par des barres obliques. 

Pour illustrer par exemple, nommer un calque Figma « Primary Button / Dark » générera la classe Primary Button et la classe combo Dark dans Webflow. 

7. Présenter des projets depuis l'espace de travail d'un client 

Auparavant, il était difficile pour les experts Webflow de présenter leur travail sur Made in Webflow et leur profil Webflow lorsque le site appartenait à l'espace de travail d'un client. Avec cette mise à jour, les propriétaires de sites peuvent désormais taguer des agences, des freelances et d'autres contributeurs dans les crédits créateurs de leur site.

Ce faisant, ces créateurs peuvent présenter leur travail sur Made in Webflow et leur profil Webflow sans avoir besoin de faire une copie du site sur leur propre compte. Les propriétaires de sites, les membres de l'espace de travail et les invités peuvent ajouter jusqu'à trois autres utilisateurs ou espaces de travail Webflow aux crédits créateurs d'un site via l'onglet Paramètres généraux. Les créateurs tagués peuvent présenter le site même si le propriétaire du site ne le présente pas sur son propre compte.

5 grandes mises à jour à venir

Webflow a annoncé 5 grandes mises à jour à venir cette année, et bien que nous en attendions certaines, il y a beaucoup à anticiper avec enthousiasme. Cette fois, nous les mentionnerons brièvement, car nous prévoyons de rédiger un article plus approfondi plus tard dans l'année lors de leur lancement !

Voici les 5 mises à jour Webflow que nous attendons avec impatience cette année :

• Investissements en IA
• DevLink
• Commentaires & Collaboration
• Localisation
• Intégration Spline 

Conclusion

Webflow met continuellement à jour sa plateforme et a des plans passionnants pour quatre conférences de développeurs plus tard dans l'année. Les mises à jour récentes, bien que toutes ne soient pas entièrement nouvelles, sont significatives et méritent attention. 

Elles vont de l'amélioration du développement collaboratif de sites web à l'amélioration des performances de l'éditeur, de l'intégration de Google Analytics, de la gestion des espaces de travail, et bien plus encore. Les dernières mises à jour à venir annoncées sont quelque chose que nous attendons avec impatience et qui nous maintient tous dans l'enthousiasme. 

L'engagement de Webflow en matière d'optimisation de l'expérience utilisateur est évident dans ces mises à jour, offrant une puissance, une flexibilité et une efficacité accrues pour les designers et les développeurs.

Enfin, si vous êtes encore débutant dans la feuille de route Webflow du design et du développement web, vous pouvez consulter le cours Webflow 101 pour une introduction approfondie à tous les aspects du design web, et n'oubliez pas de consulter notre blog pour les dernières nouvelles et mises à jour Webflow !

‍