Is My Website Mobile Friendly? If Not, Here's What You Should Do!

 
 
 

For those of us that grew up with only one phone in the house, which was usually located in the kitchen and could be tracked down by following the phone coil trail, sometimes it’s hard to comprehend just how often people look things up on their phones. 

Your phone is a powerful tool that is at your disposal to look things up the minute you think of it. It’s an equally powerful marketing tool for businesses.

Here are a few stats to help illustrate just how important mobile access to your site is. 

63% of all Google’s visits in 2019 come from mobile devices.”

As smartphone browsing becomes faster and more powerful (ie – the site loads quickly and is less annoying), more and more work (and play) is being done on mobile phones vs our desktop computers. And for those local, brick-and-mortar businesses -

82% of all smart phone shoppers conduct ‘near me’ searches.”

This number is even higher for millennials. So if you have a local, brick-and-mortar business with a walk-in shop, then yes, your website is going to be very important. One key thing to keep in mind is that this is only going to be more prevalent. It’s estimated that 72% of internet users will access websites only using mobile devices. 

Most website providers include a mobile responsive site as part of their package. It should be automatic. This is super helpful and should be a big relief if your website needs a little TLC. So now we want to look at how these mobile responsive sites can be more impactful. 

Did you know that when viewing websites on their phones, people are more likely to buy or click, and less likely to comparison shop?

Wouldn’t it be great to take advantage of that with a really strong sales funnel to help you close the deal and make those visitors choose you?· 

The usability and site loading time for your site mobile directly affects your search engine rankings.  A site with poor loading time will rank lower in search engines even when people are searching on their desktops. 

“Nearly half of mobile users switch to your competitor instead, after a bad experience with your mobile site.”

I think this is actually one of the best reasons to refresh or totally revamp your website. Think about the various reasons someone might look up your site on their phone. I have a friend who has referred me to your business and I look it up either right there on the spot or later while I’m standing in line for a coffee. Does your site match the description I got from my friend? Social media is a common source of site traffic as well. Either because people recommend your site to someone looking for a referral, or because you’re posting content that leads back to your site. Again, does the site accurately reflect the quality of your business? 

My husband and I like to watch Shark Tank and The Profit on DVR. We usually look up the business after each episode to see if it still exists and if it’s different from the business represented on the episode. This is always done on our cell phones. Sometimes it’s surprising to see how the business has changed, but regardless, it represents one of the biggest reasons you need a mobile responsive website – when people hear about you, one of their first instincts will be to look your business up on their phones. I’m a skeptical consumer, and this one act gives me the feeling of control – like I’ve done my due diligence.

A good referral from a trusted source, combined with a well-constructed, mobile responsive website is one of the best tools in your sales arsenal. 

I’d encourage you to take a minute and pull up your business’ site on your cell phone and evaluate how you feel it measures up to your business in general. ·

  • How long did the page take to load?·     

  • Does the site feel like an accurate representation of your business?·     

  • Is it easy to book a service, contact you or make a sale?·     

  • Can they easily call, email, or get directions to your location directly from your site? 

If you’re feeling uneasy about your site’s mobile performance, don’t worry. You’re not alone! There are a lot of things that can be done to help make your site more user-friendly on mobile.


MOBILE WEBSITE BEST PRACTICES 

First off, it’s important to put yourself in the mindset of someone accessing a website on their phone. There are a few constraints that we need to work within. 

  • Vertical Layout

  • Small screen = small buttons and print

  • Typing and clicking is typically done with your thumb

  • Less browsing and comparison shopping



Mobile Responsive

First off, you should make sure your site is fully mobile responsive, NOT just mobile-friendly. You may be wondering what the difference is since both sound like they’re taking mobile into account. Basically mobile-friendly means that your regular site scales down to the mobile screen size. This means that logos, navigation, font and images are all much smaller than they would normally appear on a desktop. This isn’t ideal since phones are touch screen and clicking on tiny buttons and squinting to read the fine print is not ideal for capturing the imaginations of viewers.


MOBILE “FRIENDLY” VS MOBILE RESPONSIVE

 
Mobile "Friendly" website layout

Mobile “Friendly” Website scales down but isn’t truly “friendly”.

Mobile responsive website layout

A true mobile responsive website has buttons that are sized for our fingers and collapsible menus.

 

Quick to load

The generally accepted time for a website to load is no more than 3 seconds. If your site takes longer it’s time to trim it down. Video, image sizing, fonts, even where your domain is hosted can all play a part in slowing down your site on mobile. You can check your page speed and get a performance grade online. I like Pingdom for this. This can be helpful to give you an idea of where you stand, however be careful going down a rabbit hole here though until you get a broader understanding of the elements that influence site performance. 




Easy to Navigate

Phones obviously have much smaller screens, which means that the navigation needs to change up. Currently the default option is what’s called a hamburger menu in the top right corner. This is where people expect it, and is a pretty safe choice.

NAVIGATION ON MOBILE SHOULD BE SIMPLE AND STRAIGHT FORWARD

 
Example of mobile website with collapsed navigation

Collapsed Navigation

 
Mobile website navigation menu

Mobile Navigation Dropdown

 

Clickable Phone and Address

For mobile sites especially it’s crucial to have your name, address and phone number (NAP) listed in your footer. This needs to be clickable. I was on a mobile site and their return number wasn’t clickable and I had to try to remember it, click out of their website and type it in. You don’t want to require any extra effort when someone is trying to contact you. I always recommend listing your phone number in the navigation too, because think of how many times you’ve needed to call a company and you look up their site to find their number. Again, we want this to be easy for our customers.  

Clear Affordances

Affordances are visual cues that let me know what I should do. When in doubt, go obvious. And as seen in the example below, a button is more obvious than a hyperlink.

For example:


All of these are clickable, but not all are clear. We want Captain Obvious here so there is no confusion. Because confusion loses customers.

Another example would be text boxes. If you want someone to fill something out, especially on a phone, make sure there is a box around it. For the contact form on my site I’ve added some check boxes and drop down lists as they’re easier than typing in forms on a cell phone. 

Site Flow

For my websites I recommend having no more than 5 tabs up top plus maybe a phone number. The reason for this is that we want a clear sales funnel – the goal after all is to get people to make a decision and choose your service, whether that means making a purchase, signing up for an email list, booking a consult or contacting you. For mobile it is even more important that the site flows smoothly straight down the sales funnel. 

Best Size Images for Website

Is your logo legible? Are your images sized properly so they’re not slowing down your site? This is very crucial to your site speed. In general, keep your images below 500kb, the smaller the better. There are several image formats you can use. I prefer JPG and PNG. PNGs are larger files so if I need a clear background I’ll use it (like for a logo or an image of a cell phone on a colored background) and for everything else I default to JPG.

For Image sizing use 2000px wide for banner images and 1000px to 1500px for other images.

Once you have your image sized, you can upload it to TinyPNG and it will automatically compress the image without losing quality. I do this with all the images I put on my sites.

Text

Sometimes text can scale down too small on mobile and this needs to be corrected because people tend to skim on mobile and if the text is small they’ll move right past it. 

  • Check for legibility on all pages.

  • Break up paragraphs into shorter blocks of text. This is one area where you don’t have to follow the old rules of 3-4 sentences per paragraph.

  • Incorporate headers and different text styles such as bold, italics, and font sizing to add emphasis and make the content easy to ingest as they scroll.

  • Use bullet points for longer lists as studies show that people are more likely to read them.

Keep the copy on your home page short and to the point. There is a balance here with needing to optimize keywords for search engines, but usability also affects your search rankings and minimal, very intentional copy on the home page can help get people where they’re trying to go faster. 

Pop-ups

Pop ups can be very useful if you’re needing to promote a sale, convey important business updates or get people to sign up for your newsletter. But Google has decided that a pop-up covering your entire phone screen is intrusive (they’re not wrong!) and they will ding your search rankings for this. So its important to make sure that any pop-ups you use are either mobile compatible or disabled on mobile. Mobile compatible pop-ups basically just don’t take up more than about a quarter of the screen.

 

I hope this information helps you to better understand mobile sites and maybe even make a few improvements on your own site.


Save it for later - Pin this post!

 
 

Some other posts you might be interested in:

Previous
Previous

Squarespace Web Design: Is a Squarespace Website Right for You?

Next
Next

Help with Google My Business: The Ultimate How To Guide