How to Optimize Your Ecommerce Site for Mobile: Boost Sales with a User-Friendly Experience

Do you ever feel like your website is losing customers simply because it's not optimized for mobile devices? Fear not, this week's episode of Ecommerce Made Easy is here to help! We guide you through the essentials of creating a mobile-friendly website so you can ensure a seamless user experience for your customers on the go.

Listen in as we discuss the importance of streamlining your site's layout, including your logo, menu, and key call-to-actions. We'll also cover the power of expandable menus like the hamburger menu and tab navigation, along with effective ways to minimize scrolling and make your buttons finger-friendly. Plus, learn how to keep your call-to-action visible and easy to navigate, while making your contact information crystal clear. Say goodbye to frustrated customers and hello to a beautifully optimized mobile site!

Mentioned Resources: 

Optimizing for Mobile - Making Your Site Mobile Friendly 

Join entrepreneurs and online business owners just like you in my Free Facebook Group “Website & Tech Tips for Online Business Owners”
 
 Where we help break down the tech and hurdles Online Business Owners encounter!
 
Simply to go ecommercemadeeasypodcast.com/facebook/ and answer the membership questions so we know you are a real, warm-hearted, online business owner.

Chapters

• 0:04 Essential Components of a Mobile Website
• 10:47 Designing a Mobile-Friendly Website

Transcript

Carrie: 0:04

If you have a website, most likely your website has a mobile component to it, and if you do not have a mobile version of your website, it is a must in modern day technology. But if you do have one or are looking to have one, do you know if you're going to be checking all the boxes to make sure that it's effective and up to standards? So in today's episode we're going to go over briefly the main reasons to have your mobile website, but we're going to dive even deeper into the components you should be looking for on your mobile website so you can make sure your developer has implemented them and you have requested them. Welcome to the Ecommerce Made Easy podcast. I'm your host, Saunders. When we started this business, all I had was a couch, a laptop and a nine month old My main goal To help others. Now, with over 20 years in the e-commerce building industry and even more than that in web development, i have seen a lot. I love breaking down the hard tech and to easily understand the bits to help others be successful in their online business. Whether you're a seasoned e-commerce veteran or just starting out, you've come to the right place. So sit back, relax and let's dive into the world of e-commerce together.

Carrie: 1:11

Welcome back to this week's episode of Ecommerce Made Easy podcast. Today we're talking about mobile websites and why to have them and what they really should have on them and the components they should have. Since most people already have a mobile website, we're going to be going only briefly over why you should have a mobile website and we're going to do that first. So, first of all, you probably already realize this, but customers are using their mobile phones more and more and more. On average, a website gets about 50% of its traffic or more for mobile devices. In an underdeveloped country, it's even higher than that, because their access to PCs and laptops are a lot more limited. So search engines penalize you if you do not have a mobile version of your website. And it's also social media great, because the ad campaigns work better and you can remarket to people who've been on your website and social media much easier if you have a mobile version of your website. And also accessibility compliance that we talked about in episode four of the e-commerce and Made Easy podcast. So if you want to reference that one, you can just go to ecommercemadeeasypodcast. com to get to episode four. If you need to review the ADA compliance and why that's super important. So now that we know the main reasons why you should have a mobile website, let's go over what is important to have on your mobile website to make sure it is effective.

Carrie: 2:35

Having a mobile website without making sure it has a key components is like not having a mobile website at all, so you need to make sure it actually really works for you and your customers. So, first off, one of the mistakes I see a lot of our clients make when they're requesting what they want on their mobile site to us is wanting everything on their mobile website all the features, all the pages, all the everything. Now, that can be a good idea for some cases, but most of the time, you really want to clean up and narrow down what you really want to display on mobile, because most things that are designed for desktop don't look great on mobile. So we want to make sure that we narrow down what you actually truly need on a mobile website. So, first off, you need to have a streamline layout. So you need to focus on the important elements of your website, such as your logo, your menu and your key call to actions. So you need to make sure these are very clear, very easy to see.

Carrie: 3:35

You want to make sure the top navigation is not cluttered. Many times if you were to just take a desktop website and shrink it down and make it go on a mobile device, it's going to be way too cluttered and overwhelming And you're not going to have much product or service offerings. What we want to call above the folder, on the first screen of the site, where you don't have to scroll to see it. So you need to make sure you really have it shrunk down, your logo, so that it's still visible but not like as big as it would be if we're on desktop. You need to make sure your menu is nice and concise and streamlined and then your key call to actions are up towards the top.

Carrie: 4:15

So, as we're talking about navigation too, we need to make sure that it is clean and clear, and some ways we can do that is to make expandable menus. So you've probably seen these on many websites, but probably the most popular is the hamburger menu, where it's just like three lines at the top and you know, if you click on it it kind of looks like a hamburger. That's why they call it that. You click on it and you know you're going to find more options for the website. So the hamburger menu is pretty popular and pretty close to standard for mobile websites. So you can really clean up that top part of your website by putting everything under a hamburger menu. You can also do tab navigation if you want although that is something that we generally see more on a product page so that you can display, say, just the product description when they land on the product page and then maybe have a tab for reviews or a tab for more images, etc. That way they're not scrolling super far down your website to see everything and they can just click through the tabs to the pieces of content that they're interested in.

Carrie: 5:18

And also, when you're talking about navigation at the top too, you want to simplify it to include the most important links if needed. So many times I find websites have way more links than you really need on mobile. So really drill down and think do I really need this link at the top of my web page? But if you think that you have a link that you really want on your website but it doesn't necessarily need to be at the top of your web page for mobile, you could put it down in the bottom footer, because a lot of people know to look in the footer for some common things like site map and contacting and just some extra links down there at the bottom. So if you Do, you find you have some important links but you think they're not quite as important to have at the top, you can always put them in the footer of your mobile website.

Carrie: 6:05

So also on your mobile website you need to make sure that the search ability is very prominent. Now we want this prominent, of course, on desktop, but we need to make sure it is prominent on mobile as well. Many times people will make this a little bit simpler looking by just having a magnifying glass icon rather than having the search box with the word search and button to click. So you can kind of simplify it by either just having the magnifying glass icon that they can click on and then search, or maybe a small input text box with the magnifying glass icon, because it's just a great, easily recognizable icon on doing searches. So make sure that is prominent and at the top of your page as well, because that really short circuits and makes it faster for consumers to find what they're looking for, especially if they're looking for a specific product or a specific service or specific information, they can just click that search, search for it and go find it, rather than trying to navigate all your menus and things like that, which really should be simplified anyway. But that really helps them drill down and get to where they're looking for really quickly, which is highly important for mobile because, let's just face it, we have a lot less patience when we're on our mobile phones looking at a website. I know I do, i will. Even if I'm really interested in a website and I find their mobile view is awful, i will go to a desktop if I really need that information, but if I really don't need that information from that website, i'll go find a different one. So make sure that your search is really easy to find and it works great, alright.

Carrie: 7:37

So next we also need to check our font and text layouts. So it's really key to have a mobile website be very scannable. We should have all of our websites be scannable. But it's even more important on mobile because many times mobile users are in a hurry and they're going to scan your website before they actually truly dig into reading it in more depth if they need more information. So you want to make sure you're using bullet points and headlines where appropriate and make sure the font size and font type is very easy to read on mobile. You want to make sure the spacing between letters and words is appropriate and not too crowded, or it's going to be very hard to read, especially for those people who maybe need glasses or maybe in the 40 plus club and can't see quite as well as they could when they were younger. So make sure that your font, text and spacing is very appropriate for that. Alright.

Carrie: 8:31

Next up is media. Media must be optimized for mobile, especially now. We want to make sure their images are not too big in general for the web, but before mobile. You really need to make sure they are optimized for mobile and it's a bit more tedious. But to have your developer show a different sized image for mobile is more ideal than shrinking a larger image down to fit the mobile website. So having that alternative image that's smaller is a really good idea, especially for phones. Now you do maybe want to be able to shrink the bigger image for the in-between devices like tablets and such like that, but if you really want to optimize for a mobile phone, having a different image that's displayed, that's smaller, that's compressed, is a really good idea for speed and accessibility on a mobile website and, speaking of which, we need to make sure that the images and all the text will fit within varying devices of mobile websites.

Carrie: 9:36

And speaking of testing, if you haven't listened to episode 8 of the Ecommerce Made Easy podcast, make sure you go listen to that after this episode so that you know better how to test your website, including testing for mobile. Also, for mobile, you need to make sure that your videos do not auto load or auto play, because it's going to take a long time potentially to download, especially if a person is not on Wi-Fi and they're on cellular network, and it might eat up a lot of their cellular data and they may not appreciate that. So, making sure that videos are clickable to start the playing so they can choose whether they want to download that content or not and pull it down through their device, and making sure they don't auto you know, like I said, auto play or auto download, which normally is not the case, but just make sure your developers looking for that and checking for that too. Okay, so call to actions. I have next on our list, and that one can be a little bit tricky. So, like I said before, check episode number eight on how to test. It's easy to get to just go to ecommercemadeeasypodcastcom forward slash eight to listen to episode eight.

Carrie: 10:47

But in this one we need to make sure your call to actions are clear, easily clickable by mobile devices. So you want to make sure these forms are really easy to read because typically you'll have a form with your call to action. Make sure they easy to read, easy to navigate on mobile And remember less is more here. No one wants to fill out a super long, lengthy form on mobile. They just don't want to do it. So make sure it's easy to auto fill or just really easy for the input tested out on multiple devices Android and Apple and all the popular phone devices as well as tablets, and make sure it's just super, super easy.

Carrie: 11:29

And also make sure the call to action buttons are very clear and visible and distinguishable. And make sure those buttons are clear on what they mean, like the word submit. Just make sure it's clear on what what it means. Instead of maybe a longer word like submit the contact form or something like that, just make it simply submit. They're already on the contact form. They know what they're going to be doing is submitting it Okay.

Carrie: 11:55

So also, contact information needs to be clear and easy to find on both desktop and mobile, and especially on mobile, and we want to make sure that when you have a phone number on your mobile website that they can tap on it or click on it and it will bring up your phone number automatically in their phone app to be able to just quickly call you. She wants to try to remember a phone number and try to type it and go back to the website and type it some more and just go back and forth and make sure it is clickable. It's super easy for your developer to do So just request that of your developer And then the same will be for email too. So if you do display your email address on there, make sure it's clickable so that it will automatically open up in their email application, whichever kind they use, so that it really you get when you program for that it'll open in their default email application or whatever. So make sure it's clickable to open in an email application. And if you don't show your email address directly on the website, if you have a contact form instead, make sure it's paired down and very simple. You might have a little bit more complicated contact form on your desktop, but for mobile you really just need there, from email address, the subject and the content that they want to give you. So make sure you don't like start filling it out with addresses and phone numbers and things like that, unless you absolutely necessarily have to have that. So make sure you simplify your contact forms for sure.

Carrie: 13:27

Alright, so we also want to make sure we minimize pop-ups on mobile devices. Nobody enjoys a pop-up on a mobile device that's really hard to click out of. To get back to the content you really were looking for, i mean, some of the pop-ups are a good idea and you will get some response from them, but you've got to make sure they are super, super user-friendly on a phone, because nothing is more frustrating than a pop-up that you can't find the little X button or the cancel or any of those things that will make the pop-up go away. So make sure that is super easy to get out of that pop-up And I would totally recommend minimizing them or eliminating them if they're not absolutely necessary on your mobile device too. Okay, so we already touched on this.

Carrie: 14:14

Some are ready, but we want to make sure we minimize scrolling where possible on mobile sites. Obviously, they're going to need to scroll some, but we need to minimize that, like I said. So we talked about the navigation and simplifying it and putting it in like something like a hamburger menu. You can also do this on product or services pages, where you could create either tabs to get more information about the product or service and or you can do an expanding accordion menu. That way they can click to learn more and they'll get more information. And then they are still technically scrolling, but it's a bit more intuitive and friendly for a user to just click it to open and expand extra information that they may not need in general. But some people are thorough and like to read everything, so give them that opportunity. But the majority of people may not be clicking on the tabs or the accordion menus to open things up in more detail if they're already familiar with you.

Carrie: 15:21

And finally, we want to make sure everything is a touch friendly design. So we want to make sure all buttons and all clickable actions are large enough for a touch, interaction or somebody's finger. So basically, we want to make sure that links aren't too close together. Nothing's more frustrating, especially on a mobile device than clicking on the link you did not intend to click on And then you have to go back and find that link again and click on it again. So making sure all those links are separable enough so that you can click on them with your finger.

Carrie: 15:54

Also, allowing pinching to zoom in and zoom out is a great tool to have on your mobile, especially if you're selling products or services that have images that are important to see. So making sure that there is a way that they can zoom in if they need to on mobile That's not necessarily the standard way they would zoom in if they were on a desktop computer. Another option for zooming in that I have seen a lot lately is you could click on the image and then you can double tap it to zoom in more And you could have like a little tool tip that says click and then double tap to open up the ones. I've found the websites these on have been a super easy and intuitive As a user to do so. Just make sure you can get those details that they really need to help them understand your products and services and make sure that that's what they are looking for and what they need. All right, so let's recap this week's episode.

Carrie: 16:51

First, we talked about why you should have a mobile friendly website and, simply put, 50% or more of people are looking at your website on mobile devices already. We need to make sure that it is accessible on mobile. Also, search engines will penalize you now if you don't have your website mobile friendly, so you need to just really make sure it is mobile friendly. Next, we discuss aspects and components of your website that you should be looking for and making sure that your developer has implemented. For example, we need to make sure we have a streamlined layout, like we talked about. We also want to make sure that navigation is clean and clear and we want to make sure the search is prominent and easy to use and accurate. We need to make sure our font and text layouts are easily scannable by using headings and images and bold text. We need to make sure our media is optimized for mobile as well, so make sure you're not forcing them to download really large images and or also auto-playing or auto-downloading videos. Make sure you respect their bandwidth and really it helps your speed of your website too. We also need to make sure the call to actions are clear and easy to understand and that contact information is prominent and easy as well to find. We also need to minimize or eliminate pop-ups, like we talked about, where we don't want to disrupt their ability to shop or browse your product or service website, with pop-ups to get in the way and you can't even get rid of them. And then minimizing scrolling is also ideal, if you can, as well as a touch-friendly design and making sure items that are clickable are not too close together. Actually, google will let you know if some of them are too close together in the Google Webmaster Search Console.

Carrie: 18:42

I hope you enjoyed this week's episode. For recap show notes and tools that we use, please visit us at ecommercemadeeasypodcastcom. We are always open to feedback or topics that you want to learn more about, so you may drop us an email at any time at podcast at bcsinjoneeringcom, and you can also subscribe to our show wherever you are listening. So be sure to share this with a friend or a business friend who you think might like our content and who our content might help, because we are. Our goal here is to help as many businesses as we can, and I appreciate you listening. Thank you so much and I will see you next week.