Posted by Cameron Francis on 31 May , 2017 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:
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, |
|
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 |
|
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 |
|
|
|
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 |
|
avoid images from looking blurred or fuzzy, but the last thing you want is |
|
|
Sam Roshan: |
What about your product images if you’re running a |
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 |
|
|
|
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. |
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 |
|
|
|
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 |
|
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. |