Webflow for Squarespace designers: 5 questions answered

Working with Squarespace to design and maintain your own or your client's websites? You might have heard lots about Webflow recently and might be wondering what the big deal is. And you might even already have had a look at Webflow yourself, played around with the user interface (which is called the "Webflow Designer") and asked yourself a few questions...  I am answering 5 of them in this post! So, let's get started...

‍

Why should I move from from Squarespace to Webflow as my tool for building websites?

Because Webflow is awesome! Yes, but seriously – Webflow has quite a few advantages not only for yourself as a website designer, but also for your clients. Let's be honest: how often have you been frustrated by having to resort to CSS code injections to achieve a particular look and feel for your client's site? Have you been annoyed by hurdles put in your way with the release of Squarespace 7.0 and 7.1? For me personally the restrictions put in place by certain Squarespace templates hindered me in designing a site exactly the way I wanted to. With Webflow you're able to provide a completely custom design without having to worry if it can easily be recreated by your website builder. Especially for people who first design a website mockup in Sketch, Figma, Adobe XD or another design tool, before going into development, this is great news! Also, circumventing troubles with different platform versions is key for me – there is only one version of Webflow and it is updated constantly. While you can use so called "HTML embeds" – these are elements that you can insert on your site to use custom code – for most layouts you want to achieve this isn't necessary. And via the style panel in Webflow you can simply style whichever element you've got on the page without restrictions. And your clients will be able to update their site content just as easily as before via the "Webflow Editor", directly in their web browser – you can learn more about this in the next paragraph.

In a nutshell: One major advantage of Webflow for me is that you have greater freedom to design a site your way without any restrictions from templates. At the same time your client can still update his site without advanced coding or web development skills. Nice!

‍

Does Webflow have a trial version, so I can test it out before I commit?

In short: no, Webflow does not offer a trial version. However, Webflow offers a starter plan which you can use for however long you like. There are of course some limitations, since otherwise nobody would ever pay for the service. With the free starter plan you will only be able to build 2 projects (e.g. websites) with up to 2 pages each. If you want to connect your custom domain (such as mycoolsite.com) to your website, you will have to host with Webflow and purchase a so called "Site Plan". You can learn more about Webflow's site and account plans in my other blog post. So, try out Webflow via the free starter plan and see how you like it!

‍

I design websites in Squarespace and think the Webflow user interface looks overly complex! This is way too hard for my – not very tech-savvy clients – to understand. What's going on?

Yes, the user interface of the "Webflow Designer" (that's the tool within Webflow to build sites), can look quite intimidating when you're just starting out.  But don't fret – there are heaps of great resources to get you started. Most of them come directly from Webflow and are completely free. While not 100% necessary I highly recommend doing a few web concept and/or HTML/CSS basics tutorials (also available from Webflow) if "the box model", "relative positioning" or "padding vs margins" don't ring a bell. Understanding these basic concepts of web development really help when you're building sites with Webflow. They also make the user interface and the options available for styling and positioning elements way more logical. After you've mastered these basics you can move on to the Webflow 101 course which is also available directly from Webflow. This should help you on your way to mastering Webflow and becoming familiar with this fantastic tool.

In case you're worried your clients won't know anything about web development or building websites and would find Webflow's user interface too full on, I'll let you in on a secret: Your clients won't have to use the "Webflow Designer" (or "Designer" for short) to update their site. The "Designer" is only for designing/building a website (creating new pages, developing the layout, changing colours, fonts etc.), while the "Editor" is for making content updates. The "Editor" lets clients log in and then change items on their site directly in their web browser. Clients can change text, links or images and – if the CMS (content management system) has been used – add new blog posts, team members, projects or anything else that has been set up via the CMS. To make it even more clear how the "Editor" works, take a look at Webflow's own video here:

‍

‍

You might say: "But without knowing how to use the "Designer" my client can't move items around or change fonts or do XYZ". Well, that's true, but that is how it is supposed to be. You are the web designer who knows how to design a professional website, not your client. Once you have designed the site, there should be no need to constantly change things around in terms of layout or design, because you've already done a great job of getting it right! And we all know what happens to some websites after they're launched and have received some "love" by the client... (yes, that's why you keep your static mockups or do screenshots of the site when it's first released).

In a nutshell: Your clients can easily update their Webflow site without having to be particularly tech savvy and you can pick up Webflow basics (and more advanced topics) via the free Webflow University site.

‍

Why can't I just move elements wherever I want on the page?

So, you've played with Webflow, moved a few elements onto a page... and it didn't quite work the way you expected. Hold on – don't give up just yet! While Webflow might give the impression via their marketing that it's a "drag and drop" editor, it really isn't. Yes, it is a visual site builder but it still follows the logic of HTML and CSS. This means some elements can't be nested in other elements or if you want X to sit on top of Y you'll have to do Z. This might sound complicated but it's all for a good reason. After all you want lean code and a site that performs well. Since Webflow also offers the option to export the code to use it in other platforms such as Wordpress, it is important that everything is structured correctly. What I suggest is to go through the basic HTML/CSS or web concept courses on the Webflow University site to really get a grasp of some of the basic concepts. While you might think that you don't have the time, consider this an investment in yourself and your business. Being able to build better websites in less time should be worth it to you!

‍

How do I best get started learning Webflow?

One, if not THE BEST resource for learning how to use Webflow is the Webflow University. Here you can find lots informative – and often quite funny – videos by the makers of Webflow. In a future blog post I'll outline a bit of a roadmap on learning Webflow: which courses to take in which order and where to find additional resources. Also, if you are already a bit more advanced with Webflow, you can check out my recent blog post "How to best learn to create interactions and animations with Webflow" which gives you heaps of great resources on interactivity inside of Webflow.

Hope this has helped you answer some  of your most urgent questions when considering to switch from Squarespace to Webflow. If you've got further questions, get in touch via email!