Is Your Squarespace Custom CSS Hurting or Helping Your Site?
A famous author named Sherrilyn Kenyon once said, “Just because you can doesn’t mean you should.” This quote can apply to a lot of scenarios in life, but especially in the coding and web design world.
Having now spent some years in the realm of Squarespace web design and development, I’ve learned that a lot of people - both web designers and DIY-ers alike - often want to know how to achieve certain effects with custom CSS, but in reality, what they want is not always what’s best for their websites’ user experience (UX). In fact, sometimes the effects they are hoping to add can be detrimental to UX, and ultimately conversion rates.
In this article, I will be outlining what I’ve coined the Three H’s of CSS: Helpful, Harmless, and Harmful. I hope these concepts help you in your coding/web design ventures as much as they have helped me.
What is user experience and how can CSS affect this?
User experience (UX) refers to the overall experience of a person using a product such as a website or computer application, especially in terms of how easy or pleasing it is to use. In terms of browsing a website, it’s how easily the user is able to navigate your main menu, find what they are looking for, and ultimately take an action (i.e. fill out a form or buy a product) on both desktop and mobile.
CSS provides developers a way to improve the look and function of bare bones HTML, which if left alone can look unappealing and can dissuade website users from staying on your site. That being said, there are also CSS modifications that can make your UX a bad experience if not written responsibly.
Exploring the 3 H’s of CSS
I’ve separated CSS modifications into three main categories that I’ve encountered over my years of writing CSS in terms of the user experience: Helpful, Harmless, and Harmful. You’ll soon discover that pretty much any CSS rule you can write will fall into one of these 3 categories. The Helpful and Harmless categories do not negatively affect UX. Harmful, as you’ve probably guessed, negatively affects UX.
Let’s take a deeper dive into these concepts:
1. Helpful
This refers to CSS rules that improve the user experience of a site, such as making text more visible against the background color, or adding a hover affect to a link that lets the user know they are hovering over a clickable item.
Below is an example of a CSS modification that improves the UX. It styles a link to look like a button with a sleek hover effect, so that the user immediately knows the text is a clickable link, and the user knows the button/link is being targeted when being hovered over.
2. Harmless
This refers to CSS rules that don’t necessarily improve the UX of your site, nor do they harm the UX of your site, but they simply look good or maybe they add to the overall cohesiveness of your branding. I typically call modifications of this type “eye candy.”
In the below example, changing the normally circular, small bullet points in a list to more colorful and bolder checkmarks is a harmless CSS modification that fits more with the color theme of the page. Or what I would call, eye candy.
3. Harmful
This refers to CSS rules that can be catastrophic to the UX of your website, including flashy animations that cause more of a distraction than anything else, font that is too small to read, text with poor color contrast with the background color, elements that hinder the user’s ability to easily find what they are looking for, and more.
Below is an example of a CSS modification that hurts the UX. The button rotation that occurs on hover is unnecessarily jarring to the user at a time when you do not want to distract them; you want them to click the take an action and click the button with no hindrances. Just because something looks cool, doesn’t mean it’s a good design decision, and believe me when I say you’d be surprised at how many businesses out there are being severely stunted by bad website design decisions.
Want to take a deeper dive into these 3 categories complete with detailed, real-life examples and explanations of each? You might enjoy enrolling in The Functional CSS Course, which teaches web designers and DIY-ers alike how to apply basic CSS rules to create functional and appealing websites without sacrificing the UX of your site.
How do I decide if my CSS modifications are helping or hurting my Website?
So now that we understand how CSS can help or hurt a website, how can we know if our own custom CSS is helping or hurting our site’s UX? Here are some important questions to ask yourself when considering this:
What purpose does this modification serve for the user (if any at all)?
Does this modification distract from the main goal of my site/page?
Does this modification hinder the user from taking a targeted action? For example, clicking a button, navigating your menu, or filling out a form.
Is this modification making me happy at the expense of my site’s UX?
