3 reasons your website should be mobile responsive and mobile friendly

Why you should care about your website mobile design

I want to start off today by sharing with you three statistics. All three of these stats come from Google.

In the first quarter of 2021 they found that, worldwide, 50% of the minutes that we spend online are spent on a mobile device and in the U S that was even higher at just over 70%.

Your profits really depend on your site speed. If people are accessing your website mostly on mobile, you’ve got to make sure that your mobile site is fast. Here’s why, statistically your bounce rate goes way up the longer it takes for your website to load.

For those of you who are unfamiliar with the bounce rate, this is the percentage of people who leave your website. So if your website has a 30% bounce rate at one second load time, this means that for every 100 people that come 30 leave and 70 stay.

How your bounce rate affects your income

Your bounce rate may be slightly different here, but we’re just going to say that this is a 30% bounce rate at one second. That would mean that at 5 seconds, only 43 people would stay. So 70 people stay at one second, 43 people stay at five seconds and only 30 stay at 10 seconds. You will lose a lot of people if your mobile website is not well built.

So how does this translate into your actual income? Not only do people stay on your website longer, they will actually convert better. Those that do stay will convert.

What is conversion rate?

You may hear the term conversion rate online. What’s your conversion rate? Your conversion rate is when somebody moves from one place in your business to the next place.

So maybe they’re a website visitor and they become an email subscriber or maybe they’re an email subscriber and they become a customer. Those are conversions. So the conversion rate of whatever you’re trying to get someone to do, buy something or join your email list, on your website increases as you decrease your load time.

In fact, Google found that just by decreasing your mobile load time, by just 1/10 of a second, you can increase your conversion rates by as much as 80%.

And number three, mobile design is a must for SEO. So what is SEO? It’s search engine optimization, S E O. This means what we do to our websites so that they’re more likely to turn up in search results. One of the top things that search engines, especially Google, look at to decide if they want to show your website as a search result to someone is if your site is mobile friendly.

Mobile responsive vs Mobile friendly

Let’s talk about what the difference is between something that is mobile responsive and a website that is mobile friendly and how to make sure that yours is both because your website should be both mobile responsive and mobile friendly.

I want to compare this to the different associates that we have in our life. I want you to think of somebody who is your nemesis. Or if you’re the type of person who would never have an enemy or a nemesis, I want you to just imagine with me here for a minute. Your interactions with your nemesis will be memorable. You’ll remember them, but they will have a negative effect on your life. This is what a lack of mobile design is going to do to your website visitors.  You will be memorable, but in all the wrong ways.

So what do I mean by no mobile design? Have you ever been to a website and you’re looking at your phone vertically and you have to change it to horizontal because nothing moved? And then in order to be able to see everything, you have to flip it so you’re looking at your phone horizontally. It’s all just super tiny text and half of it’s off the screen and you can’t find what you want or you’re trying to read and you have to scroll left to right in order to be able to read.

That’s a site that is not mobile responsive. You’ll be remembered in all the wrong ways.

Now let’s think about the associates that you have in your life. These relationships typically don’t take a lot of work.  But they usually aren’t very memorable either. They have no real negative or positive effect on your life.  They’re just there. This is a mobile responsive website.

On a mobile responsive website, there are a few things that are set to happen on that website automatically. So you would design your desktop homepage or webpage and then the system, whatever software you’re using, automatically rearranges your whole page to look better on mobile. Now this takes very little work on your part and it’s much better than having no mobile design, but it isn’t going to make you memorable in the good ways.

Let me give you an actual example of what I mean here. Say you have two columns and on the left column you have an image. And on the right column you have text. On a mobile responsive site, that image on the left column is going to end up on top because left columns in a mobile responsive website will always end up on top. Because we read left to right, they tend to assume that you want the left column on the top.

But what if that image doesn’t make sense without the text? It might feel a little bit, “Hmmm. What’s going on here?” to your website visitor. It might feel a little out of place and a little bit like a hiccup on your website. It’s just not as smooth. In a mobile friendly website you can change that.

Another example of a website that is mobile friendly – Your website headings. One might be set to a size 64 font and on a mobile responsive site it will automatically decrease that, but you don’t get to choose by how much, so maybe it only decreases it to 48 and with your particular font, that’s still really big on mobile.

Mobile responsiveness just does that automatically for you and you don’t have the fine-tooth control.

So let’s move on to the next category of people that we interact with in our lives. These would be our dear, dear friends. These relationships definitely take more work but they are memorable in all the right ways and they have a great effect on our life. This is what mobile friendliness does to your website. It allows you complete fine-tooth control over your mobile site.

In fact, your mobile website could be completely different from your desktop website.

You want your mobile website to be different from your desktop website

Let’s talk about a few reasons why you might want that to happen. So remember the statistic I gave you about site speed and bounce rates and conversion rates? The faster your website is, the more people are going to stay on it. And the faster it’s loading, the more people are going to convert into customers.

So we want our mobile websites to load very, very fast, but there are a few reasons why mobile tends to load slower than desktop overall.

1. Typically the processors in our desktop, or even our laptop, computers are far faster than the processors on our mobile devices. Mobile devices are getting better, but that’s one reason.
2. A lot of people are accessing the internet using data instead of their wifi. And that’s going to be slower, especially depending on what plan they have.

How to make your mobile website load faster

So we want to do everything we can to make our mobile websites load fast. So one thing you can do is to decrease the number of elements that are on your mobile website. What’s the easiest way to do this? It’s to get rid of images.

So you may have 10 images on your desktop website and they load pretty fast. What if you took off half of those on your mobile website so that it could load more quickly? You can do this on a mobile friendly website.

Another reason why you really want this fine-tooth control is because there are a lot of screen sizes. So there are six that are most commonly used. Good designers will really pay attention to these six screen sizes. But there are 50 plus total. I tried to go online and count and it was at least 55-60, and I kind of stopped counting. There are a lot of screen sizes out there. If you really want to be able to design your website in a way that looks good on all screens, you have to have the capability to change the screen size as you are designing it.

You need to know what it looks like on Android phones of all different sizes. I-phones of all different sizes, PCs of all different sizes, laptops of all different sizes, Mac books of all different sizes. I-pads of all different sizes. You have got to be able to look at what your design looks like. Mobile friendly design allows you to do that.

Remember when we were talking about that column order? what if I want that picture to be on the bottom instead of on the top? Mobile friendly website designers allow you to do this.

What about background images? I was working with a client recently and she had a beautiful background image on her homepage. It’s a picture of a bunch of different kids. It’s a landscaped picture. It’s far wider than it is tall. And it looked beautiful at the very top of her desktop homepage, but not on the mobile version.

There were really two different things we could do with it:

#1 – We could allow the entire image to be seen at the top of her mobile website. That made it very, very tiny. It was so short and you couldn’t really see those kids.

#2 – The other option was to give it a set height. We wanted it to take up a quarter of the screen, but then that cut off the right and left sides of the image and we were missing some of the kids.

So in a mobile responsive site you don’t have very many options, but in a mobile friendly site we were able to put a completely different picture at the top of her mobile website than we had at the top of her desktop.

Earlier I mentioned font sizes. This is a big deal on a mobile website. You do not want to have people having to scroll forever just to read. And so if you’ve got a size 64 font on your desktop, you don’t want that on your mobile site. Mobile responsive sites will typically make your fonts slightly smaller, but I love having this fine-tooth control where I get to decide exactly what my site looks like on every screen.

One tiny A-plus example of this is when you have one word hanging out at the bottom of a sentence. There’s just one word on the last line. It looks really awkward. It’s not pleasant to the eye, design wise. I love being able to adjust my font size on different size screens so that one little word will look good anywhere people look at it.

The tool I recommend to make your website mobile friendly

So if you are still here with me through this somewhat technical blog post, first of all I want to give you a big virtual high-five, way to go. This is important stuff and it can feel a little overwhelming at first.

Next, I have a simple solution for you and it is called Elementor Pro. This is a piece of software that works like an app that you can add to your WordPress website. It’s called a plugin, but it’s basically like an app you’d add to your iPhone. It’s an app you add to your website that turns your website into a drag and drop interface. And that is fun and wonderful. While you’re designing your desktop homepage, it gives you so much more control over your website.

But one of the biggest reasons why I love Elementor is not just because it’s drag and drop, but because it is both mobile responsive and mobile friendly. As you design your homepage, Elementor is automatically rearranging things and making the mobile versions of your site mobile responsive. But then you also have complete fine-tooth control.

So when I go over to look at my site on an iPhone 11, I can look at it and see what they’ve already done for me and I don’t have to start from scratch, which is wonderful. There are some pieces of software out there that you design your desktop and then you have to start from scratch and design your mobile and that’s mobile friendly. You get 100% control. But it’s pretty overwhelming and it’s a lot of work if you’ve got a lot of screen sizes you’re trying to design for.

In Elementor, it is mobile responsive. No matter what size screen you look at, it will respond  and make it at least mobile responsive. But from that point forward, you have full control. You can edit and change anything. You can change the screen size to anything you want. You can put in whatever pixels you want and it’ll show you what your website would look like on that size. You can hide elements, images, sections, entire sections or columns on mobile.

You can hide it on desktop. You can create completely different sections for mobile and for desktop. When and if needed, you can change that column order. You can say, “Nope, this time I want the right column on top. Thank you.” It’s just one click. So easy.

You can have completely different background images on mobile versus what you have on desktop. You can change the default sizes of your entire website in one click. You go in and you say, “I want all of my font, like my body font, paragraph font to be 18 on desktop, 15 on tablet and 12 on mobile.” And it will change it across your entire website. And then you can go in and fine tune it on each individual page if you want to.

Elementor is an incredibly powerful tool and it only costs $49 a year. That is a no brainer. If you have any idea what you would pay a designer to code a mobile friendly website for you from scratch, being able to do it yourself for $49 a year is beyond unbelievable. This is an incredible tool. It is the number one tool I recommend to anyone and everyone who asks me for any sort of tech advice about their website.

Get Elementor Pro.

Website templates designed with Elementor Pro

Now you could go buy Elementor Pro and design your website from scratch, from the ground up. But if you would like a starting place, I have website templates that are built using my MAP Method. MAP stands for money and people.

These website templates are built to help you bless the lives of people and make you money. And they’re all built using Elementor Pro. You can find them at DesignedForGoodness.com/elementor-website-templates. If you can’t remember that, just go to DesignedForGoodness.com, hover over the DIY w/support and choose website templates.

If you have any questions about if these templates might be right for you, feel free to reach out to me,  just DM me on Instagram and either I or my assistant, Audra, will respond.