5 Mistakes to Avoid When Adding Code To Your Squarespace Website
How many of you have seen ads saying that you don't need code to build a beautiful Squarespace Website? You thought...
"Perfect! I can design my own website and I don't even know how to code."
So, you spent countless hours working away at your website, only to realise it looks just like the template. Every time, you tried to customize a little further you hit a wall and the only way over was a snippet of code.
So, you then spend countless more hours researching bits of code, copy and pasting different snippets onto your site, and posting in multiple forums for help.
Sound familiar?
You, my friend, are not alone! Copy and paste code snippets are a great way to push the boundaries of your Squarespace Website! However, code can be a fickle beast and if you are not careful you can end up with a bunch of broken codes that don’t play nice together.
In this video, I am going to walk you through 5 mistakes to avoid when adding code to your Squarespace Website.
1. Pasting the Code in Any Order
The most common code you will add to your site is CSS (Cascading Style Sheets). As the name suggests, this code reads top to bottom. So if you add code to change a button blue, then further down add code to change the button green, the button will be green. This causes a few problems.
You are telling the browser twice the amount of information, which can slow down you site.
If you forget that you added the second bit of code, you could spend lots of time trying to edit the first bit of code without any success.
So as you add code to your site, be careful to keep it organized. This will help you find any code you wish to change later on and ensure that you don’t have unnecessary duplicates.
2. Not Adding Comments to Your Code
Comments are parts of the code that the browser does not interpret. In other words, it is a way for you to add notes to the code that the browser understands is for you. This is a great way to keep your work organised. Plus, as your code grows it can be hard to remember what each code snippet is for. Comments are the best way to keep track so that you know what each code snippet does and what part of your website it affects.
3. Not Being Selective of the Code You Use
It can be tempting when you run into a design snag to immediately look for a code snippet. However, there are lots of creative ways to use the Squarespace Editor. Before you go searching, make sure that the effect you are trying to create does in fact require additional code.
This is especially true for images. A lot of the layering effects, borders, and shapes are actually done by a creative use of background images. The exception to this rule is text. I would not recommend using an image to display headings or other text. Not only will this hurt your Search Engine Optimization but it will also make it hard for your site to be mobile-friendly.
4. Duplicating Code
I mentioned this briefly above, but having duplicates in your code can slow down your Squarespace Website. There are two common duplicates that you should be aware of.
Media Queries
A lot of businesses use code to make their Squarespace Website more mobile friendly. However, make sure that you do not add a media query for every mobile code you want to add. The best way to do this is to add one media query and then place all your mobile code between its brackets.
@media only screen and (max-width:640px) { PLACE CODE HERE }
Multiple Jquery Libraries
JQuery is a Library in Javascript that a lot of coders use when creating Squarespace Plugins. If you have followed all the correct steps for installing your plugin and it is still not working, it could be because you have added multiple JQuery Libraries to your website.
JQuery is constantly updating, so it is highly possible that different plugins or code snippets use different versions of the library. If you add more than one version to your site it could cause a conflict between the plugins and one or more of your plugins could stop working.
This is a bit of a tricky situation. First, check your code for one or more lines of code that look like the following
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
If you have more than one, comment it out and see if your plugins start working. If not, comment out the other one. If they are still not working, it could be that your plugins require different versions of the library to work. At this point, I would contact the plugin or code snippet developer and ask for assistance.
5. Not “Spring Cleaning”
Every year, I set aside time in my business to go through my website and do some “Spring Cleaning”. This means that I go through all of my pages, delete the ones that I am no longer using, update and refresh the ones I am, and make sure that everything is in good working order.
This also includes combing through all of the code on my website and deleting any code snippets that I no longer need. This is another reason that comments are soooo helpful in your code!!
Conclusion
There you have it! The 5 mistakes to avoid when adding code snippets to your Squarespace Website! My hope is that this will help prevent some errors from popping up in your code so that copy and pasting code snippets becomes just a little bit easier.
