The 4 Features That Make an Exceptional Squarespace Mobile Menu
Summary:
By placing the hamburger menu in the top-left corner of the page, making your header menu fixed or partially fixed, increasing the link spacing in your mobile dropdown menu, and replacing an ambiguous menu icon with plain text, you can give site visitors a much more valuable navigation experience on mobile devices.
In the age of the smartphone, more and more website visitors use mobile devices to view websites. In fact, 68% of all global website visits came from mobile devices in 2020 compared to 28% who used desktops. When you consider this, it’s no wonder why the mobile-first approach to web design is increasingly more important.
Because of the nature of mobile devices, we often don’t have the luxury of screen real estate that we have on desktop devices, so optimizing website navigation for mobile devices has been an ongoing challenge for website and UX designers, especially since 94% of users say easy navigation is the most important website feature, which is a pretty astounding statistic (from a 2018 consumer UX survey done by Clutch).
Here are 4 easy ways to improve mobile navigation on your Squarespace site and give your site visitors the best mobile experience possible:
1. Add visible text to your mobile menu icon
On average, you only have about 7 seconds to make an impression on your site visitors. Because the human attention span continues to get shorter and shorter, you should make your site’s mobile navigation as simple and straightforward as possible. Something as simple as replacing an ambiguous hamburger menu icon with a much clearer “Menu” label is an easy way to make navigating your mobile site a good experience for your users. Here is a simple, straightforward solution that achieves this on both Squarespace 7.0 and 7.1 sites.
Replace the mobile menu icon with a text button.
2. Place the mobile menu button in the most visible place for the language of your visitors.
There is a lot of division about where to place a menu on mobile devices. Some people say you should place it on the right side of the screen because most people are right-handed and can easily reach the button. Others say you should place not necessarily where it’s easier for people to reach, but where they are more likely to see it first.
I will be honest in saying that I don’t think you should get so caught up on where to place it because as long as it is somewhere in the top menu bar where most people expect to find it, they will find it. Personally, I think it should be placed in the starting point of the language your users generally speak meaning in languages that are written left to right, the menu button on should be placed in the top left-hand corner so that it is immediately visible to the user. Similarly, in languages that are written from right to left, it should be placed in the top right-hand corner for easier discoverability. My reasoning for this is that if people see it quicker, they are more likely to click on it even if it takes a little extra stretch to reach it.
Wherever you decide to place your menu button, you can resolve most of your concerns about where it should be placed by implementing step 1 of this article, which is to visibly display 2-4 of your most important pages or CTAs in the menu. This will ensure that the user immediately sees the most important menu items no matter what language they read.
3. Make your mobile header fixed or partially fixed.
Like anything else in the design world, there are pros and cons to making your header fixed; however, in regards to sticky headers, the pros far outweigh the cons.
Website industry experts Smashing Magazine conducted a study that indicated 100% of visitors polled preferred fixed header bars because of how easily accessible the menu was. This same study found that fixed headers are 22% faster to navigate, which is a significant percentage when you consider how short the human attention span is when browsing a website.
Fixed headers, however, can be a point of concern when you consider how much less screen space is available on mobile devices. Typically, people want to take advantage of the full width and height of the mobile screen so that more content can be visible to the user without other things obstructing the view. The great thing about Squarespace is that it gives you the option to create a fully fixed header, which will always appear at the top of the screen, or a partially fixed (oftentimes called scroll back) fixed header, which will not be visible as the user scrolls down, and will reappear as soon as the user scrolls up.
4. Increase the link spacing in your mobile menu dropdown menu
One of the most frustrating things about websites on mobile devices is buttons and links that are too small for a thumb to accurately click. Nothing kills the user experience of a website faster than accidentally clicking something next to what you actually wanted to target because the clickable area is too small.
Squarespace makes it really easy to resolve these issues that can occur in your mobile flyout menu by letting you change the link spacing. You can find this setting in Squarespace 7.1 by hovering over your header, clicking “Edit Header,” selecting the mobile menu view, selecting “Overlay Menu,” and the dragging the slider to increase and decrease the link spacing.
