Start Designing Your Website For A Mobile Viewing Experience – 113

Transcript For Start Designing Your Website for a Mobile Viewing Experience – 113;

Caleb Baumgartner: Welcome to Local SEO Tactics where we bring you tips and tricks to get found online. I am producer Caleb Baumgartner and in today’s episode Jesse goes it alone to discuss the shift in focus from designing for desktop to designing for mobile, recent trends means it’s incredibly important to focus on mobile design. Jesse offered tips and insights to make this shift easier for you so you’re more prepared for upcoming trends. Thanks for listening and enjoy the show.

Jesse Dolan: Welcome back to Local SEO Tactics where we bring in tips and tricks to get found online. I’m your host Jesse Dolan, flying solo here for you today, another episode all by my lonesome. I hope you guys and girls are not getting sick of me talking by myself, but alas, here we are together. Today we’re going to be talking about mobile viewing of your website. Now we did talk about this, Bob and I, back on episode 75 here, I’m checking, yes, back in episode 75, we talked about viewing your website on mobile as something to make sure you do, right? Like don’t forget about mobile. Today we’re going to take that a step further and we’re going to talk about how you should start looking at mobile first. This is something very recently we just did in our agency kind of as a habit to all of our developers, all of our SEOs and designers to say, look, stop looking at the website in desktop view. When we check our changes, right? Or when we’re doing our designing, we need to act in a mobile first way now.

Historically you’d make a website, you’d look at it in desktop and then say, well, it’s responsive, it’ll look good in mobile too and we got to flip that thinking. Tell you why here in a second and we’re going to dive into some of the ways to do that then the whys to do it and things like that. First, I want to mention our free instant SEO audit tool, if you haven’t used it yet it’s a really slick tool. People use it multiple times every single day, we get a lot of traffic on it and I think it helps a lot of people out and we get some great feedback from it. You can find it at localseotactics.com, look for the yellow button on the top menu, click it, you enter in the keyword that you want to optimize or score your page against, and I say page because it’s individual webpages, it’s not your website at large, plug in your page, plug in your keyword and it’s going to spit you out a report, a checklist of sorts.

What you need to do, it’s going to tell you what’s good it’s also going to tell you what’s bad and should be some clear action items that you can implement to start improving the SEO on your website. Something else I want to mention is you can use this, well, not only as many times as you want for free but also on any website, doesn’t have to be yours, you don’t have to own it. So if you want to peek under the hood of one of your competitors maybe use this tool to kind of reverse engineer it, things like that, you sure can. It’s not going to tell you everything that they’re doing but you can grade it, right? So I’d say first do yours so you’re familiar with the information that it gives you, then if you’ve got a competitor that’s really kind of a thorn in your side, plug theirs in and see how there’s comparison, try to find some weaknesses that maybe you can strengthen that they haven’t or things like that to take advantage, outflank them.

Let’s check that out, localseotactics.com top right corner, instant SEO audit, click it and win. All right. So here we are talking again about mobile view of your website. I should say, if you haven’t listened to that episode 75, go back, check that out. If you’re a business owner or a marketer, again, what we’re trying to flex there is use your downtime if nothing else. You’re at the doctor’s office, right? Or something else to check out your website, maybe some of your competitors, but get familiar with your website in the mobile view. Like I had said kind of just a minute ago earlier, we’re taking that a step further. So what we’ve done in our agency is a lot of research, looking at our Google Analytics, other data points and just trying to determine depending on the niche and the vertical industry.

Historically mobile device has been on the rise, mobile device usage, I should say, it’s been on the rise for some time, that’s not a surprise to anybody, but there has been verticals and niches that are still kind of predominantly viewed and visited via a desktop browser. If you’re in a business to business niche and if you’re making the assumption that, hey, the people that are patronizing me for my products or my services are other businesses and they’re going to be in the cubicle, in the office or now, still working from home but at the desk. If you’ve been making the assumption that those clients and customers and end users are visiting your website and consuming your information on desktop or laptop type screens, you may want to double check that. We were surprised when we did an audit on all of our properties and all of our clients, basically it wasn’t exactly a 100%.

I’m just going to round it up a few little points and say, all of our websites the majority of traffic that we get is on mobile devices, surprising, very, very surprising, especially some of those business to business verticals where you would just assume this is somebody who’s looking for something that’s commercial or industrial or office related that they must be doing this at work on their work device, right? Or something like that. And just surprising how the scales have tipped now and most of the views are on mobile devices. Now, when we say mobile devices that does encapsulate smartphones for sure of course, but also tablets which are a percentage of this, whether it’s an iPad, a Kindle or things like that. Definitely the smallest percentage for everything we’ve seen just to kind of group it all together, mobile devices, number one, desktop, laptop, number two and then those kind of mid screens, number three.

Those tablets do roll into the mobile just because oftentimes some of those are smaller or they kind of hit that middle area where the screen is not quite big enough, right? To show maybe your full text menu at the top or some of your full images or the layouts so you definitely want to consider those kind of in that mobile category too. So the first thing I would do before we kind of get into the angles of this a little bit more is, do your own discovery, don’t just take my word for it, go check it out. Use your Google Analytics on your website or websites if you have multiple, or if you are a marketer or an agency, check out your client’s websites, but you’re going to want to go into Google Analytics. Hopefully that’s on your website, if not, maybe you’re using something else, there should be a similar process, I’m going to tell you the quick way to get there in Google Analytics to check this out.

If you’re not using Google Analytics or any other kind of analytics on your website, this would probably be a good reminder for you to install something like that. Google Analytics is completely free, you got to set it up, you have to have a Google account. So you’ll have a Google Analytics dashboard, they’ll give you a little bit of code and you got to inject that into your website and from there on out it’s going to track the traffic and the behaviors and a lot of the data and analytics on what happens on your website once you have a visit on your website, it’s great information. So check out your Google Analytics and you can see who is, not who, I shouldn’t say that, what type of device people are using when they visit your website. How do you find that? Log into Google Analytics, over in the left-hand side you’re going to have some icons/menu, find the area for audience, then go down to the tab that says mobile and look at the overview and it’s just going to tell you a real simple stat.

Now, of course you can pick your date range, let’s just say if you’re looking at the last 30 days kind of by default, you’re going to see those three categories, desktop, mobile, and tablet. If you really want to do an exercise, if you’ve been using the Google Analytics for a while, roll that back a couple of years and just kind of watch how that trend happens. And it’s pretty interesting especially a lot of our properties over the last year with the pandemic people working from home more, I don’t know if people are doing emails on their laptop and maybe pulling the phone out for some quick research, but we definitely saw in a lot of our niches the mobile side really increased quite a bit.

So some of the reasons for that, we just pulled up some research and I’m going to share some of this with you. We’re going to link to this in the show page, this is for the pewresearch.org so a pretty reputable source. We had some other bits that we pulled together but this is an easy one to share with some of the stuff I’m going to talk about so I’ll put that out there for everybody. Here’s some interesting stats that are going to make it no mystery as to why mobile has been on the rise for views on the website. A couple of tidbits here, 97% of Americans own a cell phone of some kind, 85% own a smartphone, right? So not all cell phones are smartphones, not still today but a vast majority of those are. Some other figures here, the type of people who have a smartphone and are dependent on that as their source of internet connection is about 15% here in the US for adults which is pretty interesting.

So one in 10/two in 10 of us out there, our phone is our source of internet connection, right? Which means almost by default you’re probably almost always going to be looking at websites on your phone unless you’re using it as a hotspot. Who is smartphone dependent? So this is pretty interesting. So kind of within that segment, 18 to 29 year olds, which is a pretty important demographic for auto websites, 28% of them are smartphone dependent, right? So that’s almost one third, that’s their source of internet connection, right? This is a big group of buyers, right? Of influencers, people searching for things, that should make you sit up in your chair and take some actions here. And these numbers are on the rise by the way, right? This is not a trend that’s dropping off anytime soon, this is just where we’re at on this continued cycle going up.

So that’s basically the context on why we have more people viewing on mobile, again, this is not going to be reversing anytime soon and I think if you jump into your stats and do some research, you’re going to be surprised too. We’ve been operating under the assumption that some industries and niches, again, if it’s more consumer based, for sure had been more mobile than desktop and some of these are 80 or 90% mobile views. Now some of these that are more in industrial or commercial, like I said, it’s not as drastic, you might be looking at 55, 65% mobile versus desktop but still that’s the majority of people, right? That doesn’t mean you should diminish the fact or the importance of mobile over desktop because clearly more people are viewing it on mobile than desktop. And just looking at it from the sheer math, you have to serve those clients better, they have to be your primary focus because they are the majority.

All right. So now what do we do with this information, right? Well, what we’ve done internally is had discussion, again, with all of our developer and our designer team saying, we have to view our work in mobile. If you’re one of our clients and we’re sitting down and we’re doing some SEO for you, whatever that means, right? That’s a very broad term. But we’re in your website, we’re doing some SEO, we click publish to push the change out then the natural process is to view that page live like, okay, did it work? Is there any bugs? Is my text where I wanted it? Did that change take hold? Is it updated? We internally have been viewing that. If I’m working in Chrome, right? I have one tab open, I’m in the backend of those WordPress site, I have another tab open, I’m looking at the front end to view my changes, that’s just the natural process, it’s quick, it’s easy and I’ve been doing it for years. We have to shift our thinking now and I think you do too.

You have to make sure when you’re checking that chain that you’re viewing it, excuse me, that you’re viewing it in mobile and not desktop mode. Now, I don’t think anytime soon we’re going to be changing our backend to be where we’re working within mobile, right? There’s just certain things that are just so much more easy on desktop for the development side, that’s going to stay the same. But when we view it to checkout our changes, we have to be doing that in mobile first. And when we are designing and modifying websites, we then have to take that mobile first viewing approach and translate that into how we’re pushing content out there. If you’ve got a nice big hero image, right? At the top of your webpage or maybe a big call to action with a big button, things like that, how does that look on mobile? Oftentimes you may find that the header, right? If you have a logo, maybe phone number, maybe a button for your menu for your website, that header may take up half of the visible screen on mobile when you pull up that page.

If that’s the case, that’s not a good experience, that means you only have half of a screen to get your most important message across, right? And I’m not talking about so much about SEO at this point, this is somebody who has already landed on your website so they found your website, this is going to be more of a conversion and then kind of an indirect SEO benefit here. So we wanted to make sure you take a look at some of these things, how does it look on mobile? Do you have to shrink down the header? Do you have to rearrange some things? Whereas maybe on desktop, if you had a nice hero image, maybe some good text and then a big call to action button, that’s the main purpose for your page, if that’s all down the screen on mobile does that mean nobody’s going to get to it? Absolutely not.

But what we’re saying is, if it was important before in your design when you were looking at it from desktop, if it was important for that to be something you saw immediately, right? So it just clicked instantly, that has to be true in mobile too and you have to change your design, right? And maybe some of your position for some things to make that also be the first thing that a client sees when they’re mobile. Now with this there also is a little bit of a skewed in the statistics that if somebody is on mobile, they may be looking to purchase or engage with you or patronize you quicker because they may be are mobile, right? If you’re looking for a coffee shop, I want to go to a coffee shop right now.

And those types of scenarios and that type of intense makes it even more imperative that you do connect immediately with the purpose and the intent of the page on that visible screen, right? That is something that makes us have to take pause and really understand again, the intent and the purpose of this page, why somebody is landing on it, what did they search for to make sure that apex of that is there. Now, like I had kind of mentioned earlier in the episode, historically, the kind of psychological process that myself and my team and probably all of you listening out there I’ve had is we’d make the changes, we’d check it out on the laptop or the desktop type view, know that our website and our theme is mobile responsive, right? It’s going to have a layout that adjusts for whatever device you’re on, it’s going to rearrange the columns, rearrange the rows and still look presentable on mobile and that’s what we would say is it looks good and it’s going to look good on mobile too because it’s a responsive theme.

But we haven’t really looked and paid attention to and designed it for mobile first, which is really a completely different process. And what I’m trying to underline here is flip that around, view it on mobile, optimize it for that mobile experience, right? In that first screen that you see and then say, well, this will look good on desktop too because we have a responsive theme, right? Now I’m not saying that you should ignore how it looks on desktop, laptop, on those larger screens, to the contrary, just like we did before, where episode 75 is make sure to check your device on mobile, hey, I’m sorry, make sure you check your page on mobile, make sure you check your page on laptop too, make sure you check your page on desktop too.

Just saying, make mobile be the first that you look at, and if it doesn’t come back in dividends for you now, it will over time because the trend is going, we’re using mobile devices more and more, we’re looking at that as our primary source for visiting websites and that’s the screen you’re going to have to be optimizing your site for, your design for, your brand for. Now a couple nuggets, getting a little bit deeper into the technical parts here, that all sounds good but that can be maybe pretty cumbersome and clunky especially if you’re a developer out there going, yeah, that just sounds great but so what do I got to do? Pull my phone out and check every webpage that I’m designing? Yeah you can do that but that’s definitely, agree with you, kind of clunky.

So there’s a couple other things you can do that of course is an option, what you can also do is maybe if you’re using let’s just say Google Chrome for an example, you have a tab/window open where you’re in the backend of WordPress making the changes, then you can have another one, maybe you have multiple screens, maybe you don’t, but have another tab and just resize your browser. You can just scrunch that thing over, right? Make it like a single column, kind of narrow and resize it to be about what a phone would look like and you’re going to see what your website looks like with that kind of responsive layout and that’s good and quick and easy to do.

This was something that our team kind of brought up and what we’re starting to use for our default method is using again, this is within Google Chrome so this may not be available if you’re not a Chrome user, but just jump into the dev tools, right? Slash lighthouse area within Google Chrome, if you’re not familiar with that, open up your website or really any website or web page. You can get to this area in two ways, one, you can click F12 on your keyboard and it’ll pop it up or two, you can right click and click on inspect, both of those are going to open up the Google development tools. And let me just open one up so I can talk through here with you and be accurate. So then what you’re going to have is on one side of your screen, you’re going to have the rendered version of your website either on a mobile device, a little mock it up on mobile, or it might show it in more of a desktop view.

You can toggle that kind of up towards the middle, you’re going to see a toggle device toolbar. It’s going to look like this image where you got a big square and a little square, right? Like a big screen and then a smartphone in front of it, kind of an icon, if you click that, you’re going to flip back and forth between mobile and desktop view. So of course, what we’re talking here is keep that on mobile view, right? There’s a couple of real interesting things that Google has built into this which are super handy and again, have this open in one tab, have your website open editing and the other tab, and this is where you can easily make that change, come over here, what does that look like on mobile? Super handy, very seamless and not at all clunky. Some other interesting parts here is you can pick the different size phones, different screens, right?

So I’m looking at it right now, whatever here in June 24th, just for a timestamp for 2021, we’ve got Pixel 2, Pixel 2 XL, Moto G4, Galaxy S5, we got iPhone 5, 6, 7, 8, 6, 7, 8 Plus, iPhone X, iPad, iPad Pro, Surface Duo, Galaxy Fold. You can also put in your own custom sizes if you know the pixel dimensions of any given screen, you can add your own to that too. So not only can you check it out on mobile, you can check it on actual devices for how it’s going to render on that device to kind of get even a little deeper into the reads, how it’s going to render. There’s some other cool functions, you can load your website, they have a throttle, like mid tier mobile, low-end mobile, how fast does it load other factors, how it’s going to look.

And then there’s also another button where you can rotate it, landscape or portrait mode, right? So how are you holding your phone? Are you holding it sideways? Are you holding it up and down? Which is also important for just checking out, how does this experience work? How does it look? So that right there for me at least is one argument towards using the built-in dev tools in Google Chrome to view your website in mobile when you’re making changes. All right. And then the last thing I want to share with you as kind of one pitfall that our team has kind of come across. From an SEO standpoint, something we’re trying to avoid and a lot of web themes, particularly WordPress themes will have this built in and yours may too, it’s attractive to do this but we’re trying to avoid it as a rule just to future-proof ourselves and make SEO a little bit easier is we want to avoid having different versions show for different screens.

So if I’m in WordPress and let’s just say I have this big call to action on top of the page, I can have that show just on a large screen or just on a desktop screen and then I can make a different version that’s going to show on a mobile phone, a smartphone or a small screen. And depending on what kind of browser or device type is using to access my website, the theme in WordPress is automatically going to show you the correct elements, right? Or the correct layout, which is great, that helps you really optimize your page for that viewing experience but from an SEO perspective, that can be a bit of a dangerous trap. Let’s just say you go in and if you have two different above the fold call to actions or two different kinds of hero images or slides.

Let’s say you create them, you create one for desktop, one for mobile, everything is great, everything is happy, that works great for both sides. Three months down the road, maybe you’re working on your SEO to improve your rankings and you go in and you maybe change that text, maybe change your h1, some other things. Number one, you’re going to have to remember to do that now twice every time, right? Wherever you had a desktop version and a mobile version you’re going to have to update that on both of them. Number two, depending on the size of those areas and what you’re doing, you may start to have different messages that are showing there, right? And you’re literally changing the content to be different on mobile versus desktop for the actual words, messaging, texts, things like that. And the kind of asterix for that outside of the danger of starting to have it not be updated on both, right? Because maybe you forgot you had a version of each.

The other side is if you’re using different tools to help with optimization or tips or analysis or kind of running stats and things on your website, which one are they looking at, right? Did you run that on a desktop view or did you run that in a mobile view? Which call to action was it seeing? Which here image? Which slide was it seeing? What we’re trying to do is just eliminate those variables, right? Kind of future-proof it, streamline it. If you operate saying, I want to design this for the mobile experience first, and when I’m saying mobile first I’m not talking about the Google indexing being mobile first, which is something from a couple of years ago, we’re talking about designing your website, viewing your website and looking at it as a user on mobile first as your priority not desktop or laptop which is just the easiest thing to do.

I think if you do that you’re going to be connected with your clients better, your end users better, because again, they are using mobile to access your devices as a majority, that’s not slowing down, that’s going to be a higher percentage every day, week, month that we go forward and you’re to do self a big favor by jumping on board with us now ahead your competitors. Inherently what we see as a benefit as we’re doing this is we’re developing sites that are cleaner more accurate to the intent for what the purpose was for the client or the end user to visit matching that up with what we’re putting on there, to make sure that they know they’re in the right place right away, and also maybe loading faster, right? The speed that your website loads on mobile is a big factor we know for SEO so usually we’re kind of fine tuning that along the way as well.

And more than anything what I want to get across here, this was kind of a psychological shift, how we think, how we’re defining our processes, internally or if you’re an agency doing this for your clients, to have everybody on board with us, have your clients, have your marketing managers, have your team, everybody within your company, whoever it is understanding that when we look at our website and we give feedback or recommendations mobile first in that sense too because that’s what your customers, your prospects and visitors to your website are doing more often than not, the numbers don’t lie, it’s just pure math. All right. I hope that helps everybody out, I know it’s helped us out. It’s a hard habit to break but if you have a good plan and maybe taking some of these tips that we shared here today, make your life a little bit easier for that transition.

And like I said, I think that investment into that change is going to come back and drills for you because this is where we’re headed. All right. If you enjoyed that and if you found some value in that, I would ask for a review from you on this show and on this podcast. If you are so inclined, please go out to localseotactics.com, scroll to the bottom, click the link for reviews, pick the portal that you’d love to leave a review on and we will be happy to receive that, actually very excited to receive it. I love seeing new fresh reviews, who doesn’t like reading praise, right? But in all seriousness, that’s the mechanism for you to leave us feedback to let us know that you’re enjoying this show, you want more episodes, you want more contents and that we’re actually helping you out there.
Most of the reviews that we read do echo that sentiment and I hope you feeling that way too and we’d love to hear it from you. Local SEO Tactics down the bottom, click the button for reviews, and it should be pretty evident from there where you want to go. All right, I am going to read this great review here we have from Nicolette Mead, very short and sweet, says, excellent information on SEO and super helpful, love the podcast. Thanks for that Nicolette, I appreciate the kind words and we’re happy to hear from you. So once again, thanks everybody for tuning into this episode, hopefully this mobile first kind of shift helps you out with your business and now your client base as well and we’ll catch you on the next episode. Thanks. Take care.