When we decided it was time to build a public site for our agency, of course our first thought was to pair a highly designed front end with a cutting edge CMS on the backend. We're a custom design & development shop, after all. This was the perfect opportunity for us to show off our skills.
Over a few weeks, Nils designed a beautiful, responsive site to tell the Foundry story and showcase a number of case studies. After that, we spent a few months painstakingly customizing a Node-based CMS called Keystone. The idea was that Carolyn and Kurt would be able to quickly create new content, landing pages, and blog posts because the CMS is designed specifically for our needs.
It kind of worked. In the browser, everything looked exactly as Nils designed it. From the CMS, one could edit text and images with a few mouse clicks. I say "one" because the interface was decidedly developer-oriented. Carolyn and Kurt often had to hunt all over for the bits of data they wanted to edit. This isn't meant to suggest that Keystone is poorly designed. In fact, I find the structure of the CMS to be a breath of fresh air. But for the intended audience, it was a barrier to easy and confident usage.
Enter Squarespace
When Kurt joined Foundry in 2016, his first suggestion was to build out our public site on the Squarespace platform. After spending some time with the Squarespace developer tools, we demurred and eventually settled on Keystone. Turns out, Kurt was right. That's why he runs this place now.
Since we last looked at Squarespace, it seems its capabilities have grown substantially. Or else, the documentation has grown substantially. Whatever the case, porting from Keystone to Squarespace was a breeze and our content managers absolutely love using the Squarespace CMS.
But that's not all. It turns out that when you are a custom software shop, the last thing you want to do is manage your own custom software. Client needs always come first so critical Node and Keystone patches, bug fixes, and updates often went unapplied for weeks. The switch to Squarespace has alleviated the need to even think about the software powering our website.
That said, there were a number of gotchas that we had to overcome to truly make Squarespace work for our needs.
Configuring the Template
Before enabling developer mode for your Squarespace site, be sure to install the Base Template. This template strips the vast majority of styles and components found in most other Squarespace themes. It's tempting to start building from an existing template that is close to your design but based on our experience, it's not worth the hassle of trying to tear out all the unneeded code. After that, you're ready to dive into the development platform.
Squarespace is very generous to developers. Once you enable Developer Mode for your website, you'll gain unfettered access to the entire Squarespace platform. In other words, it is not necessary to pay for a Squarespace account in order to start creating something. Public access to the site will be hidden behind a password, but that's just fine while you are building out your site.
Configuring the Dev Environment
Once Developer Mode is enabled, you can pull down the theme files using Git. To run the site locally, you will need the Squarespace Dev Server. To simplify the local development process further, it's a good idea to use something like Browsersync and parallelshell to live reload as you make changes to your code. Check out our repository for configuration details.
Keep in mind that this is not a true local development environment. All the content is still sourced from the Squarespace CMS. So all content changes must be made via the Squarespace website. There are also a few select areas where local changes are not reflected unless you push the changes to Squarespace (I'm looking at you, collections) or restart the server (it only pulls down the content upon server startup so if there are content changes on Squarespace, you'll need to restart the server locally).
Structuring the Template Files
There are a few different pieces that come together to create pages on your Squarespace website. These are regions, blocks, and collections. We experimented with a variety of approaches for structuring our Squarespace template using these files before settling on the following.
In building the Foundry website, we chose to create a region file for each page on our website that isn't a collection. In other words, the home page has a region and the about page has a region and the contact page has a region and the product workshops page has a region. It is possible to use a single region file to control the design of all these pages, but the code becomes increasingly complex for each unique component on those respective pages. Given that we have only a few pages, it just made sense to treat them independently.
To further ensure that page content is presented exactly as designed, we liberally used Squarespace open block fields. By using open block fields, our content editors will see text styled exactly as designed when making changes in the CMS. So for something like our hero section on the homepage, we used code like this:
<div class="util__z-above-overlay text-container "> <squarespace:block-field id="home__hero-header" class="util__text-red" columns="12" lock-layout="true" /> <squarespace:block-field id="home__hero-description" class="util__text-white" columns="12" lock-layout="true" /> </div>
Though those pages have unique regions, all the pages on our website have a number of shared components. That's where blocks come in. Think of blocks as code partials that are used throughout the website. Blocks are content aware so you can use them for anything from navigational elements and footers to content cards, blog entries, and form elements. All of our regions include blocks for the menu, navigation and footer.
The last piece is collections. Use these for content that has both a list and detail view like your blog, case studies, and careers page. This allows your content managers to easily create new collection items directly from the Squarespace CMS. Collections are also easy to integrate onto other pages using custom Squarespace query tags. On our homepage, we have a simple query to display the two most recent case studies:
<squarespace:query collection="work" featured="true" limit="2"> {.repeated section items} <a class="projects__tile" data-item-id="{id}" href="{fullUrl}" title="{title}"> <div class="projects__tile-image"> {.main-image?} <img {@|image-meta} /> {.end} </div> <div class="projects__tile-text"> <h3> <strong data-content-field="title"> {title} </strong> — {excerpt} </h3> <span>View Project</span> </div> </a> {.end} </squarespace:query>
Making Squarespace Dance
Squarespace is very powerful but it doesn't do everything. There are a few places where we had to get creative in order to match the design.
Using SVG
Squarespace does not offer native support for uploading and using SVGs. Fortunately, they do provide an easy to use content block called Code. Just paste your SVG code into a Code block to render perfect vector graphics. Just be sure to uncheck Display Source.
Random Image Gallery
The photo gallery on our about page has always been a selection of eight random images from a large collection of photos that have been taken over the years. One of the neat things about Squarespace is that every page can be rendered in JSON by adding ?format=json-pretty to the URL. To create the random gallery, we added an unlisted gallery-type page to act as a repository for photos. We then wrote some custom Javascript to pull eight random photos into the about page using a basic XMLHttpRequest call to the unlisted gallery page.
Hosting Video
Squarespace does offer some support for placing videos in the background of a content block but it is severely limited. To gain complete control over how your video content is displayed, we strongly recommend setting up a AWS S3 bucket. All of our WEBM and MP4 files are hosted there for just a few cents a month (though if your site is immensely popular, it will obviously cost more).
Focal Point
Squarespace has a neat tool that allows you to set the focal point of an image that is set to display as background: cover; but you will need to add a special class to your container to take advantage of it. In fact, the image at the very top of this and other blog entries utilizes the focal point functionality. That magical class is content-fill. Just add it to your container and you're set.
Final Thoughts
It's been a few months since we made the switch and we couldn't be happier with Squarespace. We've seen improved uptime, improved search rankings, and improved moods from our development and content management staff. With just a little bit of creativity, you can make Squarespace do virtually anything that you can imagine.
Want to learn more about how we implemented our website? You can have a look at our Squarespace theme code over at Github.