Webflow vs. Squarespace: Why I’m Building My New Sites In Webflow
If you’re looking for practical tools on how to build a website in Webflow, I’d highly recommend checking out Webflow University. You can teach yourself how to do anything these days on the world wide web. In this article, I’ll explain why building in Webflow is relevant in today’s world. And I’ll also explain why I’m no longer choosing to build my business sites in Squarespace.
Squarespace vs. Webflow
The first business I bought, Green Spaces Coworking, came with a website built on Squarespace. I jumped in head first and taught myself “enough to be deadly” within a week and started to realize the limitations very quickly. Squarespace as a name for the platform could not be a better fit. You literally build in squares. Everything is box like. You’re limited by the template you choose and most all of the templates I’ve played with feature “block style building.”
Before I got into the coworking business, I was building websites for clients as a freelancer. On one particular project for a local photographer, the scope of work was outside my expertise so I hired an outside consultant from another marketing agency to help me bid the project. Through conversation with the founder of this successful marketing agency, I learned that they were making the transition to Webflow, which was apparently the newest and greatest platform to build in. Before we get into Webflow, let’s do a little history on Squarespace.
Squarespace: The Pros and Cons
Pros
- Templates
- Ease Of Learning
- Integration Friendly
Templates
Sign up for Squarespace and choose a template. In many cases, Squarespace has a template that is relevant to your industry. If you have a restaurant, marketing agency, or lifestyle blog, you’ll like what you see. Upload your photos and interchange the text for your own copy and you’re well on your way to a published website.
Ease Of Learning
If you’re somewhat tech savvy, spend an evening familiarizing yourself with the platform and you should be able to publish your site by the next day. I’d recommend editing the home page the way you’d prefer and delete most all of the other pages to get your MVP shipped as soon as possible.
Integration Friendly
This was my favorite part of Squarespace. I use a SaaS product called Zapier to automate most of the backend of my businesses. Zapier allows me the opportunity to connect forms on my Squarespace site to other apps in my business stack like Google Sheets, Gmail, Pipedrive, Hubspot, Slack, and Proof. This is helpful for us because all our leads come from the website. In a nutshell, a potential customer fills out an inquiry form on our site and their contact info gets pushed into an automatic workflow with apps I mentioned above. I go into more detail about automating backend workflows with Zapier in this article if you’re interested.
Cons
- Block Style Design
- Limited Customization
Block Style Design
When I say “block style design,” I mean you literally build with blocks. Everything fits within its own box on the page which gives it a rather rigid feel. If you go to the Green Spaces Coworking website, you’ll notice how every element is above, below, or beside another element. It’s hard to describe in words, but once you begin building in Squarespace, you’ll realize what I’m talking about. For example, when building out a features list, one can only place text above, below, or beside another text box or photo.
This becomes a pain when having to add / delete text to ensure the size of the text box matches with the size of the photo. If one has too much text, it begins to look out of whack. This isn’t a huge deal for someone looking to get a website out quickly, but I’ve definitely felt the frustrations as a designer when building out pages on the Green Spaces website.
Limited Customization
This is one of my biggest pains with Squarespace. Especially when building a blog. The CMS within Squarespace seems to be a one size fits all mentality, at least in the template my website is built on. When I add a new blog post in the CMS, it’s immediately published to my blog page and the data is shown with the parameters set by the template.
Squarespace doesn’t allow me to edit how the post is shown. (At least within the Bedford template.)There’s been numerous times where I’ve wanted to design this page to make it fit with our brand. For example, we have 3 different pillars within our blog focused on “sustainability” because we believe the term applies to different areas of life. The first being environmental responsibility, second is health/wellness, and third is life/work balance.
I’d love to build 3 different sections for each pillar on this page and tag each article under their respective pillar. But I’ve researched this in and out and haven’t found a way to customize it without manually editing the source code within the template. I have too many leads coming in through the website to jeopardize messing something up within the code.
Squarespace Conclusion
All in all, if you’re starting out in business and have little to no experience with web design, Squarespace is a good option. But, if you’re looking to get the most out of your design, I’d recommend reading further to learn more about Webflow.
Why Webflow?
Webflow is similar to Squarespace in the sense that it’s a drag and drop style editor first. It’s basically a Canva for websites but you can do WAY more with Webflow from a design perspective than with Squarespace. I was initially attracted to it when one of my mentors, a founder of the SaaS company Proof, told me they built their landing page in Webflow because of the design capabilities. Over the years, I’ve become a sucker for beautiful design. Some of my favorites being Stripe, Slack, Intercom, & Proof Experiences. When I first started using Webflow, I planned to transfer the Green Spaces from Squarespace. I went straight to the templates, found a beautiful design that fit our brand, and tried to teach myself how to use the editor without reading or watching any help resources. Bad choice.
I gave up within a week and said, “screw it, I’m sticking with Squarespace.”Fast forward to over a year later and I’ve decided to implement a content strategy to take our coffee shop online while documenting what I’m learning in business on my personal blog. I began doing research on the best ways to learn SEO and came across an article written by a seasoned SEO veteran, Nat Eliason, on why he migrated his sites from WordPress to Webflow. This was now the 3rd credible source building in Webflow. Without any further research, I decided to build both of my new sites in Webflow.
Learning How To Design In Webflow
I decided to make the leap to Webflow at the beginning of January. It’s now January 19th as I’m writing this and can finally say that I’ve completed a basic website for my personal blog from scratch in Webflow, but it’s taken almost 3 weeks of nights and weekends to get to this point. As for The Perk Coffee Company site, I chose a template and have customized to fit our brand from the template. Don’t get me wrong, this still takes work. Especially if you’re not familiar with the editor.
All that said, I can say with confidence that I learned the Webflow editor more quickly and in depth by choosing to build a personal website from a blank canvas. This allowed me to customize The Perk website rather quickly, especially with a template to build off of. I started with a blank canvas, and Google searched “how to do x,y,z in webflow” when I came across something I couldn’t figure out on my own. More often than not, there was a video tutorial on the Webflow University site. Other times, I found forums of other users answering the same questions I had.
Why Webflow Over Squarespace?
Spending 100+ hours on nights and weekends teaching myself how to build in a new platform isn’t ideal when running two companies. (Even though I secretly always love a new challenge.) Here’s why I’d say it was worth it.
Learn A Relevant Skill
I’ve invested time in learning a skill that is in high demand in the startup world. Download the chrome extension BuiltWith and start looking at your favorite software product’s landing pages. I’ll bet some of them are using Webflow. Just to name a few, startups like HelloSign, Proof, Procurify, Zestful, BankMobile, and Bonsai are all using Webflow.It’s my opinion that Webflow will only get more popular as they build out their product and release more features. It already makes it super easy for designers to do their thing and produce seamless code for the dev team.
Seamless Code
Go to a site built on Webflow and you’ll notice it loads uber fast. This is crucial for SEO as Google doesn’t like to rank websites that have slow load times. The best part here is that all the code is seamlessly generated behind the scenes for you. You don’t have to stare at a code editor to make this happen. You get to focus on designing your site the way you want to with a drag and drop editor, which is great for designers who know little to no code. On the other hand, if you decide you’d like to take your site to the next level, you can export the code and send to a developer to customize even further. The capabilities are almost limitless.
Responsive Design
I spent time learning the basics of this section earlier today and I’m blown away at how easy it is to ensure your site is responsive on mobile. Webflow works in a “top down” design structure. The structure is as follows:
>Desktop
>Tablet
>Landscape Mobile
>Portrait Mobile
When an element is designed in the editor for desktop, the styles and format automatically trickle down to tablet, landscape, and portrait. For example, if I design an H1 Header to have 64px Lato font (below) in the desktop view, this style will automatically trickle down into the tablet, landscape, and portrait mode.
But, let’s say this font looks weird when I scale my site down to a smaller view, such as portrait mobile. Webflow lets me customize elements at the bottom of the hierarchy without affecting the same element in the views above it in the hierarchy. For example, my H1 header looked horrible when in portrait mobile view at 64px font. I can easily change the font size specifically for portrait mobile view without affecting the views above it in the hierarchy.Essentially, I sized the H1 header at 34px in the portrait mobile view without affecting the same H1 font size in landscape mobile, tablet, or desktop.
This allows you to scale your font size with the size of your screen making it almost effortless to optimize your site for mobile, which is another SEO must have.
Powerful CMS
Webflow CMS allows you to design one page and dynamically pull in elements to create hundreds of different pages. This function is useful for building a blog. In my case, I spent time minimal time designing one CMS page for my blog categories and another CMS page for my blog articles.On the category page, I placed a header for the title of the category (All Articles), a header for the article title, and body text for the article summary. I’ve linked the top header to automatically pull content from the “category CMS collection” and the article title and summary to pull content from the “Article CMS collection.”
On the blog article page, I placed a H1 header to automatically pull content from the relevant Blog Article Title and have done the same with the body text below. You can see I’ve also added in a text box for the author of the article along with the publish date.
When I create a new blog category or article on the backend of the CMS, a new page is automatically created under the same design constraints that I have laid out in the screenshot above. This saves me time from having to design a new page in the editor every time I release a new blog post. I simply copy and paste my article title, text, summary, and URL into their respective fields within the CMS and boom, another blog page is created under the new URL. Saves me tons of time.
The One Downfall Of Webflow
Every Superman has its kryptonite. Here’s Webflow’s:
URL Structure
In studying SEO veterans like Neil Patel and Nat Eliason, URL structure seems to have an impact on whether Google’s algorithm ranks you on the top page or not. I won’t go into detail on the strategy in this article but you can geek out on Neil’s URL structure recommendations here if you’d like to go down the rabbit role. In short, the theory is to structure your site in a hierarchy. In an ideal world, here’s how my site should be structured:
Home Page: www.austinrileygray.com
Blog Categories Page: www.austinrileygray.com/blog
Blog Article: www.austinrileygray.com/blog/article-name
This would ensure the blog would live under the home page and the articles would live under the blog in the hierarchy. In my case, I’ve structured my blog to have categories so that I can tag each article with its respective topics such as entrepreneurship, health, daily routines, marketing, productivity, etc. This is great from an organization standpoint, but not from a URL structure standpoint. Here’s why:
As I mentioned above, I’ve created two CMS pages, Blog Categories and Blog Articles. Both of which are necessary for organizing my blog the way I’d like to. For the Blog Categories, I’ve specified the URL slug to be “blog.” For the Blog Articles, I’ve specified the slug to be “articles.” The URL slug is required for each CMS collection. Based on this requirement in Webflow , here’s how the site will be structured:
Home Page: www.austinrileygray.com
Blog Categories Page: www.austinrileygray.com/blog/category
Blog Articles Page: www.austinrileygray.com/articles/article-name
As you can see the articles will not live under the /blog slug, which creates an SEO problem. At least from the research I’ve done. Once again, time to find solutions. This creates a need for some sort of workaround if the idea is to get to an ideal URL structure. The research I’ve done on this up to this point says that a 301 redirect can be done to redirect these URL’s to the URL you’d like displayed in the browser.
3/29/20 Update: I came up with a workaround by creating a single page titled "blog." I then implemented a single collection list to display all of my blog posts. This eliminated the need for categories.
4/5/20 Update: I've found a plugin called jetboost.io which is a plugin for Real-time search, dynamic filtering, and more for Webflow — without writing code. I'm currently implementing this on my sites so that I can separate my blog posts out by categories such as: entrepreneurship, productivity, health, personal growth, etc.
I played with it last night on an experimental site and I am planning to carve out time in the upcoming week to implement this on my personal blog. I'd do it right now but it's a Sunday and I'm currently craving some time away from the computer. Planning to go fly fishing to "social distance" and let the mind recharge before the week. With that being said, send me a line on Twitter if you need any help implementing this and I'd be happy to help out. The founder, Craig, has set up a fantastic on boarding experience and also makes himself available for support questions via the website or his Twitter account.
Conclusion: Should you use Squarespace or Webflow?
If you’re just getting started with a business or with web design, there’s nothing wrong with starting on Squarespace. Actually, I’d recommend it. My wife has zero web design or computer background and launched her fashion blog on Squarespace in one Sunday afternoon. If you have some background with a platform like Squarespace, WordPress, or Wix, and are looking for a new challenge to maximize your design potential, I’d encourage you to build a personal website in Webflow. Start from a blank canvas and google search terms when you need help. It’s much more engaging and fulfilling this way.
If you have any thoughts or opinions, would love to hear them. let me know what you think on Twitter.