48: Planning Your Pages: How to create a visual sitemap & why you should


  • [00:00:00] Music

    [00:00:07] I want you to imagine you're building a house. You wouldn't just pile bricks and beams together and hope for the best, right? You'd have a blueprint, a plan for where all the rooms go, how they connect, and how people will move around the space. Your website needs a blueprint too, and in this episode of Think Inside the Square, I'll teach you how to create one for Squarespace.

    [00:00:27] Welcome to Think Inside the Square, a podcast full of tips and tricks to help you create a website that you're proud of. I'm your host, Becca Harpain, Squarespace expert and creator of InsideTheSquare.co In this episode, I'm sharing my top tips for creating the structure of your website, a solid foundation that can scale and grow with the rest of your content.

    [00:00:44] For a transcript of this episode, along with the links to any resources mentioned, visit insidethesquare.co/podcast

    [00:00:51] term Squarespace is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc.

    [00:00:57] Website structure is the invisible framework that holds your entire Squarespace site together.

    [00:01:03] It's the organization behind the scenes, deciding which pages you'll have and how they're connected, and how users will navigate from one point to another. A good website structure isn't a rigid container. Think of it like a solid foundation that will support your content as it grows. A well organized website helps users easily find the information they're looking for because everything has a designated place.

    [00:01:26] We all know that frustrated website visitors do not convert into loyal customers or raving fans. Having this well established website structure will keep these visitors happy by making it intuitive and easy for them to navigate your website. They'll find what they need quickly, which means less bouncing away from your site and over to a competitor.

    [00:01:46] Now this organization structure isn't just for people either. Search engines love websites that are well organized. A clear structure can help search engines understand what your website is about and how the different pages connect. This can actually help you boost your search engine rank and get your website seen by more people.

    [00:02:03] Definitely a double win. Now let's get down to business and actually plan these website pages. Just like building a house, we're going to need to draft up this blueprint. And your blueprint starts with a clear understanding of what you want to achieve with your website. There are five key questions I want you to answer when defining the structure of your site.

    [00:02:22] I'll include these in the show notes at insidethesquare.co/podcast

    [00:02:26] But let's go ahead and talk through these five questions together. First, I want you to identify who you're trying to reach. Imagine your ideal customer walking through the virtual front door of your website. Who is this person?

    [00:02:38] What are their needs and their immediate problems that you can help them with? Are you targeting small businesses, fitness enthusiasts, or maybe birdwatchers? Understanding your target audience is crucial because it's going to guide the entire website experience. Next, I want to know, what makes you special?

    [00:02:56] In a world overflowing with websites, what sets yours apart? What unique value proposition do you offer? Are you the baking queen with the most delicious cookie recipes or a dog trainer with a foolproof method for teaching tricks? The third question is what action do you want visitors to take? Do you want them to sign up for your email list, download your free guide, buy a product, book a consultation?

    [00:03:19] Having a clear call to action is vital for turning website visitors into leads or customers. Now you might want them to do all of these things and that's okay too. you If that's the case, I want you to pick a top two or three initial actions and focus on building out your site structure from there.

    [00:03:35] Most of my clients focus on promoting freebies or low cost products as their initial call to action. On to question four. What kind of content will resonate with your audience? Think blog posts, videos, tutorials, or maybe interactive quizzes. The content that you share should be valuable, informative, and engaging for your target audience.

    [00:03:56] And then we have question five. Are you selling anything? Physical products, digital downloads, maybe an online course or two? If you're an entrepreneur with something to sell, having a clear and user friendly e commerce section is going to be key. Now with those five key questions answered, let's talk about the essential pages that every Squarespace site should have.

    [00:04:16] Your homepage. This one's kind of obvious, but you literally need a homepage. When someone goes to your main domain, like InsideTheSquare. co, the page that they visit is your homepage. This is the first impression that you make on visitors who Google you because of a friend's recommendation, or see your sticker on someone's water bottle so they go to your website.

    [00:04:35] Your homepage should be clear, concise, and instantly tell users who you are, what you do, and more. And what makes you special. I also think that everyone should have an about page on their website. With so many AI generated sites out there and more added every single day, you need to make it easy for people to connect with you on a personal level.

    [00:04:54] Be real, be authentic. I want to know that there's a human on the other side of the screen, and a lot of other people who visit your website want that too. Now the third gotta have page is a contact page. Make it easy for visitors to reach out to you. Include your email address, phone number if you want to, and a clear contact form.

    [00:05:12] I consider those like the golden three, the essential pages that every website needs regardless of your niche. But depending upon your business or your website goals, there are some additional pages you can consider. I want you to consider having a blog on your website. It can be a content hub, a place to establish yourself as an expert, share valuable information, and really keep your visitors engaged.

    [00:05:33] I really do believe that every website needs a blog these days. I'm currently working on a project to redesign a website for a restaurant right now, and I'm making a blog for them. We're going to use this blog to highlight some of their signature dishes, some of their awards and events, and I'm even going to feature some of the stellar reviews that they've gotten online.

    [00:05:52] Every Squarespace site can and should have a blog. Now, for those of you that have a service based business, or maybe you're a creative, consider creating a portfolio, but a really in depth portfolio that showcases your work as case studies. Really highlight the expertise of what you do, what makes your services or your creative works unique, and feature content from people who really enjoyed your work.

    [00:06:14] Creating a portfolio of case studies could have a bigger impact than just a gallery of images. I also want you to consider creating an FAQ page. I think these are great for any website as well. You can answer frequently asked questions and use this page as a resource hub to send people to in a quick response to questions about your content or your services.

    [00:06:35] Anything you find yourself answering more than once, consider creating an FAQ page that you can direct people to. Now remember, these are just starting points. These specific pages that you're going to choose for your website will depend heavily upon your website goals and your target audience. But I just wanted to inspire you here to get a little bit more creative and really tailor the website structure to your unique needs.

    [00:06:56] Alright, now that we've answered those questions about your site and we've identified your essential website pages, The next thing I want you to do is create a visual representation of your website structure. You might have heard the term sitemap before. To be clear here, a sitemap is a list of all the pages on your site, and Squarespace automatically creates one for you.

    [00:07:19] But that's not exactly what I'm talking about here. I want you to create a visualization of the hierarchy of your pages. I want you to create a handmade sitemap, kind of like a sketch. This is going to be a clear picture of your website hierarchy. How pages connect and how users will navigate from one point to another.

    [00:07:39] Seeing it visually can really spark some creative ideas, help you identify potential gaps in the website structure, and help you make sure that there's a smooth user flow. Now, Squarespace does have some slight limitations when it comes to your website hierarchy, because you can only go three levels deep.

    [00:07:58] Here's what I mean by that. The show notes for this podcast episode are available at insidethesquare.co/podcast/48

    [00:08:06] That is the URL for the specific blog post, and that is as deep as a Squarespace website can go. You have the main domain, which is insidethesquare. co. Then you have the collection list page, which is forward slash podcast.

    [00:08:20] And then the podcast episode, which is the blog post forward slash 48. We can't say insidethesquare.co/podcast/48 / transcript that would be another layer and Squarespace just isn't capable of creating that at the time of recording this. Now, I think that's actually a good thing.

    [00:08:39] I think having a slightly shallow website structure can be really helpful to make sure you prioritize the most important content at the highest levels. And you're really going to see a great visual representation of that when you create your visual sitemap. When you have pages that have a similar theme that you want to group together because they have maybe the same importance or the same priority, you don't need to put them on a third level.

    [00:09:00] They can all be on a second level, but be included in a drop down folder. That's just one quick example here, but I realize I'm getting too far ahead of myself. Let me pull back a little bit and let's talk about how you actually create this hand drawn or handmade sitemap to help you plan for these limitations.

    [00:09:16] Here is how you can create a simple sitemap to visualize your website structure. There are plenty of tools available online that can help you create this visual representation of your sitemap. One that I've been using a lot these days is known as Figma. I'll link to it in the show notes. But the way that I used to draw sitemaps before I discovered Figma, and honestly, it's still one of my favorite ways to do it, is with good old fashioned Post it notes.

    [00:09:40] I want you to grab a stack of sticky notes and a pen and find an empty space, be it blank wall, a clear table, or even a countertop that you can work on. And on the very first sticky note, I want you to write the word home and place it right there in the center of that space. Now if you're using a digital space like Figma, place a marker right in the center of the page that says home because we are going to branch out from there.

    [00:10:03] On your next set of sticky notes are your next objects inside Figma. I want you to write down the title of the essential pages. We're talking about the about page, the contact page, maybe a services page or an FAQ page or your blog. Write out the title of those specific pages on the next set of sticky notes.

    [00:10:23] From there, I want you to keep writing out all of the important pages that you're going to have. Maybe you have a case study page about a very specific service that you're excited to offer more of. Make a sticky note for that. Maybe you want to have a blog post that features a recent award that you won.

    [00:10:37] Go ahead and write out a sticky note for that blog post. Or again, if you're using Figma, just create an object for it. The goal here is to list out all of these important pages. But here's the fun part. After you've given them all their unique post it note, I want you to take a look at how they relate to each other and see what you can group together.

    [00:10:55] Can some of these pages actually be turned into a collection inside Squarespace? Or maybe they all belong inside a drop down. For instance, if you have a resources drop down, that could contain your FAQ page and your latest freebie. and a link to your blog. You can see an example of this on my own website at InsideTheSquare.

    [00:11:15] co. In my main navigation, I have freebies, and if you hover over that, you'll see a dropdown that contains three different landing pages for my top freebies and a link to my resources blog. I wanted to prioritize all of these for new people that were visiting my website, but it was much easier to create a dropdown to group this information together than creating all of these as nested URLs inside collections.

    [00:11:39] Creating this visual sitemap was a way for me to really develop this solid foundation. So when I add new freebies that I want to share with people, I can easily fit them into the structure that's already here in my Squarespace website. Creating your own visual sitemap with movable parts is a great way to help you experiment with your own website structure before you dive into Squarespace and actually create it.

    [00:12:03] You might see that you want to have some nested URLs, like maybe an idea for a landing page of case studies could turn into a portfolio page with projects. Okay, at this point, I'm sure you're ready to grab those sticky notes or open up Figma to start your plan. But before you do, let's wrap up this episode with some actionable tips to help you keep your website structure organized and user friendly.

    [00:12:27] First tip, simplicity is key. We all love a website with a ton of bells and whistles, but when it comes to the actual structure, keeping it simple will be your superpower. A complex website structure with lots of layers and sub pages can easily overwhelm visitors and leave them feeling lost. Strive for clear and concise structure with easy to navigate menus and logical page connections.

    [00:12:52] The next tip is to know your audience, to know your goals. Before you start drawing these fancy sitemap diagrams, take a step back and answer those five questions we talked about in the beginning of this episode. I want you to reconnect with your website's purpose. Who are you trying to reach? What are your website goals?

    [00:13:08] Knowing your audience and goals can help you guide your website structure and prioritize what needs to be a part of the main menu and what doesn't. I also want you to think about your internal linking. Think about connecting relevant pages within your website, not necessarily grouping them all into the same drop down, but which pages should link together inside the page content.

    [00:13:29] For example, I have multiple blog posts on my site that connect to other blog posts and other resources for further education. Think about this internal linking when it comes to the overall structure of your website and how you can use it to keep users engaged. I also want to remind you that you should keep your navigation menus manageable.

    [00:13:49] Remember, website visitors shouldn't need an actual map to navigate your menus, okay? Aim for primary navigation links with. Five to maybe seven items at the most. For additional pages, consider using a drop down menu to group related content. Check out my own site at insidethesquare. co, and you'll see that I might have well over 800 pages on my website, but I only have five links in my main navigation.

    [00:14:18] To recap the whole concept of this episode, I just want to emphasize that a well planned website structure is the foundation for a successful Squarespace site. By following these simple tips and focusing on a user experience, you can create a website that informs your audience. Something that they want to engage with and something that inspires them.

    [00:14:38] I hope you found some inspiration in this episode of Think Inside the Square. Thank you so much for tuning in. Now, if you're brand new to Squarespace and want some help getting started, visit insidethesquare. co forward slash start. There you'll find Squarespace Made Simple, my step by step training series that will teach you how to use Squarespace like a pro.

    [00:14:55] You'll find that at insidethesquare. co forward slash start. Thanks again for listening, Squarespace er. If you enjoyed this podcast, be sure to subscribe wherever you happen to be listening to this episode. And most importantly, have fun with your Squarespace website. Bye for now.

    [00:15:09] ​ Music

  • Squarespace Made Simple: insidethesquare.co/start

    Figma: figma.com


EPISODE SUMMARY

Plan Your Squarespace Website Like a Pro: Building a Solid Foundation

Have you ever built a house of cards? Imagine if, instead of haphazardly stacking them, you had a blueprint – a plan for where each card goes! Your website needs a blueprint too, and this guide will show you how to create one for Squarespace.

Why Website Structure Matters

Website structure is the invisible framework that holds your entire Squarespace site together. It determines how users navigate your site, find the information they need, and ultimately convert into fans or customers. A well-organized structure not only keeps visitors happy but also helps search engines understand your website, boosting your ranking.

Defining Your Website's Blueprint

Before you dive into Squarespace and start creating pages, take a step back and ask yourself five key questions:

  1. Who is your ideal customer? Understanding your target audience is crucial because it will guide the entire website experience.

  2. What makes you special? What sets your website apart from the competition?

  3. What action do you want visitors to take? Do you want them to sign up for your email list, buy a product, or book a consultation?

  4. What kind of content will resonate with your audience? This could be blog posts, videos, tutorials, or quizzes.

  5. Are you selling anything? If so, a user-friendly e-commerce section is essential.

Essential Squarespace Pages

  • Homepage: This is your website's first impression, so make it clear, concise, and instantly tell users who you are and what you do.

  • About Page: Connect with your audience on a personal level by sharing your story and expertise.

  • Contact Page: Make it easy for visitors to reach out with your email address, phone number (optional), and a clear contact form.

Bonus Pages to Consider:

  • Blog: A content hub to establish yourself as an expert, share valuable information, and keep visitors engaged.

  • Portfolio: Showcase your work as case studies, highlighting your skills and expertise.

  • FAQ Page: Answer frequently asked questions to provide a quick resource for visitors.

Remember, these are just starting points. The specific pages you choose will depend on your website goals and target audience.

Craft a Visual Sitemap

Now that you've identified your essential pages, it's time to create a visual representation of your website structure, like a sketch. This will help you see how pages connect and identify potential gaps in your website flow.

Here are a couple of ways to create a visual sitemap:

  • Sticky Notes: Grab a stack and write down the title of each page on a separate note. Physically move them around to see how they relate and group together.

  • Figma: This online tool allows you to create a digital sitemap with movable objects.

Remember: Squarespace only allows three levels of website hierarchy (e.g., Homepage > Blog > Specific Blog Post), so plan accordingly.

Squarespace Website Structure Best Practices

  • Simplicity is Key: A clear and concise structure with easy-to-navigate menus is essential for a positive user experience.

  • Know Your Audience & Goals: Understanding who you're trying to reach and what you want your website to achieve will guide your website structure and prioritize what content is most important.

  • Internal Linking: Connect relevant pages within your website to keep users engaged and guide them to the information they need.

  • Manageable Navigation: Aim for five to seven primary navigation links with dropdowns for additional pages.

By following these tips and focusing on user experience, you can create a Squarespace website that informs, engages, and inspires your audience.


Music Credit: Arpenter // Audio Editing: Adobe Enhance
insidethesquare


Grab my collection of custom codes for Squarespace: 
→ insidethesquare.co/css

Learn CSS for Squarespace in my free class:
→ insidethesquare.co/learn

https://insidethesquare.co
Previous
Previous

49: An Audio Overview of Editing Squarespace 7.1

Next
Next

47: Squarespace Update Roundup: What’s New in 2024 (So Far. . .)