Planning to launch a mobile website for your business? Learn about what you should and shouldn’t do when optimising your website for mobile devices as Cameron and Sam discuss Buttons, Forms, Key Touch Interactions and Product Images for mobile sites. Learn it all in this episode of The Digital Cowboys.
- Buttons and Call to Actions – 00:01:23:24
- Mobile Maps With Directions – 00:02:26:17
- Your mobile site’s text is legible and readable – 00:03:19:26
- Collapsible content and image -sliders – 00:04:32:00
- Your key touch interactions are easily accessible – 00:05:40:29
- Easy Navigation – 00:06:00:19
- Video content – 00:06:23:27
- All non-essential elements are in the footer – 00:07:47:01
- Your Imagery Doesn’t Contain Any Text – 00:08:19:22
- Your Imagery Is In HD / Retina Quality – 00:08:43:23
- Your Product Images Are Large – 00:09:01:16
- Your Image Gallery Is Presented As A Swipeable Carousel – 00:09:24:28
- Link to the full desktop site – 00:09:42:03
- Back to the Top Button – 00:10:25:18
- All Forms Use Custom Input Types – 00:10:48:00
- Your Forms Do Not Use Auto-Correct or Auto-Capitalise Options – 00:11:12:18
- The Importance Of Mobile Website Optimisation – 00:11:38:18
- Don’t Put Popups On Your Website – 00:12:02:17
All these buttons need to be very clear, concise, and clickable and make sure
that they’re right size on at least multiple devices. Just makes it a lot easier
for the users.
When you’re on a mobile, you gotta think about the user, what they’re
doing, what they’re thinking, and chances are they’re out and about. They’re
on the road and you need to put directions.
Digital Cowboys, episode six. We discuss everything digital marketing and
growth hacking for small businesses,
want that competitive edge, then saddle up, because Cameron Francis and
Sam Roshan are about to drop some value bombs.
Hey, everybody. This is Cameron Francis.
You’re with Sam Roshan.
We are the Digital Cowboys.
Brown chicken, brown cow. What about you, Sam?
Brown chicken, brown cow.
What do you get when you cross a brown chicken and a brown cow?
Brown chicken cow. I don’t know.
What do we talk about today?
I think something that is very important in this time and age in the digital
world, and that is the ideal way of having a mobile website.
Okay, we’ll talk about everything you need when you’re planning and
designing your mobile website. Cool. What’s one? Give me one.
Buttons. A call to action.
That’s right. All the buttons.
A necessity is a button. What about a button?
Let’s talk about them. You’ve got your normal website on a normal
computer on a browser. You’ve got multiple tabs. Each one of those are
considered to be a button. You have various, ideally. You wanna have call to
actions from an inquiry to a call and so on. Each one of these are buttons. A
lot of websites that we look at on a daily basis, or that I look at, have not
really geared their sites or optimized their sites for mobile users. All these
buttons need to be very clear, concise, and clickable, and make sure that
they’re right size on at least multiple mobile devices.
Just makes it a lot easier for the users.
Make it big. Make it stand out. Make it look nice. Very, very simple. If you
can’t design a good button, go to Shutterstock and type in “button” and
you’ll get a list of hundreds of thousands of different button options to
choose from. Number two, when you’re on a mobile you gotta think about
the user, what they’re doing, what they’re thinking, and chances are they’re
out and about. They’re on the road. You need to put directions. Having
mobile maps that integrate with directions, they let your customer know
where your business is located, how to get there, and it just makes a better
To make it very simple, what you’d wanna do is the location has to be
clickable. When they click on it, it goes to Google Maps and it’s very easy for
the user to be able to find your business.
You know, what I really like- It’s got nothing to do with websites, but I’ve got
the Google Pixel, and when I’ve got a calendar invite and there is an address,
I click the address and it automatically opens up Google Maps and, based on
where I am actually located, it’ll give me the directions. It’s just easy. Do the
same thing for your website. Make it easy for your customers to find you.
Fantastic. The next one would be text. To ensure that the text on your
mobile is readable, the right size.
What size do you recommend? What’s a minimum?
Okay. Have you ever been to a site and you’ve gotta scroll in and scroll it,
regardless of if it’s responsive or not, but scrolling in and scrolling out
because the fonts, it’s not readable. Again, it’s all about user experience. You
wanna provide a good one. I really like that, that was good. Here’s a really
big one and it’s happened to me a couple times ’cause I just never thought
about it at all. That’s making sure that your mobile site actually responds
both vertically, portrait, and landscape. Do you know how you’ll lock the
Okay. Those little iPhones, the original ones, if you do side screen and you
lock the index and you scrolls, you’ve got a third of the website that is
scrollable because the index-
We can’t actually see much.
Yes. How often do you actually check your mobile vertically? You just don’t.
Your recommendation is, is if you’re working on a website, ensure that
you’re just testing it.
Yes. Absolutely. What else?
Collapsible content and image sliders.
Just avoid excessive amount of content on mobile so people have to keep
scrolling and you find that on so many sites. That has not been considered.
Maybe they wanna get to a particular point and there’s just so much content
that they have to continue scrolling, where what you’d want to do is maybe
just have a couple of lines and have the content to be collapsible so if they
do wanna read more, they can just click on that and be able to read the
content. Same with the images, too.
One thing that you could do is, no one wants to go through so much text,
especially if it’s on the homepage or if it’s on one of your money pages. Just
do “Read More.” I doesn’t go against Google guidelines.
No, as long as it’s a couple of lines for them to be able to click.
Allow the person, if they want to read more, just give them the “Read More”
button. For those that don’t wanna read more, they wanna look at images
and they wanna scroll faster, just hide it away under a “Read More” button.
Very, very simple.
Anyone who’s using Facebook, and I’m sure everyone listening to this will
be, if you look at any of those social blogs and you click on them, 99% of
them now have couple lines of the content and it says, “If you wanna read
more, click here.”
Very good. Another one I wanna suggest is that your key touch interactions,
that they’re easily accessible. Putting all menus, call to actions, and other
touch targets in a visible and easy accessible area. Just makes it easy to use
and you’re providing easy access for your mobile user.
That’s ideal. The next one would be to ensure that your site’s easily
navigable. How do you optimize your website to ensure that your users,
whether they’re on the homepage, ideally to ensure that they’re getting to
the right points and they’re getting there promptly and fast. It actually helps
with the mobile speed, as well.
Yep. Not just a mobile
put in here anyway is video content. I’m just thinking that the users, they’re
on the go, they’re out and about, they don’t have the time to read through
chunks of content. Make it easy for them. I think it’s about 41% of users
rather watch a video. Give the people what they want. Place a short video
about your company or about each product or service and make it easy for
them to get the information they need.
Fantastic. You know what? I think that proof’s in the pudding. If anyone is
That’s actually a fallacy, Roshan. The proof is not in the pudding. The proof is
in the eating of the pudding.
Very good. Very good. Stand corrected.
I’ve thrown him way off. Sorry, you were saying?
You did. I don’t know if anyone has ever used heatmaps. You can actually
install things like Mouseflow or Crazy Egg on the sites, make these slight
iterations in changes based on the recommendations that are being made,
and test them. See what people are doing, and sometimes people really
prefer video and sometimes they don’t. But ideally what you wanna do is
make these changes and then actually look at the data.
I think, actually, the proof’s in the data, not the pudding or the eating of the
The data, in the pudding case, is the pudding.
But no one eats data from puddings.
Okay, off the top of my head, how ’bout that old nonessential elements are
in the footer? Things like terms of service, company locations, values,
management, and other stuff like that, as important as they are, they don’t
need to be in the body of the text. Make sure that they’re all the way down
in the Buddha- Buddha.
All in the Buddhist.
They’re all in the Buddha.
Just make sure they’re in the Buddhist of our website.
If someone does wanna go to those pages they can scroll down.
You could make them collapsible, as well. Hey. The footer menu.
You can, eh?
Very good. Imagery that doesn’t contain any text.
Images with text are often unreadable on mobile screens.
Yep, yep. That’s just if you’re going to be putting images, just make sure that
it doesn’t contain any text.
Also make sure that they’re optimized. A lot of images that are really
need the best quality photo.
Speaking of this, you don’t need the best quality photo but if you are gonna
put images, try and put them in HD. You may use
avoid images from looking blurred or fuzzy, but the last thing you want is
What about your product images if you’re running a
I want them large.
Fantastic. Why is that?
You’re wanting that person to buy it, right? That’s what they’re doing. They
get engaged and they get intrigued by the image. Then, remember the
“Read More, click more” option? They can read more information if they
want to, but the image should be able to sell the product on itself.
Very good. The other thing is, is that if you have multiple variations or you
wanna show- I don’t know if you’ve got a clothing store and you’ve got a
shirt and you wanna be able to present that shirt in multiple angles and you
wanna ensure that the carousel is presented properly, where they’re,
ideally, could be swipable.
Cool. You know, one I wanna add is, too, not everyone wants to view your
mobile site or even your responsive mobile site. Have a link to the desktop
version down in the bottom. You’ll see it on a lot of sites. “Do you wanna
view the full version of this website?” Allow that as an option. If someone
isn’t getting the information that they need because you got less space to
work with on a mobile, allow them to- They’re giving you the choice. They’re
saying, “I want to get the full picture.” They’ve got the whole desktop
version. I’d still have that in there, albeit from the data that I’ve got, not a lot
of people have it in there. But something to add.
What about having little “back to the top” button? When someone’s
scrolling all the way down, whatever type of site that you have, if they scroll
all the way down and you just wanna make sure that it’s really easy for them
to get back to the top if they wanna look at any other possible menu
options. Just having that little button for them to be able to immediately
scroll to the top is really helping the user experience.
Very good. I wanna add all forms use custom input types. Use
the form’s aim. When you’ve got a form fill, put in “type in your email or
phone.” Actually have that text in there so that people know what to
actually put into those different forms.Speaking about forms, make sure that
the forms don’t autocorrect. They’re not
actually gonna be putting in there.
That is very annoying.
Very annoying. Sometimes they go in the wrong place. Don’t do it. It’s
mobile, there’s not a lot of options. Simplify the form process and don’t put
lot of people do.
If you wanna know how important this whole making sure that your
website’s responsiveness or the mobile site that you have is important to
your business, jump on Google Analytics or even Google Webmaster Tools
and find out the percentage of users on mobile devices and tablets. Give you
a very good indication and I would say that majority of sites, anyone
listening to this that has a website definitely need to apply some, if not all,
of the recommendations that are made here today.
Actually, I’ve got one more. This is SEO. There was a mobile interstitials algo
that came out, I think it was February or something, where it’s now against
the Google guidelines to have popups on your mobile site. Don’t have
I have put, ’cause there is some Contact Us forms that creates a popup, I
haven’t got any data around it being considered the same type of popup,
but they’re the only kind that I’d have in there. You know those annoying
popups saying, “Here, subscribe now!”
Yes. To have even one of them would be an issue?
Yes. Don’t have it on there.
Yeah, that’s really interesting.
Cool. If anyone else can think of any, please let us know. But hopefully you
guys got a lot out of this episode.
Thanks for listening to the Digital Cowboys with Cameron Francis and Sam
Roshan. Now, if you enjoyed today’s episode, head on over to iTunes and
give us a
DigitalCowboys.com.au, where we post the latest episodes and content
pieces for all of our listeners. Saddle up and join us next time for another
edition of the Digital Cowboys.