04: How to design a better Squarespace menu 🔗
-
00:00 The term Squarespace is a trademark of Squarespace, Incorporated. This content is not affiliated with Squarespace, Incorporated.
00:12 Welcome to Think Inside the Square, a podcast full of quick tips and tricks that will help you create a Squarespace website that you're proud of.
00:19 I'm your host, Becca Harpain, creator of Insidethesquare.co, and in this episode, I'm sharing some my pro tips for your website navigation; your main Menu.
00:28 For a transcript of this episode, along with links to any resources mentioned, visit insidethesquare.co/podcast.
00:41 Let's kick this episode off with some of my favorite best practices for your main navigation.
00:46 Best practice number one has to do with the actual text of your navigation links. Less is always better.
00:52 "About us" can always just be the word about.
00:55 "Contact your local representative." Way too wordy. Make that "contact" or "connect with us." If you need to be more casual about it.
01:04 Take a look at the actual text that you're using in your website navigation and make it as concise as possible.
01:10 Best practice number two: try not to use "jargon". I really don't care how casual and free-spirited your brand is.
01:17 You will get so many more people filling out a contact form if you call it contact and not drop us a line or something clever.
01:25 Same with services.
01:26 What we do is probably the longest title for a services page that I would ever be okay putting on a website.
01:32 So best practice number two try not to use too much jargon. Try to be as literal as possible so you don't confuse people who are brand new to your website or your business.
01:42 The next best practice is the same as the first one: less is better. But this time, I mean limit the number of links.
01:49 If your main menu links wrap into two lines, that is way too much information.
01:55 Prioritize the important stuff and consolidate similar pages using the folder feature in Squarespace to reduce those links down.
02:03 Then you'll have a drop down that offers the website visitor plenty of other options.
02:08 I want you to think about your main job as the website designer to be creating a site that helps people.
02:14 Now, if you want people to take action on something or you want them to learn something, simplify your website links to be based on those main goals, and consider how you can combine similar pages.
02:25 On my own site at Insidethesquare.co, I have over 100 tutorial videos on my blog, but I only have one link in my navigation for tutorials, and that's a folder.
02:36 Inside that folder, you'll see links for alerts buttons, forms, et cetera.
02:40 These pages are all related, and I can consolidate them to a folder to help people narrow down to the tutorial that they're looking for.
02:48 Each one of these pages is important, but because they'll have that same goal, that same purpose, to provide information quickly, consolidating them into one main folder made it a lot easier to navigate.
02:59 All right, last best practice highlight the current page.
03:03 You should let people know where they are. Squarespace automatically underlines it in the latest version 7.1.
03:09 But you can always use CSS to customize that like I did, giving it a unique background color, making the font bold. Whatever you want to do.
03:17 Check out the show notes for this episode at insidethesquare.co/podcast for a link to my free tutorial that will teach you exactly how to do that.
03:25 So, let's get into the design stuff. A quick overview of your menu options in 7.1 and what I recommend.
03:32 Now, we're not going to talk specifically about colors or borders or shadows.
03:36 Those are going to be really unique to your own business and brand design.
03:39 But I want to talk about the content that's actually there and how you display it.
03:43 So, first up, number one recommendation of my not so humble opinion definitely toggle on that Call to Action button.
03:51 When you are in edit mode from any page, hover over the header, select Edit Site Header, select Elements, and here you can toggle on the button.
04:00 You can link that button to a page on your site, any page on the Internet, a phone number, a file.
04:05 It is an eye-catching button and a design we're all used to, and I strongly recommend using it.
04:11 Next, I want to chat about social links. They take people away from your website onto a platform that is literally designed to distract them.
04:21 So I do not recommend using social links on the header of your website.
04:25 However, there is one specific instance in which I will break that rule, and that is for a website for an influencer.
04:33 A great example is my friend Presley. He's a musician and he wants to send people directly to his Spotify so they can listen to his music.
04:40 It makes sense for him to link to that in the header of his site. People want to listen on a platform they already use.
04:46 But for most small businesses, consultants, educators, please keep website visitors on your website and don't include social links in the header.
04:56 Contact page? Totally put them there. About page? Sure. Footer of your website? Why not?
05:02 But not at the top of every single page. You are just begging your visitors to be distracted, and I do not recommend it.
05:10 All right, getting into layout. I think adding space between links is essential. But you don't need to take up all of the available space in the header.
05:19 I want you to keep those menu links clustered together, depending upon the layout that you choose.
05:24 In Squarespace, that cluster of links can be pushed next to the logo or next to the Call to Action button or centered. That's totally fine.
05:31 But you don't need to take up the entire header. You don't need to stretch it to the full width that will look different on different screen sizes, like big monitors versus a MacBook.
05:41 So I design with that in mind. I like to keep navigation links clustered for mobile, I recommend aligning your links to the left or to the center.
05:49 Center is actually easiest for both left and right handheld positions.
05:54 Font size and spacing on mobile: Please don't go too small. You need the clickable space to be at least 44 pixels in height to meet the WCAG accessibility standards, at least at the time of recording this.
06:07 I'll include a link in the Show Notes to the most recent standards, just in case you need to double-check.
06:12 Now, last but not least, we need to talk about the one menu design trend that keeps coming back mobile menu on desktop.
06:19 Now, I'm not 100% against it, but I have one big question for you if you're considering doing that on your Squarespace website.
06:27 Why?
06:28 Why do you need people to take an extra click to get to the content they're looking for????
06:33 They click the menu and then the link. If that's a better design, is it because you have too many links in your main navigation?
06:40 Is it because those links are too wordy, so you need to see them in a vertical list instead of horizontally?
06:46 Ask yourself why you need this mobile menu that literally adds an extra click to access anything.
06:53 All right, time to get off my soapbox.
06:55 Here's a recap: keep it simple. Short, concise links that make sense.
06:59 Don't use jargon, and don't clutter your navigation by giving people too many options.
07:04 Group important pages together by purpose. If your menu wraps around to two lines, that is too many links, my friend. Prioritize the important stuff.
07:13 Turn on your Call to Action button, that header element. But don't place distracting social links at the top of your page unless that's a really important platform for your business.
07:23 Highlight the page you're on. Squarespace does it automatically with an underline, and you can use CSS to get even more creative. I've got a free tutorial in the Show Notes that will teach you how.
07:33 Cluster your menu links together, giving ample space between it and other elements on your site, like a logo and your Call to Action button.
07:40 Be careful about spacing on mobile. Make sure there's enough room for people to click an individual link.
07:45 And last but not least, if you insist on using a mobile menu on the desktop, just make sure you're making the right decision for your visitors, and you're making it easy to access the info they need.
07:55 If you make it difficult, complicated, or confusing when it comes to your main menu, that's going to do more harm than good.
08:01 It's your job as the designer to make it easy for people to get the information they need from your website.
08:07 Thank you so much for listening to this episode of Think Inside the Square.
08:11 I have a lot more tips and tricks to share with you about making an amazing Squarespace website that is uniquely yours.
08:17 So be sure to subscribe to my brand new podcast wherever you happen to be listening to this episode.
08:22 Thanks again for listening and most importantly, have fun with your Squarespace website. Bye for now.
-
