Examen du flux Web : est-ce une option sérieuse pour les utilisateurs férus de technologie ?

Les services de création de sites Web en ligne existent depuis plus de 25 ans. En théorie, le concept est bon : permettre à l’utilisateur de se concentrer sur le contenu qu’il connaît – laisser le service gérer tout cela charabia Web techniquement complexe en arrière-plan.

Bien sûr, la réalité a souvent été moins agréable. Alors que n’importe qui peut obtenir rapidement un site de base en ligne, le créateur de site Web était souvent moins en mesure de grandir avec vous à mesure que vos connaissances et votre ambition augmentaient. Finalement, les utilisateurs les plus entreprenants se sont tournés vers une solution personnalisée.

Mais est-ce toujours l’attente en 2022 ? Les services de création en ligne ont parcouru un long chemin depuis Geocities, Angelfire et Xoom. Des applications Web modernes comme Flux Web, Espace carréet Éditeur X ont eu le temps d’affiner leurs offres pour répondre aux besoins des utilisateurs plus sophistiqués et férus de technologie.

C’est NE PAS une norme ‘Ce produit fonctionne-t-il ?’ la revue. Bien sûr que c’est le cas. SitePoint est un site technologique pour une communauté de développeurs et de concepteurs, nous serons donc revoir Webflow en tant que développeurs. Nous demanderons :

• Quelles fonctionnalités et flexibilité offre Webflow ?
• Quelles sont les difficultés et les limites ?
• Webflow est-il une véritable alternative à la création d’un site personnalisé à partir de rien ?

Que construisons-nous ?

Pour tester correctement les fonctionnalités, je vais commencer avec un modèle vierge et construire cette conception Figma à partir de zéro. Au cours des prochaines semaines, je ferai de même avec d’autres services concurrents (Editor X, Squarespace, etc.), afin que nous puissions comparer leurs forces et leurs faiblesses.

Critères d’évaluation de notre créateur de site Web

Nous avons examiné Webflow sur les cinq facteurs suivants :

1. Outils de mise en page et de conception : Un designer compétent a-t-il suffisamment de flexibilité pour faire la plupart des choses ?
2. CMS/gestion des données : Peut-il gérer des types de données répétitifs tels que des éléments de galerie, des produits ou des publications ?
3. Intégrations : commerce électronique, multimédia et autres éléments personnalisés.
4. Performances mobiles : Un site est essentiellement sans valeur si la moitié de votre public ne peut pas l’utiliser correctement
5. Tarification : La ligne du bas.

Dans cet esprit, commençons.

Configuration du flux Web

Comme vous vous en doutez, Webflow vous embarque avec un assistant de questions-réponses qui définit votre compte, votre domaine, votre fuseau horaire, votre modèle (aucun dans notre cas) et le type de site. Partout où je le pouvais, j’ai activé les options avancées pour me donner un accès complet à tous les outils et panneaux.

1. Outils visuels pour la conception et la mise en page

L’intégration fait un bon travail en vous enseignant l’interface utilisateur principale. Vos unités de mise en page les plus élémentaires sont :

• Sections (blocs pleine largeur bord à bord)
• Conteneurs (une colonne centrée, limitée en largeur)
• Grilles (cartes & galeries)
• Colonnes

Ces unités peuvent être glissées sur votre « toile » et déplacées et reconfigurées rapidement.

Le code personnalisé est une fonctionnalité Premium

À peu près à ce stade, j’ai rencontré mon premier « obstacle technique ». À l’origine, j’ai conçu une mise en page à 5 colonnes pour les lignes de ma galerie (voir le Figma), mais l’outil de Webflow propose des options à 12 colonnes (c’est-à-dire 1,2,3,4,6,12).

Maintenant, je soupçonne que c’est techniquement possible pour charger une feuille de style séparée contenant un CSS de mise en page supplémentaire à 5 colonnes (ou à 7 colonnes si vous préférez) si vous avez le temps de bidouiller. Il existe un panneau « Code personnalisé » dans les paramètres de votre tableau de bord (voir ci-dessus) – mais il n’est disponible que sur les forfaits payants.

Certes, ce ne sera pas un obstacle pour la plupart des gens, mais il convient de noter que s’éloigner d’un modèle de mise en page à 12 colonnes n’est pas trivial.

Ainsi, après avoir compromis et changé ma mise en page à 5 colonnes en une disposition à 4 colonnes, bloquer les «os» du site a été relativement rapide et facile.

Vous pouvez faire glisser, déposer et réorganiser les unités de mise en page à partir du panneau de gauche. Choisissez une mise en page des miniatures dans l’outil « Paramètres de colonne » pour insérer des colonnes, puis faites glisser les bordures pour les redimensionner. Vous pouvez configurer presque toutes les propriétés CSS à partir du panneau de droite.

Vous pouvez ensuite déposer des images, des titres et du texte dans votre structure de mise en page.

Symboles

Souvent, nous créons un nouveau composant d’interface utilisateur comme une carte, puis nous devons réutiliser ce type de composant dans l’application. Webflow vous permet d’enregistrer un composant en tant que « symbole », de réutiliser des instances de ce symbole ailleurs et d’ajuster toutes ces instances à partir d’un seul point. Cela fournit un excellent moyen de standardiser votre interface utilisateur.

Le support SVG est excellent

Webflow semble aimer SVG. D’après mon expérience, la plupart des services de téléchargement d’images bloquent toujours carrément les téléchargements SVG, tandis que d’autres « désinfectent » les téléchargements SVG d’une manière qui peut les casser visuellement. Webflow semblait afficher tous mes SVG précisément tels qu’ils avaient été créés. C’est une grosse tique pour moi.

2. CMS et gestion des données

Webflow offre une installation CMS flexible – bien que vous deviez être sur leur plan d’abonnement de 2e niveau (16 $/mois) pour y accéder. J’ai créé un nouveau type de contenu « illustration » (Webflow les appelle « Collections ») avec des emplacements pour l’image, le titre, la description, la date de publication et le prix.

Une fois que vous avez entré votre contenu dans une « Liste de collection », il peut être filtré et intégré à votre mise en page. Les collections se distinguent par des éléments d’interface utilisateur violets dans votre interface utilisateur (voir ci-dessous).

Comme une belle touche, Webflow vous permet de définir un style sensible au contenu. Par exemple, vous pouvez vous assurer que le texte superposé est toujours clair lorsqu’il est placé sur des images d’arrière-plan principalement sombres.

3. Intégrations, extensions et autres outils

Webflow offre des fonctionnalités intéressantes en dehors de la génération de site Web standard.

commerce électronique

Une installation de commerce électronique de base est fournie sur leur plan de 29 $/mois. Comme cela fournit jusqu’à 500 articles de vente pour un volume de ventes annuel inférieur à 50 000 $, cela devrait couvrir la plupart des entreprises en démarrage. Le niveau suivant passe à 74 $/mois pour 1 000 articles et 200 000 $ de ventes.

Les articles de vente sont traités comme un nouveau type de « collection » CMS, ce qui les rend faciles à distribuer dans votre mise en page.

Vidéo et YouTube

Soyons honnêtes : aucun service de création de site Web légitime ne sera lancé en 2022 sans la possibilité d’intégrer et d’afficher des vidéos, et Webflow ne fait pas exception.

Animations Lottie

Lottie est un format d’animation vectorielle populaire, bien adapté aux applications Web. Bien que je ne m’y sois certainement pas attendu, le téléchargement de Lottie est un ajout bienvenu pour moi.

4. Performances mobiles

Une bonne conception réactive est un art subtil et compliqué, il n’est donc peut-être pas surprenant que cela ait été un problème pour les anciennes applications de création de sites basées sur des modèles. Concevoir un algorithme unique qui fonctionne pour tous les scénarios est difficile.

Webflow a quatre vues d’appareil configurées par défaut :

• Bureau
• Tablette
• Paysage mobile
• Portrait mobile

Vous êtes libre de créer des points d’arrêt personnalisés et d’ajuster les largeurs existantes. Toutes les modifications de style que vous apportez dans les vues tablette/mobile sont automatiquement ajoutées à la requête multimédia pertinente. Cela facilite le ciblage des styles individuels, mais j’ai trouvé plus difficile de parvenir à une compréhension cohérente de ce que devraient être les bonnes décisions CSS dans ce contexte. Ce n’est pas un problème de Webflow ; c’est un problème de « créateur de site Web visuel ».

Comme vous pouvez le voir ci-dessus, Webflow traite la vue du bureau comme le « point d’arrêt de base », puis ajoute différents styles aux vues de périphérique plus petites.

Bien que je soupçonne que beaucoup d’entre nous pourraient préférer une approche mobile d’abord, je suppose qu’il est potentiellement déroutant de demander aux utilisateurs moins férus de technologie utilisant une application de bureau de commencer par créer leur mise en page mobile première.

« Desktop-first » n’est pas idéal, mais je peux voir son raisonnement.

5. Tarification

Webflow a un modèle de tarification à plusieurs niveaux, mais il est probablement préférable de le simplifier :

Résumé

Avantages:

• Création de mise en page flexible
• Délégation de domaine facile
• Requêtes médiatiques sophistiquées
• Mise en œuvre simple du commerce électronique
• L’accès aux propriétés CSS réelles est relativement facile
• Bon support SVG

Les inconvénients:

• Certaines limitations de mise en page (colonne 5,7)
• Réactivité de bureau d’abord
• Former un aperçu utile de votre CSS dans son ensemble n’est pas facile. Peut-être que cela devient plus clair avec le temps.

Flux Web offre beaucoup de puissance et de flexibilité pour une application de création de site visuel. Il y a certainement des limitations techniques. La conception axée sur le mobile semble difficile, voire impossible, tout comme les schémas de mise en page légèrement non standard (c’est-à-dire cinq colonnes).

Cependant, je n’ai pas rencontré autant d’obstacles techniques que ce à quoi je m’attendais tout au long de la construction. De plus, Webflow a rendu beaucoup de choses fastidieuses (configuration du domaine, configuration du CMS, commerce électronique, etc.) plus facilement que d’habitude sans que je cède beaucoup de contrôle.

Je me voyais choisir Webflow pour des projets de contenu Web et de commerce électronique relativement conventionnels sur lesquels je voulais toujours un contrôle élevé de la conception.