不吸吮的网站建设者

我从不追求真棒 (I Never Pursue My Awesome Ideas)

I'm constantly struck with ideas for new web projects. Unfortunately, I rarely act on them because I have too little time and they're too much of a hassle to see through.

我一直对新的Web项目的想法感到惊讶。 不幸的是，我很少对它们采取行动，因为我的时间太少了，他们很难看清。

At least ten times over the last two years, I started building out a site in WordPress that I then grew tired of and abandoned. Why? When I already do web dev as my day job, it's mind-numbing to also spend my downtime further modifying templates, finding and integrating plugins, and setting up hosting.

在过去两年中，至少有十次，我开始在WordPress中建立一个网站，后来我对此感到厌倦并被抛弃。 为什么？ 当我已经将Web开发作为日常工作时，很容易想到还花我的停机时间来进一步修改模板，查找和集成插件以及设置主机。

This is ultimately my own fault. I'm naturally dismissive of new tools. But, in reality, we developers should be constantly hunting for new ways to increase our productivity. When ideas arise, we can't be slowed down by cumbersome workflows. We can't let ourselves get stuck in our slow ways.

最终这是我自己的错。 我自然不喜欢新工具。 但是，实际上，我们的开发人员应该不断寻找新方法来提高生产力。 当想法出现时，繁琐的工作流程不会让我们放慢脚步。 我们不能让自己陷入缓慢的困境。

Fortunately, there are simplified alternatives to WordPress, including Squarespace, but they're too restricted in the design and functionality that you can apply on top of the base templates provided to you. Squarespace, and most of its alternatives, are effective tools for non-technical entrepreneurs looking to build out simple pages, but they're not for the technically inclined who want to dive deeper. They're not for professional developers like myself who want the best looking site possible that feels entirely custom.

幸运的是，有一些简化的WordPress替代品，包括Squarespace ，但是它们在设计和功能上都受到限制，您不能在提供给您的基本模板上应用它们。 对于希望建立简单页面的非技术型企业家来说，Squarespace及其大多数替代方案是有效的工具，但不适用于想要深入研究的技术倾向者。 它们不适合像我这样的专业开发人员，他们想要的是外观最好，完全自定义的网站。

So what does this leave us with? You might think, "Bootstrap and Foundation!" Indeed, these front-end templating systems save us time on development, but they require a level of hands-on customization that doesn't accommodate quick design overhauls or painless plugin integration. What's more, they're unsuitable for designers who aren't fully comfortable coding. They're great, but they're far from perfect.

那么这给我们留下了什么呢？ 您可能会想，“引导和基础！” 的确，这些前端模板系统为我们节省了开发时间，但是它们需要一定程度的动手定制，无法适应快速的设计检修或轻松的插件集成。 更重要的是，它们不适合那些不太熟悉编码的设计师。 它们很棒，但远非完美。

As of January 2015, I've finally found a real solution. AND IT'S AWESOME.

截至2015年1月，我终于找到了一个真正的解决方案。 而且很棒。

解决方案 (The Solution)

This article introduces my new solution to developer fatigue: professional website builders. No, not Squarespace, Dreamweaver, or Wix. I'm talking about the lesser-known professional sitebuilders. Here they are: Webflow, Froont, and Weebly.

本文介绍了我针对开发人员疲劳的新解决方案：专业的网站构建者。 不，不是Squarespace，Dreamweaver或Wix。 我说的是鲜为人知的专业网站建设者。 它们是： Webflow ， Froont和Weebly 。

This new crop of sitebuilders allow us to build out gorgeous, production-ready sites in under an hour — without sacrificing the pixel-perfect control we expect from hand coding or from designing in Photoshop. These tools also let you build a site from scratch so that you can exactly meet your (or your clients') specifications. (If you want to work off a pre-existing template, you still can.)

这些新的站点构建器使我们能够在一个小时内构建出华丽的，可立即投入生产的站点，而无需牺牲我们希望通过手工编码或在Photoshop中进行设计的像素完美控制。 这些工具还使您可以从头开始构建站点，以便完全满足您(或客户)的规范。 (如果您要处理预先存在的模板，则仍然可以。)

The sites I design using these tools consistently look better than the sites I code by hand. And I'm a good designer. Why? Because these tools let me iterate so quickly that I can painlessly test new styling variations within seconds, and that ultimately lets me get to the best-looking variation of each of my designs very quickly. They make me feel like everything I design is the best it can be.

我使用这些工具设计的网站始终看起来比我手工编写的网站更好。 而且我是一个好的设计师。 为什么？ 因为这些工具使我能够如此快速地进行迭代，所以我可以在几秒钟内轻松地测试新的样式变化，最终使我可以很快地获得每个设计的最佳外观变化。 它们让我觉得我设计的一切都是最好的。

拖放工具不再吸附了吗？ (Drag and Drop Tools Don't Suck Anymore?)

The first thing to understand about these new tools is that they don't exclusively cater toward designers who are too lazy to learn how to code. Webflow, as one example, generates exceptionally clean W3C compliant HTML5 and CSS3 code, making sites cross-browser compatible and responsive out of the box. The code is based off of Bootstrap, and it's easier to work with than the code I usually write by hand! You can consider Webflow a visual Bootstrap designer.

了解这些新工具的第一件事是，它们并非专门针对那些懒得学习如何编码的设计师。 作为一个示例，Webflow生成格外干净的W3C兼容HTML5和CSS3代码，从而使网站可以跨浏览器兼容并且开箱即用。 该代码基于Bootstrap，并且比我通常手工编写的代码更容易使用！ 您可以将Webflow视为可视化的Bootstrap设计器。

Further, both Webflow and Froont don't lock us into their platforms; we can export sites out of their environments to host them elsewhere — perhaps to further develop them within our IDE's. Basically, these tools function as time-saving starting points. They do all the heavy-lifting.

此外，Webflow和Froont都不会将我们锁定在他们的平台中。 我们可以将站点导出到其环境之外，以在其他地方托管它们-也许可以在我们的IDE中进一步开发它们。 基本上，这些工具是节省时间的起点。 他们全力以赴。

They're the perfect tools for professional developers under tight deadlines with clients. And, for our selfish purposes, they're equally perfect for helping us bang out all our side project ideas.

对于与客户紧迫的期限，它们是专业开发人员的理想工具。 而且， 出于我们自私的目的，它们同样非常适合帮助我们突破所有附带项目的想法 。

A learning curve exists with these tools, but it's minimal and ultimately rewarding. You're looking at spending about an hour to get a solid grasp on any one of these tools.

这些工具存在学习曲线，但是它很小，最终会有所收获。 您正在花费大约一个小时来掌握这些工具中的任何一个。

他们所做的不只是节省您的时间 (They're Doing More than Just Saving You Time)

An exciting benefit of the competition in the sitebuilder market is that they're constantly setting new standards for web development workflows: instant one-click hosting on AWS, automated visual backups for quick iterations, access to web fonts from Typekit and Google, automatic responsiveness on mobile devices, and a lot more.

Sitebuilder市场竞争的令人兴奋的好处是，他们不断为Web开发工作流设定新的标准：在AWS上进行即时一键托管，用于快速迭代的自动可视化备份，从Typekit和Google访问Web字体，自动响应在移动设备上，以及更多。

Another benefit of the way the competition has evolved is that they all newly offer free plans now. (Yay for us!)

竞争发展方式的另一个好处是，它们现在都提供了免费计划。 (对我们来说是！)

Here's how our three professional sitebuilders stack up against one another. Skip to the next section if you want a quick overview of each one.

这是我们三个专业的网站建设者相互竞争的方式。 如果要快速浏览每个部分，请跳至下一部分。

	Webflow	Froont	Weebly
Free	✓	✓	✓
Responsive Sites	✓	✓	✓
Versioning	✓	✓	✗
Code Exporting	✓	✓	✗
Custom Code	✓	✓	✓
Contact Forms	✓	✓	✓
Media Widgets	✓	✗	✓
Hosting	$4.99/mo	$9/mo	$4/mo
Free Projects	20	10	Not Specified
Ad Free	✓	✓	Footer Banner

 

	网络流	ro	eb
自由	✓	✓	✓
响应站点	✓	✓	✓
版本控制	✓	✓	✗
代码导出	✓	✓	✗
自定义代码	✓	✓	✓
联络表格	✓	✓	✓
媒体小部件	✓	✗	✓
代管	$ 4.99 /月	$ 9 /月	$ 4 /月
免费项目	20	10	未标明
无广告	✓	✓	页脚横幅

• Responsive Sites: Responsiveness has become a standard, not a necessity. These tools embrace this. Each one delivers on this capability out of the box without requiring you to perform extensive media query tweaking to get exactly the look you want on all devices.

  响应站点：响应已经成为一种标准，而不是必需的。 这些工具都包含了这一点。 每个组件都可以立即使用此功能，而无需执行广泛的媒体查询调整即可在所有设备上获得所需的外观。

• Multiple Versions: The ability to create multiple versions and restore points. Being able to revert back to an older version of a site is a workflow booster for those who like to find the perfect design through experimentation, and for those who work in teams that iterate quickly.

  多个版本：创建多个版本和还原点的能力。 能够还原到旧版本的网站，对于希望通过实验找到理想设计的人以及在快速迭代的团队中工作的人来说，是一种工作流程的助推器。

• Code Exporting: An often overlooked capability of these new sitebuilders is the ability to export your sites so that you can further hone them with custom code inside your IDE, or host them off-platform.

  代码导出：这些新的Sitebuilder经常被忽略的功能是能够导出您的站点，以便您可以在IDE中使用自定义代码进一步完善它们，或者将它们托管在非平台上。

• Custom Code: Moving away from code and designing visually has its benefits, but for more technical integrations, a simple drag and drop workflow just won't cut it. That's when you need to be able to inject your own custom code. These tools don't prevent you from doing so.

  自定义代码：远离代码并进行可视化设计具有其好处，但是对于更多的技术集成而言，简单的拖放工作流并不会减少它。 那是您需要注入自己的自定义代码的时候。 这些工具不会阻止您这样做。

• Contact Forms: A standard of conducting business on the web is being able to reach out to customers via email. That's why all the modern sitebuilders now provide native Contact Forms widgets that can be dragged and dropped into place on your site, without any custom code required by a developer. Best of all, you can fully modify the design of these widgets so they don't look like exactly that: ugly, stock widgets. Say goodbye to being locked into templates.

  联系表格：网络上开展业务的标准是能够通过电子邮件与客户联系。 这就是所有现代站点构建器现在都提供本地“联系表单”窗口小部件的原因，这些窗口小部件可以拖放到您的站点上，而无需开发人员任何自定义代码。 最重要的是，您可以完全修改这些小部件的设计，以使它们看起来不完全一样：丑陋的库存小部件。 与锁定模板告别。

• Widgets: Components like Tabs, Sliders, Navbars, and Lightboxes can now be accessed as pre-built elements. All you do is select the media you want to showcase then quickly redesign the widget to fit the rest of your UI.

  窗口小部件：现在可以将诸如选项卡，滑块，导航栏和灯箱之类的组件作为预制元素进行访问。 您要做的就是选择要展示的媒体，然后快速重新设计小部件以适合您的UI其余部分。

• Hosting: Subdomains are provided for free. But, once your site is ready to be published, you will most likely want to avoid forced branding. Fortunately, these sitebuilders all provide super-fast hosting (usually built off of Amazon AWS) -- eliminating the need for third-party hosting setups when you don't have the energy or necessity to set something custom up.

  托管：免费提供子域。 但是，一旦您的网站准备好发布，您很可能希望避免强制品牌推广。 幸运的是，这些站点构建器都提供超快速托管(通常是从Amazon AWS上构建的)-当您没有能力或没有必要进行自定义设置时，无需第三方托管设置。

• Free Projects: All free plans come with a variation of perks. The number of free projects here corresponds to the number of individual websites that you're allowed to create on their free plan.

  免费项目：所有免费计划都附带福利。 这里的免费项目数对应于允许您在其免费计划中创建的各个网站的数量。

概述：Webflow (Overview: Webflow)

Webflow is my go-to sitebuilder for developing sites and apps, which is why I'm listing it first. It makes designers feel empowered by not handicapping their ability to design to pixel-perfect precision. It claims it offers the power of Photoshop, and I'd say it actually delivers on that.

Webflow是我开发网站和应用程序的首选站点构建器，这就是为什么我首先列出它。 通过不妨碍其达到像素完美精度的设计能力，设计人员可以感到无所不能。 它声称它提供了Photoshop的功能，我想说它确实提供了这一功能。

It's also a big workflow boost for developers: In taking the time to learn Webflow, you're taking the time to learn real web development best practices. Webflow's visual editor doesn't abstract away HTML elements or CSS properties; it simply provide quick access to manipulating them. Webflow doesn't treat you like a dummy; it exposes the power of code in a visual manner.

对于开发人员来说，这也极大地促进了工作流程：在花时间学习Webflow时，您就在花时间学习真正的Web开发最佳实践。 Webflow的可视编辑器不会抽象HTML元素或CSS属性。 它只是提供了快速操作它们的途径 。 Webflow不会像对待虚拟人一样对待您。 它以可视化的方式展现了代码的力量。

If I want to turn my Webflow site into a full-featured app after I'm done designing, I can export the site off the Webflow platform to finalize its functionality within my IDE. If instead I were putting together a site that didn't require custom functionality (say, a multimedia gallery), and all my functionality goals are fulfilled by Webflow's pre-existing media widgets, then I don't even have to export the site at all. I can keep it on Webflow and point a custom domain to my new Webflow site.

如果我想在完成设计后将Webflow网站转变为功能完备的应用程序，则可以将该网站从Webflow平台导出，以最终确定其在IDE中的功能。 相反，如果我将一个不需要自定义功能(例如多媒体画廊)的网站放在一起，而我的所有功能目标都可以通过Webflow预先存在的媒体小部件来实现，那么我什至不必在以下位置导出该网站：所有。 我可以将其保留在Webflow上，然后将自定义域指向我的新Webflow网站。

概述：Froont (Overview: Froont)

Most of what I described for Webflow holds true for Froont as well, so I won't repeat the benefits here. It's the newest contender for inclusion in my toolbox: A nicely-featured drag and drop sitebuilder that gives me the power I need to put together a full UI without the hassle of constant CSS tweaking.

我为Webflow描述的大多数内容也对Froont成立，因此在此我不再赘述。 这是我的工具箱中包含的最新竞争者：一个功能强大的拖放站点构建器，它使我能够拥有完整的UI，而无需不断进行CSS调整。

The code it produces isn't exactly up to par with Webflow's, nor is its designer equally as flexible, so I consider this a backup alternative if Webflow doesn't rub you the right way.

它产生的代码与Webflow的代码不尽相同，其设计者也同样不灵活，因此，如果Webflow不能为您提供正确的解决方法，我认为这是一种备用选择。

Regardless, I strongly recommend creating accounts on both services and judging for yourself which seems better suited to the way you develop. Froont is truly a strong contender.

无论如何，我强烈建议您同时在两种服务上创建帐户并自行判断，这似乎更适合您的开发方式。 Froont确实是一个强有力的竞争者。

概述：Weebly (Overview: Weebly)

For those of you looking for an even simpler approach to web development, but don't want to be locked into the restrictions of Squarespace, Weebly is the most user-friendly drag and drop sitebuilder out there. With the Weebly app on my iPad, I can easily build, manage, and edit my storefronts and blogs. It's a fully-featured ecosystem that's tied together phenomenally well.

对于那些正在寻求更简单的Web开发方法但又不想被Squarespace的限制所困扰的人来说， Weebly是最人性化的拖放站点构建器。 借助iPad上的Weebly应用程序，我可以轻松地构建，管理和编辑店面和博客。 这是一个功能强大的生态系统，紧密地结合在一起。

It's not the best fit for professional designers looking to design sleek, modern sites to the exact specifications of clients, but it is the best fit for those who want the broad plugin ecosystem of WordPress and need access to pre-made eCommerce, blog, and CMS solutions. In short, Weebly is an amazing one-stop shop solution.

它不是最适合希望根据客户的具体要求设计时尚，现代网站的专业设计师的最佳选择， 但它最适合那些希望使用WordPress广泛的插件生态系统并需要访问预制的电子商务，博客和CMS解决方案 。 简而言之，Weebly是一个了不起的一站式解决方案。

If, however, you're a professional freelancer or agency, stick with the design power and exporting capabilities provided by Webflow and Froont. Design agencies rely on these tools for a reason: They let you design beautiful and responsive sites entirely from scratch.

但是，如果您是专业的自由职业者或代理，请坚持使用Webflow和Froont提供的设计能力和导出功能。 设计机构之所以依赖这些工具是有原因的：它们使您可以完全从头开始设计美观且响应Swift的网站。

变得不仅仅是设计师 (Making it easy to be more than just a designer)

It's foolish to see the new crop of professional sitebuilders as gimmicks -- or as threats to our traditional workflows. In reality, they are richly-featured tools that let us efficiently achieve base designs that we are fully in charge of. In 2015, we're no longer locked into proprietary platforms (e.g. WordPress) or horribly messy code (e.g. Dreamweaver). We've come a long way.

将新的专业网站建设者视为as头或对我们传统工作流程的威胁是愚蠢的。 实际上，它们是功能丰富的工具，可让我们有效地实现我们完全负责的基础设计。 在2015年，我们不再受限于专有平台(例如WordPress)或可怕的凌乱代码(例如Dreamweaver)。 我们已经走了很长一段路。

At the end of the day, these tools help us get more work done quicker so that we can spend time focusing on the creative aspects we love, which is probably why most of us get into development in the first place.

归根结底，这些工具可帮助我们更快地完成更多工作，以便我们可以将时间花在专注于我们喜欢的创造性方面，这可能就是为什么我们大多数人首先从事开发的原因。

翻译自: https://davidwalsh.name/website-builders-dont-suck