webflow

The biggest problem with site builders is the code they generate is usually garbage. As I’ve recently discovered, this isn’t the case with

網(wǎng)站建設(shè)者最大的問題是他們生成的代碼通常是垃圾。 正如我最近發(fā)現(xiàn)的，情況并非如此

Webflow, and although it's marketed as a development tool for designers that can’t code, I (a developer that can code) have started using it on my client's sites, and even for my own Webflow ，盡管它是為無法編寫代碼的設(shè)計人員開發(fā)的一種開發(fā)工具，但我(可以編寫代碼的開發(fā)人員)已經(jīng)開始在我的客戶的站點，甚至我自己的agency site.代理站點上使用它。

那么，為什么大多數(shù)網(wǎng)站建設(shè)者都那么爛？ (So why do most site builders suck?)

It’s a result of the interface being very different from the way that webpages actually work.

這是界面與網(wǎng)頁實際工作方式大不相同的結(jié)果。

An example is Wix, where you can just drag an element around to position it anywhere on the page. Anyone who codes knows this means it’s using absolute positioning everywhere, which is hard to adjust on different sized devices, and if you adjust on every size, you are producing a huge amount of garbage CSS.

Wix是一個示例，您可以在其中拖動元素以將其放置在頁面上的任何位置。 任何編碼的人都知道，這意味著它在所有地方都使用絕對定位，這很難在不同大小的設(shè)備上進行調(diào)整，并且如果在每種大小上進行調(diào)整，都會產(chǎn)生大量的垃圾CSS。

Other site builders just abstract far too much away from the realities of HTML and CSS. They try to make things so easy, that you have no idea what is actually going to be produced.

其他網(wǎng)站建設(shè)者只是抽象得與HTML和CSS的現(xiàn)實相距太遠。 他們試圖使事情變得如此簡單，以至于您不知道實際要生產(chǎn)什么。

You also have no visibility of which class names are going to be created. And when you create and then delete something, you don’t know if there is something left over — unused CSS classes or empty HTML tags.

您也看不到要創(chuàng)建哪些類名。 而且，當(dāng)您創(chuàng)建然后刪除某些內(nèi)容時，您將不知道是否還有剩余的內(nèi)容-未使用CSS類或空HTML標(biāo)記。

Webflow如何解決此問題 (How Webflow fixes this)

Webflow keeps its interface very close to how the web actually works. There is no dragging to position like in Wix. You need to understand and use the box model, flexbox, CSS grids and other front-end development concepts.

Webflow使它的界面非常接近于Web實際的工作方式。 不會像Wix一樣拖到位置。 您需要了解和使用盒子模型，flexbox，CSS網(wǎng)格和其他前端開發(fā)概念。

In fact, it’s almost like writing code, but by clicking buttons and moving sliders instead of writing out the lines.

實際上，這幾乎就像編寫代碼一樣，但是通過單擊按鈕和移動滑塊而不是寫出行。

You can give elements names with actual meanings (AKA semantic classes). This one is ‘banner’, this one is ‘newsletter-form’. Unlike other builders where you constantly deal with lots of randomly named divs.

您可以給元素名稱指定實際含義(AKA語義類)。 這是“橫幅”，這是“通訊形式”。 與其他構(gòu)建器不同，在該構(gòu)建器中，您經(jīng)常處理大量隨機命名的div。

This means you have a lot of control over the code that is eventually generated and you can choose the best strategy to achieve a certain layout.

這意味著您對最終生成的代碼有很多控制權(quán)，并且可以選擇最佳策略來實現(xiàn)特定的布局。

對于非開發(fā)人員來說這可能很難 (This might be difficult for non-developers)

This level of control and closeness to actual code makes Webflow more difficult to use for the average person, than other builders like Wix.

這種控制水平和對實際代碼的接近程度使得Webflow對于普通人來說比Wix等其他構(gòu)建器更難使用。

If you build a website for a client in Webflow, they will mostly just use the Editor panel — which is a simple interface for adding content to the Webflow CMS.

如果您在Webflow中為客戶端構(gòu)建網(wǎng)站，則它們通常只會使用“編輯器”面板-這是用于向Webflow CMS添加內(nèi)容的簡單界面。

However if they entered the designer panel, they will most likely be overwhelmed and mess something up, unless they are very tech-savvy.

但是，如果他們進入設(shè)計師面板，除非他們非常精通技術(shù)，否則他們很可能會不知所措并弄亂了東西。

A professional designer will fare better, but to get the most out of Webflow and to be able to build a clean and bug-free site, they must understand at least the basics of HTML and CSS.

專業(yè)的設(shè)計師會做得更好，但是要充分利用Webflow并構(gòu)建一個干凈且無錯誤的網(wǎng)站，他們必須至少了解HTML和CSS的基礎(chǔ)知識。

Things like the box model, types of positioning, maybe a basic understanding of flexbox, as well as theoretical knowledge like why it’s best to build mobile-first, and how to keep a site loading quickly.

諸如盒子模型，定位類型，對flexbox的基本了解以及諸如為什么最好以移動優(yōu)先構(gòu)建，如何保持網(wǎng)站快速加載之類的理論知識等。

非常適合團隊和小型機構(gòu) (Great for teams and small agencies)

I run a web design & development agency together with my girlfriend Kristina — she’s a UX/UI designer.

我與女友克里斯蒂娜(Kristina)共同經(jīng)營一家網(wǎng)頁設(shè)計和開發(fā)代理公司-她是UX / UI設(shè)計師 。

We have a small portfolio site for the company, and previously, it’s always been a pain to make updates. We’ve always used a static site generator (first Jekyll then Hugo).

我們?yōu)楣咎峁┝艘粋€小型投資組合站點 ，以前，進行更新始終是一件痛苦的事情。 我們一直使用靜態(tài)站點生成器(首先是Jekyll，然后是Hugo)。

Whenever Kristina wanted to freshen up the design, she would update her mockup in Figma, and then it’s up to me to write the code. Meanwhile I’m often swamped with client work and it would be several weeks until I have time to work on our site.

每當(dāng)Kristina想要更新設(shè)計時，她都會在Figma中更新其模型，然后由我來編寫代碼。 同時，我經(jīng)常被客戶的工作所淹沒，要等上幾個星期才能有時間在我們的網(wǎng)站上工作。

We’ve recently rebuilt our portfolio site in Webflow, and Kristina was able to build almost all of it herself. This is pretty crazy if you think about it. Building highly performant websites and totally custom website was previously a skill that takes years to learn.

我們最近在Webflow中重建了我們的投資組合站點，而Kristina能夠自己構(gòu)建幾乎所有站點。 如果您考慮一下，這真是太瘋狂了。 建立高性能網(wǎng)站和完全自定義的網(wǎng)站以前是一項需要數(shù)年學(xué)習(xí)的技能。

In future she will be able to make updates to the site while I can sit back and relax…ahem… I mean… continue working hard on client projects!

將來她可以在網(wǎng)站上進行更新，而我可以坐下來放松一下……哎呀……我的意思是……繼續(xù)努力開發(fā)客戶項目！

The most important win for us is that we will be able to create new landing pages for our services very quickly. I’ve actually seen large companies using Webflow as a ‘landing page machine’, allowing more customizability than leadpages or similar.

對我們而言，最重要的勝利是我們將能夠很快為我們的服務(wù)創(chuàng)建新的登錄頁面。 我實際上已經(jīng)看到大型公司將Webflow用作“著陸頁機器”，它提供的可定制性比引導(dǎo)頁面或類似頁面更大。

We’ve also had ideas for certain blog posts — tutorials and guides — that would need unique layouts. And while this would be annoying for me to rewrite in code, it becomes much easier in Webflow.

對于某些需要獨特布局的博客帖子(教程和指南)，我們也有一些想法。 盡管這對我來說用代碼重寫很煩人，但在Webflow中變得更加容易。

對于設(shè)計師而言，這是一個不錯的工具，在開發(fā)人員手中是一種武器。 (A nice tool for a designer, a weapon in the hands of a developer.)

Knowing how it all works underneath means developers can be power users of Webflow. We can take it’s capabilities to the absolute limit.

知道其所有工作原理意味著開發(fā)人員可以成為Webflow的高級用戶。 我們可以將其功能發(fā)揮到極致。

I know it’s still not as fast or as flexible as writing your own code. But there are situations where you need a CMS or a simple page builder that produces acceptable code.

我知道它仍然不如編寫自己的代碼快或靈活。 但是在某些情況下，您需要生成可接受代碼的CMS或簡單頁面構(gòu)建器。

You might have a client that wants to make design changes later on, or you might be handing off to a designer, or it might just be a site that needs plenty of small changes regularly.

您可能有一個客戶想要稍后進行設(shè)計更改，或者您可能要移交給設(shè)計師，或者它可能只是一個需要定期進行大量小更改的站點。

In these situations, Webflow is my go-to tool right now.

在這些情況下，Webflow現(xiàn)在是我的首選工具。

What other options are there? I’d love to hear your thoughts. Please leave a comment below!

還有什么其他選擇？ 我很想聽聽您的想法。 請在下面發(fā)表評論！

翻譯自: https://uxdesign.cc/is-webflow-good-enough-for-developers-cb56cbb227d3

webflow

總結(jié)

以上是生活随笔為你收集整理的webflow_Webflow是否适合开发人员？ 我的经验的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。