Why We Custom Code Every Squarespace Website
What custom code is, why we swear by it, and what it can do for your website!
First of All, What is Squarespace?
If you’re not familiar with Squarespace, it’s a website building and hosting company that provides a website building software service with a user-friendly (aka dummy-proof) drag-and-drop system for creating websites. It gives people who have no experience with website development the ability to build a stunning modern website using its simplified design system.
The Number One Reason We Build on Squarespace
There are a handful of hugely important reasons we choose Squarespace, and you can read all about it in our article, Why We Design Websites With Squarespace. But this is about the number one reason we choose Squarespace, and that is to be sure every site we create is completely accessible for the owner managing it. This means that once we complete a website for a client, they can conveniently edit and update the site on their own without any trouble, and without needing to hire a designer or developer*
*We provide personalized instructions and video tutorials that help clients get to know the Squarespace interface so they can get past the initial learning curve safely.
Customizing With Code
Another huge bonus with Squarespace is that you can go beyond their design system and add code to completely customize it. We're talking wild animations, scrolling features, hover effects, custom fonts, moving graphics, out-of-the-ordinary navigation menus with pop-out folders, and so much more. It has very few limitations.
Is Code Necessary?
Technically, no. But we HIGHLY recommend the extra customizations.
Squarespace is widely used and by using their templates without code, your website could end up looking a lot like all the others. You want your website to stand out. You want your website to wow people. Every extra customization makes it that much more impressive.
Even the most subtle codes, such as altering the sizing or alignment of elements, can make a website go from obviously DIY to outstanding and absolutely professional.
The Kinds of Code
So, what kind of code do we add? Mostly CSS (cascading style sheets), but also some HTML (or HyperText Markup Language), and a little JavaScript for some those extra special features.
What Code Can Do
In short, custom code allows website designers to get around limitations within the Squarespace building platform. For example, we can utilize CSS to change the alignment, sizing, colours, and even animation of any fonts, buttons, backgrounds, or blocks within the site. CSS can be used to use gradient colours, align graphics to elements, position sections size-by-side, or make some sections stay still while others keep scrolling! HTML may be typed into code blocks to create links that scroll the visitor to various sections of a page. JavaScript can create totally unique navigation menus, add pop-up pages to buttons, manipulate scrolling behaviour, and so much more.
The customizations and features made capable by code are so vast I couldn't begin to mention them all.
To get an idea of what our code can do, check out some of the past website projects we've created.
The Brewery & the Beast website utilizes code for the drop-down folder-style mega menu navigation as well as the hover effects on the links and buttons
Cowgirl Grammar's website utilizes code to implement a side column that scrolls separately from the rest of the page. We also coded in a fun typewriter text feature.
The Crudite & Co. website has custom-coded graphics in the navigation bar that animate upon hover. We also created a changing image feature when hovering over each of their product images.
Here you can see Pinantan Lake Resort’s website with custom-coded horizontal gallery slideshows, navigation hover effects, as well as animated flying loon graphics.
