Latest / ThinkInsideTheSquare / 38: Cracking the Customization Code: How Javascript + CSS change Squarespace

Transcript

38: Cracking the Customization Code: How Javascript + CSS change Squarespace · ThinkInsideTheSquare

• 0:10
  Speaker 1: Every Squarespace website relies on two code languages to define how it looks and how it works.
• 0:16
  Speaker 1: In this episode of Think Inside the Square, we'll be talking about those languages CSS and JavaScript to explain why you need to know about both and why I focus only on customizing with CSS after two JavaScript disasters that I want to help you avoid.
• 0:31
  Speaker 1: Welcome to Think Inside the Square, a podcast full of tips and tricks to help you create a Squarespace website that you're proud of.
• 0:37
  Speaker 1: I'm your host, becca Harpene, squarespace expert and creator of InsideTheSquareco.
• 0:42
  Speaker 1: In this episode, we're cracking the code.
• 0:45
  Speaker 1: Okay, I had to start with a pun.
• 0:46
  Speaker 1: There was no stopping that.
• 0:47
  Speaker 1: What we're going to be talking about is CSS and JavaScript, two code languages that can help enhance Squarespace.
• 0:54
  Speaker 1: I'll explain how they work and why I add custom CSS to every single Squarespace website I create.
• 1:01
  Speaker 1: For a transcript of this episode, along with the links to any resources mentioned, visit insidethesquareco forward slash podcast.
• 1:08
  Speaker 1: The term Squarespace is a trademark of Squarespace Incorporated.
• 1:10
  Speaker 1: This content is not affiliated with Squarespace Incorporated.
• 1:14
  Speaker 1: Every Squarespace website relies on two code languages to define its appearance and its functionality.
• 1:20
  Speaker 1: These two languages that we'll focus on in this episode are JavaScript and CSS, which stands for Cascading Style Sheet.
• 1:27
  Speaker 1: Understanding their roles can unlock a whole new level of website customization options for you.
• 1:33
  Speaker 1: So let's delve a little deeper and explore how each code language contributes to the magic that is your Squarespace website.
• 1:41
  Speaker 1: Css is a crucial part of every Squarespace website.
• 1:42
  Speaker 1: Css is a crucial part of every Squarespace website.
• 1:44
  Speaker 1: It tells a computer browser how to style the content of your site what fonts to use, what colors things should be, the spacing between different elements these are all brought to life by CSS code.
• 1:56
  Speaker 1: Squarespace writes CSS for you based on the design settings that you picked Everything from your font menu and your color themes, the specific layouts for a page section.
• 2:06
  Speaker 1: Squarespace translates those design choices into the appropriate CSS code behind the scenes.
• 2:13
  Speaker 1: This is why Squarespace can brag about being a no-code program.
• 2:17
  Speaker 1: You don't need to know code to use it, but trust me, it helps.
• 2:22
  Speaker 1: We will get into that here in a minute.
• 2:24
  Speaker 1: First, I want to talk about the other important code language found inside Squarespace JavaScript.
• 2:29
  Speaker 1: While CSS focuses on visual presentation, javascript injects a dose of interactivity that brings your website to life.
• 2:38
  Speaker 1: Features like slideshows, pop-up forms, your mobile menu these are all powered by JavaScript.
• 2:45
  Speaker 1: Shows, pop-up forms, your mobile menu these are all powered by JavaScript.
• 2:48
  Speaker 1: Squarespace utilizes JavaScript strategically to create this smooth user experience on your website.
• 2:51
  Speaker 1: For instance, think about the way your navigation bar collapses on mobile devices, or how a lightbox image appears when you click on the image.
• 3:00
  Speaker 1: These are examples of JavaScript functionality that seamlessly integrated into your Squarespace website without you having to code a thing.
• 3:08
  Speaker 1: In essence, javascript is like the engine that powers those interactive elements of your website, while CSS is the stylist, ensuring that everything looks visually appealing.
• 3:19
  Speaker 1: The short version, css is how it looks, javascript is how it works.
• 3:24
  Speaker 1: Okay, now that you get the general concept, I want to talk about the world of JavaScript plugins and explore why, while tempting, they might not always be the best fit for a Squarespace website.
• 3:36
  Speaker 1: While JavaScript offers exciting possibilities for interactivity, it's really important to understand these downsides, especially when thinking about installing third-party JavaScript plugins for your Squarespace website, something that Squarespace didn't make.
• 3:51
  Speaker 1: It's made by someone else.
• 3:52
  Speaker 1: Here are three reasons why I think you should be a little bit cautious before you consider adding a JavaScript plugin to your Squarespace website.
• 4:01
  Speaker 1: Squarespace itself is a finely tuned platform that's designed to work in a specific way, and if you introduce a JavaScript plugin that creates a function Squarespace isn't built to handle, it can disrupt another function that's already there.
• 4:16
  Speaker 1: This will come about in the form of unexpected glitches or malfunctions.
• 4:20
  Speaker 1: Imagine you have a gorgeous slideshow that you've meticulously crafted, but it turns out that the way that slideshow functions is built off of a JavaScript code that also changes something in your store.
• 4:32
  Speaker 1: And maybe you added a plugin for a slideshow in your store and all of a sudden you broke the slideshow on another page.
• 4:39
  Speaker 1: That can happen when you add a JavaScript plugin that wasn't created by Squarespace.
• 4:44
  Speaker 1: You add a plugin from an external developer and it might break something that's already there.
• 4:50
  Speaker 1: Another potential issue is the external server problem.
• 4:53
  Speaker 1: Stick with me on this one.
• 4:54
  Speaker 1: Some JavaScript codes are client side JavaScript.
• 4:58
  Speaker 1: When you visit a web page that contains client side JavaScript code, your web browser downloads that JavaScript code along with the rest of your site, the HTML and the CSS files that make up the whole page.
• 5:10
  Speaker 1: Once all that is downloaded, the browser will then execute that JavaScript code locally on your computer or device.
• 5:16
  Speaker 1: For complicated tasks that can't be time-consuming.
• 5:20
  Speaker 1: So many JavaScript plugins rely on external servers to function.
• 5:24
  Speaker 1: This means that when a visitor interacts with your website element powered by that plugin, their device functions first needs to communicate with the plugin server and then back to your Squarespace site.
• 5:35
  Speaker 1: This extra step can also create lag, especially if the plugin server is overloaded or even geographically distant, and in today's fast-paced online world, even a slight delay in your website loading or functioning can negatively impact your visitors' experience and potentially lead them to jump out of your website before they even see your amazing content.
• 5:58
  Speaker 1: Then there's the update dilemma.
• 6:00
  Speaker 1: Squarespace is constantly evolving, rolling out new features and functionalities to keep its platform at the forefront of website design, and unfortunately, this kind of forward momentum can sometimes leave JavaScript plugins behind.
• 6:14
  Speaker 1: If a plugin relies on a specific aspect of Squarespace code that gets updated, the plugin might cease to function altogether.
• 6:22
  Speaker 1: This can leave you scrambling to find a replacement or face the prospect of a broken website element a very frustrating situation that I want to help you avoid.
• 6:31
  Speaker 1: This happened to me not once, but twice, and the second time was one high-ticket client website of mine.
• 6:38
  Speaker 1: It was so stressful and it took me days to update.
• 6:42
  Speaker 1: I ended up having to create my own JavaScript plugin to fix the problem, and that client did not renew their contract with me, but I honestly, I wasn't surprised in the slightest.
• 6:52
  Speaker 1: That being said, you don't have to swear off JavaScript entirely.
• 6:56
  Speaker 1: I get it.
• 6:57
  Speaker 1: Sometimes there is just one cool feature that Squarespace is missing and you need just a little bit of code to make your website perfect for your specific needs.
• 7:06
  Speaker 1: And if you run into that situation, there are two established JavaScript developers that I trust, that I recommend SQSP themes and Square websites.
• 7:17
  Speaker 1: I trust both of these developers because they have a proven track record of creating high quality plugins that are regularly updated.
• 7:25
  Speaker 1: So when Squarespace makes a change, they are on it.
• 7:27
  Speaker 1: You might experience like a slight delay as they adapt their plugins to new Squarespace updates, but you can be confident that their solutions are built with compatibility and functionality in mind.
• 7:38
  Speaker 1: And again, I'm here to vouch for them.
• 7:40
  Speaker 1: I've used both SQSP themes and Square websites for years and I will continue to recommend them for specific functions that Squarespace isn't capable of.
• 7:50
  Speaker 1: I'll link to both of their main websites in the show notes for this episode at insidethesquareco forward slash podcast.
• 7:57
  Speaker 1: Again, that's SQSP themes and Square websites.
• 8:01
  Speaker 1: To be clear, this isn't the company Square creating website plugins.
• 8:05
  Speaker 1: This is literally Square websites is the name of this business that I've gotten JavaScript plugins from before that I truly trust.
• 8:11
  Speaker 1: With all of that info in mind, I do have to say that I've only used JavaScript plugins on about 10% of my website projects over the last decade, but I have added custom CSS to every single Squarespace website I've created.
• 8:26
  Speaker 1: 100% of my projects have had custom CSS added.
• 8:30
  Speaker 1: Javascript is how it works.
• 8:38
  Speaker 1: Css is how it looks.
• 8:39
  Speaker 1: I try to rely on the core features already available in Squarespace, including the design options, and then I'll sprinkle in some custom CSS to make every website I build truly unique.
• 8:47
  Speaker 1: To be super duper clear here you don't have to use CSS to make a Squarespace website look good.
• 8:53
  Speaker 1: I only use CSS to do something the design menu can't do.
• 8:57
  Speaker 1: For a lot of basic Squarespace websites, you don't need it.
• 9:01
  Speaker 1: The font menu and color themes we've got a lot of options to work with.
• 9:04
  Speaker 1: But when someone hires me to create a Squarespace website for them, they don't want someone who will replace stock photos with their own images and replace filler text with the text provided Anyone can do that.
• 9:15
  Speaker 1: That's copy and paste, that's click and you're done.
• 9:18
  Speaker 1: When someone pays me to build them a website, it's because they want something better than good.
• 9:23
  Speaker 1: They want a site that isn't an updated template.
• 9:26
  Speaker 1: They want me to translate their brand into a curated and unique online experience.
• 9:31
  Speaker 1: There is no way that I would ever sell a website to someone that wasn't at least a little bit customized to what they need.
• 9:38
  Speaker 1: The developers at Squarespace they know this.
• 9:41
  Speaker 1: They have given us the ability to add custom code to the main CSS file that was created based on our design choices.
• 9:48
  Speaker 1: Not every website builder lets you do this, and I am so grateful that Squarespace does lets you do this, and I am so grateful that Squarespace does.
• 9:58
  Speaker 1: Squarespace templates provide a solid foundation, but it's CSS that unlocks the true potential for creating a website that's one of a kind.
• 10:03
  Speaker 1: By tweaking fonts, colors, layouts and even adding subtle animations with custom CSS, you can transform a template into a website that reflects a very unique style and personality, into a website that reflects a very unique style and personality.
• 10:15
  Speaker 1: The beauty of CSS is that it's honestly easy to create.
• 10:19
  Speaker 1: At its core, a CSS code is a statement of three specific things translated into a language that the computer browser will understand.
• 10:27
  Speaker 1: All CSS codes will say is this is the content I want to change.
• 10:31
  Speaker 1: This is the part of the content that I want to change and this is what I'm changing it to.
• 10:37
  Speaker 1: That's three things.
• 10:38
  Speaker 1: If you want a specific button to be blue.
• 10:40
  Speaker 1: You would say this is the button.
• 10:42
  Speaker 1: Take its background, make it blue.
• 10:44
  Speaker 1: That's literally it, and that's why it was so easy for me, a college dropout working odd jobs like at a tattoo shop and a gas station, to learn to write my own custom code.
• 10:55
  Speaker 1: I started making small tweaks like adjusting font sizes or customizing button styles on a hover Simple codes that I still use to this day.
• 11:04
  Speaker 1: If you want to give this a try, I have some resources to help because, honestly, it's easy and I can walk you through it.
• 11:11
  Speaker 1: I'm confident you can use custom code on Squarespace.
• 11:13
  Speaker 1: Check out the show notes for this episode at insidethesquareco forward slash podcast.
• 11:18
  Speaker 1: But if you really want to hit the ground running, you're in for a treat.
• 11:21
  Speaker 1: I collected the five codes that I've noticed myself use over and over again, the five custom codes I use on every Squarespace website I create, and I put them all into a PDF for you insidethesqu.
• 11:34
  Speaker 1: Squareco forward slash five.
• 11:36
  Speaker 1: That's the number five spelled out F-I-V-E.
• 11:38
  Speaker 1: Here's a little sneak peek of what's in that PDF.
• 11:41
  Speaker 1: These five codes will help you customize your main menu, including your dropdown.
• 11:46
  Speaker 1: You'll also get a code to customize the super generic and boring cookie alert.
• 11:50
  Speaker 1: Add a hover effect to a form button and create a custom landing page.
• 11:55
  Speaker 1: Again, you can get a copy of these codes and tips on how to use them and make them uniquely yours at insidethesquareco forward slash five.
• 12:03
  Speaker 1: I am definitely a fan of custom CSS and I want to teach any and every Squarespace-er out there just how awesome it is to use, but I will save that rant for another episode.
• 12:15
  Speaker 1: We covered a lot today, so let's do a quick recap.
• 12:17
  Speaker 1: In today's information-packed episode, we explored the fascinating world of code and how it shapes your Squarespace website.
• 12:24
  Speaker 1: We delved into the roles of JavaScript and CSS, uncovering their unique strengths and considerations.
• 12:30
  Speaker 1: Javascript is a powerful code language that injects interactivity into websites.
• 12:36
  Speaker 1: Think animations, pop-up forms, fancy slideshows, your mobile menu.
• 12:44
  Speaker 1: However, javascript plugins for Squarespace can be a double-edged sword.
• 12:46
  Speaker 1: While they offer exciting functionality, they can also disrupt Squarespace's internal workings.
• 12:51
  Speaker 1: They can introduce LAN from external servers and potentially break, if Squarespace updates, its code database.
• 12:57
  Speaker 1: However, squarespace can't do everything that we need it to do, so when you do have to add a little bit of JavaScript, I have two developers that I personally recommend and I'll link to them in the show notes at insidethesquareco forward slash podcast, the other code language we talked about today was CSS, cascading Style Sheet.
• 13:16
  Speaker 1: It's the language that controls the visual appearance of your site.
• 13:19
  Speaker 1: Css is the style of your site what fonts are there, what color things should be, what padding needs to be associated with what button?
• 13:27
  Speaker 1: Every choice you make in the design menus built into Squarespace are translated to CSS behind the scenes, but we as Squarespace-ers can add custom CSS to customize our websites even more.
• 13:39
  Speaker 1: Squarespace offers a fantastic foundation, but CSS empowers you to truly make it your own.
• 13:46
  Speaker 1: So if you're ready to take your website from good to great, start with the five codes I add to every Squarespace website that I create.
• 13:53
  Speaker 1: I put them all in a free guide sprinkled with some pro tips that I picked up over the.
• 13:56
  Speaker 1: Them all in a free guide sprinkled with some pro tips that I picked up over the last decade as a self-taught designer.
• 13:59
  Speaker 1: There's a link in the show notes or you can head on over to insidethesquareco forward slash five.
• 14:04
  Speaker 1: Thank you so much for listening to this episode of Think Inside the Square.
• 14:07
  Speaker 1: I definitely talk a little bit faster when I'm excited to share some of my code secrets with you, so I appreciate you going all the way to the end of this episode.
• 14:15
  Speaker 1: I hope you're inspired and excited about the potential of your Squarespace website.
• 14:20
  Speaker 1: Squarespace is my platform of choice and I love sharing ideas and information on how to make the most out of it.
• 14:26
  Speaker 1: If you enjoyed this episode and want to learn more about how to make Squarespace uniquely yours, be sure to subscribe to this podcast, wherever you happen to be listening to this episode.
• 14:35
  Speaker 1: Thanks again for joining me and, most importantly, have fun with your Squarespace website.
• 14:40
  Speaker 1: Bye for now.