--Web--Blue.svg)
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.
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.
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.
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).
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 "></div>
id="home__hero-header"
class="util__text-red"
columns="12"
lock-layout="true" />
id="home__hero-description"
class="util__text-white"
columns="12"
lock-layout="true" />
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"></squarespace:query>
{.repeated section items}
<a class="projects__tile" data-item-id="{id}" href="{fullUrl}" title="{title}"></a>
<div class="projects__tile-image"></div>
{.main-image?}
<img {@|image-meta}="">
{.end}
<div class="projects__tile-text"></div>
<h3></h3>
<strong data-content-field="title"></strong>
{title}
— {excerpt}
<span>View Project</span>
{.end}
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.
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.
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.
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).
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.
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.
This is benke (pronounced ben•kuh). He's a one year old rescue. He's afraid of big bags and loves cuddling on the couch.
- Travis Meyer
Kuri acts more like a dog than a cat. She once found her way into a drywall resulting in us having to cut through our wall to get her out. She has lived in several countries, and 9 different houses/apartments with me.
- Per Kvanbeck
At the first glance he may appear a tad dopey but once you get to know him you see that his charm is that he is a love-able lug that just wants to be a part of the pack and please his humans. Getting up there in years, you will find him asleep in whatever room the rest of his humans are in.
- Leana Stone
This pair of energetic pups love to bark at seemingly nothing. With kids around and a constant need to eat anything that hits the floor, you will often find Lou with food somewhere in his fur or Winnie with the occasional popcorn bag on her head.
- Joe De Jarnett
Here’s my cool, calm, and collected bunch. This is Nori (a Norfolk Island Pine – left), Dee (a Bird of Paradise – back), and Janet (a Dracaena Janet Craig – right). Despite their tropical roots, they seem to have adjusted nicely to their Minnesota home.
- Kelsey Schwalbach
Cabela enjoys long walks in the park, hunting for pheasants, grouse and crumbs off the floor. She can nap just about anywhere but she is a champion dock jumper. Flying through the air at the ol’ age of 10 just makes makes her feel like a young pup!
- Sarah Bruss
This is Groucho, my adopted stray cat (we checked for previous families), he started following me while I was walking our dog. We fed him for a winter, a summer, and another winter, and only then he finally decided to let us bring him inside. This is a particularly glorious BLEP he gifted me that lasted several minutes.
- David Middlecamp
This is Jerry. I mean what else can I say? We love him and are glad he is fairing well, even while at our Foundry office.
- Foundry Office
Hunter was found alone in the middle of a freeway when she was 8 weeks old. She’s a year and half old german shepherd/chow mix. She enjoys attention more than anything, from dogs, cats, people, you name it, she wants to be your friend. Her favorite toys are extra small...preferably cat toys.
- Mika Albornoz
Meet my dog. She makes no effort to help around the house, and gets depressed on car rides. Her Olympic level shedding is world renowned. When she’s not trying to get me to play instead of work, she sleeps. And sleeps. Her hobbies include barking at people we pass on walks, removing her toys from the bin and evenly distributing around my office, and tricking me into feeding her dinner twice.
- Robert Nelson
As much as I hate to admit it, he runs the house. He even has his own bedroom and sleeps all day on his queen-sized bed. When he’s awake, he wrestles with his brother, but it’s hard to tell whether or not he’s having fun. He also yells at his humans constantly for food when his bowl is clearly full. He won’t eat if he even sees a speck at the bottom of the bowl. You know, cats.
- Ashley Kim
Together with Io and Callisto (Europa's cat siblings) they almost complete the set of Jupiter's four Galilean moons. We Just need Ganymede...
- Nils Hansen
When they’re not chasing each other in circles around the apartment, Oliver enjoys sitting on laps and Rachel enjoys biting feet. Rachel uses her extra thumb to get an exceptionally good grip to scratch furniture, while Oliver prefers to serenade us in the middle of the night with a variety of his greatest hits, including “Mrreeeeww” and “Brrrrwwoowww”.
- Claudio Rivera
This is Podrick. He’s a happy, smart, and stubborn corgi with a passion for blueberries (and anything that his grandma sneaks him, really). He prefers humans over dogs, but he’s pretty good when it comes to the ladies. In his free time, he enjoys destroying toys, harassing his brother, napping on the couch and borking at nonexistent sounds.
- Ashley Kim
No introduction required.
- Evan Kearney
This is Baymax. We have tried multiple times to grow our favorite herbs and have failed miserably... To our rescue is our new buddy, that helps us grow our herbs and vegetables. With Baymax’s help, we hope to have cilantro to add to our dinners!
- Andy Stone
A self-styled product therapist, Jason leads our talented team of product designers in uncovering digital solutions both obvious and unexpected. When he’s not sharing his latest discovery in the world of digital tools, you can find Jason working on the next theme song for Foundry with his band.
