我從不追求真棒 (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.
歸根結底，這些工具可幫助我們更快地完成更多工作，以便我們可以將時間花在專注於我們喜歡的創造性方面，這可能就是爲什麼我們大多數人首先從事開發的原因。