The Art of Coding in Squarespace
Writing custom code can be challenging, but once mastered, it becomes nothing short of an artistic medium. Luckily, you don’t have to learn everything at once to get great results. Each project you take on is an opportunity to pick up and apply a few new techniques. Bit by bit, you can build a powerful toolkit that you can use to deliver more compelling, experiential, and distinctive websites for your clients.
Rache De Luna is a self-taught web designer and developer, and the founder of Squarestylist. She uses custom code to introduce vintage-inspired, handcrafted elements into her Squarespace designs, creating new, unexpected, and delightfully distinctive websites in the process. Through Squarestylist, Rache teaches others to do the same. Squarespace has been her website building platform of choice since 2015.
At Circle Day 2023 Rache offered guidance as well as striking, plug-and-play code examples that can set any designer, regardless of their skills and experience, on a path to more interesting and creative designs that will truly set them, and their clients' websites, apart.
Custom coding adds flexibility
Squarespace is built so that anyone can create a compelling website without learning a single line of code. Rache herself designed multiple professional sites for clients before using any custom code. Still, she found a gap between her creative vision and the ready-made tools and templates at her disposal. Coding promised to bridge that gap. With custom code, Rache could rethink and adapt existing templates, tools, blocks, and elements, shaping them into new and surprising experiences.
Circle Day: The Art of Coding in Squarespace by Rache De Luna, Squarestylist
Coding isn’t just useful for introducing stylistic changes. With knowledge and attention, designers can use code to elevate sites and nail quality benchmarks for accessibility, searchability, and ease of use. Rache notes that many non-coding designers might attempt to introduce a vertical text element, for example, by simply creating and inserting an image of the text. Unfortunately, images of text don’t work for search engines, screen readers, and other assistive technologies. By contrast, a designer with coding skills can modify text orientation, and they can achieve their design vision while maintaining the site’s accessibility.
You don’t need to learn it all
Instead of taking a coding course, Rache approached each past client project as an opportunity to learn and sharpen her skills. She’s confident that this piecemeal approach can work for other designers as well. And she doesn’t mean this figuratively. Rache keeps a written record of each custom code solution and technique so she can reference them for future projects, and recommends that other designers do the same. Not only is it a manageable way to steadily build your coding toolkit, it has design advantages as well.
Less is more
With custom code, more is not necessarily better. Rache’s designs are striking and distinctive, but all are the result of a judicious amount of customization. For each project, she recommends introducing no more than three distinctive custom elements or motifs to repeat throughout the site. Limiting yourself to a few unique elements isn’t just about learning to code in manageable chunks, it’s about putting the website experience first. Too many novel elements can create confusion and overwhelm visitors. In contrast, a few distinctive motifs repeated across multiple pages can leave site visitors with a strong branded experience that creates coherence rather than confusion. It’s also more manageable to build.
Circle Day: The Art of Coding in Squarespace by Rache De Luna, Squarestylist
Put website quality first
Whenever you introduce custom code to your site, Rache recommends asking yourself a few questions for quality control. Does the code slow down the site? Does it affect accessibility? Will it unintentionally affect other elements of the site? How does it respond to browser changes and device sizes? Finally, how will it impact the client’s ability to update their site?
By paying close attention to these dimensions, you can avoid the pitfalls of custom code, and in some cases, improve the overall quality of the site. Small tips can keep you on track. Using CSS over Javascript, where possible, can lead to faster performance. Testing your code across different devices and browsers, and scaling them up and down, can help catch browser problems. Adapting pre-existing templates, tools, blocks, and elements, rather than simply copying and pasting sections of code, can preserve some back-end control for your client if they ever need to make changes down the line.
Your client’s ability to maintain their website should be a primary consideration when inserting any code. Instead of posting a code block to change an element’s color, for example, work within the color theme to ensure that they will be able to change it later if needed.
Five great examples of custom code
Rache provided five examples of how to use custom code to alter Squarespace elements to stunning effect, including how to produce sideways text, how to add and rotate a scrolling block, how to change a scrolling block’s color, how to create a sticky image block, and how to create vertical line borders. These five code snippets are available for free on Squarestylist and can be copied directly for stunning results.
While mastering coding is an ongoing journey, it gives you an unparalleled level of flexibility to create unique and surprising designs. Thankfully, even a little coding knowledge can transform a website, making it more dynamic and striking. With code, you can rethink what templates, blocks, and elements can be and do with minor modifications, creating distinctive designs that help you and your clients to stand apart.
Special thanks to Rache De Luna for sharing her expertise at Circle Day 2023. Visit the Circle blog for more session highlights.
Want more?
Check out Squarespace Circle, Squarespace’s program for professional designers. Along with exclusive content, discounts, and other perks, Circle brings professionals together from all across the globe to exchange advice while connecting with new clients and collaborators.
