Betere webcode schrijven

Hier is iets dat ik nogal ironisch vind. Veel webontwerpers houden van de eenvoud die bij webbouwers hoort. Interessant genoeg is het grootste deel van de webbouwers gemaakt om de rol van webontwerpers en ontwikkelaars te elimineren door de onderliggende code te automatiseren.

Grappig toch?

Maar aan de andere kant zijn er webbouwers die schijnbaar het tegenovergestelde doen. In plaats van de rol van ontwerpers en ontwikkelaars te verminderen, worden ze geleverd met tools die specifiek zijn geoptimaliseerd voor dergelijke teams. Hun voornaamste doel is om ontwerpbureaus te faciliteren met geavanceerde tools.

Hoe, vraag je?

Nou, Webflow is een van de prominente voorbeelden. En zijn rol in de hele webontwerpomgeving is iets waar we binnenkort naar zullen kijken. Dit Webflow review bespreekt alle kritieke functies die u moet kennen, de bijbehorende zwakke punten, plus de kosten om het platform voor ontwerp te gebruiken.

Maar eerst, wat precies is Webflow?

Webflow Overzicht van recensies

Zoals je waarschijnlijk al hebt bedacht, Webflow is niet uw typische webbouwer.

Deze tool is geïntroduceerd in 2013 en verkoopt zichzelf als een webontwerpoplossing die professionele, code-vrije ontwerptools combineert met een krachtig visueel CMS, plus de gebruiksvriendelijkheid van standaardbouwers. Zie het dus als een samensmelting van een oplossing voor het bouwen van websites zoals Wix en een CMS-motor zoals WordPress.

Webflow

Maar vergis je niet. Webflow concurreert niet met mensen als Wix als Weebly. Het biedt een andere reeks functies gericht op een verschillende gebruikersdemografie.

Al met al is het meest fascinerende hier Webflow's slimme benadering van het hele coderingsgedoe. Het is een codevrij platform dat codebewerking ondersteunt voor meer flexibiliteit.

Verwarrend? Ja dat weet ik. Daarom heb ik de tijd genomen om alles scherp te beoordelen Webflow te bieden heeft - van website-ontwerp tot en met het contentmanagementsysteem.

En hier zijn de details ...

Webflow Review: functies

Website Design

Webflow is ongetwijfeld een paar dingen. Maar de codeloze webontwerptool is hier altijd het belangrijkste aanbod geweest.

Nou, het zou begrijpelijk zijn als je het zou verwarren met het bewerkingsvenster van Adobe Photoshop voordat je begint. Deze twee zien er van ver misschien uit als tweelingbroers en -zussen, maar blijken heel anders te zijn naarmate je dichterbij komt. Om specifieker te zijn, zult u dat merken Webflow is een automatiseringsengine die grotendeels draait op CSS en HTML.

Webflow <p></p>

Hierop kunt u gemakkelijk site-elementen introduceren en ze dienovereenkomstig verplaatsen zonder code te gebruiken. De programmeerbit wordt afgehandeld door Webflow's onderliggende framework, dat systematisch de code van uw site creëert en bewerkt terwijl u doorgaat met het ontwerpproces.

Als je andere webdesigners zonder code hebt geprobeerd, weet je dat het elimineren van de programmeerbit ten koste gaat van beperkte flexibiliteit. Interessant is dat WebflowDe ontwerptool volgt deze trend niet. Dus ik zal hier eerlijk zijn en toegeven dat het zeker een van de meest geavanceerde veelzijdige websitebouwers op de markt is.

Laten we het nu onder ogen zien. Geavanceerd en eenvoudig zijn twee dingen die bekend staan ​​als vuur en ijs als het gaat om tools voor websitebeheer.

En trouw aan vorm, Webflow is niet een van de eenvoudigste bouwers die je er zult vinden. Hoewel de interface buitengewoon krachtig is, lijkt het gecompliceerd en kan het enige moeite kosten om de kneepjes van het vak te leren.

Om te beginnen, Webflow creëert niet de illusie van een volledig codeloos ontwerpproces. Verwacht dus niet meteen naar binnen te springen en vormen op het canvas te tekenen. Een dergelijke aanpak zou uw aanpassingsvermogen aanzienlijk beperken.

Daarom integreert het systeem hier op slimme wijze enkele aspecten van codering terwijl u een website bouwt. Als u van plan bent een square middenpagina, u moet bijvoorbeeld een versdiv> element, wijzig vervolgens de punten linksonder en rechtsboven als nul samen met vaste positionering.

Wat houdt dit precies in?

Terwijl u door kunt gaan en uw voordeel kunt doen Webflow zonder enige programmeerkennis, is een basiskennis van HTML- en CSS-eigenschappen vereist om volledig te profiteren van de enorme kracht ervan.

Als u er echter de voorkeur aan geeft, tikt u eenvoudigweg op "Ik schrijf geen code " keuze als u zich registreert. Het systeem breidt zijn automatiseringsvermogen vervolgens uit om een ​​groot deel van het ontwerp voor u af te handelen.

Dat gezegd hebbende, kun je beginnen met een volledig leeg canvas. Dat is de aanpak waar ik de voorkeur aan geef, omdat ik alles vanaf de basis kan aanpassen.

Een woord van waarschuwing echter. Laat deze optie over aan ontwerpers die ervaring hebben met CSS en HTML. Anders loop je het risico dingen met elkaar te vermengen of ergens in het proces vast te zitten.

De beste benadering voor beginners om te coderen, is profiteren van Webflow's vooraf ontworpen sjablonen. Het blijkt dat het systeem meer dan 200 aantrekkelijke sjablonen biedt, waarvan er 30 volledig gratis zijn. Betaalde, daarentegen, kosten u tussen $ 24 en $ 79.

Na een grondige analyse van verschillende thema's merkte ik dat ze merkbaar anders zijn, met verschillende structuren en functies. Vervolgens kunt u met het volgende bewerkingsproces de achtergrond, kleur, lagen, dekking, rotatie, effecten, positie, grootte, etc. van hun elementen wijzigen.

hosting

Dit spreekt voor zich. Dat Webflow, zoals de meeste webbouwers tegenwoordig, biedt sitehosting plus aangepaste domeinen samen met zijn ontwerppakketten.

Webflow Hosting

Maar verwacht hier niet de typische gedeelde planbenadering. Webflow in plaats daarvan kiest ervoor om de sites in eigen huis te houden, binnen wat het beschrijft als een "oneindig schaalbare servervloot".

Wat houdt dit in?

Nou, Webflow bezit en beheert toevallig meer dan 100 datacentra over de hele wereld. Combineer dat met CDN's die worden gerund Amazon CloudFront plus Snel- en het resultaat is een solide systeem voor het hosten van alle soorten websites.

Afgezien van het verwerken van elke verkeersgrootte, Webflow garandeert optimale prestaties met milliseconden lange laadtijden van pagina's plus 99.99% uptime van de website. Het door AWS aangedreven raamwerk is met name van cruciaal belang om een ​​solide basis te bieden voor het ondersteunen van relatief grote verkeersbelastingen van bedrijfssites.

En aangezien webbeveiliging absoluut noodzakelijk is, WebflowDe hostinginfrastructuur is HTTP / 2-compatibel en gebruikers krijgen relevante SSL-certificaten voor hun sites.

Content Management Systeem

Dit is waar inhoud en visueel ontwerp samenkomen. WebflowMet het CMS kunt u in wezen de inhoud van uw site invoeren en beheren. Met andere woorden, u kunt tekst of media toevoegen en bewerken op de exacte pagina die u aan het bouwen bent.

En als u een uitgebreid webproject met ingewikkelde structuren beheert, zult u vooral het vermogen van het systeem waarderen om handmatige aanpassingen van inhoudaspecten te ondersteunen, zoals inhoudstypen, teamleden, projecten, enz., Compleet met aanpasbare velden.

Nou, dit alles wordt mogelijk gemaakt door CMS Collecties- een functie die rechtstreeks vanuit het primaire editorvenster toegankelijk is. Zodra u een nieuwe verzameling genereert, kunt u verder gaan met het type inhoud om velden te definiëren en items te introduceren. Ze worden vervolgens gebruikt als afzonderlijke webpagina's of lijsten die zijn geïntegreerd in pagina's die u hebt gemaakt.

Webflow CMS

Verwarrend? Ok, overweeg dit voorbeeld - om een ​​pagina te maken met het personeel van uw organisatie, kunt u een "teamleden" -collectie introduceren, compleet met items zoals sociale links, beschrijvingen, namen, foto's en namen van werknemers.

Nu, dat dekt in feite de CMS-back-end. Maar weet je wat? Dat is niet alles. Webflow gaat door om WordPress een goede run voor hun geld te geven via de Webflow Editor. Dit is waar u een gepubliceerde pagina opfleurt met nieuwe inhoud op basis van het vooraf geselecteerde type.

Kortom, u krijgt een uitgebreide website die dynamische inhoud ondersteunt, zoals portfolios, artikelen en blogposts - zonder extra plug-ins te installeren.

Samenwerking

Geef het toe. Grote webdesignprojecten zijn spannend. Maar ze kunnen steeds lastiger zijn, vooral als het u niet lukt om alle betrokken partijen dienovereenkomstig te stroomlijnen.

Webflow heeft dit schijnbaar goed doordacht en doet een goede poging om de samenwerking voor webdesignbureaus met meerdere teamleden te vergemakkelijken. En er is meer: ​​u kunt ook andere partijen uitnodigen, zoals klanten, externe ontwerpers, aannemers, enz. Hun rollen en gebruikersmogelijkheden zijn afhankelijk van de overeenkomstige rechten die u instelt.

Webflow samenwerking

Als u bijvoorbeeld met clients te maken hebt, kunt u hen uitnodigen om hun projecten in realtime te bekijken - met ernstig beperkte gebruiksrechten.

Dat gezegd hebbende, merkte ik dat alle aanpassingen van de site in realtime over de hele linie worden weergegeven. Dit helpt samenwerkende teamleden voorkomen het herhalen van taken die al zijn afgehandeld.

Algemene kenmerken

  • XML sitemap
  • SEO metatitels, beschrijvingen
  • Alt-tags voor afbeeldingen
  • Veelgestelde vragen
  • Gemeenschapsforum
  • Prioritaire ondersteuning
  • E-mail ondersteuning
  • Aangepaste domeinnaam
  • Staging-sites
  • Onmiddellijke updates
  • Aangepaste URL-doorverwijzingen
  • 24 / 7 website monitoring
  • Snelle laadtijden
  • Google Domains Purchasing
  • Zapier-integratie
  • MailChimp integratie
  • Google Analytics-integratie
  • SEO optimalisatie
  • White label formulieren
  • CMS-witte labels
  • Site wachtwoordbeveiliging
  • Project organisatie
  • Website back-ups
  • Aangepaste foutpagina's
  • Aangepaste favicon
  • Directe klantafrekening
  • SNS-componenten
  • Rijke text
  • Lichtbak
  • Achtergrondvideo's
  • HTML-insluitcodes
  • Drop-down menu
  • Google maps
  • Schuifregelaars en carrousels
  • Tab navigatie
  • Aanpasbare webformulieren
  • Website-editor
  • Beoordeling van formulierinzendingen
  • Grafiekinhoud openen
  • SEO tags sjabloon
  • CMS-import via Zapier
  • RSS Feeds
  • CMS API
  • 3D-animaties
  • CSS stijleigenschappen
  • Website sjablonen
  • Geoptimaliseerde afbeeldingen
  • Weblettertypefamilies
  • Globale kleurstalen
  • CSS3 flexibele vakken
  • Aangepaste code toevoeging
  • Uitvoerbare code
  • CSS-filters

Webflow Review: prijzen

WebflowDe prijsstructuur van sommige gebruikers lijkt complex, terwijl anderen de allesomvattende aanpak prijzen.

Als jij het type bent dat een hekel heeft aan talloze pakketten op één platform vanwege het complexe vergelijkingsproces dat ermee gepaard gaat, dan zou je kunnen ontdekken Webflow's tariefplannen een beetje omslachtig. Maar aan de andere kant - als u de voorkeur geeft aan meerdere prijsopties die geschikt zijn voor verschillende gebruikersniveaus, dan zult u het leuk vinden hoe de dingen hier zijn georganiseerd.

Nu, om te beginnen, Webflow probeert drie soorten gebruikers te ondersteunen: freelancers, solo-ontwerpers en ontwerpteams. Elke categorie heeft zijn eigen set pakketten met verschillende functies.

Webflow Paketten

Hier zijn korte beschrijvingen van elk plan:

Voor freelancers:

Gratis enscenering Helemaal gratis.

  • 10-formulierinzendingen per maand
  • 50 CMS-items
  • 500 maandelijkse bezoeken
  • Statische pagina's van 2
  • Gratis webflow.io-subdomein

Basic Hosting- $ 15 per maand, maandelijks gefactureerd of $ 12 per maand, jaarlijks gefactureerd.

  • 500-formulierinzendingen per maand
  • 25,000 maandelijkse bezoeken
  • Statische pagina's van 100
  • CDN
  • Gratis SSL-optie
  • Domein creatie

CMS Hosting- $ 20 per maand, maandelijks gefactureerd of $ 16 per maand, jaarlijks gefactureerd.

  • 3-inhoudeditors
  • CMS API-toegang
  • 2,000 CMS-items beschikbaar
  • 1,000-formulierinzendingen per maand
  • 100,000 maandelijkse bezoeken
  • Statische pagina's van 100
  • CDN
  • Gratis SSL-optie
  • Domein creatie

Zakelijke hosting- $ 45 per maand, maandelijks gefactureerd of $ 36 per maand, jaarlijks gefactureerd.

  • 10-inhoudeditors
  • CMS API-toegang
  • 10,000 CMS-items beschikbaar
  • Onbeperkte formulierinzendingen
  • 1,000,000 maandelijkse bezoeken
  • Statische pagina's van 100
  • CDN
  • Gratis SSL-optie
  • Domein creatie

Webflow voor freelancers

Voor ontwerpers:

Beginner- Gratis.

  • Gratis enscenering
  • Client facturering
  • Tot 2 gelijktijdige projecten
  • Gratis site bouwen

Lite- $ 24 per maand, maandelijks gefactureerd of $ 16 per maand, jaarlijks gefactureerd.

  • Code exporteren
  • Verbeterde enscenering
  • Client facturering
  • Tot 10 gelijktijdige projecten

Pro- $ 42 per maand, maandelijks gefactureerd of $ 35 per maand, jaarlijks gefactureerd.

  • Site wachtwoordbeveiliging
  • Witte labels
  • Overdracht van eigendom van projecten
  • Code exporteren
  • Verbeterde enscenering
  • Client facturering
  • Onbeperkte gelijktijdige projecten

Webflow voor ontwerpers

Voor creatieve teams

Team- $ 42 per maand, maandelijks gefactureerd of $ 35 per maand, jaarlijks gefactureerd.

  • Team dashboard
  • Site wachtwoordbeveiliging
  • Witte labels
  • Code exporteren
  • Verbeterde enscenering
  • Client facturering
  • Onbeperkte gelijktijdige projecten

Groot team- Aangepaste offerte.

  • Prijsstelling voor bulkteamleden
  • Team dashboard
  • Site wachtwoordbeveiliging
  • Witte labels
  • Code exporteren
  • Verbeterde enscenering
  • Client facturering
  • Onbeperkte gelijktijdige projecten

Webflow voor teams

Wie zou het gebruik moeten overwegen Webflow?

Alles bij elkaar genomen, applaudisseren we Webflow voor het verstrekken van:

  • Gratis SSL-certificaat voor beveiligingsnaleving.
  • Gratis geïntegreerde netwerken voor het leveren van inhoud voor kortere laadtijd van pagina's.
  • Geavanceerde wereldwijde website hosting in samenwerking met effectieve systemen zoals Amazon CloudFront als Snel- voor het snel laden van pagina's.
  • Een veelzijdig geïntegreerd CMS voor het maken van dynamische inhoud.
  • Een staging-omgeving voor het testen en beoordelen van verschillende website-elementen.
  • Geoptimaliseerde CSS- en JS-managers voor geavanceerd sitebeheer plus holistische besturing van animaties en stijlen.
  • Een flexibel webbouwproces dat begint met een leeg canvas of vooraf ontworpen sjablonen.
  • Een mobielvriendelijke webontwerptool die realtime exporteerbare code produceert terwijl u een site bouwt.

Dat terzijde, de nadelen die ik onderweg ben tegengekomen zijn:

  • Beperkte functies voor het ondersteunen van e-commercesites
  • Een ontwerpproces dat programmeurs zwaar begunstigt
  • Een beperkt aantal websitesjablonen
  • Een steile leercurve voor beginners

Laten we nu alles samen bundelen. Ik wed dat je het daarmee eens bent Webflow is een geavanceerd webbouwsysteem gemaakt voor ontwikkelaars, ontwerpers en bureaus die op zoek zijn naar meer veelzijdigheid en controle.

Wat zijn uw gedachten?

Bogdan Rancea

Bogdan is een van de oprichters van Inspired Mag en heeft in die periode bijna 6 jarenlange ervaring opgebouwd. In zijn vrije tijd studeert hij graag klassieke muziek en onderzoekt hij beeldende kunst. Hij is ook behoorlijk geobsedeerd door fixies. Hij is al eigenaar van 5.