Working with Webflow
Front-end web development tools, such as Webflow, WordPress, Squarespace, and Shopify, have become increasingly popular in digital marketing workflow, and rightfully so.. With these programs, designers and marketers are able to completely design, develop, and launch a website without having to write a single line of code. While doing a website entirely from scratch with HTML, CSS, and Javascript certainly still has its place, sometimes using these new-ish tools is perfect for given situations and smaller projects.
This past week , we trialed a newer web editing tool called Webflow for a smaller project. The tool is extremely intuitive with a browser-based design interface that seems pretty easy-to-use.. Prior to Look North, I worked mostly with pre-existing WordPress themes, customizing them where possible. So being able to work with a tool that gave so much creative freedom without the constrictions of a template was AMAZING.
I thought it would be useful to share my experience with Webflow. I’m going to breakdown my experience into 5 sections: Interface, Design Flexibility, Webflow as a CMS, Learning Curve, and Publishing (or Design-to-Code).
Interface
The Webflow interface is easily one of the best I have used. Everything you need is all neatly organized on the left and right panels with options to open and collapse windows to certain tools. This is unlike WordPress, which has some template-specific locations for things that can take forever to find or may have you move to a different window to change a style/see adjustments.
Everything a web designer would need such as alignment tools, layout tools, typography, and custom styling are all really easy to access from your right control panel. The overall feel is fairly similar to Illustrator or Sketch but it includes everything that Sketch felt like it was missing (and we REALLY LOVE Sketch). You can add padding and margin to elements and then save that style instead of having to apply that to every similar element. You can add z-index, parallax scrolling, and even transitions, all while seeing everything in real time to test how it looks and fits. Rather than waiting to see the built site and figuring out something doesn’t look the way you expected, the designer has the ability to accomplish everything they hoped for without having to dig through code files to make simple design changes. Nothing ever feels “wonky” when using the program; everything from the positioning to the float options works exactly how you’d expect.
Not only is everything fairly simple to use but the navigator organizes all of your content from top to bottom for you, making it easy to find certain blocks of content and adjust or rename them accordingly. Previously when writing code, I found it a hassle to keep everything neat and organized. Having a tool do it for you saves a lot of effort. You’re able to save classes and apply them wherever you feel like and change those classes with ease. The ability to add multiple classes to elements really makes the design process smooth, fast paced, and pixel perfect.
The only negative about the interface is that it’s a browser-based program, meaning that there’s no desktop app I can work with offline if I wanted to. These programs are set up browser based for the built-in CMS and its easy to publish updates right from the dashboard without having to export any code by hand. So, while I do see the necessity for the tool to be in a browser, I do wish there was an option to work on a non-browser based application as well.
Design Flexibility
With Webflow, I found that I really have the creative freedom to design anything I please (within reason). There are options to put entire containers of content on a z-index and apply absolute positioning for precise design that is rather difficult to accomplish by using other tools, or describing to a developer exactly what I envision. I really like how elements are broken up into blocks, and blocks are placed vertically down the page. Sections are your big areas that hold your blocks of elements/content, and containers separate your content within your section. Div boxes can be placed within containers to make for design specific instances, and it’s really easy to follow how everything is laid out. While its not as completely free as working in Sketch or Photoshop, Webflow helps you create something that’s 100% possible and manageable to create with code.
Webflow as a CMS
I’ve only got a taste of what the CMS could do without having to push its limits but it has every basic need a client/business owner should need, such as being able to post content, change/add nav items, make listings, manage portfolio work, and add categories. But, outside of these basic needs, this is where Webflow might fall a little behind compared to the other web design giants.
For a business that sells product, I still believe that Shopify is by far the best. That’s what they really hone in on: being able to easily sell, manage, package, print labels etc.. all from the dashboard. It’s perfect for an online retailer. However, it looks like Webflow will soon be upping their ecommerce game so we’ll see what that holds.
WordPress comes with pretty standard CMS tools but, being that it’s been around for so long, it has a huge pool of plugins and add-ons that can fit for almost any given situation a business may need. Also, with WordPress, I found the ability to allow only a certain amount of access to certain materials useful for businesses. A business owner can give a writer access strictly to write a blog but not post it, so someone higher up would be able to approve the writing before moving forward to publish it. Access like this is, I find, a good practice because you don’t want someone who is not so tech-savvy to accidentally break something. With different access levels, WordPress doesn’t even give someone the chance.
From what I’ve seen with Webflow, the dashboard from a non-designer side might be a little underwhelming and it may not offer as many tools for a larger scale business and site. However, for a small, manageable team, I could see it being a perfect solution.
Learning Curve
If you used any Adobe suite or Sketch, this app will feel quite familiar. Everything is all self-explanatory and within of 20 minutes of exploring the interface you’ll find everything you need to get going. They offer a free 101 Crash Course, which after watching halfway through I was ready to start building myself. There’s almost a video for everything you’d need to know and they are broken up to around 3 minutes each, so you don’t need to spend more than half a day before being able to build your first site. If you’re stuck on one piece you can’t figure out, watching one of their short explainers will get you back where you need to be.
Publishing/Design-to-Code
Publishing your project right from Webflow’s tool is as simple as it can get. You can publish with their given url or with your own domain. There’s no need to work with any updating of servers or working with code files at all. For example, if you need to change an image, all you need to do is swap it in and hit publish and you’re done! No extra work.
Surprisingly, the coding is really clean. It’s nicely organized into HTML, CSS, and Javascript files, and follows a common convention of how to write clean code. If we were to take the exported code from Webflow and put it side by side with a developers code, of course you would be able to tell the difference. But, if for some reason it’s a better option for your business to work with exporting code and making changes live in your own way, that’s still an option.
In conclusion, it’s pretty safe to say that overall I had a really enjoyable experience working with Webflow. Even having only worked with it for one project, it already outshines other browser-based design tools we’ve seen. It’s fun to use and I love being able to build a site from start to finish, on my own, with complete design control. I plan on working with Webflow for future projects and I’m excited to see what else we can create with it.