Skriva bättre webbkod

Här är något jag tycker är ganska ironiskt. Många webbdesigners gillar enkelheten som följer med webbbyggare. Ändå intressant, huvuddelen av webbbyggarna skapades för att eliminera rollen som webbdesigners och utvecklare genom att automatisera den underliggande koden.

Roligt, eller hur?

Men återigen finns det webbbyggare som till synes gör det motsatta. I stället för att minska designerns och utvecklares roll, kommer de med verktyg som är specifikt optimerade för sådana team. Deras huvudsakliga mål är att underlätta designbyråer med avancerade verktyg.

Hur frågar du?

Väl, WebFlow är ett av de framträdande exemplen. Och dess roll i hela webbdesignmiljön är något vi kommer att undersöka inom kort. Denna webbflödesöversikt diskuterar alla kritiska funktioner du behöver veta, motsvarande svagheter, plus kostnaden för att utnyttja plattformen för design.

Men först, vad är egentligen Webflow?

Webflow Review: Översikt

Som du förmodligen har räknat ut nu är Webflow inte din typiska webbbyggare.

Lanserat 2013 säljer detta verktyg sig som en webbdesignlösning som kombinerar professionella kodfria designverktyg med ett kraftfullt visuellt CMS, plus användarvänlighet för standardbyggare. Så tänk på det som en sammansmältning mellan en webbbyggnadslösning som Wix och en CMS-motor som WordPress.

WebFlow

Men gör inga misstag. Webflow tävlar inte med liknande Wix och Weebly. Det erbjuder en annan uppsättning funktioner som är inriktade på en varierande användardemografi.

Sammantaget är det mest fascinerande här Webflows smarta strategi för hela kodningssaken. Det är en kodfri plattform som råkar stödja kodredigering för ökad flexibilitet.

Förvirrande? Ja jag vet. Därför tog jag mig tid att noggrant utvärdera allt som Webflow har att erbjuda - från webbdesign hela vägen till innehållshanteringssystemet.

Och här är detaljerna ...

Webflow Review: Funktioner

Webbdesign

Webflow är utan tvekan ett par saker. Men det kodlösa verktyget för webbdesign har alltid varit det viktigaste erbjudandet här.

Det skulle vara förståeligt om du förväxlar det med Adobe Photoshops redigeringsfönster innan du börjar. Dessa två kan se ut som tvilling-syskon från långt, men visar sig vara helt annorlunda när du närmar dig. För att vara mer specifik, kommer du att märka att Webflow är en automatiseringsmotor som till stor del fungerar på CSS och HTML.

Webflödesdesigner

På den kan du bekvämt introducera webbplatselement och sedan flytta dem runt i enlighet därmed utan att använda kod. Programmeringsbiten hanteras av Webflows underliggande ramverk, som systematiskt skapar och redigerar webbplatsens kod när du fortsätter med designprocessen.

Om du har provat andra kodlösa webbdesigners, vet du att eliminering av programmeringsbiten kostar begränsad flexibilitet. Intressant nog följer Webflows designverktyg inte denna trend. Så jag ska vara ärlig här och erkänna att det verkligen är en av de mest avancerade webbplatsbyggarna på marknaden.

Låt oss inse det. Avancerad och enkelhet är två saker som är kända för att vara som eld och is när det gäller verktyg för webbplatshantering.

Och sant att bilda, är Webflow inte en av de enklaste byggare du hittar där. Även om gränssnittet är oerhört kraftfullt är det till synes komplicerat och kan ta lite ansträngning för att lära sig repen i enlighet därmed.

För det första skapar inte Webflow en illusion av en helt kodlös designprocess. Så förvänta dig inte att hoppa rätt in och börja rita former på duken. En sådan metod skulle väsentligt begränsa din anpassningsförmåga.

Följaktligen inbäddar systemet här på ett smart sätt vissa aspekter av kodning när du bygger en webbplats. Om du tänker införa en kvadratisk sida, till exempel, måste du lägga till en ny <div> element, redigera sedan dess nedre vänstra och övre högra punkter som noll tillsammans med fast positionering.

Vad betyder det?

Medan du kan gå vidare och utnyttja Webflow utan programmeringskunskap, krävs det en grundläggande förståelse för HTML- och CSS-egenskaper för att fullt ut dra nytta av dess rena kraft.

Men om du föredrar något annat, klicka helt enkelt mot "Jag skriver inte kod ” val när du registrerar dig. Systemet kommer sedan att utöka sin automatiseringsförmåga för att hantera en stor del av designen åt dig.

Som sagt kan du börja med en helt tom duk. Det är den metoden jag föredrar för att jag får anpassa allt från basen.

Men ett försiktighetsord. Lämna det här alternativet till designers som har erfarenhet av CSS och HTML. Annars riskerar du att blanda saker eller fastna någonstans längs processen.

Det bästa sättet för kodning av nybörjare är att dra fördel av Webflows förkonstruerade mallar. Det visar sig att systemet erbjuder mer än 200 attraktiva mallar, varav 30 är helt gratis. Betalade, däremot, kommer att kosta dig mellan $ 24 och $ 79.

Efter en grundlig analys av olika teman märkte jag att de är märkbart olika - med olika strukturer och funktioner. Därefter tillåter den efterföljande redigeringsprocessen att ändra deras element bakgrunder, färg, lager, opacitet, rotation, effekter, placering, storlek etc.

värd

Detta säger sig självt. Det webbflödet, liksom huvuddelen av webbbyggare idag, erbjuder webbhotell plus anpassade domäner tillsammans med dess designpaket.

Webflow-värd

Men förvänta dig inte den typiska strategin för delad plan här. Webflow väljer istället att underhålla webbplatserna internt inom det som den beskriver som en "oändligt skalbar serverflotta".

Vad innebär detta?

Webflow råkar äga och kontrollera mer än 100 datacentra över hela världen. Kombinera det med CDN: n sprang förbi Amazon CloudFront plus Snabbt- och resultatet är ett solidt system för värd för alla typer av webbplatser.

Förutom att hantera alla trafikstorlekar garanterar Webflow optimal prestanda med millisekunder långa sidbelastningstider plus 99.99% upptid på webbplatsen. Dess AWS-driven ramverk är särskilt kritisk för att ge en solid grund för att stödja relativt stora trafikbelastningar från företagssidor.

Och eftersom webbsäkerhet är absolut nödvändigt är webbflödes värdinfrastruktur HTTP / 2-kompatibel och användare får relevanta SSL-certifikat för sina webbplatser.

Content Management System

Här möter innehåll visuell design. Webflows CMS tillåter dig i huvudsak att ange och hantera webbplatsens innehåll. Med andra ord kan du lägga till och redigera all text eller media på den exakta sidan du bygger.

Och om du hanterar ett omfattande webbprojekt med komplicerade strukturer kommer du särskilt att uppskatta systemets förmåga att stödja manuella justeringar av innehållsaspekter - inklusive innehållstyper, teammedlemmar, projekt osv. - komplett med anpassningsbara fält.

Tja, allt detta underlättas av CMS-samlingar- en funktion som kan nås direkt från det primära redigeringsfönstret. Så snart du genererar en ny samling kan du gå förbi typen av innehåll för att definiera fält och introducera objekt. De antas därefter som distinkta webbsidor eller listor integrerade i sidor du har skapat.

Webflow CMS

Förvirrande? Okej, tänk på det här exemplet - för att skapa en sida som visar din organisations arbetskraft, kan du introducera en "teammedlemmar" -samling, komplett med artiklar som sociala länkar, beskrivningar, namn, foton och anställdas namn.

Nu täcker det i princip CMS-backend. Men vet du vad? Det är inte allt. Webflow fortsätter för att ge WordPress ett bra resultat för sina pengar genom Webflow Editor. Det är här du kryddar en publicerad sida med nytt innehåll baserat på den förut valda typen.

Kort sagt får du en omfattande webbplats som stöder dynamiskt innehåll som portföljer, artiklar och blogginlägg - utan att installera ytterligare plugins.

Samarbete

Erkänn. Stora webbdesignprojekt är spännande. Men de kan bli allt mer besvärliga, särskilt om du inte strömlinjeformar alla involverade parter i enlighet därmed.

Webflow har till synes tänkt detta igenom och gör ett bra försök att underlätta samarbete för webbdesignbyråer med flera teammedlemmar. Och det finns mer - du kan också bjuda in andra parter som klienter, tredjepartsdesigners, entreprenörer osv. Deras roller och användarfunktioner beror på motsvarande behörigheter du ställer in.

Webflow-samarbete

Om du till exempel handlar med klienter kan du bjuda in dem att granska sina projekt i realtid - med starkt begränsade användarrättigheter.

Som sagt, jag märkte att alla webbplatsjusteringar återspeglas över hela linjen i realtid. Detta hjälper samarbetande teammedlemmar att undvika att upprepa uppgifter som redan har hanterats.

Övergripande funktioner

  • XML sitemap
  • SEO metatitlar, beskrivningar
  • Bild alt taggar
  • Hjälpcenter
  • Community forum
  • Prioritärt stöd
  • E-postsupport
  • Anpassat domännamn
  • Sceneringsplatser
  • Omedelbara uppdateringar
  • Anpassade URL-omdirigeringar
  • 24/7 webbplatsövervakning
  • Snabbbelastningstider
  • Google-domäner köper
  • Zapier integration
  • MailChimp-integration
  • Google Analytics-integration
  • SEO optimering
  • Vit etikettformer
  • CMS vit märkning
  • Lösenordsskydd för webbplatsen
  • Projektorganisation
  • Säkerhetskopior
  • Anpassade felsidor
  • Anpassad favorit
  • Direkt klientfakturering
  • SNS-komponenter
  • Rik text
  • Lightbox
  • Bakgrundsfilmer
  • HTML-inbäddningskoder
  • Rullgardinsmenyn
  • Google kartor
  • Skjutreglage och karuseller
  • Fliknavigering
  • Anpassningsbara webbformulär
  • Webbplatsredaktör
  • Formulärsöversikt
  • Öppna grafinnehåll
  • SEO-taggmall
  • CMS-import via Zapier
  • RSS-feeds
  • CMS API
  • 3D-animationer
  • CSS-stylingegenskaper
  • Webbplatsmallar
  • Optimerade bilder
  • Webbsteckensnittsfamiljer
  • Globala färgrutor
  • CSS3 flexibla lådor
  • Anpassad kodtillägg
  • Exporterbar kod
  • CSS-filter

Webflow Review: Prissättning

Webflows prissättningsstruktur är till synes komplex för vissa användare, medan andra berömmer sin allt inkluderande strategi.

Om du är den typ som hatar flera paket på en enda plattform på grund av den komplexa jämförelseprocess som följer med det, kanske du tycker att Webflows prissättningsplaner är lite besvärliga. Men å andra sidan - om du föredrar flera prissättningsalternativ som passar olika användarnivåer, kommer du att gilla hur saker har organiserats här.

Till att börja med försöker Webflow att stödja tre typer av användare - frilansare, solo-designers och designteam. Varje kategori har sin egen uppsättning paket med olika funktioner.

Webflödespaket

Här är korta beskrivningar av varje plan:

För frilansare:

Gratis scen- Helt gratis.

  • 10 formulärinlämningar per månad
  • 50 CMS-artiklar
  • 500 månatliga besök
  • 2 statiska sidor
  • Gratis webflow.io underdomän

Grundläggande värd- $ 15 per månad faktureras varje månad eller $ 12 per månad faktureras årligen.

  • 500 formulärinlämningar per månad
  • 25,000 månatliga besök
  • 100 statiska sidor
  • CDN
  • Gratis SSL-alternativ
  • Domänskapande

CMS-värd- $ 20 per månad faktureras varje månad eller $ 16 per månad faktureras årligen.

  • 3 innehållsredaktörer
  • CMS API-åtkomst
  • 2,000 XNUMX CMS-artiklar tillgängliga
  • 1,000 formulärinlämningar per månad
  • 100,000 månatliga besök
  • 100 statiska sidor
  • CDN
  • Gratis SSL-alternativ
  • Domänskapande

Affärshotell- $ 45 per månad faktureras varje månad eller $ 36 per månad faktureras årligen.

  • 10 innehållsredaktörer
  • CMS API-åtkomst
  • 10,000 XNUMX CMS-artiklar tillgängliga
  • Obegränsade formulärinlämningar
  • 1,000,000 månatliga besök
  • 100 statiska sidor
  • CDN
  • Gratis SSL-alternativ
  • Domänskapande

Webflöde för frilansare

För designers:

Förrätt- Gratis.

  • Gratis iscensättning
  • Kundfakturering
  • Upp till 2 samtidiga projekt
  • Gratis webbplatsbyggnad

Lite- $ 24 per månad faktureras varje månad eller $ 16 per månad faktureras årligen.

  • Kodeksport
  • Förbättrad iscensättning
  • Kundfakturering
  • Upp till 10 samtidiga projekt

Proffs- $ 42 per månad faktureras varje månad eller $ 35 per månad faktureras årligen.

  • Lösenordsskydd för webbplatsen
  • Vit märkning
  • Överföring av projektägande
  • Kodeksport
  • Förbättrad iscensättning
  • Kundfakturering
  • Obegränsade samtidiga projekt

Webflöde för designers

För kreativa team

Team- $ 42 per månad faktureras varje månad eller $ 35 per månad faktureras årligen.

  • Team instrumentpanelen
  • Lösenordsskydd för webbplatsen
  • Vit märkning
  • Kodeksport
  • Förbättrad iscensättning
  • Kundfakturering
  • Obegränsade samtidiga projekt

Stort team- Anpassad offert.

  • Prissättning av gruppmedlem
  • Team instrumentpanelen
  • Lösenordsskydd för webbplatsen
  • Vit märkning
  • Kodeksport
  • Förbättrad iscensättning
  • Kundfakturering
  • Obegränsade samtidiga projekt

Webflöde för team

Vem ska överväga att använda webbflöde?

Alla saker som beaktas applåderar vi WebFlow för att tillhandahålla:

  • Gratis SSL-certifikat för säkerhetskrav.
  • Gratis integrerade nätverk för leverans av innehåll för reducerade sidlastningar.
  • Avancerad global webbhotell i samarbete med effektiva system som Amazon CloudFront och Snabbt- för snabb sidhastighet.
  • Ett mångsidigt integrerat CMS för dynamiskt innehållsskapande.
  • En iscensatt miljö för att testa och granska olika webbplatselement.
  • Optimerade CSS- och JS-chefer för avancerad webbplatshantering plus holistisk kontroll av animationer och stilar.
  • En flexibel webbbyggnadsprocess som börjar med antingen en tom duk eller fördesignade mallar.
  • Ett mobilvänligt webbdesignverktyg som producerar exporterbar kod i realtid när du bygger en webbplats.

Förutom de nackdelar jag har stött på under vägen inkluderar:

  • Begränsade funktioner för att stödja e-handelssajter
  • En designprocess som gynnar programmerare
  • Ett begränsat antal webbplatsmallar
  • En brant inlärningskurva för nybörjare

Nu låt vi pakka allt ihop. Jag slår vad om att du håller med om att Webflow är ett avancerat webbbyggnadssystem skapat för utvecklare, designers och byråer som söker ökad mångsidighet och kontroll.

Vad är dina tankar?

Bogdan Rancea

Bogdan är en av grundarna i Inspired Mag och har samlat nästan 6 års erfarenhet under denna period. På fritiden gillar han att studera klassisk musik och utforska bildkonst. Han är ganska besatt av fixies också. Han äger redan 5.