Create Responsive Websites Without Code!

Webflow makes it easy to build beautiful, responsive web layouts without knowing any code

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.

Webflow's drag 'n drop interface makes tablet, mobile, and desktop layouts a breeze!

Get your desktop, tablet, and mobile layouts underway with Webflow’s easy drag ‘n drop interface.

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.

Webflow Plans And Pricing

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.

Webflow's pricing plans

Webflow’s competitive pricing plans…waaay less than the cost of hiring a developer!

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.

A Closer Look At Webflow’s User 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.

To get started with Webflow, click Play With Demo at the top of the home page

To give Webflow a try, click 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.

Here's a look at the Webflow user interface

The Webflow demo allows you to take a full-feature test drive.

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.

Webflow's left-hand sidebar offers a variety of options, including changing the device layout

Easily switch between devices using Webflow’s left-hand sidebar.

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.

The right side of the Webflow interface contains the Add, Style, and Settings panels

The Add, Style, and Settings panel is where all the action happens in the Webflow interface!

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.

Adding page elements into your layout is as easy as dragging and dropping them from the right

Adding objects to your layout is just a matter of dragging and dropping them from the Add panel.

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.

Easily set and adjust CSS properties for the objects in your Webflow layouts

Webflow’s Style panel makes it easy to change or add in CSS properties.

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!

Hey, I’m Geoff. I create online video courses to help people launch their online projects, expand their businesses...and yeah, make more money!

Learn more about me here.

Get free articles and tutorials!

  • Bob

    Ah, Geoff, is this going to put you out of business?

    • Ha, no way! There’s still tons to learn and teach…I think I’ll be doing this for a long while yet! -Geoff

  • Tom

    Can this be integrated with WordPress? It’s really cool that this tool will allow me to design a responsive website but I don’t know much about php, sql and the like. I really like how WP allows me to have dynamic content on the front page by retrieving stuff from the database so if this will only allow for traditional html-based websites I won’t be using it…

  • Tom

    … Just checked out the site and had an idea Jeff (I’m sure you already thought if this but…) in the class you are creating you could tie into the WP from scratch course and explain how to take the exported html from Webflow and then create a WP theme from it. Now THAT is something I would purchase!

    • Oh yeah, for sure! Yes I was thinking this, almost right off the bat…that if we could use Webflow to build WP themes, then we’d really (really, really) have something. I don’t want to say too much just yet, but let’s just say…it’s, ahem, a topic that’s being looked at (!!!) -Geoff

      • graffig

        Geoff, any further forward with a course to create HTML and CSS via webflow and then build a WP theme?

        • Hey! Sorry for such a late reply. Unfortunately, we’re just not seeing enough demand for this title. I’d love to do it if we can get enough people interested…-G

  • Carlos

    I agree with Tom. Mixing this utility with a course on how to integrate it with WP would be really interesting.

  • Christina

    I’m with Tom–if this can be integrated with WP, then Webflow owns me. :-)

    • Tobi Akanni

      webflow has a cms now

  • Vadim Koba

    Thank you so much for the course for beginners online Webflow. Your explanatory style is so consistent and so simple that I was able to understand everything from scratch. It was very pleasant to listen to you. After your lessons decided to upgrade to a personal plan. So once again, thank you very much!

    • Thanks so much for the kind words, Vadim! I just try to keep it conversational and casual…far too many “trainers” are making this stuff out to be rocket science requiring a PhD. But web design’s supposed to be fun and creative! Thanks again -Geoff

  • Abi Smart

    This is great, I reckon this would work quite well with Dimensions Toolkit. It’s a cheap Chrome extension you can get to test responsive websites :) you can find it here: https://chrome.google.com/webstore/detail/dimensions-toolkit/oajdmmikmphdckpkjgkdofoegppahcak

  • uxzeal

    Few more responsive designs you can find out here http://visitresponsivewebsites.com/

  • Max

    Geoff

    You are one awesome training video communicator. I signed up to Webflow and ran through the videos you created for them … never has it been so good or well done and easy to get going on a whole new design platform, with your vids and their intuitive well thought out design tool I created a 40 page site on my first go through … love it! My clients love it. You set a new online video training standard – the bar is high now – for me and the go to place for this to get done right.

  • AravindaKumar Venugopal

    You gotta update few contents…. The Plans & Pricing are completely changed now!!!

  • Can this be used with coffeecup html editor?

    • Hi Leslyn, No I don’t believe so. Webflow builds everything for you. But once your design is complete you could yank the code over to Coffeecup…but it’s a one-way street as far as I understand. In other words, you couldn’t take your code back into Webflow once you export it. I could be wrong on that though. -Geoff

  • Clarence

    Hello Geoff Blake, My name is Clarence and i’m soon to be a web designer. I would love to watch and learn from your tutorial videos for web flow. My concern is would you able to upload videos with subtitles because I’m deaf/Hard of hearing and it’s would be difficult to hear the videos. So by having subtitle would help a lot and bring in more viewer for you as well.
    Thanks,

    • Hi Clarence, Sorry You’d have to talk to the Webflow guys about adding in subtitles, as all the videos are hosted with them -Geoff

  • veda agaswi

    It is useless until and unless we pay for professional plan