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


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.


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:


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:


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



Sam Roshan:


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:


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



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



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.


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
Based on 48 reviews