A big, big shift in web design, which you may have heard about, is the move to responsive design—that is, building web layouts that respond to the variety of devices screen sizes being used by visitors. With more and more people accessing the web with iPhones, Android tablets, iPads, and a slew of other devices, web designers and developers are moving more and more towards creating the sorts of layouts that adjust and respond to a variety of devices and screen sizes.
For many designers however, and even those wanting to get started in web design, the learning curve already seems steep enough…there’s always something new to learn about HTML, CSS, jQuery, WordPress, and other web technologies. And now responsive design is being thrown on top of it all. It can be overwhelming, even for an experienced designer.
Options like Zurb’s Foundation, the Fluid Grid Layout feature that came along in Dreamweaver CS6, or Twitter’s Bootstrap are viable, but each of these requires a level of coding and technical skill to use effectively. Until now, no tool has existed that would allow non-coders to easily build beautiful, responsive web layouts.
Enter Webflow, a start-up launched by Sergie and Vlad Magdalin and Bryant Chou, and backed by Y Combinator. Webflow provides a visual design interface, and is completely browser based, meaning there’s no software to download or install—you can use it wherever and whenever you’re online. Webflow’s easy to use interface allows designers to simply drag and drop layout elements into place without having to write (or know) a lick of code.
What’s more, Webflow handles the background code including the CSS media queries (which is what drives responsive layouts for desktop, tablet, and mobile devices), making the entire process a breeze, even for non-technical users. Designers can choose from a set of carefully crafted templates, or they can build their own layouts themselves.
Once complete, users can publish their work online right away via Webflow’s domain and web hosting services, or they can export their code for their own self-hosting.
There really isn’t anything other than the aforementioned options that comes close to providing the ease of use and power that Webflow offers. And truthfully, it’s about time. In fact, I’m somewhat surprised that a company like Adobe didn’t put something like this together years ago (I guess Reflow comes pretty close) rather than continuing to support clunky old Dreamweaver or coming up with disastrous "features" like the CSS Designer panel. Heck…I can’t even export reliable CSS from Photoshop!
…But that’s a rant for another day. I’ll be okay. Let’s now take a closer look at Webflow, it’s service plans, and pricing options.
Okay so, having a visual, drag and drop interface to build responsive layouts sounds great, but how much does it cost?
Well, keep your credit card in your wallet for the time being, because you can start using it right now for free. You can take it for a test drive directly on their site, and if you like what you see you can sign up for a free account; however with a free account, you’ll be limited to just three web projects without web hosting; although you can export your project’s code.
Webflow offers two more options for users who want to dig a little deeper into things. The first of the two is tailored for personal users at just $24/month, allows you to build up to ten web projects, and includes the ability to host your site with Webflow or export your projects.
Imagine that…being able to build a fully responsive layout, without having to code anything (or hiring it out), and have all the hosting and technical server issues handled for you, for just $24 per month. That’s pretty awesome!
The third option, dubbed Professional, is aimed at freelance designers and teams. It allows users to build an unlimited number of projects and includes hosting and domain options for an unlimited number of sites too, all for just $49/month.
When comparing these plans against the cost of outsourcing your development, you can see this is some pretty competitive pricing! Alright, with costs out of the way, let’s take a look at Webflow’s interface.
Let’s take a closer look at the Webflow interface and learn a bit about how it works. Head over to Webflow’s website. Feel free to scroll through the page and learn a bit more about Webflow. And when you’re ready, head back to the top and click on the blue Play With Demo button.
This’ll drop us into the Webflow editor (called Design Mode), where we can play around with the Webflow site’s layout, test things out, and see if we like it.
In the column on the left-hand side, we’ll find icons for switching between Design Mode and Preview Mode, exporting our code, changing the device layout that’s loaded into the editor, as well as a few others. Go ahead and explore through some of the icons and get a feel for the in-browser experience.
On the right hand side, we have a set of panels, including the Add, Style, and Settings panels, as well as a few others. As you might guess, this is where all the action happens.
Very simply, the Add panel allows us to drag and drop layout objects into our design, like text blocks, graphics, hyperlinks, and buttons. Text-based objects can be edited directly onscreen, or you can click the tiny blue gear icon, which triggers the Settings panel over on the right. There, we can set a variety of options, depending on the object that we’re working with. We can even control what devices will display the object in our overall responsive design.
The Style panel gives us an easy to use, visual interface for setting CSS properties for selected layout objects. As you can see, it’s broken into various sections like Position, Background, Border, and so on. Try collapsing some of the sections, and you’ll discover additional, hidden sections like Typography and Shadows.
As you can see, there are many, many additional options and settings, and we’re only scratching the surface here. But feel free to spend some time in the demo mode, and if you’re ready sign up for an account—even a free one for now to really give it a test drive!
I’m really impressed with what Webflow has done. They’ve made the process of creating beautiful, functional, responsive layouts a pleasure rather than a painstaking process. Seriously consider using it for your next web project!