76: Mobile-First Mindset: Designing for the Thumb Zone
So many of us are using our phones to access the internet these days, but many websites still struggle with creating truly mobile-friendly experiences. In this episode of ThinkInsideTheSquare, we're diving into an often overlooked aspect of mobile design: the thumb zone. This simple yet crucial concept can dramatically impact how users interact with your website on their phones.
What is the Thumb Zone?
The thumb zone is the area of your phone screen that's comfortably reachable with your thumb while holding your device naturally. Think of it like a heat map of comfort, with three main areas:
- The natural zone: easily reachable without stretching
- The stretch zone: requires a slight thumb stretch
- The ache zone: requires shifting your grip or using another finger
Why Does it Matter?
Most mobile users browse with one hand while multitasking – perhaps standing in line, holding coffee, or waiting for the bus. When important buttons or links are placed in hard-to-reach areas, you're essentially asking visitors to perform "thumb acrobatics" just to interact with your content. And let's be honest – nobody has time for thumb gymnastics while trying to navigate your site!
Making Your Squarespace Site Thumb-Friendly
Here are some practical ways to optimize your mobile design:
Navigation Placement
While Squarespace automatically makes your site responsive, you can take it a step further. Consider moving your hamburger menu icon to a more thumb-friendly position. Fun fact: the default top-right corner is actually in the "ache zone" for most users!
Mobile Information Bar
This powerful yet underutilized Squarespace feature places crucial business information (hours, contact details, location) in a thumb-friendly bar at the bottom of mobile screens. It's a game-changer for businesses with physical locations and helps visitors find essential information without the scroll-and-hunt routine.
Button Placement and Sizing
- Keep buttons at least 44x44 pixels (about the size of a fingertip)
- Limit horizontal clickable elements to two or fewer items
- Stack buttons in the center of mobile screens rather than spreading them horizontally
- Use Fluid Engine to adjust mobile-specific layouts while maintaining desktop designs
Testing Your Mobile Design
Want to ensure your site is truly thumb-friendly? Here are some real-world testing methods:
- The "waiting in line" test: Pull up your site next time you're standing in line for coffee. Try navigating with just your thumb while holding your phone naturally.
- Friend feedback: Hand your phone to someone else and ask them to find specific information. Don't tell them where to look – just watch how they interact with your mobile site.
- Screen recording: Record yourself completing common tasks one-handed, then watch it back. You'll spot hesitations and pain points you might have missed.
- Use Squarespace's built-in preview feature to check mobile layouts before publishing changes.
Remember, creating a thumb-friendly website isn't about completely redesigning everything – it's about making thoughtful improvements that consider how people actually use their phones. Start by optimizing your most important elements, and you'll create a more user-friendly mobile experience that your visitors will actually enjoy using.
Pro Tip: Next time you're using your favorite apps, notice how many of them place their main navigation at the bottom of the screen. That's not a coincidence – they understand the power of the thumb zone!
-
[00:00:00] We've all been there, that awkward phone juggling dance trying to reach a button at the top of the screen while holding your coffee in the other hand, or stretching your thumb to its limits attempting to hit that menu button that's just slightly out of reach. In this episode of Think Inside the Square, I'm sharing some practical tips about designing your website with thumbs in mind.
[00:00:19] Yes, thumbs, and why this can make a huge difference in how people experience your website. 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 educator, and creator of insidethesquare.co
[00:00:35] and in this episode, we are diving into mobile first design with a special focus on something called the Thumb Zone. This is going to change how you think about your website's layout forever. For a transcript of this episode, along with the links to any resources mentioned, visit insidethesquare.co/podcast
[00:00:52] this episode is powered by Joey. I'm trying to cut back on caffeine these days, and I've been trying different coffee replacements over the last few [00:01:00] months. Joey has been the clear winner for me. It's got a good flavor that isn't too sweet or bitter, and one cup in the morning, and I've got a steady flow of energy that lasts for hours with zero jitters.
[00:01:11] If you want to give it a try, you can get a discount on your first order at insidethesquare.co/joey That's insidethesquare.co/joey
[00:01:21] Now, onto the episode.
[00:01:23] I want you to think about how you hold your phone when you're browsing the internet. Chances are you're gripping it in one hand and using your thumb to scroll. That's exactly what we're gonna talk about in this episode. How to make your website thumb friendly.
[00:01:36] We're going to explore the fascinating way that people actually use their phones and why this matters for your website success. I'll share some strategies for placing buttons and links where people could actually reach them. And we'll talk about how to organize your content specifically for mobile screens.
[00:01:52] I'll also be sharing some really easy ways to test if your website is truly mobile friendly. Trust me, once you understand these [00:02:00] concepts, you are never going to look at a website the same way again. Now the best part? You don't need to be a design expert or know any fancy code to implement these tips.
[00:02:09] As much as I love fancy code, It's not necessary to make a thumb friendly design. The tips I'm sharing in this episode are practical, straightforward improvements that you can make to your Squarespace site today, even if you have never thought about mobile design before. For my Squarespace users listening to this episode, yes, Squarespace automatically makes your site mobile friendly because it's a responsive website builder.
[00:02:32] Responsive means that your website automatically adjusts its layout to look good on any device, whether it's a phone, a tablet, or a really big computer. Squarespace has this built right into the design and it automatically makes adjustments to things like list sections, your blog posts, your product pages, even your mobile menu that kicks in at a specific screen size.
[00:02:54] But there is a big difference between a site that merely fits on a phone And one that's [00:03:00] actually optimized for how people use their phones. That is what we're diving into today.
[00:03:06] Now, I want you to take a moment to hold your phone right now, or if you're listening on another device, pick up your phone and just hold it naturally. . You might hold it in one hand and use your thumb to scroll, or you cradle it in one hand and you use your other hand's index finger. These natural ways that we hold our phones create what designers called thumb zones. The area of the screen where your thumb can comfortably reach without shifting your grip or using your other hand.
[00:03:31] Think of it like a heat map of comfort. The area your thumb easily reaches without stretching. That's what we call the natural zone, the spots where you have to stretch your thumb just a little bit. That's the stretch zone and those areas where you either need to shift your whole hand or use another finger.
[00:03:48] That is the ow zone because sometimes you literally say ow when you try to reach those spots. Now, this might seem obvious when you think about it, but here's what's really interesting. Our phones keep getting bigger, [00:04:00] but our thumbs are not growing with them. The latest phones are beautiful with their large screens, but they've actually made it harder for us to reach certain areas.
[00:04:08] But here's where it gets really important for your website. When someone visits your site on their phone, they're probably trying to do other things at the same time. Maybe they're standing in line at the grocery store, holding a coffee, or waiting for the bus.
[00:04:21] They're likely just using one hand, which means their thumb is doing all the work. If your important buttons or links are in hard to reach spots or aligned sporadically on the page, you're essentially asking your visitors to perform some thumb acrobatics just to interact with your content. This is especially crucial when we look at how people actually browse websites on their phones.
[00:04:42] They tend to scroll quickly, scanning for information rather than reading every word. Their thumb is usually hovering near the bottom half of the screen, ready to scroll. So if you place your most important buttons or links in that area, where their thumb naturally rests, you're making it so much easier for them to take action.[00:05:00]
[00:05:00] I want you to think about some of your favorite apps. Have you noticed how many of them have their main navigation at the bottom of the screen? That's not a coincidence. Apps like Instagram, Blue Sky, even your phone's messaging app will put the most important buttons right where your thumb naturally rests.
[00:05:17] They understand this concept of thumb friendly design, and it makes their apps more comfortable to use.
[00:05:22] Now, for those of you listening who are thinking that not everyone holds their phone in the same way, I hear you. You're absolutely right. Some people use two hands, some people use their index finger instead of their thumb, and some people have accessibility needs that require different interactions entirely.
[00:05:37] But here's the thing. Designing with the thumb zone in mind actually makes your site more comfortable for everyone, regardless of how they hold their phone. It's like designing a store where the most popular items are at eye level. It works for most people, and it doesn't make things harder for those who might shop differently.
[00:05:54] Keeping that thumb zone in mind, I want to tell you about one of my favorite Squarespace features for mobile users [00:06:00] that is so underutilized.
[00:06:01] Hardly anyone uses this feature and I don't know why. Because it's awesome. The mobile information bar. If you have a physical location, this feature is an absolute game changer. It's like having a tiny, super efficient assistant that gives your visitors exactly what they need right where their thumb can reach it.
[00:06:18] Your mobile info bar in Squarespace sits at the bottom of the screen but only on mobile devices, and here's what makes it oh so powerful. It displays links to critical business information like your hours, contact details, your location, all in a format that is perfect for mobile users. Think about someone looking up your business while they're out and about.
[00:06:38] They can quickly check to see if you're open, tap to call you, or get directions to your location with a simple thumb tap right there at the bottom of the screen. What I love about this feature is that it solves a very real problem. You know, that moment when you're trying to find a business's hours or address, and you have to scroll through their entire site to find it.
[00:06:56] The mobile info bar eliminates that frustration [00:07:00] entirely. It's always there, easy to reach, and shows exactly what mobile visitors are typically looking for. Squarespace makes this super easy to set up, and you can choose exactly what information you want to display, and customize it to match your site's design.
[00:07:14] And because it's designed specifically for mobile users, it's already optimized for that thumb friendly zone we've been talking about. If you want to give the mobile info bar a try, I'll include some links in the show notes with more information. You can find that at insidethesquare.co/podcast
[00:07:30] Now Squarespace can do a lot, but it can't do it all. So I do have a few custom code tutorials that I want to mention in this episode. One of them will help you redesign your mobile menu so that the links fall into that sweet spot, the thumb zone. Another tutorial, will show you how to move your mobile menu icon to the bottom of your site.
[00:07:48] And I also have one of my most popular tutorials in the show notes, how to create a back to top button. This action button stays visible as people scroll through your content, and it is super helpful for [00:08:00] long format content like a lengthy blog post. But here's an important note. While it's tempting to add lots of these floating buttons or persistent navigation elements, I want you to remember that That less is often more on mobile.
[00:08:13] Each element you add takes a precious screen space and can make your site feel cluttered. I always recommend picking your top one or two most important actions and making those super accessible rather than trying to make everything instantly reachable. Now let's talk about making the rest of your site thumb friendly beyond just your navigation.
[00:08:31] This is where we get into the nitty gritty of button placement and content organization. But don't worry, I'm keeping this practical and Squarespace specific in this episode. In Squarespace, you have a lot of options for button styles, but their placement is just as crucial as how they look. Remember that natural thumb zone I keep droning on about? That's exactly where your most important buttons should live. When you're adding buttons to your Squarespace site, think about stacking them in the center of your mobile screen rather than [00:09:00] spreading them out horizontally.
[00:09:01] This might look different from your desktop design, but that's okay. Squarespace Fluid Engine page sections will let you change the location and alignment of content just on mobile. Click on that little mobile preview icon while you're in edit mode and edit that version. The desktop version will stay exactly the same.
[00:09:19] For parts of your site that aren't Fluid Engine sections, you'll need a little custom code to change that content alignment. When you're ready to start making these changes to your site, again I'll have some helpful tutorials in the show notes for you. But before you open up a new tab and get to it, there's one thing that's really important to mention, and that's the size of these interactive elements.
[00:09:38] The rule of thumb, pun intended, is that any tappable element should be at least 44 by 44 pixels. That's about the size of the average fingertip, which makes it comfortable to tap without accidentally hitting something else.
[00:09:51] When I'm creating a mobile layout with clickable elements, I like to have two or less side by side. I've noticed that when I have three [00:10:00] buttons horizontally in a row on a mobile device, it's much easier for someone to click on the wrong thing and get frustrated with the website. And we don't want our visitors to get frustrated.
[00:10:10] So I recommend limiting your interaction or your clickable elements on a mobile device to be two or less horizontally. While we can't completely redesign Squarespace's mobile interface, we can apply this principle to our content structure.
[00:10:24] But before you open a tab and get to it, let me share some really simple ways to test your current mobile design that don't require any special tools or technical knowledge. I want to give you a good starting point here by testing what you already have going for you. The first test is what I like to call the waiting in line test. The next time you're out getting a cup of coffee, you're running errands and you find yourself standing in line, pull up your website on your phone.
[00:10:48] Try to navigate through it using just your thumb while holding your phone naturally. Are you struggling to reach certain buttons? Do you find yourself having to adjust your grip constantly? These are clear signs that you might need to adjust your layout. [00:11:00] Another great way to test your site is to hand your phone to someone else.
[00:11:03] Maybe a friend is in line there with you. Ask them to find specific information on your site. Don't tell them where to look, and just watch how they interact with the mobile version of your website. Do they scroll past important buttons without noticing them? Are they struggling to find your contact information?
[00:11:18] This kind of real world observation can be incredibly helpful. And here's a practical tip for testing your site yourself. As you do this test, turn on your phone's screen recording feature. Most phones have this built in by now. I want you to record yourself trying to complete common tasks on your website while holding your phone in just one hand.
[00:11:37] Maybe it's signing up for your newsletter, or finding your business hours, or adding a product to your shopping cart. When you watch the recording back, you're going to notice things you might have missed in the moment, like hesitating before clicking a button, or scrolling up and then down to look for information.
[00:11:51] And don't forget about Squarespace's built in preview feature. Before you publish any changes, use the mobile preview to check how everything looks. Pay [00:12:00] special attention to how your sections stack on mobile and where your interactive elements end up. Sometimes what looks perfect on desktop might need adjusting for mobile users.
[00:12:09] Now, before we wrap this up, let's do a quick recap of what we covered today. We talked about understanding thumb zones and how they affect the way people use their phones. We talked about making your navigation more thumb friendly and including that awesome mobile info bar feature for those of you with physical locations.
[00:12:25] We also talked about button placement and creating interfaces that work with natural thumb movements instead of working against them. Now remember, making your site thumb friendly is not about redesigning everything.
[00:12:37] It's about making thoughtful improvements that consider how people actually use their phones to explore your site. Start with your most important elements, like reviewing your navigation, your call to action buttons, and your contact information. Make these easily accessible within the Thumb Zone, and you'll be ahead of the game.
[00:12:53] If you want to dive deeper into any of these concepts, I've got some great tutorials waiting for you in the show notes. Head on over to [00:13:00] insidethesquare.co/podcast
[00:13:02] And if you're implementing any of these changes on your site, I'd love to hear about it. Send me a DM on Instagram or tag me @thinkinsidethesquare
[00:13:10] I want to see the before and after experiences. You might just inspire someone else to make their site a little more thumb friendly too.
[00:13:17] Thank you so much for tuning into this episode of think inside the square. If you enjoyed it, please subscribe to this podcast wherever you happen to be listening to this episode. And don't forget to sign up for my email list at insidethesquare.co/email Until next time, keep designing, keep optimizing, and most importantly, have fun with your website.
[00:13:35] Bye for now.
-
How to add a mobile info bar to Squarespace: youtube.com/watch?v=HzoQszE3TDg
How to change mobile info bar colors: youtube.com/watch?v=MRdK_mpThGU
Squarespace mobile info bar article: support.squarespace.com/hc/en-us/articles/206545547-Adding-a-mobile-information-bar
Tutorial: 5 Squarespace Mobile Menu Design Hacks: youtu.be/C_l3cgy9hmE
Tutorial: How to customize your mobile menu icon: youtu.be/2PAROliso-0
Tutorial: How to create a Back to Top Button: youtu.be/POuTuPW3yZQ
Tutorial: Hide One Thing on Mobile: youtu.be/NpimAaix93o
