Skrivning af bedre webkode

Her er noget, jeg finder ret ironisk. Mange webdesignere kan lide den enkelhed, der følger med webbuildere. Alligevel er det interessant, at hovedparten af ​​webbyggerne blev oprettet for at eliminere rollen som webdesignere og udviklere ved at automatisere den underliggende kode.

Sjove, ikke?

Men så er der igen webbyggere, der tilsyneladende gør det modsatte. I stedet for at reducere rollen som designere og udviklere kommer de med værktøjer, der er specifikt optimeret til sådanne teams. Deres hovedmål er at lette designbureauer med avancerede værktøjer.

Hvordan spørger du?

Godt, Webflow er et af de fremtrædende eksempler. Og dens rolle i hele webdesignmiljøet er noget, vi undersøger inden for kort tid. Denne Webflow-gennemgang drøfter alle de kritiske funktioner, du har brug for, de tilsvarende svagheder, plus omkostningerne ved at udnytte platformen til design.

Men først, hvad er netop webflow?

Webflow-gennemgang: Oversigt

Som du sandsynligvis har fundet ud af det nu, er Webflow ikke din typiske webbygger.

Lanceret i 2013, sælger dette værktøj sig som en webdesign-løsning, der kombinerer professionelle kodefrie designværktøjer med et kraftfuldt visuelt CMS, plus brugervenlighed for standardbyggere. Så tænk på det som en fusion mellem en web-bygningsløsning som Wix og en CMS-motor som WordPress.

Webflow

Men gør ingen fejl. Webflow konkurrerer ikke med lignende Wix og sort Weebly. Det tilbyder et andet sæt funktioner, der er målrettet mod en varierende bruger demografisk.

Alt i alt er den mest fascinerende ting her Webflows smarte tilgang til hele kodningsenheden. Det er en kodefri platform, der tilfældigvis understøtter kodedigering for øget fleksibilitet.

Forvirrende? Ja, det ved jeg. Derfor tog jeg mig tid til nøje at vurdere alt, hvad Webflow har at tilbyde - fra webdesign helt til indholdsstyringssystemet.

Og her er detaljerne ...

Webflow-gennemgang: Funktioner

Website Design

Webflow er uden tvivl et par ting. Men dets kodeløse webdesignværktøj har altid været det største tilbud her.

Det ville være forståeligt, hvis du forveksler det med Adobe Photoshop's redigeringsvindue, før du starter. Disse to ser måske ud som tvillingsøsken fra fjernt, men viser sig at være ganske forskellige, når du nærmer dig. For at være mere specifik, vil du bemærke, at Webflow er en automatiseringsmotor, der stort set fungerer på CSS og HTML.

Webflow-designer

På det kan du komfortabelt introducere sideelementer og derefter flytte dem rundt i overensstemmelse hermed uden at bruge kode. Programmeringsbiten håndteres af Webflows underliggende rammer, som systematisk opretter og redigerer dit websteds kode, når du fortsætter med designprocessen.

Hvis du har prøvet andre kodeløse webdesignere, ved du, at eliminering af programmeringsbiten koster en begrænset fleksibilitet. Interessant nok følger Webflows designværktøj ikke denne tendens. Så jeg vil være ærlig her og indrømme, at det helt sikkert er en af ​​de mest avancerede alsidige webstedsbyggere på markedet.

Lad os nu indse det. Avanceret og enkelhed er to ting, der vides at være som ild og is, når det kommer til webstedsstyringsværktøjer.

Og sandt at forme, er Webflow ikke en af ​​de enkleste bygherrer, du finder derude. Selvom grænsefladen er meget kraftig, er den tilsyneladende kompliceret og tager muligvis nogle kræfter for at lære rebene i overensstemmelse hermed.

For det første skaber Webflow ikke en illusion af en helt kodeløs designproces. Så forvent ikke at hoppe lige ind og begynde at tegne figurer på lærredet. En sådan tilgang vil i væsentlig grad begrænse din tilpasningsevne.

Derfor integrerer systemet her klogt nogle aspekter ved kodning, når du bygger et websted. Hvis du f.eks. Har til hensigt at introducere en firkantet midtside, skal du tilføje en ny <div> element, rediger derefter dens nederste venstre og øverste højre punkter som nul sammen med fast positionering.

Hvad betyder dette?

Mens du kunne gå videre og udnytte Webflow uden nogen programmeringskendskab, kræver det en grundlæggende forståelse af HTML- og CSS-egenskaber for fuldt ud at udnytte dens rene magt.

Hvis du dog foretrækker andet, skal du blot krydse af for "Jeg skriver ikke kode ” valg når du registrerer dig. Systemet vil derefter udvide sin automatiseringsevne til at håndtere en stor del af designet til dig.

Når det er sagt, kan du starte med et helt tomt lærred. Det er den tilgang, jeg foretrækker, fordi jeg får tilpasse alt fra basen.

Men et forsigtighedsord. Efterlad denne mulighed til designere, der har erfaring med CSS og HTML. Ellers risikerer du at blande tingene eller sidde fast et eller andet sted langs processen.

Den bedste metode til kodning af nybegyndere drager fordel af Webflows foruddesignede skabeloner. Det viser sig, at systemet tilbyder mere end 200 attraktive skabeloner, hvoraf 30 er helt gratis. Der betales på den anden side mellem $ 24 og $ 79.

Efter en grundig analyse af forskellige temaer bemærkede jeg, at de er mærkbart forskellige - med forskellige strukturer og funktioner. Derefter giver den efterfølgende redigeringsproces dig mulighed for at ændre deres elementers baggrund, farve, lag, opacitet, rotation, effekter, placering, størrelse osv.

Hosting

Dette siger sig selv. Denne webflow, ligesom hovedparten af ​​webbyggere i dag, tilbyder webstedshosting plus tilpassede domæner sammen med dets designpakker.

Webflow-hosting

Men forvent ikke den typiske tilgang til fælles plan her. Webflow vælger i stedet at vedligeholde webstederne internt inden for det, det beskriver som en "uendeligt skalerbar serverflåde".

Hvad indebærer dette?

Nå, webstrøm sker og kontrollerer mere end 100 datacentre over hele kloden. Kombiner det med CDN'er løb forbi Amazon CloudFront plus Hurtigt- og resultatet er et solidt system til hosting af alle typer websteder.

Bortset fra at håndtere enhver trafikstørrelse, garanterer Webflow optimal ydelse med millisekunder-lange sideindlæsningstider plus 99.99% websteds oppetid. Dens AWS-drevne ramme er især kritisk til at skabe et solidt fundament til understøttelse af relativt store trafikbelastninger fra virksomhedswebsteder.

Og da websikkerhed er afgørende, er Webflows hostinginfrastruktur HTTP / 2-kompatibel, og brugerne får relevante SSL-certifikater til deres websteder.

Content Management System

Det er her indhold møder visuelt design. Webflows CMS giver dig i det væsentlige mulighed for at indtaste og administrere dit websteds indhold. Med andre ord kan du tilføje og redigere enhver tekst eller medie på den nøjagtige side, du bygger.

Og hvis du administrerer et omfattende webprojekt med komplicerede strukturer, vil du især sætte pris på systemets evne til at understøtte manuelle justeringer af indholdsaspekter - herunder indholdstyper, teammedlemmer, projekter osv. - komplet med tilpassede felter.

Nå, alt dette letter CMS samlinger- en funktion, der kan åbnes lige fra det primære redigeringsvindue. Så snart du genererer en ny samling, kan du gå forbi indholdstypen for at definere felter og introducere elementer. De vedtages efterfølgende som forskellige websider eller lister integreret i sider, du har oprettet.

Webflow CMS

Forvirrende? OK, overvej dette eksempel - for at etablere en side, der viser din organisations arbejdsstyrke, kan du introducere en "teammedlemmer" -samling, komplet med emner som sociale links, beskrivelser, navne, fotos og medarbejdernavne.

Nu dækker det dybest set CMS back-end. Men ved du hvad? Det er ikke alt. Webflow fortsætter med at give WordPress et godt løb for deres penge gennem Webflow Editor. Det er her du krydre en offentliggjort side med nyt indhold baseret på den forud valgte type.

Kort sagt får du et omfattende websted, der understøtter dynamisk indhold som porteføljer, artikler og blogindlæg - uden at installere yderligere plugins.

Samarbejde

Indrøm det. Store webdesignprojekter er spændende. Men de kan blive mere og mere besværlige, især hvis du undlader at strømline alle involverede parter i overensstemmelse hermed.

Webflow har tilsyneladende fundet dette igennem og gør et godt forsøg på at lette samarbejde for webdesignbureauer med flere teammedlemmer. Og der er mere - du kan også invitere andre parter som klienter, tredjepartsdesignere, entreprenører osv. Deres roller og brugerfunktioner afhænger af de tilsvarende privilegier, du indstiller.

Webflow-samarbejde

Hvis du for eksempel har at gøre med klienter, kan du invitere dem til at gennemgå deres projekter i realtid - med stærkt begrænsede brugsrettigheder.

Når det er sagt, bemærkede jeg, at alle webstedsjusteringer afspejles overalt i realtid. Dette hjælper samarbejdende teammedlemmer med at undgå gentagelse af opgaver, der allerede er blevet håndteret.

Overordnede funktioner

  • XML sitemap
  • SEO metatitler, beskrivelser
  • Billed alt tags
  • Hjælpecenter
  • Community forum
  • Prioriteret støtte
  • E-mail support
  • Brugerdefineret domænenavn
  • Iscenesættelsessteder
  • Øjeblikkelig opdatering
  • Tilpassede URL-omdirigeringer
  • 24/7 webstedsovervågning
  • Hurtige belastningstider
  • Google-domæner køb
  • Zapier integration
  • MailChimp integration
  • Google Analytics-integration
  • SEO optimering
  • Former af hvid etiket
  • CMS hvid mærkning
  • Websteds adgangskodebeskyttelse
  • Projektorganisation
  • Hjemmeside-sikkerhedskopier
  • Brugerdefinerede fejlsider
  • Tilpasset favorit
  • Direkte klientfakturering
  • SNS-komponenter
  • Rig tekst
  • Lysbord
  • Baggrundsvideoer
  • HTML-indlejringskoder
  • Drop down menu
  • maps Google
  • Glider og karrusler
  • Fanenavigation
  • Tilpasbare webformularer
  • Webstedsredaktør
  • Formularanmeldelse
  • Åbn grafindhold
  • SEO-tagsskabelon
  • CMS-import via Zapier
  • RSS-feeds
  • CMS API
  • 3D animationer
  • CSS-stylingegenskaber
  • Webstedsskabeloner
  • Optimerede billeder
  • Web fontfamilier
  • Globale farveprøver
  • CSS3 fleksible kasser
  • Tilpasset kode tilføjelse
  • Eksportbar kode
  • CSS-filtre

Webflow-gennemgang: Prissætning

Webflows prisstruktur er tilsyneladende kompliceret for nogle brugere, mens andre roser dens altomfattende tilgang.

Hvis du er den type, der hader adskillige pakker på en enkelt platform på grund af den komplekse sammenligningsproces, der følger med den, så finder du muligvis Webflows prisplaner en smule besværlige. Men på den anden side - hvis du foretrækker flere prisindstillinger, der passer til forskellige brugerniveauer, vil du kunne lide, hvordan tingene er organiseret her.

Til at begynde med forsøger Webflow at støtte tre typer brugere-freelancere, solo-designere og designteam. Hver kategori har sit eget sæt af pakker med forskellige funktioner.

Webflow-pakker

Her er korte beskrivelser af hver plan:

For freelancere:

Gratis iscenesættelse- Helt gratis.

  • 10 formularindgivelser pr. Måned
  • 50 CMS-varer
  • 500 månedlige besøg
  • 2 statiske sider
  • Gratis webflow.io underdomæne

Grundlæggende hosting- $ 15 pr. Måned faktureres månedligt eller $ 12 per måned faktureres årligt.

  • 500 formularindgivelser pr. Måned
  • 25,000 månedlige besøg
  • 100 statiske sider
  • CDN
  • Gratis SSL-indstilling
  • Oprettelse af domæne

CMS Hosting- $ 20 pr. Måned faktureres månedligt eller $ 16 per måned faktureres årligt.

  • 3 indholdsredaktører
  • CMS API-adgang
  • 2,000 CMS-varer tilgængelige
  • 1,000 formularindgivelser pr. Måned
  • 100,000 månedlige besøg
  • 100 statiske sider
  • CDN
  • Gratis SSL-mulighed
  • Oprettelse af domæne

Forretnings-hosting- $ 45 pr. Måned faktureres månedligt eller $ 36 per måned faktureres årligt.

  • 10 indholdsredaktører
  • CMS API-adgang
  • 10,000 CMS-varer tilgængelige
  • Ubegrænset formularindsendelser
  • 1,000,000 månedlige besøg
  • 100 statiske sider
  • CDN
  • Gratis SSL-mulighed
  • Oprettelse af domæne

Webflow til freelancere

For designere:

Forret- Gratis.

  • Gratis iscenesættelse
  • Kundefakturering
  • Op til 2 samtidige projekter
  • Gratis byggeplads

Lite- $ 24 pr. Måned faktureres månedligt eller $ 16 per måned faktureres årligt.

  • Kodeeksport
  • Forbedret iscenesættelse
  • Kundefakturering
  • Op til 10 samtidige projekter

pro- $ 42 pr. Måned faktureres månedligt eller $ 35 per måned faktureres årligt.

  • Websteds adgangskodebeskyttelse
  • Hvid mærkning
  • Projekt ejendomsoverførsel
  • Kodeeksport
  • Forbedret iscenesættelse
  • Kundefakturering
  • Ubegrænsede samtidige projekter

Webflow til designere

Til kreative hold

Hold- $ 42 pr. Måned faktureres månedligt eller $ 35 per måned faktureres årligt.

  • Hold instrumentbræt
  • Websteds adgangskodebeskyttelse
  • Hvid mærkning
  • Kodeeksport
  • Forbedret iscenesættelse
  • Kundefakturering
  • Ubegrænsede samtidige projekter

Stort team- Brugerdefineret tilbud

  • Prissætning af bulkmedlemmedlem
  • Hold instrumentbræt
  • Websteds adgangskodebeskyttelse
  • Hvid mærkning
  • Kodeeksport
  • Forbedret iscenesættelse
  • Kundefakturering
  • Ubegrænsede samtidige projekter

Webflow for hold

Hvem skal overveje at bruge webflow?

Alt i alt bifalder vi Webflow til levering:

  • Gratis SSL-certifikat til overholdelse af sikkerhed.
  • Gratis integrerede indholdsleveringsnetværk for reducerede sideindlæsningstider.
  • Avanceret global webstedshosting i samarbejde med effektive systemer som Amazon CloudFront og sort Hurtigt- til hurtig sideindlæsningshastighed.
  • En alsidig integreret CMS til oprettelse af dynamisk indhold.
  • Et iscenesættelsesmiljø til afprøvning og gennemgang af forskellige webstedselementer.
  • Optimerede CSS- og JS-ledere til avanceret webstedsstyring plus holistisk kontrol af animationer og stilarter.
  • En fleksibel webbygningsproces, der starter med enten et tomt lærred eller foruddesignede skabeloner.
  • Et mobilvenligt webdesignværktøj, der producerer eksporterbar kode i realtid, når du bygger et websted.

Bortset fra de ulemper, jeg har stødt på undervejs, inkluderer:

  • Begrænsede funktioner til understøttelse af e-handelswebsteder
  • En designproces, der i høj grad favoriserer programmerere
  • Et begrænset antal webstedsskabeloner
  • En stejl indlæringskurve for begyndere

Lad os pakke alt sammen. Jeg ved, at du er enig i, at Webflow er et avanceret webbygningssystem oprettet til udviklere, designere og agenturer, der søger øget alsidighed og kontrol.

Hvad tænker du?

Bogdan Rancea

Bogdan er et grundlæggende medlem af Inspired Mag og har akkumuleret næsten 6 års erfaring i denne periode. På fritiden kan han lide at studere klassisk musik og udforske billedkunst. Han er også ganske besat af fixies. Han ejer allerede 5.