Avatar Posted by Cameron Francis on in

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.


Show Notes:

  • 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

Transcript

Sam Roshan:

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.

Cameron Francis:

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.

Voiceover:

Digital Cowboys, episode six. We discuss everything digital marketing and

 

growth hacking for small businesses, start-ups, and entrepreneurs. If you

 

want that competitive edge, then saddle up, because Cameron Francis and

 

Sam Roshan are about to drop some value bombs.

Cameron Francis:

Hey, everybody. This is Cameron Francis.

Sam Roshan:

You’re with Sam Roshan.

Cameron Francis:

We are the Digital Cowboys.

Sam Roshan:

Cowboys.

Cameron Francis:

Brown chicken, brown cow. What about you, Sam?

Sam Roshan:

Brown chicken, brown cow.

Cameron Francis:

What do you get when you cross a brown chicken and a brown cow?

Sam Roshan:

Brown chicken cow. I don’t know.

Cameron Francis:

What do we talk about today?

Sam Roshan:

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.

Cameron Francis:

Okay, we’ll talk about everything you need when you’re planning and

 

designing your mobile website. Cool. What’s one? Give me one.

Sam Roshan:

Buttons. A call to action.

Cameron Francis:

A button.

Sam Roshan:

That’s right. All the buttons.

Cameron Francis:

A necessity is a button. What about a button?

Sam Roshan:

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.

Cameron Francis:

Yes, yes.

Sam Roshan:

Just makes it a lot easier for the users.

Cameron Francis:

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

 

user experience.

Sam Roshan:

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.

Cameron Francis:

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.

Sam Roshan:

Fantastic. The next one would be text. To ensure that the text on your

 

mobile is readable, the right size.

Cameron Francis:

What size do you recommend? What’s a minimum?

Sam Roshan:

14.

Cameron Francis:

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

 

index?

Sam Roshan:

Yep.

Cameron Francis:

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-

Sam Roshan:

We can’t actually see much.

Cameron Francis:

Yes. How often do you actually check your mobile vertically? You just don’t.

Sam Roshan:

Your recommendation is, is if you’re working on a website, ensure that

 

you’re just testing it.

Cameron Francis:

Yes. Absolutely. What else?

Sam Roshan:

Collapsible content and image sliders.

Cameron Francis:

Okay.

Sam Roshan:

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.

Cameron Francis:

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.

Sam Roshan:

No, as long as it’s a couple of lines for them to be able to click.

Cameron Francis:

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.

Sam Roshan:

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.”

Cameron Francis:

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.

Sam Roshan:

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.

Cameron Francis:

Yep. Not just a mobile must-have, but a website must-have that I thought I’d

 

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.

Sam Roshan:

Fantastic. You know what? I think that proof’s in the pudding. If anyone is

 

doing this-

Cameron Francis:

That’s actually a fallacy, Roshan. The proof is not in the pudding. The proof is

 

in the eating of the pudding.

Sam Roshan:

Very good. Very good. Stand corrected.

Cameron Francis:

I’ve thrown him way off. Sorry, you were saying?

Sam Roshan:

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.

Cameron Francis:

Love it.

Sam Roshan:

I think, actually, the proof’s in the data, not the pudding or the eating of the

 

pudding.

Cameron Francis:

The data, in the pudding case, is the pudding.

Sam Roshan:

But no one eats data from puddings.

Cameron Francis:

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.

Sam Roshan:

All in the Buddhist.

Cameron Francis:

They’re all in the Buddha.

Sam Roshan:

Just make sure they’re in the Buddhist of our website.

Cameron Francis:

If someone does wanna go to those pages they can scroll down.

Sam Roshan:

You could make them collapsible, as well. Hey. The footer menu.

Cameron Francis:

You can, eh?

Sam Roshan:

Very good. Imagery that doesn’t contain any text.

Cameron Francis:

Good one.

Sam Roshan:

Images with text are often unreadable on mobile screens.

Cameron Francis:

Yep, yep. That’s just if you’re going to be putting images, just make sure that

 

it doesn’t contain any text.

Sam Roshan:

Also make sure that they’re optimized. A lot of images that are really

 

high-definition and your mobile has a small screen, so you don’t necessarily

 

need the best quality photo.

Cameron Francis:

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 vector-based icons to

 

avoid images from looking blurred or fuzzy, but the last thing you want is

 

low-quality, unoptimized images. It’s a recipe for failure.

Sam Roshan:

What about your product images if you’re running a e-comm site?

Cameron Francis:

I want them large.

Sam Roshan:

Fantastic. Why is that?

Cameron Francis:

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.

Sam Roshan:

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.

Cameron Francis:

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.

Sam Roshan:

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.

Cameron Francis:

Very good. I wanna add all forms use custom input types. Use text-specific,

 

email-specific, and number-specific types of data inputting, depending on

 

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 auto-predicting what you’re

 

actually gonna be putting in there.

Sam Roshan:

That is very annoying.

Cameron Francis:

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

 

auto-predict the text. I get pissed by them as a mobile user. I’m sure that a

 

lot of people do.

Sam Roshan:

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.

Cameron Francis:

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

 

popups.

Sam Roshan:

Very interesting.

Cameron Francis:

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!”

Sam Roshan:

Yes. To have even one of them would be an issue?

Cameron Francis:

Yes. Don’t have it on there.

Sam Roshan:

Yeah, that’s really interesting.

Cameron Francis:

Cool. If anyone else can think of any, please let us know. But hopefully you

 

guys got a lot out of this episode.

Voiceover:

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 five-star rating. Please, write a review. Also, head on over to

 

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.

Download Show Transcript

Google Rating
4.6
Based on 47 reviews
js_loader