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. Deze Webflow-beoordeling bespreekt alle essentiële functies die u moet kennen, de bijbehorende zwakke punten, plus de kosten van het gebruik van het platform voor ontwerp.

Maar eerst, wat is Webflow precies?

Webflowoverzicht: overzicht

Zoals je waarschijnlijk wel hebt doorgenomen, is Webflow niet je typische webbuilder.

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 zoals Wix en Weebly. Het biedt een andere reeks functies gericht op een verschillende gebruikersdemografie.

Al met al is het meest fascinerende wat hier is de slimme benadering van Webflow voor het hele codeerwerk. Het is een code-vrij platform dat toevallig codebewerking ondersteunt voor meer flexibiliteit.

Verwarrend? Ja dat weet ik. Daarom heb ik de tijd genomen om alles wat Webflow te bieden heeft goed in de gaten te houden, van websiteontwerp tot het contentmanagementsysteem.

En hier zijn de details ...

Webflowoverzicht: functies

Website Design

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

Nou, het zou begrijpelijk zijn als je het verwart met het bewerkingsvenster van Adobe Photoshop voordat je begint. Deze twee kunnen van ver lijken op tweelingbroers, maar blijken heel anders te zijn als je dichterbij komt. Om meer specifiek te zijn, zult u merken dat Webflow een automatiseringsengine is die grotendeels werkt op CSS en HTML.

Webflow-ontwerper

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

Als u andere webontwerpers zonder code heeft geprobeerd, weet u dat het elimineren van het programmeerbit ten koste gaat van beperkte flexibiliteit. Interessant is dat de ontwerptool van Webflow niet deze trend volgt. 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 qua vorm is Webflow niet een van de eenvoudigste bouwers die je daar zult vinden. Hoewel de interface buitengewoon krachtig is, is het ogenschijnlijk ingewikkeld en kan het enige moeite kosten om de lijnen dienovereenkomstig te leren.

Om te beginnen creëert Webflow niet de illusie van een volledig codeloos ontwerpproces. Dus verwacht niet dat je meteen naar binnen springt en begin met het tekenen van vormen op het canvas. Een dergelijke benadering zou uw aanpassingsvermogen aanzienlijk beperken.

Daarom integreert het systeem hier op een slimme manier sommige aspecten van codering bij het samenstellen van een website. Als u bijvoorbeeld een vierkante middenpagina wilt invoegen, moet u een nieuwe <div> element, wijzig vervolgens de punten linksonder en rechtsboven als nul samen met vaste positionering.

Wat houdt dit precies in?

Hoewel u webflow kunt gebruiken zonder programmeerkennis, moet u een basiskennis hebben van de HTML- en CSS-eigenschappen om volledig te kunnen profiteren van zijn pure kracht.

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 aanpak voor het coderen van beginners maakt gebruik van de vooraf ontworpen sjablonen van Webflow. Het blijkt dat het systeem meer biedt dan aantrekkelijke 200-sjablonen, waarvan 30 volledig gratis is. Betaalde kaarten kosten je 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 is vanzelfsprekend. Die webflow biedt, net als het grootste deel van de webbouwers van vandaag, sitehosting plus aangepaste domeinen, samen met zijn ontwerppakketten.

Webflow-hosting

Maar verwacht hier niet de typische gedeelde planaanpak. Webflow kiest er in plaats daarvan voor om de sites intern te onderhouden, binnen wat het beschrijft als een "oneindig schaalbare servervloot".

Wat houdt dit in?

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

Naast het afhandelen van verkeersomvang garandeert Webflow optimale prestaties met milliseconden-lange laadtijden van pagina's plus XUMSX% website-uptime. Het AWS-ondersteunde framework is met name van cruciaal belang voor het bieden van een solide basis voor het ondersteunen van relatief grote verkeerslasten van bedrijfssites.

En aangezien webbeveiliging noodzakelijk is, voldoet de hostinginfrastructuur van Webflow aan HTTP / 2 en ontvangen gebruikers relevante SSL-certificaten voor hun sites.

Content Management Systeem

Dit is waar inhoud en visueel ontwerp samenkomen. Met de CMS van Webflow kunt u in essentie de inhoud van uw site invoeren en beheren. Met andere woorden, u kunt tekst of media toevoegen en bewerken op de precieze 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.

Dat komt feitelijk overeen met de back-end van de CMS. Maar weet je wat? Dat is niet alles. Webflow gaat door en geeft WordPress een goede run voor hun geld via de Webflow Editor. Dit is waar u een gepubliceerde pagina oproept 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 blijkbaar doordacht en doet een goede poging om samenwerking voor webontwerpbureaus 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
  • Help Center
  • 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

Webflowoverzicht: prijzen

De prijsstructuur van Webflow is voor sommige gebruikers ogenschijnlijk complex, terwijl anderen zijn all-inclusive aanpak prijzen.

Als u het type bent dat een groot aantal pakketten op een enkel platform haat vanwege het complexe vergelijkingsproces dat daarbij hoort, dan vindt u de prijsbepalingen van Webflow misschien een beetje omslachtig. Maar aan de andere kant - als u liever meerdere prijsopties kiest die bij verschillende gebruikersniveaus passen, dan zult u het leuk vinden om de dingen hier te organiseren.

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

Webflow-pakketten

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 moeten overwegen om Webflow te gebruiken?

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 en 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 ermee eens zult zijn dat Webflow een geavanceerd webbouwsysteem is dat is 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.