Mobile vs. Desktop: Stop Assuming What Works on Both | Coaching Corner #031

Hey, what's going on everybody? Welcome back, it's Tuesday coaching corner. We hope you had a great Fourth of July and now we're back in the swing of things.

That's right, yeah, another Tuesday. Uh, and again, I'm not gonna say it, Dave's gonna say it this time. We have—

it's another fun one for you. This one's all right, a fun one.

Post-4th of July Tuesday, baby! We're coming back with, uh, something fun here. This could be one that's, um, I feel like we always overlook— or not even overlook, it's not even— it's just not talked about as much when it comes to testing and optimizing and making sure that you are, uh, continuously test— like, I don't know, putting things out there to see what works and what doesn't work. Specifically, we're talking about mobile optimizations. And how we can test or A/B test stuff for the mobile users, mobile side. Um, a lot of people that come to your funnels or websites or landing pages or whatever are probably gonna be on their phone at this point. Um, wouldn't you agree? Would you say that?

Yep, that's very true. Probably 70 to 80% of the traffic out there is on mobile.

Yeah, obviously it depends on like your demographic, your audience, the audience, you know, there's, there's a ton of stuff that can come into play for that. Um, yeah, anyways, really we are just talking about how to, um, optimize between desktop and mobile— desktop versus mobile. Let me share my screen here and kind of show you what we're talking about. Um, so we—

I feel like it's—

we've talked about this before, uh, or we've shown before how to somewhat have a split test, how to set up split tests, but we only show examples on desktop side. Um, I feel like that's all I ever see online as well. I'd never see like, uh, somebody explicitly saying that on mobile we should probably also test to see what people interact with more or what, what helps them, uh, move forward easier, right?

Yeah.

And, uh, that should definitely be coming into the conversation. So, uh, your design choice definitely matters across device types. There's less real estate on mobile versus desktop. Right, as far as like screen and what you can pack in there and what you can show all at once. And if you try to cram everything in there and say you have like the same, uh, hero section where normally you'd have like a 2-column row, you have an image on the left, you have a headline, you have, uh, you know, maybe input fields and everything show, showing one area, it's going to stack on mobile and it's going to look really cramped if you try to still have all that same stuff in that same area, likely. Um, And it's worth, worth testing. So we're going to figure out, so we're talking about what converts better— or sorry, what converts on desktop doesn't always work on mobile and vice versa, right? Um, sometimes a video works best on desktop, doesn't always work best on mobile, maybe, you know. Or maybe images shouldn't be shown on mobile because they take up too much room, and on desktop side it just makes sense. Um, it just looks— it adds to the design over, over overall, right? Yep. Um, so yeah, anyways, today we're just gonna be giving you some frameworks. Oh, I must be looking at an old one.

Uh, a little bit. It did update the bottom ones.

It didn't update. Oh my goodness gracious.

Okay, I was just looking at that myself. I was about to edit that.

Like, we're not talking about framework libraries at all. I'll make sure that's updated for the post side of things, I guess. That is last week. Yeah, we did talk about frameworks, but regardless, we're just talking about things that you can do for mobile versus desktop. We're gonna show some examples of what to look for, some dos, some don'ts. Yeah, some dos, some don'ts, and also maybe how you can end up doing this all or testing this all on your side if you're doing, doing the homework, right? We're going out there, we're looking at other industries or other, um, other sites, other funnels that we're trying to funnel hack, um, You know, if we're looking at that and we want to see the mobile side without going to our phone, we'll show you exactly how to do that and make it— how to make it easier on your life and all that fun stuff.

Yeah, yeah. So yeah, so let's dive into it. So we got a couple of examples queued up here for you. First one is the beloved dotcomsecrets.com. And what we're going to do is pull it up side by side, desktop version versus the mobile version, and we'll point out some differences between the two. And just to give you some best practices of what to do and what not to do between a couple of these examples. And then you can learn from these examples and maybe move some things around on your pages to increase your conversions. Okay, on mobile. Alright, so here we go. What we're going to do is we're going to right-click and duplicate this page. And then we're going to bring it over here. And we're going to squeeze it down just a little bit and use this little handy-dandy extension called the Mobile Simulator. And it's going to make it into a mobile view. All right. How cool is that?

Right? So my favorite extension today, I don't know. It just looks nice. It looks exactly how you would expect it to.

Yeah, exactly. Very handy. Okay. So as funnel builders and designers, we may pick out some things that you may have, may not have otherwise noticed are differences. Okay, so just how things would look if you did not make any changes. This is how it would normally look, guys. So that it would be, um, everything on the left-hand column would stack on top of the right-hand column. Okay, so let's talk about that. So first off, we have the headline up here, all the way down to this headline is the same over here on the right-hand side, the video is there as well. And then it breaks into a different row, different columns down here. So next that should be showing, next straight down would be this image of the book. Now notice how they actually put the ratings from here on desktop right above the book on mobile because they wanted that to show as high as possible into above the fold. So above the fold is everything that you see instantly with, as soon as you land on the page without you having to go anywhere or do anything. Okay, so they wanted people to see that it has 5 stars, a 4.6 rating, 2,000, uh, among 2,340 Amazon ratings. Okay, pretty dang cool. All right, so this is one of the differences between desktop versus mobile.

So much more condensed, like you— not condensed, but like you're taking advantage of, again, vertical spacing is gonna be your greatest asset. So if you're stacking things like crazy and you you are hiding that call to action even more, it's gonna probably reduce that moving forward action that you want them to actually take. Yep.

Now on the left-hand side, on this one, notice the pop-up or no?

I was just asking the question, like, for the mobile side.

Desktop, we have pop-up. Mobile, we have pop-up as well.

Okay, cool.

Yep.

All right.

Now one other difference that we notice here is on the left-hand side, we have this image where it says— yeah, you can see it. Yes, the master himself, and then the goat of marketing on mobile. They did not do that, I believe, just to keep the spacing nice and pretty right here, because otherwise the Yes, the master himself image would have populated right here. And maybe that was just— maybe it overlapped on top of Dan's images and they didn't want that. So just made sense to remove it completely.

All right.

That's about it for that one.

Yeah. Easy, straightforward. It's not always like something crazy either. It's probably worth mentioning here. We're not talking about maybe, you know, having a 100% different page every time between mobile and desktop. It's more like small tweaks that can change the user experience overall. This is the example right here that I was— that's why I was asking about the popup. This one does utilize the other side where it doesn't have the popup at all. It has inline, uh, for the forms.

Exactly. So here we have the, uh, the One Comma Club Challenge. And on the right-hand side is mobile. Let's talk about some of the differences. Okay, so text alignment is all centered. Okay, centered on the right as well. We have a difference. Okay, so it normally, you would expect it to go from Create Your First $1,000 to Join the Free One Combo Club Challenge. But over here on the right-hand side, that one's actually hidden. And I think they did that because they wanted the button to be as closely visible towards the top as possible. So we just got this one headline right here that is desktop only, and on mobile it goes straight to this subheadline. Okay, the rest is the same. And the, um, on mobile, uh, looks like we're going with the, uh, the required name, full name, email address, phone number's optional. And on desktop, it was the same input fields. And they copied this headline— sorry, this disclosure information and put it here on mobile. That way, it's just a little bit, a couple of clicks faster for opt-in.

I mean, one click versus two, one to open the pop-up. And then, yeah, true.

Now, quick note, here's a do and a don't. If you have a you know, different places where the, the, the input fields are on, on the page. So for this example, we have the input fields on the pop-up, and we also have the input fields here on mobile only. So if you do that, just make sure that they're the exact same input fields, especially if, you know, especially if one is required. Okay, because like, if you have one that's required on desktop, let's say maybe you added, I don't know, a shipping address on desktop and it was required, but you didn't add that to mobile, they're not going to be able to submit the page because the, uh, the shipping address is hidden, but it's still there on the page for mobile. It's a little confusing, but just make sure that you add the exact same input fields on desktop versus mobile.

If you do this, if it doesn't see that, if it— if you haven't filled in the form, even though it's only shown for desktop it'll still require it to, to be able to submit that page. In this case, we're using the exact same ones. So that makes sense.

Yep. Yep. All right. Now let's look down a little bit further. We noticed one other difference here. This social proof banner is actually, I think, moved down a little bit further. By the way, before we move down any further, the video What happened was they just injected this bit of text right up underneath the button or above the video, and everything else is good from there. Now, this social proof bar is not showing right here in the same spot like you would expect it to be on mobile. And maybe it got moved down, but I believe it actually— I believe it actually is hidden altogether.

I'm pretty sure that's what I'm seeing right here.

Yeah, yeah. And this, uh, this newspaper article is actually hidden altogether as well too, probably just to reduce the amount of scrolling that you have to do on mobile. Yeah, it wasn't like that, you know.

You don't want to, you want to overstimulate the thumb at all, right?

Yeah, yeah. Let's see, overstimulate the thumb. Uh, let's see. Up and there is a sticky popup down at the bottom. I believe that you have to add a little bit of custom code in order to make this show up at a specific element once you scroll down to it. Yeah, so I'm glad— glad— can—

JavaScript—

I can help you with that one.

All right.

Other than that, everything else here virtually looks the same order.

Yeah, the same content. Yeah. Small differences, small tweaks. I think the main goal, at least from what I was seeing, was just to, yeah, probably reduce the amount of scrolling because it's easier to scroll through that information on desktop, uh, versus mobile. But the mobile side, I liked that they are testing the, the pop-up. I feel like that's a big one on mobile. Like, it— I don't know, there's less— it's one less click, but that makes a big difference, I feel like. Oh, what? Yeah.

I also noticed this, the support and the login options are not there on mobile.

Mm-hmm.

So that was desktop only. I wonder if that's added to the bottom because I've seen that before. Oh, there was a confetti there. That's nice. Everyone loves confetti. All right. Sometimes I see the support and login at the bottom if it's not at the top, but it looks like it's not here.

No big deal. Only again, just taking up that, that above the fold hero section there. I feel like it's, it would just take up that unnecessary room.

Yep. All right, let's move on. The AIsecretschallenge.com. Okay, so we got headline, subheadline. We got a banner up here at the top.

Okay.

We have image on the left-hand side.

Mm-hmm.

All right, now here's the difference. So on the left-hand side, there's no button right below the image. On the right-hand side, there is a button right below the image. Okay, so we basically just cloned this button here and moved it right up under this image for mobile only. That way it is above the fold as far as possible and easy for people to see the call to action and take that action.

Let's keep going.

All right, so, so far everything else is the same, not much, uh, difference. And one of the dos that we would definitely recommend is to reduce the amount of work that you have to do, you know, on desktop versus mobile. So what I'm seeing here is that that certain, just certain elements are hidden on desktop. And they're shown on mobile, but overall, the page is the same. And it's not putting a section. So here's a don't, in most cases, to not put the entire section as one for desktop and one for mobile, because what you're going to do there is you're going to create a lot more work for yourself. And, you know, nobody likes more work, just no, I have some time in heading.

That's a big one. Especially if you have like a big content block where you have to go through and update a ton of different text elements, it's going to take you— well, one, obviously time, but like you have to remember that every single time that you do have a mobile side to that page. And yeah, sometimes you will forget. I've done that in the past.

Just don't— just save yourself some headache. Yeah, it is a hassle doing both, you know, making two changes and making sure that you remember where those changes are. It's just don't, don't do it. Just make certain elements, you know, hidden on desktop or mobile.

Okay, only when needed. I agree.

Yes. Now notice here as well too, uh, they hid these, uh, the event time, uh, the date and the time of the event on mobile. Normally it would be showing right up under this, but it's not there. Probably just to— say what?

Still the countdown, so you still can see like when the event is happening.

Yeah, probably just to reduce the amount of scroll time.

Yeah.

Okay, let's keep going. Now I'm looking at this. I like this texting, this text typewriter effect, and I don't see that on mobile. So it looks like they hid that on mobile as well.

Definitely. Yeah, got straight to— I think it just comes to the amount of room. Yeah, that would make sense to me.

Okay, now I'm, now I'm paying attention to the sticky button at the bottom. Let's scroll down. So notice how there's not a sticky button at the bottom right here on mobile, but it is a good idea. Um, now on the left-hand side, that popped up right there. Probably it's based on whenever we scroll to like this headline or this, uh, this row. So section, whatever it is. And on the right-hand side, watch, keep an eye on the bottom. It's going to populate right there. Boom. So that would require a bit of custom code in order to make that appear once you scroll to a certain element. Otherwise, it's fairly simple to get that. And Tyson, would you queue up an editor to show the people how to do that?

Yeah.

Cool.

We're going to keep going.

All right. So, okay. Otherwise, so far the same thing. And not noticing any differences yet.

I feel like most of the updates that you end up doing are going to be above the fold, like at the top of the page is probably the main points or main— yeah, main focal point of these types of tests and split test adjustments, just because that's going to be where most of the eyeballs are going to be. Some people will scroll down, but a majority of people are going to be paying attention to that initial above the fold. Or the hero section.

That's a good point. All right. I did notice a change here where Russell Brunson normally would be below the picture, but they added it above the picture on mobile. So that one's also an easy change where you can have a regular row, regular row element, and then you would just set the different direction in the settings. So if you could cue that up as well. Uh, then we can show them how to do that.

Are you ready? We can walk through it.

Yeah. All right, let's do it for sure.

So the one that he was just referring to, um, first off, I will put a link to this training inside of the chat in a moment, but, uh, we did a mobile optimization stuff not too far— well, I don't know, maybe like 10 episodes ago. Um, anyways, check it out and it will walk you through this overall stuff as far as what I'm referring to. Uh, but regarding changing the direction of a row on mobile, we just go to the settings of that row. You can do it on desktop side, you can do on the mobile side, either way. Um, just go to the settings. From there, go to Advanced over here at the top right, and then you should be an option— or start seeing an option for Display Columns on Mobile, and you can adjust how that is going to orient, um, or how it's oriented on that device, right? So if I want to reverse that I can. You can do side by side if you want to. If you want to get crazy, uh, probably wouldn't recommend that, but you can. You have the option. It depends on the scenario, right? But you do have the ability to configure this and have some control over it all. Yep. Um, and what was the other one that you were bringing up here? It was the fact— oh, animated, right? Animation over time.

Um, kind of stickiness. It's the sticky section at the bottom.

Yeah, okay, cool. So for sections, right, we'll go to this section right here, click on the gear icon. Boom, there we go. And then at the very top, or kind of the top, top third there, we should see an option for sticky in the size and position section right here, right? Click on that dropdown and you should see an option to stick to bottom on load. That's it.

Uh, or yeah, do you think you can, you think you can make a sticky button section on, on the fly here?

I'm gonna show the people. Oh, for sure.

Yeah, at the top.

Um, I'm gonna go ahead and do it right here.

Do it, do it. How dare you show the people your skills.

I'm trying to use this fast mouse here, you know. Okay, we'll do one button there. We'll do button element.

So just so everyone knows, um, the stickiness is only available on the section itself, and so you have to make everything else inside that section. And then what you're going to do in most cases is make the section itself with no background. So a transparent background, that way all that it appears to show is the button sticky at the bottom. None.

I'm not previewing anymore, but it is set there.

And then settings.

Yes, to get the bottom, just so you can see a preview. It is there and set in the editor. As I scroll it, now it's all funky because it doesn't belong here. But, but all you do is change the sticky setting. You can choose whatever you want— on bottom, unload, or on top. If you want to preview in the editor, there's a little option here.

Let's go ahead and finish that out. Can you put that to mobile only and then go to the settings there for mobile?

You put me to work, dude.

There we go. So sorry, but this is what you gotta— you gotta do, people. You gotta set that to mobile only.

There we go.

And it's okay to have it at the top because they won't see it anyways.

Yeah, all right. Uh, and then you want it to stick to bottom preview.

Yep, stick bottom on load. There we go. Boom, that's it. Now don't fret if it looks like it's here up at the top on the editor. It won't show, uh, on mobile because it's going to show right there at the bottom.

Look at that.

Boom, very nice. Nicely done. Well done. Let's move on. We got a couple more. We got one more, two more examples.

You got an example? Oh man, let's get it.

Yep. Okay, here we go. So next we're gonna go to the One Funnel Away Challenge. And there was one main difference that we noticed here. Okay.

Mm-hmm.

So going through this headline, headline, subheadline, that's all the same. Then normally we would see the video. All right, then normally we would see this image next, but what we see is this button right up underneath the video. So, and it's actually not shown underneath the headline, which is where it's shown on desktop. So all that we did was we cloned this button and moved it up to the top and then marked that for mobile only. And then we also marked this button for desktop only. Okay. And the purpose for that, here's a do, is to try and move all of the the call to action stuff up towards the top above the fold as best you can. Okay.

Yeah. The initial load is, it's a big component here. You got to think about that.

Yeah.

Yeah.

Um, and, and I like the point that you made earlier where it's mostly going to be the stuff above the fold that you're going to be making these optimizations for. So, okay. Now let's go on to this.

Unless you see in tracking, like if you're using like, uh, I don't know, Microsoft Clarity does view people's experiences and what people are doing on mobile, and they happen to be going down and get stuck at a certain part, another part of the page. Cool, then we test that part as well, uh, or just, you know, do some sort of A/B test there to see what works and what doesn't. But based off of data beyond the hero section— hero section for sure is usually where your eyeballs are going to be going to. Start off with—

true, true, true.

Yes.

All right, let's take a look at this one. Now here's a cool one. A nifty one. And we can point out some little, little nuances here that you may not have noticed otherwise. So if no changes were made, we would see the image at the top over here on the right-hand side. Okay, if no changes were made, we would also see all of this text left-aligned on mobile, but it's all middle-aligned. And then also, if no changes were made, we would see this button at the very bottom of the white section. But it's not, it's up towards the top. So it looks like this row was probably like— this whole row was probably set to desktop only. And then it was cloned and another one was made for mobile only. And so this text here, I don't know that for a fact, by the way, but I'm just guessing. But this text here was— is a different text element than all these text elements up here. Okay, there's not a way to have a desktop alignment versus a mobile alignment with the same element currently. Yeah, maybe a change in the future.

You said you're guessing, but at this point this is more of like an educated guess based off of seeing this. I don't even want to say hundreds, it's probably thousands if not, right? You're probably in the millions now, you know. You're— you have a repository here. Yeah.

All right. So a couple of the, the dos that we can point out here. Uh, it's good to have middle-aligned text on mobile. Okay. Because that way it's all kind of in the middle. It doesn't read like a, like a blog article. Um, you know, blog articles usually have them like left-aligned, but not this one. This one's more like headlines and we want you to take action and not just continue to feel like it's like a, a newspaper and just keep reading it.

Mm-hmm.

So also the button was moved up pretty high up. In the middle. So we don't have to scroll at all in order to see the call to action. Okay, start watching now is an easy right there, center of the page. Let's click it. And then the image was not really the most important thing here. So they move that down towards the bottom.

It's a supporting agent, I would say, like it is just the thing to help support what already existed. Yeah.

Yeah. All right, we got a little more time. Let's talk about 5dayleadchallenge.com. Let's see if that is a good one. Unless if you wanted to bring up some other points.

I do have some other points, like things worth mentioning maybe before, but if you have, we can look at this over too.

I think we have to do this one real quick.

Yeah.

Okay. So if no changes were made, then this image right here would be placed right up under this red stinger banner. Oops, it will be right there, but it wasn't the most important thing, so they moved it down here. Uh, again, the most important thing was the headline, which is the same on desktop. Actually, that looks like it's its own image.

It is.

And I think that's done just so you know.

Oops.

Um, uh, that is probably done that way. Um, that way you can actually click the text and it brings up the popup. So if somebody accidentally just clicked it with their thumb instead of scrolling down, then it brings that up. Yes, I saw you click it before earlier.

I was like, huh, yes, highlighted and set it as a link or something.

Exactly. Yeah. All right, here's the difference on the pop-up. The image is desktop only. Everything else is the same. So that's something as well too. Okay, uh, and then the image was moved down here on mobile.

So reverse.

Now for— yeah, now for this example, they probably just did what Tyson showed in the row settings where you can have it— the order change on desk, on mobile. And so this is like the upside down direction.

Nice.

Other than that, it looks probably the same from here on out.

Yeah.

All right, Tyson, what were you over some of those points.

Oh yeah, oh yeah, let's do this thing. Okay, so back to the slides then. Just like common scenarios that you can probably think about as you're going through and trying to make these adjustments. Um, a sticky call to— or call to action button, we already kind of mentioned that. You know, you can experiment with that on mobile versus desktop, see if it actually does do anything on, on mobile. Obviously As you do all these adjustments though, make sure you're monitoring, make sure you're doing some form of, of tracking. Again, Microsoft Clarity, use it. And they— their motto is it's free forever. Okay, it's the most wonderful tool I've ever used that is for tracking. There's outside of ClickFunnels, um, because you can see exactly what's happening. If people click on the button or they get stuck because the button pops up, whatever, you can see it, you can understand what— where the break is actually happening, and we can go and make that adjustment quickly. Um, pop-up versus having inline form, right? We saw that with one of the examples today as well, where there was a clear button on the desktop side, but on mobile, the form itself was all on the page itself. So there's no double-click. You don't have to click the button, then open a pop-up, then fill in the form. Not to say it doesn't work, but maybe we are just testing to see if it works better. And that's it. That is the example that I would probably start with. Honestly, not start with, but it's definitely something worth trying. Um, I usually go between that or the headline when starting out, like to see what's— if, if the length has any, any play here as far as, um, feedback goes on the page itself. I feel like mobile people are scrolling way faster than desktop. At least that's what it seems like when I'm, I'm watching over analytics and whatnot on my side. Um, like you have to be quick with getting that information that they need to move forward. In front of their face. Um, you know, video at the top versus no video, right? We saw that as an example on one of the, one of the pages here where maybe the video is brought down on the page, or we experimented with not having it at all on the mobile side just because it interferes with what we can show or the amount of room that we have to have everything above the fold, right? Um, yeah, long-form sales copy versus condensed version with Lexicon. Less text. Again, it's come back— coming down to the same principle. I feel like less visual real estate, you want to probably try to get your point across with less. Less is more, I think, on visual— on mobile is probably the main thing I'm coming back to. Um, full navigation menu versus no navigation menu, right? Go down this list, there's a bunch of different things you can kind of test and, and use for yourself. I'm just giving examples of what you could do, common scenarios that, uh, you could end up using on your own side, right? Uh, yeah, the link down there on the, on the screen here, coach— or clifffunnels.com/coaching-corner will take you to these notes and you can use them for until next week. We always update the same page, so it's the same link every time. Um, yeah, large call to action button versus small. All right, you get the point. There's other— there's a bunch of things you can do Um, if you want to bounce ideas off of us, you'll find us in open office hours. We are happy to do that with you. Uh, or AI. AI is a great tool. Just go to like ChatGPT, Claude, whatever, and, uh, put your questions— I can do them both at once. Oh, uh, you know, just put your, put your thoughts in there and, uh, or what you're trying to work on, and it'll help kind of theorize or give you some examples of what you can adjust. But This all goes to say that I wanna create, or I wanna, sorry, I wanna make one thing hopefully clear here in scenario. You don't wanna test 102 things at once. You're not gonna be able to know what's working, what's not working. I usually will do one, maybe two things, at least if you're doing on your end, as far as tracking goes and understanding like what is working. How are you going to know if you're doing like too many things where you can't actually track what the change was or what the actual measurable difference was? Try to keep it to a minimum as far as what we're testing at every single interval, right?

Exactly.

Um, anything to add on that?

Yes, do not use PNG format for images, and because it's too large, and do use WebP because it's like It's like if JPEG and PNG had a baby. It keeps a small file format. It's a modern-day— I believe it's Chrome-based, don't hold me to that. It's a modern-day file format for images for the web. It's very small files with high quality and transparent backgrounds. So in the comments, I would recommend using freeconvert.com to convert your images to WebP. Okay, and then add it to your ClickFunnels.

Oh, I got one from, from Google. Google, I think it's called Squoosh. Either way, there's many different ones that you can use. It's called Squoosh and it's beautiful, like also free. And there's many different tools you can use for this, but just take the whatever image you have, if it's from Canva, cool, whatever. Take it to these compression sites and make it so it's smaller because that loading time on desktop and mobile also always has an impact. Um, again, I put the link for this in the coaching corner, but we did do a training on this a couple weeks back, uh, around how to optimize your funnels for mobile. And that's kind of going over how to make sure that everything is set up properly, some common things to look out for. And there's a bunch of things, just go check it out. Um, it's another lovely 30 minutes of training. Yep.

Awesome. Um, thanks for joining everyone.

Thanks for joining. Have a fantastic rest of your day, fantastic week, you know, all that fun stuff, and we'll see you next week.

Sounds good. Bye everybody, have fun. Bye-bye.