5 Ways to Make Your Website Mobile-Friendly

Website Design

Hey, is your website mobile-friendly? Just because you can pull it up on your phone doesn't mean that it's mobile-friendly.

Exactly five years ago today, April 21st, 2015, Google released one of the biggest search engine algorithm updates that ever impacted websites. It was commonly referred to as mobilegedden.

Basically what happened was Google no longer gave search priority to websites that did not have a mobile-friendly or mobile optimized website. If your website was not mobile-friendly, they’re no longer going to show your website in search results when people are searching from a mobile phone.

Now, that was five years ago in Google wanting to put an end to these non mobile-friendly websites, but they still exist today. We still have websites that are not mobile-friendly. Why isn't this even as such a big deal?

You know, mobile browsing is not for just teenagers that are on their phones, it's everyone. Everyone is primarily using their mobile phone to browse the web and interact online.

Now to clarify one thing here, web designers in the past from April of 2015 and on have been making websites that were for desktop – mobile-friendly. But all they were really doing was making it mobile compliant.

They weren't really designing with the mobile user experience in mind.

So this is what I'm really going to be talking about today is ways to look at your website and kind of do a mini audit of your website to see if it passes these mobile-friendly barriers, these mobile-friendly checks.

So I've got five ways that will just tell you whether or not your website is actually mobile-friendly or not.

You just follow along with me through my client's website for a restaurant here. So that way I can show you what components go into making a mobile-friendly website.

Optimize The Mobile Header

The first thing you'll notice is this, a kind of what we call the header. The header is basically the very top part of a website. It often stays there throughout your scrolling experience.

Sometimes it doesn't, but that's actually a sub little thing is, is making, especially on mobile, making sure that the mobile headers, what we call sticky, which basically means it sticks to the top of the page.

That way the menu easily accessible at any time. If you have perhaps a longer homepage or a longer menu page you don't want to have to have that person scroll all the way all the way back up to the top just to get to the menu basically.

But the other part of this header is that you want to make it smaller. I often see websites where the header kind of takes up like half the phone. Every time you go to a new page, you have to immediately scroll because that header is taking up most of the space on the phone. I think that's a big no-no.

It's subliminal, but I think it's enough to make people frustrated. It makes me frustrated anyways, and that's how I usually look at things. If it gets me frustrated, it probably gets someone else frustrated.

Easy Menu Navigation

The second thing is an easy navigation. So if you'll notice here, if I hit and tap on the menu here, this is super easy to navigate around. I don't have to go looking through a whole bunch of things, um, to kind of get what I want to.

Again, this is a restaurant site. I mainly deal with small business website design.

Another thing to consider is, if you'll notice in the top right here, there's a little phone icon that makes it easy for me to call the restaurant. If I tap that call button, it's basically gonna prompt me to open that phone up or phone number up in my dialpad without first having to copy the number down. Or remember the number

Legible Text on Mobile

The third thing to consider is easy text or that the text is legible. So one thing we don't want to do is place it on backgrounds that are very hard to read. So if you'll notice here where it says best sports bar, it's in larger bold types.

Even though there's an image there, it's easier to read. And there's also a bit of what we call an overlay on top of that image. So it kind of darkens the image up basically, so that it is a little bit easier to read that text.

No PDF’s For Your Menu

The fourth thing that is super irritating, this probably drives me more nuts than anything else, is not using PDFs or images to display content.

I'll give you an example here for a restaurant. If I go to their menu, you'll notice here this is super easy to read. I can close or collapse different sections of their menu. This is what I call an interactive menu.

But this could be a services list if you're a service based contractor, or if you're just like a brick and mortar place and you just have like a bunch of images of like your promotional signs and stuff like that.

To me, this is a huge no-no, because when you're viewing on a mobile phone, you often can't read that and you're thinking that everyone's viewing this from a desktop and they're not.

Now what happens is I have to now kind of pinch and zoom my way around that photo, especially if it's a menu. It is by far the most frustrating thing viewing a website is when you use PDFs or images to display your content.

Re-type it, do something, just get it into an interactive form like this menu here.

Use Call To Actions (CTA) That are Mobile Specific

And the last thing is using call-to-action buttons that are specific to the mobile experience. I touched on a little bit ago with the call with the phone call button that was at the top there.

You'll also notice here on the homepage, I have a couple of buttons. One of them is tap-for-GPS and the other is tap-to-call-us. Those buttons do not appear on a desktop.

Viewing this from a desktop, you will not see those buttons there. This only appears when they're viewing it from a mobile device because that's where you're going to be calling from.

Just consider the type of call to action that you want a customer to make device specific.

All in all, what I would just say, go through those five things I just mentioned to check your website out.

Ask: Is your website easy to get around from mobile device. And don't look at it yourself, perhaps have someone else look at it because you're too close to it, you know exactly where all this stuff is.

Give your website to someone that's never viewed it before, like a friend or a family member and just kind of say, Hey, is this easy to browse? Is this easy to get what you would be looking for if you are shopping for my service or product.

If it is then great and leave it alone. Don't fix what's already working.

But if it's broken a little bit, then considering evaluating the content that's on your website and the design and layout.

I offer content strategy services where we can go through your entire website line by line and really discover the broken pain points of it and the things that are working.

(Tap any of the images to see them full screen)

Website Design

Playlist

App Reviews

How To Create Web Forms Easily and Quickly

I recently had a chance to dive into Paperform, an online form creator that allows you to create beautiful forms, that according to them, is as easy as writing a word doc. They’re right. I made an entire finance application for a client in less than 15 minutes.

Read More
Lead Generation

Best Ways to Get Your Own Construction Leads

Business in today’s economy is a cutthroat and competitive landscape. While marketing and lead generations come and go, with some tactics employed by entrepreneurs ranging from laughable to downright outrageous, one thing is a certain fact: no business can survive without a steady stream of qualified construction leads flowing in daily.

Read More
Lead Generation

How To Get Your Own Kitchen Remodeling Leads

If you’re a contractor or remodeler, generating leads can be a timely, costly and aggravating experience. Word of mouth and reputation can go a long way, but when the phone isn’t ringing like you need it to, harnessing the power of the internet to grow and position your company for long term success is critical.

Read More