Squarespace: My Web Design Platform of Choice

My first experience using Squarespace was in the form of updating a website for a small design consultancy where I once worked. Prior to that, I had zero experience. I didn’t know what words like domain or web hosting meant, that’s how much experience I didn’t have. So maybe you can imagine how having to go behind the scenes of a webpage to do some minor tweaking and updating might have felt daunting. Getting familiar with how it worked though, I was surprised at how easy it was to design. It wasn’t something that really required me to be an expert in and it didn’t feel daunting at all. Fast forward to late 2020 when I decided to launch my own webpage and Squarespace was where I immediately went. I had heard of other platforms like WordPress and Wix, but because I had had such a positive experience with Squarespace, for me it was a no-brainer to use it for my webpage.

My number one reason for using Squarespace is because it’s very intuitive and easy to use. It works on a drag and drop method and you can fine-tune how you want your rows and columns to look. All of the design details can be overwhelming in the beginning (where do you set up your fonts?), but once you get the hang of things, you can start plugging in the items you want with great ease. My number two reason for loving Squarespace is how easy it is to plug in CSS coding for certain layouts, making a webpage very unique.

TEMPLATES

Squarespace has a lot of really interesting templates for you to choose from. I usually peruse through all of them until I see something I like and I use it as a design base to get those ideas flowing. Many people use the templates as-is, meaning that they may select  different fonts and change up the colors (and obviously add their own images), but they keep the layout the same. I don’t usually go that route. I select a template that I feel will go with the brand of the client as a guide and then build it from there. I might keep a section or two as-is, but for the most part, I design it based on my client’s needs.

Example of a template from Squarespace

Example of a template you can use from Squarespace

FONTS & COLORS

Based on which template you choose, fonts and colors are already built in. Again, you could keep these or not. Should you choose to change the fonts, there is a pretty large font selection for you to choose from. And to take the guessing game out of it, they even have fonts paired as “packs” (a nice mix of a serif with a non-serif font) from which you can select. For those that aren’t familiar with how typography should work as in, mixing types and giving them hierarchy, these pre-determined packs are great options.

The same thing goes with colors. You can use the pre-determined colors from the template or select from several pre-combined color palettes. Again, these are for those whose color selection really isn’t a strong design skill. And for those that already have brand colors established, you can plug in HEX values and establish those as your color palette.

Examples of fonts and color palettes in Squarespace

Examples of fonts, color palette and color themes in Squarespace.

LAYOUT

When it comes to laying out your design, Squarespace makes it really easy. You can click “Add Section” above or below any existing section and then choose from a very large variety of options. You can add pre-designed layouts for portfolios, testimonials, contact information, people on your team, etc. OR, you could select “Blank Section” and create your own. I normally select this option so that I have more control over the layout and the design aesthetic. 

Don’t want to build it yourself step by step? You can build with Squarespace’s AI feature. I’ve never used it but it’s a great option to have for those that might feel intimidated with designing on their own.

OTHER FEATURES

But what I really like about Squarespace is the easy way I can use CSS code to make pages or sections look unique. I am not a coder by any means. I understand the very basics. For example, I know that all commands, for lack of a better word, must start and end with brackets {}. I know that each line of command within the large command must have a semicolon to separate one from the other. And I also learned that if Squarespace won’t do what it needs to do because it doesn’t understand the importance of my command, all I have to do to let it know that it’s important is insert the command !important. But that’s the extent of my coding knowledge. Very, very basic.

So when I tell you it’s easy to code in Squarespace, it really is. I can Google just about anything I’m wanting Squarespace to do and I can pretty much find the answer. There’s a support system within Squarespace called Squarespace Circle where coders answer non-coders questions. Although you have to be a member to be able to ask a coding question, I find that Google will lead me to the answers posted within their “circle”, and that makes coding a website so much easier. If I were to take you on the backend of my website, you’ll see if filled with code making my webpage a little bit unique in its layout.

Pullquote from blog for Squarespace

Another cool feature on Squarespace is that not only do you get to see what your webpage looks like on the desktop while you’re designing, you can also toggle it to see what it will look like in the mobile version as well. I have no idea if WordPress or Wix has these capabilities. They probably do, and I feel this is a very important feature to have. Because Squarespace is intuitive, it can lay it out almost perfectly in both formats. You do have to go in to the mobile version and do some minor adjustments but it’s really very easy to do. And here is where that CSS coding may come in handy. For example, when you start laying out your h1 headings on each page, they might look great on desktop. But if your heading is long on the desktop version, it’s naturally going to break it up into two or three lines in the mobile version. The spacing between each line of text might be a little tight in the mobile version so you’ll need that CSS code to give it some breathing room. And this is a feature that I love having.

TECHNICAL STUFF

On the technical side, Squarespace comes with built-in security, robust SEO tools and comprehensive analytics. Let’s break these items down a little bit more. For the built-in security, you want your webpage to come with an SSL certification built in. This allows for your website to be secure and trusted. This is especially true if you’re building an e-commerce website. You want visitors to your site to feel safe in purchasing items from your page.  

SEO (search engine optimization) is a topic that deserves a blog post of its own but in layman’s terms, you want to be found on the web. People aren’t going to find you if you’re just there. You have to let them know you’re there and for that, you have to build in SEO on the backend. Squarespace has the tools there to let you do this quite easily.

And lastly, you might want to track who’s visiting your website and how they are getting there. Are they getting there organically? Through social media? Through an ad? Squarespace analytics will show you the traffic to your site so that you know what’s working and what’s driving visitors there. This, in turn, is so that you can keep doing more of whatever is working and tweaking whatever is not.

There are a lot of other technical design aspects that goes into building a webpage correctly and I’ll share those a little later, but overall, Squarespace really works for me. You don’t need plug-ins to make it work. Unless there is a very specific feature you are wanting to have and in that case, then yes, you’ll need that plug-in. But even so, the plug-ins are very easy to install and work very well on the Squarespace platform.

This post is in no way sponsored. I’m just sharing why I love Squarespace so much.

Next
Next

The Correct Use of Typography in Design Projects