Pagsulat ng Mas Mahusay na Web Code

Narito ang isang bagay na nahanap ko na medyo nakakatawa. Maraming mga web designer tulad ng pagiging simple na kasama ng mga tagabuo ng web. Gayunpaman, kawili-wili, ang karamihan ng mga tagabuo ng web ay nilikha upang maalis ang papel na ginagampanan ng mga web designer at developer sa pamamagitan ng pag-automate ng pinagbabatayan na code.

Nakakatawa di ba

Ngunit muli, may mga tagabuo ng web na tila kabaligtaran. Sa halip na bawasan ang papel na ginagampanan ng mga tagadisenyo at developer, kasama nila ang mga tool na partikular na na-optimize para sa mga nasabing koponan. Ang kanilang pangunahing layunin ay upang mapadali ang mga ahensya ng disenyo na may mga advanced na tool.

Paano, nagtanong ka?

Well, Webflow ay isa sa mga kilalang halimbawa. At ang papel nito sa buong kapaligiran sa disenyo ng web ay isang bagay na titingnan namin sa ilang sandali. Ito Webflow Tinatalakay ng pagsusuri ang lahat ng mga kritikal na tampok na kailangan mong malaman, ang mga kaukulang kahinaan, kasama ang gastos sa paggamit ng platform para sa disenyo.

Ngunit una, kung ano talaga Webflow?

Webflow Balik-aral: Pangkalahatang-ideya

Tulad ng malamang na naisip mo ngayon, Webflow ay hindi iyong tipikal na tagabuo ng web.

Inilunsad noong 2013, ang tool na ito ay nagbebenta ng sarili bilang isang solusyon sa disenyo ng web na pinagsasama ang mga tool sa disenyo na walang code na propesyonal na may isang malakas na visual CMS, kasama ang kabaitan ng gumagamit ng mga karaniwang tagabuo. Kaya, isipin ito bilang isang pagsasanib sa pagitan ng isang solusyon sa pagbuo ng web tulad ng Wix at isang CMS engine na tulad WordPress.

Webflow

Ngunit, huwag kang magkamali. Webflow ay hindi nakikipagkumpitensya sa mga gusto ng Wix at Nanghihina. Nag-aalok ito ng iba't ibang hanay ng mga tampok na nagta-target ng iba't ibang demograpiko ng gumagamit.

Sa kabuuan, ang pinaka-kamangha-manghang bagay dito Webflowmatalino na diskarte sa buong bagay sa pag-coding. Ito ay isang platform na walang code na nangyayari upang suportahan ang pag-edit ng code para sa mas mataas na kakayahang umangkop.

Nakakalito Oo alam ko. Iyon ang dahilan kung bakit naglaan ako ng oras upang masidhing masuri ang lahat Webflow ay may mag-alok- mula sa disenyo ng website hanggang sa sistema ng pamamahala ng nilalaman.

At narito ang mga detalye ...

Webflow Balik-aral: Mga Tampok

Website Design

Webflow ay isang pares ng mga bagay, walang alinlangan. Ngunit ang tool na walang disenyo ng web na walang code ay palaging pangunahing nag-aalok dito.

Sa gayon, magiging maliwanag kung nalito mo ito sa window ng pag-edit ng Adobe Photoshop bago ka magsimula. Ang dalawang ito ay maaaring magmukhang kambal na magkakapatid na malayo, ngunit naging iba talaga habang papalapit ka. Upang maging mas tiyak, mapapansin mo iyon Webflow ay isang automation engine na higit sa lahat ay nagpapatakbo sa CSS at HTML.

Webflow ilustrador

Dito, maaari mong komportable na ipakilala ang mga elemento ng site pagkatapos ay ilipat ang mga ito nang naaayon nang hindi gumagamit ng code. Ang bit ng programa ay pinangangasiwaan Webflownapapailalim na balangkas, na sistematikong lumilikha at nag-e-edit ng code ng iyong site sa pagpapatuloy mo sa proseso ng disenyo.

Kung sinubukan mo ang iba pang mga taga-disenyo ng web na walang code, alam mo na ang pag-aalis ng kaunting pagprograma ay may halagang limitadong kakayahang umangkop. Kapansin-pansin, WebflowAng tool sa disenyo ay hindi sumusunod sa kalakaran na ito. Kaya, tatapat ako dito at aminin na tiyak na ito ay isa sa pinaka-advanced na maraming nalalaman na tagabuo ng website sa merkado.

Ngayon, harapin natin ito. Ang advanced at pagiging simple ay dalawang bagay na alam na tulad ng sunog at yelo pagdating sa mga tool sa pamamahala ng website.

At totoong mabubuo, Webflow ay hindi isa sa pinakasimpleng tagabuo na malalaman mo doon. Bagaman ang interface nito ay labis na malakas, ito ay tila kumplikado at maaaring tumagal ng ilang pagsisikap upang malaman ang mga lubid nang naaayon.

Para sa starters, Webflow ay hindi lumilikha ng ilusyon ng isang ganap na walang code na proseso ng disenyo. Kaya, huwag asahan na tumalon kaagad at magsimulang gumuhit ng mga hugis sa canvas. Ang nasabing diskarte ay malaki ang maglilimita sa iyong kakayahan sa pagpapasadya.

Dahil dito, ang system dito ay matalino na nag-embeds ng ilang mga aspeto ng coding habang nagtatayo ka ng isang website. Kung balak mong ipakilala ang a square halimbawa, ang mid-page, magdagdag ka ng bagodiv> elemento, pagkatapos ay i-edit ang ilalim-kaliwa at kanang-itaas na mga puntos bilang zero kasama ang nakapirming pagpoposisyon.

Ano ang ibig sabihin nito?

Habang maaari kang magpatuloy at pagkilos Webflow nang walang anumang kaalaman sa pagprograma, kinakailangan ng isang pangunahing pag-unawa sa mga katangian ng HTML at CSS upang komprehensibong mapakinabangan sa sobrang lakas nito.

Gayunpaman, kung gugustuhin mo kung hindi man, pumili lamang laban sa "Hindi ako sumulat ng code ” pagpipilian sa pagrehistro mo. Susunod na palawakin ng system ang kakayahang mag-automate nito upang mahawakan ang isang malaking bahagi ng disenyo para sa iyo.

Sinabi na, maaari kang magsimula sa isang ganap na blangko na canvas. Iyon ang diskarte na gusto ko dahil nakukuha kong ipasadya ang lahat mula sa base.

Isang salita ng pag-iingat bagaman. Iwanan ang pagpipiliang ito sa mga tagadisenyo na may karanasan sa CSS at HTML. Kung hindi man, ipagsapalaran mo ang paghahalo ng mga bagay o makaalis sa kung saan sa proseso.

Ang pinakamahusay na diskarte para sa mga novice sa pag-cod ay sinasamantala Webflowpre-designed na mga template. Ito ay nag-aalok ang system ay nag-aalok ng higit sa 200 kaakit-akit na mga template, 30 na kung saan ay ganap na libre. Sa mga kabilang bayad, babayaran ka sa pagitan ng $ 24 at $ 79.

Matapos ang isang masusing pagsusuri ng iba't ibang mga tema, napansin ko na kapansin-pansin ang mga ito- na may iba't ibang mga istraktura at tampok. Pagkatapos ay pinapayagan ka ng kasunod na proseso ng pag-edit na baguhin ang mga background, kulay, layer, opacity, pag-ikot, epekto, posisyon, laki, atbp.

hosting

Hindi ito sinasabi. Yan Webflow, tulad ng karamihan ng mga tagabuo ng web ngayon, nag-aalok ng pagho-host ng site kasama ang mga pasadyang domain kasama ang mga package ng disenyo nito.

Webflow sa pagho-host

Ngunit, huwag asahan ang karaniwang diskarte ng nakabahaging plano dito. Webflow sa halip ay pipiliin upang mapanatili ang mga site sa bahay, sa loob ng kung ano ang inilalarawan nito bilang isang "walang katapusang nasusukat na fleet ng server".

Ano ang kinakailangan nito?

Well, Webflow nangyayari sa pagmamay-ari at kontrolin ang higit sa 100 mga datacenter sa buong mundo. Pagsamahin iyon sa mga CDN na pinatakbo ng Amazon CloudFront dagdagan Mabilis- at ang resulta ay isang solidong sistema para sa pagho-host ng lahat ng uri ng mga website.

Bukod sa paghawak ng anumang laki ng trapiko, Webflow ginagarantiyahan ang pinakamainam na pagganap sa mga milliseconds na haba ng paglo-load ng pahina kasama ang 99.99% uptime ng website. Ang balangkas na pinapatakbo ng AWS ay partikular na kritikal sa pagbibigay ng isang matatag na pundasyon para sa pagsuporta sa medyo malalaking pagkarga ng trapiko mula sa mga site ng enterprise.

At dahil mahalaga ang seguridad sa web, WebflowAng imprastraktura sa pagho-host ay sumusunod sa HTTP / 2 at ang mga gumagamit ay nakakakuha ng nauugnay na mga sertipiko ng SSL para sa kanilang mga site.

System ng Pamamahala ng Nilalaman

Dito nakakatugon ang nilalaman sa disenyo ng visual. WebflowMahalaga na pinapayagan ka ng CMS na ipasok at pamahalaan ang nilalaman ng iyong site. Sa madaling salita, maaari kang magdagdag at mag-edit ng anumang teksto o media sa tumpak na pahina na iyong ginagawa.

At kung namamahala ka ng isang malawak na proyekto sa web na may mga kumplikadong istraktura, partikular mong pahahalagahan ang kakayahan ng system na suportahan ang mga manu-manong pagsasaayos ng mga aspeto ng nilalaman- kabilang ang mga uri ng nilalaman, mga miyembro ng koponan, mga proyekto, atbp. Kumpleto sa napapasadyang mga patlang.

Kaya, ang lahat ng ito ay pinadali ng Mga Koleksyon ng CMS- isang tampok na maaaring ma-access mula mismo sa pangunahing window ng editor. Sa lalong madaling makabuo ka ng isang bagong koleksyon, maaari kang magpatuloy na lampas sa uri ng nilalaman upang tukuyin ang mga patlang at ipakilala ang mga item. Kasunod na pinagtibay ang mga ito bilang magkakaibang mga web page o listahan na isinama sa mga pahinang nilikha mo.

Webflow CMS

Nakakalito Ok, isaalang-alang ang halimbawang ito- upang maitaguyod ang isang pahina na ipinapakita ang lakas ng trabaho ng iyong samahan, maaari mong ipakilala ang isang koleksyon na "mga miyembro ng koponan", kumpleto sa mga item tulad ng mga social link, paglalarawan, pangalan, larawan, at pangalan ng mga empleyado.

Ngayon, karaniwang sinasaklaw nito ang CMS back-end. Ngunit, alam mo kung ano? Hindi lamang yan. Webflow sige na bigyan ang WordPress ng mahusay na pagpapatakbo para sa kanilang pera sa pamamagitan ng Webflow Editor. Dito mo pinapalaki ang isang nai-publish na pahina na may bagong nilalaman batay sa paunang napiling uri.

Sa madaling salita, nakakakuha ka ng isang komprehensibong website na sumusuporta sa mga likas na nilalaman tulad ng mga portfolio, artikulo, at mga post sa blog- nang hindi nag-i-install ng mga karagdagang plugin.

Pakikipagtulungan

Aminin mo na Ang mga malalaking proyekto sa disenyo ng web ay kapanapanabik. Ngunit, maaari silang maging mas mahirap, lalo na kung nabigo kang streamline ang lahat ng mga partido na kasangkot nang naaayon.

Webflow tila naisip ito at gumawa ng isang mahusay na pagtatangka sa pagpapadali ng pakikipagtulungan para sa mga ahensya ng disenyo ng web na may maraming mga kasapi ng koponan. At may higit pa- maaari ka ring mag-imbita ng iba pang mga partido tulad ng mga kliyente, taga-disenyo ng third-party, kontratista, atbp. Ang kanilang mga tungkulin at kakayahan sa gumagamit ay nakasalalay sa kaukulang mga pribilehiyong itinakda mo.

Webflow pakikipagtulungan

Kung nakikipag-usap ka sa mga kliyente, halimbawa, maaari mo silang anyayahan upang suriin ang kanilang mga proyekto nang real-time- na may mahigpit na pinaghihigpitan na mga pribilehiyo sa paggamit.

Sinabi nito, napansin ko na ang lahat ng mga pagsasaayos ng site ay makikita sa buong board nang real-time. Nakatutulong ito sa pakikipagtulungan ng mga miyembro ng koponan na maiwasan ang paulit-ulit na mga gawain na napangasiwaan.

Pangkalahatang Tampok

  • XML Sitemap
  • Mga pamagat ng SEO meta, paglalarawan
  • Mga alt tag ng imahe
  • Sentro ng Tulong
  • Community forum
  • Pangunahin na suporta
  • Suporta sa email
  • Pasadyang pangalan ng domain
  • Mga site ng dula
  • Agad na mga pag-update
  • Mga pag-redirect ng pasadyang URL
  • 24/7 na pagsubaybay sa website
  • Mabilis na oras ng pag-load
  • Pagbili ng Google Domains
  • Pagsasama ng Zapier
  • Pagsasama ng MailChimp
  • Pagsasama ng Google Analytics
  • SEO optimization
  • Mga form ng puting label
  • Puting label ng CMS
  • Proteksyon ng password sa site
  • Organisasyon ng proyekto
  • Mga backup ng website
  • Custom na mga pahina ng error
  • Pasadyang favicon
  • Direktang pagsingil ng kliyente
  • Mga bahagi ng SNS
  • Mayamang teksto
  • Lightbox
  • Mga video sa background
  • Mga HTML embed code
  • Dropdown menu
  • Mapa ng Google
  • Mga slider at carousel
  • Pag-navigate sa tab
  • Nako-customize na mga form sa web
  • Editor ng website
  • Pagsusuri sa mga pagsusumite ng form
  • Buksan ang nilalaman ng grap
  • Template ng mga SEO tag
  • Pag-import ng CMS sa pamamagitan ng Zapier
  • RSS Feed
  • CMS API
  • Mga 3D na animasyon
  • Mga katangian ng istilo ng CSS
  • Mga template ng website
  • Na-optimize na mga imahe
  • Mga pamilya ng font ng web
  • Mga Pandaigdigang Swatch ng Kulay
  • Mga nababaluktot na kahon ng CSS3
  • Pagdagdag ng pasadyang code
  • Na-export na code
  • Mga filter ng CSS

Webflow Balik-aral: Pagpepresyo

WebflowAng istraktura ng pagpepresyo ay mukhang kumplikado para sa ilang mga gumagamit, habang ang iba ay pinupuri ang diskarte na kasama ang lahat.

Kung ikaw ang uri na kinamumuhian ang maraming mga pakete sa isang solong platform dahil sa kumplikadong proseso ng paghahambing na kasama nito, maaari mong makita ang WebflowAng mga plano sa pagpepresyo ay medyo masalimuot. Ngunit, sa kabilang banda- kung mas gusto mo ang maraming mga pagpipilian sa pagpepresyo na naaangkop sa iba't ibang mga antas ng gumagamit, gugustuhin mo kung paano naayos ang mga bagay dito.

Ngayon, upang magsimula sa, Webflow pagtatangka upang suportahan ang tatlong uri ng mga gumagamit- freelancer, solo designer, at mga koponan ng disenyo. Ang bawat kategorya ay may sariling hanay ng mga pakete na may iba't ibang mga tampok.

Webflow pakete

Narito ang mga maikling paglalarawan ng bawat plano:

Para sa Mga Freelancer:

Libreng Pagtatanghal- Ganap na libre.

  • 10 form na pagsusumite bawat buwan
  • 50 mga item ng CMS
  • 500 buwanang pagbisita
  • 2 static na mga pahina
  • Libre webflow.io subdomain

Pangunahing Pag-host- $ 15 bawat buwan na sisingilin buwan-buwan o $ 12 bawat buwan na sisingilin taun-taon.

  • 500 form na pagsusumite bawat buwan
  • 25,000 buwanang pagbisita
  • 100 static na mga pahina
  • CDN
  • Libreng pagpipilian ng SSL
  • Paglikha ng domain

CMS Hosting- $ 20 bawat buwan na sisingilin buwan-buwan o $ 16 bawat buwan na sisingilin taun-taon.

  • 3 mga editor ng nilalaman
  • Pag-access ng CMS API
  • Magagamit ang mga item na 2,000 CMS
  • 1,000 form na pagsusumite bawat buwan
  • 100,000 buwanang pagbisita
  • 100 static na mga pahina
  • CDN
  • Libreng Pagpipilian sa SSL
  • Paglikha ng domain

Business Hosting- $ 45 bawat buwan na sisingilin buwan-buwan o $ 36 bawat buwan na sisingilin taun-taon.

  • 10 mga editor ng nilalaman
  • Pag-access ng CMS API
  • Magagamit ang mga item na 10,000 CMS
  • Mga pagsusumite ng walang limitasyong form
  • 1,000,000 buwanang pagbisita
  • 100 static na mga pahina
  • CDN
  • Libreng Pagpipilian sa SSL
  • Paglikha ng domain

Webflow para sa freelancers

Para sa Mga Disenyo:

Starter- Libre.

  • Libreng pagtatanghal ng dula
  • Pagsingil ng kliyente
  • Hanggang sa 2 kasabay na mga proyekto
  • Libreng pagbuo ng site

Lite- $ 24 bawat buwan na sisingilin buwan-buwan o $ 16 bawat buwan na sisingilin taun-taon.

  • Pag-export ng code
  • Pinahusay na pagtatanghal ng dula
  • Pagsingil ng kliyente
  • Hanggang sa 10 kasabay na mga proyekto

Per- $ 42 bawat buwan na sisingilin buwan-buwan o $ 35 bawat buwan na sisingilin taun-taon.

  • Proteksyon ng password sa site
  • White label
  • Paglipat ng pagmamay-ari ng proyekto
  • Pag-export ng code
  • Pinahusay na pagtatanghal ng dula
  • Pagsingil ng kliyente
  • Walang limitasyong mga kasabay na proyekto

Webflow para sa mga tagadisenyo

Para sa Mga Creative Team

Team- $ 42 bawat buwan na sisingilin buwan-buwan o $ 35 bawat buwan na sisingilin taun-taon.

  • Dashboard ng koponan
  • Proteksyon ng password sa site
  • White label
  • Pag-export ng code
  • Pinahusay na pagtatanghal ng dula
  • Pagsingil ng kliyente
  • Walang limitasyong mga kasabay na proyekto

Malaking Koponan- Pasadyang quote.

  • Maramihang pagpepresyo ng miyembro ng koponan
  • Dashboard ng koponan
  • Proteksyon ng password sa site
  • White label
  • Pag-export ng code
  • Pinahusay na pagtatanghal ng dula
  • Pagsingil ng kliyente
  • Walang limitasyong mga kasabay na proyekto

Webflow para sa mga koponan

Sino ang Dapat Isaalang-alang ang Paggamit Webflow?

Lahat ng mga bagay na isinasaalang-alang, pumalakpak kami Webflow para sa pagbibigay:

  • Libreng sertipiko ng SSL para sa pagsunod sa seguridad.
  • Libreng mga integrated network ng paghahatid ng nilalaman para sa nabawasang mga oras ng paglo-load ng pahina.
  • Advanced na pandaigdigang pagho-host ng website sa pakikipagtulungan sa mga mabisang system tulad Amazon CloudFront at Mabilis- para sa bilis ng paglo-load ng pahina.
  • Isang maraming nalalaman na isinamang CMS para sa paglikha ng pabuong nilalaman.
  • Isang nakapaloob na kapaligiran para sa pagsubok at pagsusuri ng iba't ibang mga elemento ng website.
  • Na-optimize ang mga tagapamahala ng CSS at JS para sa advanced na pamamahala ng site kasama ang holistic control ng mga animasyon at istilo.
  • Ang isang kakayahang umangkop na proseso ng pagbuo ng web na nagsisimula sa alinman sa isang blangko na canvas o paunang dinisenyo na mga template.
  • Isang tool sa disenyo ng web na madaling gamitin sa mobile na gumagawa ng nai-export na code sa real-time habang nagtatayo ka ng isang site.

Sa tabi na iyon, ang mga sagabal na naranasan ko sa daan ay kinabibilangan ng:

  • Limitadong mga tampok para sa pagsuporta sa mga site ng ecommerce
  • Isang proseso ng disenyo na mas pinapaboran ang mga programmer
  • Isang limitadong bilang ng mga template ng website
  • Isang matarik na curve sa pag-aaral para sa mga nagsisimula

Ngayon, i-bundle natin ang lahat nang magkasama. Taya ko papayag ka diyan Webflow ay isang advanced na web building system na nilikha para sa mga developer, taga-disenyo, at ahensya na naghahanap ng mas mataas na kagalingan at kontrol.

Ano ang iyong mga saloobin?

Bogdan Rancea

Si Bogdan ay isang founding member ng Inspired Mag, na naipon ang halos 6 na taong karanasan sa panahong ito. Sa kanyang bakanteng oras gusto niyang mag-aral ng klasikal na musika at galugarin ang visual arts. Medyo nahuhumaling rin siya sa mga fixies. Nagmamay-ari na siya ng 5.