INTRODUCTION
The following article is neither endorsed nor sponsored by Squarespace. It's more of a tech review as well as a guide on how the website is structured behind the scenes.
Midway Ventures’ new website is built with the Squarespace Developer Platform. The Squarespace Developer Platform is a relatively new technology compared to more longstanding solutions like Wordpress.
I'm a huge fan of Squarespace. Their Content Management System (CMS) is in my opinion much sleeker, user-friendly, and faster than Wordpress. I believe its the best enterprise-level CMS solution for its price.
Why Squarespace?
- Squarespace's CMS (or what you may refer to as the "admin panel") is one of the best technologies for allowing your client to make changes to a website without needing to know how to code.
- Midway was already using it, and had a paid subscription.
What is the 'developer platform'?
Put simply, the developer platform is a way for website developers to edit Squarespace templates or make a fully custom template powered by Squarespace. The Squarespace Developer Platform has been around since 2013, but there is now an active community on its forums and improved documentation to help kickstart your project.
HOW IT WORKS
Like all websites, Squarespace hosts its files on a web server. In this case, website files are hosted on Github. You can see your git repository by navigating to "Settings>Advanced>Developer Mode" in the admin panel, and turning Developer Mode on.
For a more in-depth tutorial, you can look at the Quick Start Guide from Squarespace, but the gist of it is that you use "git clone [repository]" to download a copy of the files of your website onto your computer. Now, we can edit the website from anywhere and update the live site using git's standard add, commit, and push commands.
The site is structured into a few separate folders. In fact, if you're on Google Chrome, you can right-click, click "Inspect", and click on "Sources" on the top navigation bar to see some of these folders live. These folders are:
- Assets (image files, fonts, etc.)
- Blocks (a chunk of code we can insert anywhere into our website: i.e. Header/Footer/Navigation)
- Collections (a type of Squarespace Page we can implement: i.e. Blog, Events, Folders, Gallery, Homepage (Index), etc.)
- Scripts (all scripts on your website, usually written in Javascript)
- Styles (all styles on your website, usually written in either LESS or vanilla CSS)
- Pages (any static HTML pages that cannot be edited using Squarespace)
- (a couple of files ending in .region) (HTML pages that can be edited using Squarespace)
- template.conf (a configuration file that contains what collections, .region files, and navigation you're using)
- .git (usually hidden -- enables you to interact with GitHub)
Without going into the nitty gritty details, the site basically works like this: you can set up your template.conf file to include any .region files you use. These ".region" files work exactly like standard HTML files, but are designed to be editable using Squarespace. This is because they include the ability to use JSON-T.
JSON-T is a templating language, and the best way I can describe it is that it's "plug-and-play editable". Say you are writing the title of your webpage in code. You might usually write something like this in a .html file:
But let's say you want to edit it to read "Hello UChicago". Usually you'd have to open up the .html file, change the words, save it, and push the changes to Git. With JSON-T, instead of having to go into your code and manually edit the words "HELLO WORLD", you instead write something like:
You only have to write this in the code once and then you can edit it to read "Hello UChicago" from within Squarespace! This requires no coding knowledge for your client, which makes site management and updating infinitely easier. It's especially worthwhile if your client plans to make very minor changes frequently to the website. While this example is a bit trivial, the principle applies to larger and more complex structures on your website, such as galleries, blogs, events, etc.
LIMITATIONS
Lack of Developer Support
All that being said, there are some downsides to using Squarespace's Developer Platform. The most significant downside is customer support. Because you are able to tweak nearly every aspect of your website, should you encounter a problem while coding, Squarespace will not offer customer support. That's fair in my opinion as it would take their support team forever to help you with minor issues that are typically no fault of their product. You can post to their community forums, but your question may well go unanswered. Since your site is often thousands of lines of code, if you experience a site-wide issue, even communities like Stack Overflow may not be able to help. It's kind of like the Wild West because the tech and community is so nascent, so just be aware of the risks you run.
Limited Documentation
The Developer Docs that Squarespace offers take maybe a day or two to go through, and are well worth your time to get acquainted with the platform. However once I actually got to coding our website, I found the documentation to be sparse in places and overall in need of greater detail to implement some of the more complex features Squarespace offers. The Beginner Tutorial walks you through developing a very basic template, but then leaves you to figure out the rest on your own.
Hidden Code
Squarespace does not allow you access to their universal scripts and stylesheets (100k+ lines of code), which it injects into your site in the header/footer (if you give it that option). Again, this is perfectly fair in my opinion, but it can create some subversive bugs during development because some of the features on your site are actually being influenced by a large codebase you never wrote. If you're an experienced developer capable of using jQuery and understanding injected Javascript and CSS, this shouldn't pose to much of an issue.
Difficult to Adjust Defaults
Some of the Squarespace defaults (i.e. the gallery carousel, blog summary grid, etc.) ship with a very bare structure, and can be difficult to work with. For example, a 4x4 gallery grid will not resize by default on mobile devices, resulting in very small pictures that look silly on your iOS or Android device. Again, you'll have to use a combination of Javascript, jQuery, and CSS to get the default structures to appear the way you want them to. If you're not careful to write clean code, you can slow your site down significantly.
CONCLUSION AND WHY IT MATTERS
Advanced Content Management Systems that are user-friendly like Squarespace and Wordpress drastically reduce the cost for website maintenance because you don't have to know how to code to make content edits to the site (like publishing blog articles, changing the background-color of a page, adding store merchandise to e-commerce sites, scheduling events, posting photos, adding to galleries, etc.). In addition, Squarespace does a ton of really important behind the scenes work to make your site as user-friendly as possible. This includes compiling and compressing your site's stylesheets and scripts to help it load faster. Since load-time can be important for SEO, it's a nice bonus. However, this has traditionally come with a tradeoff: you have to use ready-made templates that make your site look either unprofessional, or like every other site on the web.
Advanced Content Management Systems that are user-friendly like Squarespace and Wordpress drastically reduce the cost for website maintenance because you don't have to know how to code to make content edits to the site. However, this has traditionally come with a tradeoff: you have to use ready-made templates that make your site look either unprofessional, or like every other site on the web.
Building on the Squarespace Developer Platform reduces that tradeoff by a substantial margin. You can have the comfort of making edits without needing to know how to code, while also creating a visually unique site. It's worth noting that if the primary goal for your website isn't to provide a unique experience for visitors, there's really no need to go this in-depth with your site. Overall, I personally think that for small to medium sized companies who need real estate on the web but can't afford to bring on full-time software/web development, the Squarespace Developer Platform is a great tool that will only get better as the community grows.