Écrire un meilleur code Web

Voici quelque chose que je trouve assez ironique. De nombreux concepteurs de sites Web aiment la simplicité des concepteurs de sites Web. Pourtant, il est intéressant de noter que la plupart des générateurs Web ont été créés pour éliminer le rôle des concepteurs et des développeurs Web en automatisant le code sous-jacent.

C'est drôle, non?

Mais là encore, il y a des constructeurs de sites Web qui font apparemment le contraire. Au lieu de réduire le rôle des concepteurs et des développeurs, ils proposent des outils spécialement optimisés pour ces équipes. Leur objectif principal est de faciliter les agences de design avec des outils avancés.

Comment, demandez-vous?

Eh bien, Webflow est l'un des exemples les plus marquants. Et nous examinerons sous peu son rôle dans l’ensemble de l’environnement de conception Web. Cette revue de Webflow traite de toutes les fonctionnalités critiques que vous devez connaître, des faiblesses correspondantes, ainsi que du coût d'utilisation de la plate-forme pour la conception.

Mais d'abord, qu'est-ce que Webflow?

Webflow Review: vue d'ensemble

Comme vous l'avez probablement déjà compris, Webflow n'est pas votre créateur de site Web typique.

Lancé sous 2013, cet outil se vend comme une solution de conception Web associant des outils de conception professionnels sans code à un puissant CMS visuel, ainsi que la convivialité des concepteurs standard. Alors, considérez-le comme une fusion entre une solution de construction Web telle que Wix et un moteur CMS comme WordPress.

Webflow

Mais ne vous y trompez pas. Webflow ne concurrence pas les goûts de Wix & Weebly. Il offre un ensemble différent de fonctionnalités ciblant différentes catégories d'utilisateurs.

Au final, le plus fascinant est l’approche intelligente de Webflow pour tout ce qui concerne le codage. C'est une plate-forme sans code qui prend en charge l'édition de code pour une flexibilité accrue.

Déroutant? Oui je sais. C'est pourquoi j'ai pris le temps d'évaluer attentivement tout ce que Webflow peut offrir, de la conception de sites Web au système de gestion de contenu.

Et voici les détails…

Webflow Review: Fonctionnalités

Conception de site Web

Webflow est un certain nombre de choses, sans aucun doute. Mais son outil de conception Web sans code a toujours été la principale offre ici.

Eh bien, il serait compréhensible que vous le confondiez avec la fenêtre d'édition d'Adobe Photoshop avant de commencer. Ces deux peuvent ressembler à des frères et sœurs jumeaux de loin, mais se révèlent assez différents à mesure que vous vous rapprochez. Pour être plus précis, vous remarquerez que Webflow est un moteur d'automatisation qui fonctionne en grande partie sur CSS et HTML.

Concepteur de flux Web

Sur celui-ci, vous pouvez aisément introduire des éléments de site, puis les déplacer sans utiliser de code. Le bit de programmation est géré par la structure sous-jacente de Webflow, qui crée et édite systématiquement le code de votre site tout au long du processus de conception.

Si vous avez déjà essayé d'autres concepteurs Web sans code, vous savez que l'élimination de la programmation a un coût en flexibilité limitée. Fait intéressant, l'outil de conception de Webflow ne suit pas cette tendance. Donc, je vais être honnête ici et admettre que c’est certainement l’un des constructeurs de sites Web polyvalents les plus avancés du marché.

Maintenant, regardons les choses en face. Avancé et simplicité sont deux choses connues pour être comme du feu et de la glace quand il s’agit d’outils de gestion de sites Web.

Et fidèle à sa forme, Webflow n’est pas l’un des constructeurs les plus simples que vous puissiez trouver. Bien que son interface soit extrêmement puissante, elle est apparemment compliquée et nécessite quelques efforts pour apprendre les ficelles du métier en conséquence.

Pour commencer, Webflow ne crée pas l'illusion d'un processus de conception totalement sans code. Ne vous attendez donc pas à vous lancer et à commencer à dessiner des formes sur la toile. Une telle approche limiterait considérablement votre capacité de personnalisation.

Par conséquent, le système ici intègre intelligemment certains aspects du codage lors de la création d'un site Web. Par exemple, si vous avez l'intention d'introduire une page carrée au milieu d'une page, vous devrez ajouter une nouvelle <div> élément, puis éditez ses points en bas à gauche et en haut à droite comme étant égaux à zéro avec un positionnement fixe.

Qu'est-ce que cela signifie?

Bien que vous puissiez aller de l'avant et tirer parti de Webflow sans aucune connaissance en programmation, il vous faut une compréhension de base des propriétés HTML et CSS pour capitaliser de manière exhaustive sur son véritable pouvoir.

Toutefois, si vous préférez le contraire, cochez simplement la case «Je n’écris pas de code » choix que vous vous inscrivez. Le système étendra par la suite sa capacité d'automatisation pour gérer une grande partie de la conception pour vous.

Cela dit, vous pouvez commencer avec une toile complètement vierge. C'est l'approche que je préfère parce que je peux tout personnaliser à partir de la base.

Un mot de prudence cependant. Laissez cette option aux concepteurs expérimentés avec CSS et HTML. Sinon, vous risquez de mélanger les choses ou de rester coincé quelque part au cours du processus.

La meilleure approche pour coder les novices consiste à tirer parti des modèles prédéfinis de Webflow. Il s'avère que le système offre plus de modèles attrayants 200, dont 30 sont totalement gratuits. Ceux payés, en revanche, vous coûtera entre $ 24 et $ 79.

Après une analyse approfondie de divers thèmes, j'ai remarqué qu'ils étaient sensiblement différents, avec des structures et des caractéristiques variables. Le processus d'édition suivant vous permet ensuite de modifier l'arrière-plan, la couleur, les calques, l'opacité, la rotation, les effets, la position, la taille, etc. des éléments.

standard

Cela va sans dire. Ce flux Web, comme la plupart des constructeurs Web d'aujourd'hui, propose l'hébergement de sites ainsi que des domaines personnalisés ainsi que ses packages de conception.

Hébergement Webflow

Mais, ne vous attendez pas à l'approche de plan partagé typique ici. Webflow choisit plutôt de maintenir les sites en interne, dans le cadre de ce qu'il décrit comme un «parc de serveurs évolutif à l'infini».

Qu'est-ce que cela implique?

Webflow possède et contrôle plus de centres de données 100 à travers le monde. Combinez cela avec les CDN gérés par Amazon CloudFront plus Rapidement- et le résultat est un système solide pour l'hébergement de tous types de sites Web.

Outre le traitement de n’importe quelle taille de trafic, Webflow garantit des performances optimales avec des temps de chargement de page longs, en millisecondes, plus le% de disponibilité du site Web 99.99. Son infrastructure basée sur AWS est particulièrement essentielle pour fournir une base solide pour la prise en charge de charges de trafic relativement importantes en provenance de sites d'entreprise.

Et puisque la sécurité Web est impérative, l'infrastructure d'hébergement de Webflow est conforme à HTTP / 2 et les utilisateurs obtiennent des certificats SSL pertinents pour leurs sites.

Système de gestion de contenu

C’est là que le contenu rencontre le design visuel. Le CMS de Webflow vous permet essentiellement de saisir et de gérer le contenu de votre site. En d'autres termes, vous pouvez ajouter et éditer n'importe quel texte ou média sur la page que vous créez.

Et si vous gérez un projet Web étendu avec des structures complexes, vous apprécierez tout particulièrement la capacité du système à prendre en charge les ajustements manuels des aspects de contenu, notamment les types de contenu, les membres de l'équipe, les projets, etc., ainsi que des champs personnalisables.

Eh bien, tout cela est facilité par Collections CMS- une fonctionnalité accessible directement à partir de la fenêtre de l'éditeur principal. Dès que vous générez une nouvelle collection, vous pouvez passer au-delà du type de contenu pour définir des champs et introduire des éléments. Elles sont ensuite adoptées en tant que pages Web distinctes ou listes intégrées aux pages que vous avez créées.

Webflow CMS

Déroutant? Considérez cet exemple. Pour créer une page affichant les effectifs de votre organisation, vous pouvez introduire une collection de «membres d’équipe», contenant des éléments tels que des liens sociaux, des descriptions, des noms, des photos et les noms des employés.

Maintenant, cela couvre essentiellement le back-end du CMS. Mais tu sais quoi? Ce n'est pas tout. Webflow va de l'avant pour donner à WordPress un bon rendement financier grâce à l'éditeur Webflow. C'est ici que vous agrémentez une page publiée avec un nouveau contenu basé sur le type présélectionné.

En bref, vous obtenez un site Web complet prenant en charge le contenu dynamique tel que les portefeuilles, les articles et les billets de blog, sans installer de plug-ins supplémentaires.

Collaboration

Admet le. Les grands projets de conception Web sont passionnants. Cependant, ils peuvent être de plus en plus lourds, surtout si vous ne rationalisez pas toutes les parties concernées en conséquence.

Webflow a apparemment réfléchi à cette question et fait de son mieux pour faciliter la collaboration des agences de conception Web composées de plusieurs membres. Et bien plus encore, vous pouvez également inviter d'autres parties telles que des clients, des concepteurs tiers, des sous-traitants, etc. Leurs rôles et capacités utilisateur dépendent des privilèges correspondants que vous avez définis.

Collaboration Webflow

Si vous traitez avec des clients, par exemple, vous pouvez les inviter à revoir leurs projets en temps réel, avec des privilèges d'utilisation extrêmement limités.

Cela dit, j'ai remarqué que tous les ajustements de site sont répercutés de manière globale en temps réel. Cela permet aux membres de l'équipe qui collaborent d'éviter de répéter des tâches déjà traitées.

Caractéristiques générales

  • Sitemap XML
  • Meta titres SEO, descriptions
  • Balises alt image
  • Centre d'aide
  • Forum de la communauté
  • Support prioritaire
  • Support par email
  • Nom de domaine personnalisé
  • Sites de transit
  • Mises à jour instantanées
  • URL redirigée
  • Surveillance de site Web 24 / 7
  • Temps de chargement rapides
  • Domaines Google Achats
  • L'intégration de Zapier
  • L'intégration MailChimp
  • Intégration de Google Analytics
  • optimisation SEO
  • Formulaires en marque blanche
  • Étiquetage blanc CMS
  • Protection du site par mot de passe
  • Organisation du projet
  • Sauvegardes de sites Web
  • Pages d'erreur personnalisées
  • Favicon personnalisé
  • Facturation client directe
  • Composants SNS
  • Texte riche
  • Visionneuse
  • Vidéos de fond
  • Codes d'intégration HTML
  • Menu déroulant
  • Google Maps
  • Curseurs et carrousels
  • Navigation par onglet
  • Formulaires Web personnalisables
  • Éditeur de site web
  • Examen des soumissions de formulaire
  • Ouvrir le contenu du graphique
  • Modèle de balises SEO
  • Importation de CMS via Zapier
  • Flux RSS
  • API CMS
  • Animations 3D
  • Propriétés de style CSS
  • Modèles de site Web
  • Images optimisées
  • Familles de polices Web
  • Nuancier global
  • Boîtes flexibles CSS3
  • Ajout de code personnalisé
  • Code exportable
  • Filtres CSS

Webflow Review: Tarification

La structure de prix de Webflow est apparemment complexe pour certains utilisateurs, tandis que d'autres louent son approche globale.

Si vous êtes du genre à détester de nombreux packages sur une même plate-forme en raison du processus de comparaison complexe qui l'accompagne, vous pourriez trouver les plans de tarification de Webflow un peu fastidieux. Par contre, si vous préférez plusieurs options de tarification adaptées à différents niveaux d’utilisateur, vous allez apprécier la manière dont les choses ont été organisées ici.

Désormais, pour commencer, Webflow tente de prendre en charge trois types d’utilisateurs: les indépendants, les concepteurs solo et les équipes de conception. Chaque catégorie possède son propre ensemble de packages avec différentes fonctionnalités.

Forfaits Webflow

Voici une brève description de chaque plan:

Pour les pigistes:

Mise en scène gratuite Complètement libre.

  • Formulaires 10 soumis chaque mois
  • Objets 50 CMS
  • Visites mensuelles 500
  • Pages statiques 2
  • Sous-domaine webflow.io gratuit

Hébergement de base 15 $ par mois facturé mensuellement ou 12 $ par mois facturé annuellement.

  • Formulaires 500 soumis chaque mois
  • Visites mensuelles 25,000
  • Pages statiques 100
  • CAN
  • Option SSL gratuite
  • Création de domaine

Hébergement CMS 20 $ par mois facturé mensuellement ou 16 $ par mois facturé annuellement.

  • Editeurs de contenu 3
  • Accès API CMS
  • Objets 2,000 CMS disponibles
  • Formulaires 1,000 soumis chaque mois
  • Visites mensuelles 100,000
  • Pages statiques 100
  • CAN
  • Option SSL gratuite
  • Création de domaine

Hébergement d'affaires 45 $ par mois facturé mensuellement ou 36 $ par mois facturé annuellement.

  • Editeurs de contenu 10
  • Accès API CMS
  • Objets 10,000 CMS disponibles
  • Formulaire de soumission illimité
  • Visites mensuelles 1,000,000
  • Pages statiques 100
  • CAN
  • Option SSL gratuite
  • Création de domaine

Webflow pour les pigistes

Pour les concepteurs:

Entrée- Gratuit.

  • Mise en scène gratuite
  • Facturation client
  • Jusqu'à 2 projets simultanés
  • Bâtiment gratuit

Lite- 24 $ par mois facturé mensuellement ou 16 $ par mois facturé annuellement.

  • Exportation de code
  • Mise en scène améliorée
  • Facturation client
  • Jusqu'à 10 projets simultanés

Pro- 42 $ par mois facturé mensuellement ou 35 $ par mois facturé annuellement.

  • Protection du site par mot de passe
  • Étiquetage blanc
  • Transfert de propriété de projet
  • Exportation de code
  • Mise en scène améliorée
  • Facturation client
  • Projets simultanés illimités

Webflow pour les concepteurs

Pour les équipes créatives

Équipe- 42 $ par mois facturé mensuellement ou 35 $ par mois facturé annuellement.

  • Tableau de bord de l'équipe
  • Protection du site par mot de passe
  • Étiquetage blanc
  • Exportation de code
  • Mise en scène améliorée
  • Facturation client
  • Projets simultanés illimités

Grande équipe Devis personnalisé.

  • Prix ​​des membres d'équipe en bloc
  • Tableau de bord de l'équipe
  • Protection du site par mot de passe
  • Étiquetage blanc
  • Exportation de code
  • Mise en scène améliorée
  • Facturation client
  • Projets simultanés illimités

Webflow pour les équipes

Qui devrait envisager d'utiliser Webflow?

Tout bien considéré, nous applaudissons Webflow pour fournir:

  • Certificat SSL gratuit pour la conformité à la sécurité.
  • Réseaux de diffusion de contenu intégrés gratuits pour des temps de chargement de page réduits.
  • Hébergement de site Web mondial avancé en collaboration avec des systèmes efficaces tels que Amazon CloudFront & Rapidement- pour des vitesses de chargement de page rapides.
  • Un CMS intégré polyvalent pour la création de contenu dynamique.
  • Un environnement de test permettant de tester et d'examiner différents éléments du site Web.
  • Gestionnaires CSS et JS optimisés pour une gestion de site avancée et un contrôle global des animations et des styles.
  • Un processus de création Web flexible commençant par une toile vierge ou des modèles prédéfinis.
  • Un outil de conception Web adapté aux téléphones portables qui génère du code exportable en temps réel lorsque vous créez un site.

Ceci mis à part, les inconvénients que j'ai rencontrés en cours de route incluent:

  • Fonctionnalités limitées pour la prise en charge des sites de commerce électronique
  • Un processus de conception qui favorise fortement les programmeurs
  • Un nombre limité de modèles de sites Web
  • Une courbe d'apprentissage abrupte pour les débutants

Maintenant, regroupons tout ensemble. Je parie que vous conviendrez que Webflow est un système de construction Web avancé conçu pour les développeurs, les concepteurs et les agences à la recherche d'une polyvalence et d'un contrôle accrus.

Quelles sont vos pensées?

Bogdan Rancea

Bogdan est un membre fondateur d’Inspired Mag, ayant accumulé près de 14 années d’expérience 6 au cours de cette période. Dans ses temps libres, il aime étudier la musique classique et explorer les arts visuels. Il est également obsédé par les fixies. Il possède déjà 5.