November 22, 2019
10 Tips to make your website mobile friendly in 2017

10 Tips to make your website mobile friendly in 2017


– In this episode we’re gonna give you 10 of our favourite tips for optimising your ecommerce website for mobile phones. And later in the video, we’re
gonna look at two websites and see how they’re doing it, and finally we’re gonna wrap up by answering some of your questions. Hello, and welcome to the
Digital Startup channel, designed to help entrepreneurs build their first ecommerce website. My name is Craig I am the
host of Digital Startup, – And my name’s Mark, and I’m
an ecommerce trading manager. – Excellent, so if you have
any questions during the show, feel free to drop them
in the comments below and we’ll answer them as soon as we can. So the topic for today is Top
10 Mobile Customization Tips. So let’s get straight to it. So the first one I’ve
got is remove popups. So, I believe last year
Google said something about popups coming up on a mobile phone, they’re gonna penalise them
because it’s a distraction. – Indeed, yeah, there’s only certain types that you can use and
they’ve sort of implemented at the beginning of this year, so you really want to stop that, ’cause it’s a small screen,
and it does make sense to be fair, and Google’s
about the experience, so you can kind of understand
why they’re doing that. You can still use popups, but they have to be of a certain type, and I believe a certain
percentage of the screen size. – Yes, I’ll put that
– Yes. in the actual description
what that will be, but as long as it’s not one
of those full-page ones, ’cause well they’re annoying. – They’re great, yeah (laughs) moving around on a mobile phone screen. – Yeah, exactly, but I
would personally just avoid popups on a mobile phone altogether. – I think they’re limited
in use on a mobile phone, unless you’re trying to sign
somebody up for a newsletter, the chances are they’re
not gonna really do that if they’re looking on a mobile phone, they’re probably looking for inspiration or looking for something specific, they’re probably, you know, rather than… – Yeah, but even if it’s a
percentage of the screen, even 50%, that’s one hell of a message to put in such a small box. – Oh my God, yeah, yeah. – So you may as well just not bother. – Well ’cause we’re
assuming that everybody’s got a huge mobile phone,
but not everybody likes a large mobile phone screen, so on an iPhone SE, 50% of that screen is two inches out of the
four inches gone, so (laughs) Sorry, sorry (laughs) two inches
out of the four inches went (laughs and mumbles) – Okay, cool, so the next
one being page speed. There are a tonne of ways
to reduce the loading time on a mobile phone, and
when Google puts together, tests desktops versus mobile phones, it’s actually much stricter
on what those requirements are for a mobile phone. So one of the quick wins
to reduce the loading time, reduce the loading time, or increase it? Reduce the loading time. – Yeah reduce. – Is to optimise your images,
so your product images, your banners, whatever they may be, should never be larger
than what they need to be, so sometimes you’ll find
it where the original image is like that big, but it
only needs to fill a space which is that big, so you
may as well crop it down or resize it to actually be that size, otherwise you’re loading
a file that’s bigger than it needs to be. And the other one is optimising those, so we use compress
– Compressor IO – Yeah, compressor.io
– Yeah, ’cause I think it’s pretty good. – Compress PNG and
– Yeah, no, convertio – Is that a
– for PNG to JPEG. – I’ll put them
– Yeah, yeah in the description as well. – To actually shrink those files down. You had an image today didn’t
you, you was dealing with one? – Yeah, yeah
– It was like massive. – Yeah, it started off
something like a 30 meg image, managed to get it down just by reducing the size of the image
down to about 1.8 meg, and then dropped it into compress.io, and it came out something
like six kilobytes, so it was just sort of, and it didn’t need to be
any bigger from what it was, so that just shows how much you can save, and really, I mean we’re
talking about mobiles here, but you want to compress the
images anyway on desktop, you know, so it’s good
practise to be it, absolutely. – Yeah, definitely. Another quick win as
well, is to remove any Facebook or Twitter
widgets that you sometimes might find in the footer. The only reason why I say this is because I was working on a website not long ago, and I was optimising it, and
the page was like 13 meg, that you had to load for the first time you went onto it.
– It’s huge. – It turned out eight of
those meg were because the Twitter widget at the
bottom was loading photos that were high resolution,
so the high resolution photos on a Twitter feed that it was loading in through the widget onto the page, therefore increasing
– I’ve got it. – So, don’t bother, don’t
bother with a Twitter and these Facebook feeds, they’re just – So that wasn’t even the website – No
– that was just the widget in Twitter?
– Yeah, yeah, just happened to be
– There you go. – All reposted or retweeted or tweeted. – No, okay, never knew that one. – Responsive design. Now, most websites now are all responsive, but there’s still a
percentage of sites out there that when you look on a mobile phone, you have to like scroll across
to the far side of the screen in order to see it.
– Still about. – I know on mobile phones
there is a way to view it in a shrunken way, that
you can like override it – Yeah, yeah in your settings
– can’t you in your Chrome settings to like mobile
thing but it looks awful. So what I would do is
I would invest in time, in getting somebody to develop
or to develop yourself, having a responsive website, so whether it’s on a tablet,
different mobile phones, to actually fit into certain
places on that device. It doesn’t have to
necessarily shrink things, it can be removing things
in a responsive way, so as it shrinks down you
don’t really need this banner, so hide it, or you know,
you don’t need this feature so hide it, so I would work on that. If you can’t do that, or
well, if you can’t do that or won’t do that (Mark laughs) you can also build
mobile-specific websites, or use applications as your
storefront if you want. Like Amazon do it, but
I think unless you have an ecommerce store which people are gonna buy from frequently like
bang, bang, bang, bang, I don’t think there’s any
point in having an application. – No, no. – But it’s an option if
you have the traffic. – There’s so many sites
that do an application for Android or iOS or whatever it, and all is really is a
very fancy catalogue, you know what I mean? – You know just that
– I know Amazon is not dissimilar to that, but
a lot of people do it, and really all it is is
a cut-down catalogue, it’s not really transactional. You don’t see so many now,
but you still see those about. – But there’s also the
cheat apps as well where it literally loads up as a, it’s actually a browser made
to look like an application, but it’s a browser of the website, but you can only view the
website, that’s kind of pointless. So, don’t bother. – Clear site search. So, what have I put here? – Yeah, so, navigating
mobile ecommerce sites can be really difficult. It’s very likely that if
somebody’s on a mobile phone, they’re either looking for inspiration, so they may just browse through, or after something specific, excuse me, so making the search bar nice and big, and quite easy and clear how to get to always seems like a winner. Nice and clear, top of the page, you’ll notice most of the sites do that, whether it be Amazon or Argos or any of these other big sites, there’ll be a nice big
search bar at the top. Every single time you want
that, make it nice and clear, ’cause most people type in what they want, click the search and they’re
where they want to be, and they’re also where you want them to be at the product they’re looking
for, so why wouldn’t you? It’s absolutely
– Wouldn’t it be nice to have some sort of
voice integration as well? So you can do it with
like Google and whatnot. – Yeah.
– And go on your website and tap on the search
button on your website and then do it that way. I’m not sayin’ we’re there yet – But in theory it can be done,
because you can put input. Something that is coming out,
which will be quite useful, is there’s a new thing in Android
4, automatic form filling, they’re changing the
way they’re doing that, and that may be easily
integrated into websites which might be good. – Oh, okay, all about that soon, – Yeah I hope so.
– Hopefully. – My next one being sticky headers, now I hadn’t really considered
it on a mobile phone until recently, but
(clears throat) excuse me, having a menu that’s sticky at the top as you’re scrolling down the page, I don’t know if you’re
a fan of this or not, but I think if it’s really thin – Yes, that was gonna be my point, yeah. – If it’s really thin, like
it’s a little bar at the top that probably has a useful
link on it or two useful links, and then the option to expand the menu, but really keep it nice and thin, like I said, I haven’t really
considered it till recently, but I think that’s a really super sexy way of making the user experience on a mobile phone really nice. – Some of the best ones I’ve
seen with the sticky header have just been three or four icons, which are obvious what they are, you know, store locator or delivery,
whatever it may be, but they’re quite clear what they are, and they just scroll down, I have used that several
times on several sites. I’ve also come across sites
where the sticky header is a third of the screen,
and you’re doing this, going, what, I can’t see the actual product. So I was just gonna say it’s
all about the thickness of that and having the right three,
four, five points on that – But not too thin, because you don’t want people with fat fingers
– yeah, yeah, absolutely. – They’ve got to be a certain size, so Google page speed judges you on the size boxes of your buttons as
part of the user experience, so they need to be a certain size, I’m not sure what they
are off the top of my head but bear that in mind. Okay, one page checkout
slash minimise fields. – Yeah. – One page checkout. – Yeah, hmmm. – So a customer journey,
if you want somebody to buy a product from you,
you need to make the journey from the customer hitting your website to actually paying you the money as short a journey as possible. So maybe, land on the home page, use the search function or good navigation to get to the product, hit the cart button on that product page, and
then take you to a checkout, fill all those details in, bang, done. You don’t want to make the
journey any longer than that. – Yeah and the fewer barriers the better, from finding what they want to being able to buy what they want. And there’s several ways to do that, one page checkout, obviously
the key part of that, that less is more again here. But also obviously if you’re
using certain payment providers like PayPal, Amazon Pay, if
you’re able to integrate that into one page,
– Yeah, yeah great point. – That’ll basically autofill with their regular used addresses
or anything like that, and that will make it much simpler. We’ve been looking at that recently, and had some really
surprising results with that. So again it’s a winner. Now I know you have to pay for, you pay ’em because they’re
a middle man basically, a fee for the Amazon Pay and the PayPal, but from what I’m seeing, people, I don’t know if it’s laziness
or convenience, I s’pose – I’d say convenience
because you don’t want to be asked to keep filling in
your customer details. – No, no – What’s your first name, your last name, your postal address,
your postcode, your town, your phone number, your email address, your password if you’re forcing
the customer to register, when at the end of the day
if you’re presented with Amazon Pay or PayPal, it’s
a case of just putting your name and
– And they’re much more sort of, you see them so
much now it’s unbelievable, specifically PayPal and we
know Amazon Pay’s coming up, but put it in front of the customer, one button, if they’ve
already signed into Amazon at another time it automatically
fills it I believe, and away they go, so why wouldn’t you? – Yeah.
– Remove those barriers. – So you’ll see a poll somewhere if I’m pointing in the
right direction in a second, and it’s gonna ask you, just
out of curiosity purposes, which device you prefer to
actually make purchases on, whether that be your
tablet, your desktop PC, your mobile phone, just hit
that button, let us know. – Question. – Yeah? – How big is the purchase? What sort of, ’cause I
think that’s quite crucial. If it was a large purchase,
yeah, 1500 pounds or something, I think you’d be more
tempted towards desktop, just my opinion. – Okay. – Smaller, I don’t know. – So anything over a hundred
pound or a hundred dollars then – Okay, okay
– Okay let’s go that way. – Okay, cool.
– So let’s make … – Cool, be interested to see that. – Removing distractions on a mobile phone, now you have a big thing
about less is more. – Yes, yeah, I think on mobiles – Go on with your rant. – So, less is more, and
you’ve already alluded to it with regards to the menu and
icons and things like that. You basically want to make
it as smooth as possible, so anything that is not
going to be obviously used or may be unusable on such a
small screen, get rid of it. If somebody really wants
to get to a certain point on a website they’ll use a desktop. Most people on their mobile phones, who are maybe travelling, on
a bus or Christ knows what, or they may be in a
store and looking round, they’re gonna want five or six key things. It might be a store locator,
it might be a phone number, it may be to look at a product, they’re not really gonna be too worried about the terms and
conditions possibly on that, or something like a visualizer
that builds a kitchen or something like, ’cause
you’re not gonna use it, it’s not practical. But they are gonna be keen
to get into your product, get into your checkout,
and close the browser. So remove as much as
you can from the menu, which is sensible. Remove any icons as you said. If you’re using a sticky header, use icons instead of text if you can, less is more, and that goes
throughout the whole site, again, images, if you
can strip out the images that you don’t need, do
it because people want a smooth experience. There’s some really good mobile
sites and apps out there. I know we’re gonna look
at a couple in a minute, and you’ll find that
less is more on there, they’ve really reduced it down. – Cool. So my next point is allowing
the swiping on image carousels. Now, I didn’t realise this until recently ’cause I just assumed it worked, but when you see image
carousels on websites, whether that be for a home
page showing you the offers, or whether it be for
product pages showing you the various images of it,
you want to make sure that you have it set up in a way, now you’ll have to speak to your developer unless you can do it yourself, that you can actually
swipe those images across, ’cause I didn’t realise that
anything from a few years ago doesn’t naturally swipe
when you try and swipe it, you have to click those little – Arrows, yeah,
– buttons or arrows on the actual slider,
and like I said about fat fingers earlier, you
don’t want people to be going, oh, I can’t get it
– ‘Cause what they do is press the banner and then they’re into a page they
– Yeah, yeah – don’t want to get into.
– Yes, exactly. So if you can make images
swipe from left to right, then do it, it will
really make people happy, that’s what I think.
– Less is more. – Exactly. Okay, adding an interactive phone number. I guess these next two points
only really apply to you if A, you have a phone number,
or B, you have branches. So this point is that,
you can actually add a HTML snippet to references
of your phone number on websites, specifically mobile devices, so that when you actually
click on the number, it automatically dials the phone number, so websites don’t do that by default, you might be trying to click
on numbers and they don’t dial. That’s because you need
to put the code on there. It’s really simple to do, I’ll
put it in the description, and then when you click on
it, it just calls that person. So one option, and I’m not saying do it, but I just want to expand,
you know, the theory of it, is by having a Call Now button
at the top of your page, so whether it be part of
or above your main menu that may or may not be floating, or on the top of the
homepage or somewhere obvious to make it nice and simple, otherwise you’ve got to hold down on here then select the text, copy,
and then paste it into your phone
– I think people just expect that now. I think they expect the
mobile site to be able to just press the phone
number and it does it. I’ve done it myself umpteen
times and it’s worked, and you go, ooh, yeah that’s useful, and then time you don’t, you’re like oh, feel like I’m, oh, hang on, yeah you say you gotta press it, it
depends if you know how to copy and paste and do all that malarkey. So that’s definite, definite winner. You want people to be, if
they can’t find what they’re looking for on the site,
you want them to be able to contact you in the press of a button, there’s no quicker way. – And then the final point is
having a clear branch finder on your mobile phone. Now I believe with the traffic
that we deal with on websites when it comes to ommi-channel businesses, having a very clear branch finder button, because most of the people that
are going onto your website via mobile phone, are probably
gonna be looking for a store. So you know a bit more about that than me. – Yeah, so omni-channel
businesses if they have stores in the high street or out of
town, or wherever it may be, I think there’s definitely between people looking on the website and browsing, and looking for ideas and
inspiration and products, but a lot of people still want
to buy in physical stores. I mean obviously online’s
taken over massively now and taken off, and more and
more people are buying online but some of those bigger purchases and less impulsive purchases,
I think they sometimes want the reassurance of going into store, they might want to, you
know if it’s a sofa, I wouldn’t buy a sofa online currently without kind of seeing it first. I might buy online, but
I might go into DFS, bit of a plug there, sorry,
not sponsored by ’em, – (laughs) We’re not sponsored by them. – No, but I might want to see,
I want to touch the fabric, sit on it, is it comfortable,
’cause you can’t tell that. So a branch finder is crucial. From the data that I’ve seen
on some of the websites is, people will browse the
site, and they will exit on the store locator, because, ooh, there’s one down the road,
I didn’t know it was there. It’s great for building the brand anyway, but they want to know where it is and they want to go and look at it. It is a high exit page, you
know, people do drop out of your site on the store locator, but that’s because they
found what they’re after, they may have found the product, now they want to go instore
and speak to somebody about it. So make it clear, it’s how
you support the branches. And some easy ways of doing that, there’s lots of different
ways of doing store locators, but again, the simpler the better, make it clear where the stores are, clear with Google Maps
embedded, which is quite useful and also that you can
make those interactive, obviously being an iframe, is that right, they give us an iframe? – Yeah, yeah.
– Where you can zoom out so you can work out where
it is and things like that, and you can have buttons
on there that can copy it to your phone and all sorts of things, but nice, simple, clear, clearly stated where your branches are,
obviously contact details. NAP they call, Google,
name, address, phone number, that’s what they really want
because they can then use that, and that’s what you want to
get out to your customers, your name, who you are, your brand, the address, where you are,
and how to contact that store, so just make it nice and easy. – Yeah, so that wraps up the 10 points. I’m gonna put a link to a
website somewhere over here, ready.mobi, it will evaluate the website, as if it was a mobile phone, and give you some pointers and tips on other things that we haven’t covered. – Cool. – So, SEO news, Mark, down to you. – Yeah, this is only just
a quick snippet really, ’cause I’d like to expand
on this at a certain point. I read a really interesting article and I think it was in Search Engine Land or Search Engine Journal,
I can’t remember which, if I can find it we’ll
get the links in there, – Okay.
– in the notes, but it was talking about the
death of organic search. So organic search being
those results that are underneath the ads on a
Google search engine page, results page, a SERP as it’s known, and it was talking about the
way that people are using voice search much more, and by doing so they’re talking contextually,
how do I, what if, can I, et cetera. And that’s changed the way Google’s having to present results. So you still need to do your basic SEO with titles and H1 titles,
’cause that’s the way Google crawls it, but the
use of voice assistance and voice search is
really changing the way that those results are being displayed. There was a report in
there, and I believe it was something like 50-60%
of under 25-year-olds use voice search nearly all the time. I don’t use voice search very
often, I’ll be quite honest, I’m a bit old-fashioned,
I still type it in, but you would say it
differently in your head than the way you would if
you were talking to Cortana or Alexa or Siri, and it was
really interesting because it was saying that you
still need to do your SEO, but now you’re having to
think about how people would ask that question into an assistant. So you’re having to kind
of manipulate the way that you were doing your SEO, the content that you were doing. It’s still something
that’s still quite new, all these voice assistants and that, I dunno who uses what, and it
was a bit of a question really to people, what assistant do you use, do you use voice search at all? – Um, yeah, so I use
Google whatever it is. – Voice search?
– Voice search, yeah. I use Cortana a little
bit on the Windows PC – Oh right, that’d be good
– Because I like it to schedule stuff for me, like remind me to do XYZ. I don’t actually use her
for searching for things, because by default uses (snaps fingers) Edge.
– Bing? Edge.
– Oh yeah, using Edge, yes – And I prefer Google searches. – Oh okay.
– So, um yeah. – Okay, I don’t use
voice search very often. I’ve just got Google
Assistant on my phone, which is sort of the next
step up from Google Now, as it was, where you pressed it. So I’m just exploring what that can do, although it’s very similar. I do use Cortana a little bit, you can get that on the mobile as well, but I use it a bit like you for
scheduling things on Windows but it was really interesting because they were basically saying,
if you’re over a certain age you’re quite embarrassed to
use voice search in public. Yeah, okay.
– Yeah, okay. – Yeah, I suppose that’s true, I don’t think I’ve ever used it in public. But it was saying if you
were young most people would just press the button and say what they’re gonna say. – They’re just lazy. – Yeah, part of that, yeah
part of that is laziness. And it was just the way
that that was gonna have a knock-on effect, so my
question to you guys was, what sort of voice search do you use, so you use Siri, Cortana, Alexa, Google? I’d just be interested to see. – Or even use it at all. – Yeah, or even use it at all, yeah. Maybe some like me, I very
rarely do to be quite honest. And it was really interesting,
it’s one of those things that’s gonna change the way
that SEO and Google works going forward, because
we’re getting more and more, and its seems like Google
Home in your house, it’s gonna be, you’re gonna
ask a different question there than you would do if
you were sat on the bus, it might be much shorter on the bus ’cause you might be, you know, in public. Whereas at home you might ask
more complicated questions. So it was quite interesting I must admit. – Mm, fair enough. – Also just on Google,
just to finish this bit, we spoke on the podcast
a little while ago about Google Certified Shops moving
to Google Customer Reviews. – I think I did a video on it somewhere. – Oh, right, okay,
– I’ll link to that in the corner thing. – So as of the first of
April in the UK, this is, the Google-certified shops ceased to be, sites moved over to
Google Customer Reviews, and it was quite a poorly
communicated transition, they did say this was happening, and that you’d be able to now see your Google Customer Reviews
in your merchant centre, but that was pretty much it
unless you went digging around. So what happened was,
on the first of April our Google Certified
Shop badge changed to a Google Customer Reviews. But we noticed that
there was no five stars, which is what they use basically, there was no reviews in there, and yet we’d collected some
on Google Certified Shops, and it was bit puzzling,
’cause we could see some data in the back end of Google Merchant, but it was showing zero. So we didn’t quite
understand what was going on, so anyhow, I actually ended
up speaking to Google directly over email and live chat and all sorts. So, what the rules are,
is to have your Google Customer Reviews badge appear
and be filled with five stars or whatever it may be, you have
to have 150 reviews minimum before it starts showing. I’ve not actually seen
that written anywhere. – It wasn’t written anywhere was it? – No, I couldn’t find it. – But somebody from Google kindly said oh yes, there’s a minimum,
which when they said it kind of worked out right
because on Google My Business, you have to have five reviews
before it starts showing your stars, so it kind of made
sense there was a minimum. I’m a bit annoyed I didn’t
think of it before to be honest. So, if you’ve moved from
Google Certified Shops and you hadn’t got 150 reviews, your badge is basically gonna show zero. – Does it start at zero completely? – No, the ones in Google
Certified count towards – Okay.
– the 150, so don’t worry, but depending if you’re on 140, don’t worry you’ll probably
catch it up pretty quick. We tested the Google Customer Reviews and at the end of the checkout
a little light box comes up saying Google Customer Reviews, would you like to take part in
a survey about your purchase, and if you do, we will
email you after your estimated date of your goods arriving. I tested it, I got the
little email through, which just gave a five
star to one star ranking. You click five stars, and that changed to why was it a good experience? Typed in a few words, press
Send, and away you go. And that’s the way Google’s gonna do it. Really what Google are trying
to do is stop people hiding, I suppose to a degree. I know you’ve got to opt in
to Google Customer Reviews, but because it’s so easy
and it’s basically automated with some tracking code I believe in it, once that’s done you’re kind of set up. So if a site hasn’t got
it, you kinda wonder why it hasn’t got it if it’s
quite a well-known site. So anybody that’s just moved over, don’t worry, you just need 150 reviews. You can still see what you’ve
got in Google Certified Shops. So you can see, although
that is basically dead, you can still see what
reviews you had in there. Those will count towards your 150. – And I assume if you’re just starting out fresh with Google Customer
Reviews and you weren’t with Certified Shops, you still need 150 – Yeah, still need 150. – So it’s not worth
putting the little code on to show the badge – Yeah, no I’d kind of avoid
that, ’cause it might look a bit odd with zero on it for the minute. But just to clear that up if anybody else has done a crossover on that. – Cool, thank you. Okay, so as promised,
we’re gonna have a look at two mobile websites, no we’re not, we’re gonna look at two
websites on a mobile phone (Mark laughs) and then we’re just gonna
see what they’re doing well and what they’re not doing well. So the first one we’re gonna look at is – Lamptastic I’m looking at. .co.uk
– Lamptastic.co.uk. So we’re gonna look at it as
if it was on a mobile phone, and then we’re just gonna
see what they’re doing well, if they are at all, and what they’re not, and hopefully we might learn something. Okay, what are your first thoughts? – So we’re using a mobile phone emulator, which is mobiletest.me, if
you want to put the link in, and you just basically, it
emulates a mobile phone. So I like the site, to be
fair, it’s quite minimalistic, there’s a banner across the top saying free worldwide shipping on all products to every corner of the globe. – [Craig] I have to
stop you there, though. – Why, ’cause you’ve gotta close it? – Yeah, you gotta close
it to get to the menu. – Oh, see, not on mine. – Oh, okay
– See, so there’s a popup at the top, I don’t know how you’re gonna show this on the magic, magic screen
– I’ll do a screen grab, yeah. – On mine the popup is
basically just above the menu. Yes, it has a little cross
to close it, admittedly, we were saying don’t use popups. But I can get to the menu quite clearly. Yeah, so there’s a little
popup which again isn’t ideal, but I suppose it is more of a USP. And when you close the
popup it does actually shift the screen up – Oh my God. – What’s that?
– To does this, it’s one of those websites
that has this annoying thing in the bottom where it
goes, “Bob just bought…” – [Mark] Oh, right, okay, yeah. – [Craig] Something or
other, well did he really? – [Mark] Yeah, or was that just, can you go back a minute,
Bob’s just bought it again. – [Craig] (laughs) Yeah. – Other than that, menu’s nice, I like the sort of hamburger
menu, sort of as it’s known, which pushes the screen
over to the right hand side. You can see what you’re
after, whether it be table lamps, floor lamps, et cetera. Press it again, home page, got
the cart, log in, register, is that slider, yes slider. – Where’s the slider? – Sorry, just there. – Can you swipe it though? – Not on a Chromebook. But there you go, you tell me. – No, you can’t swipe it.
– No you can’t, okay, so you know, there’s something
that could be improved. But if you scroll down, and
people are more likely to scroll on a mobile phone, ’cause it’s
so easy with a thumb gesture, so don’t be afraid of
having too long a home page, because people will scroll down. As long as you make it clear
how far you are on that page, I think.
– Yeah, yeah. – And on the right hand
side with a scroll bar. Nice sized images, I know it’s
clear call to action button, more details, it’s got a price on there, which is possibly fine on this. Not the cheapest lampshades
I’ve ever seen in the world, I’ll be honest, but
– Very niche website, – Absolutely
– Very niche. – Some beautiful things on here, and what they’re trying
to do with this is, they’re using the imagery to sell, they’re not talking
attributes or anything, or (hiccups) specifications,
excuse me (laughs) – Easy. – Got the hiccups. – Specifications, there
(laughs) sorry. (clears throat) – Well as you compose
yourself, I just wanna say, the product picture – Sorry! – What have you been smoking? – The product picture actually fills up – It’s what I’m drinking.
– a whole page on the screen, so, that’s pretty cool. – Well, yeah, they’re
using the imagery to sell the products, and I think
that’s really good, to be fair. More details, if you click more details, again, the only thing I’d
say is their logo at the top of their main header,
is quite a large image, which I can’t quite work out what that is, – I think it’s a stain or a map. (Craig laughs) – I actually was thinking it
was a map if I was honest. (Craig laughs) But I couldn’t work out what
part of the world it was, it’s probably Devon or something. But that seems to take an awful
lot of that first initial, it’s half the screen, I don’t
know it that’s true on yours. – Yeah, yeah, fair one, yeah. – I’m sure that could
be tighter at the top to give more of an image before you start scrolling
– ‘Cause that’s just pointless scrolling at this stage. – Yeah, it feels a little bit, there’s the image again, price, again. – I feel that the site
loads quite quickly though, so they’ve obviously optimised the images so that they don’t take
forever to download. – Yeah, nice again, you’ve got the, so the one I’ve clicked
in has given the image and then the price with add to cart, and then something about
this Turkish mosaic lamp, Moroccan style floor lamp. Throwing a few keywords
at it there, I feel. Bit of copy, size, et cetera, and then underneath it’s
got you may also like. It’s nice though, what
they’ve done there is they’ve put in what size
the bulb socket is, an E27, so that they’re sort of saying, ooh look, you’ll need this type of bulb, which is good, ’cause they’re
trying to get their upsells. It’s just a shame that
that link isn’t clickable, so it could take you through to the bulbs so you could add it to the cart, I think that would possibly be something that could have done to do that. – Is that a general point
you’re trying to make or a mobile point that
you’re trying to make? – Well it’s a bit of general really, but if that screen real
estate is more prime on a mobile phone, why wouldn’t you? Or even put a little call
to action, I don’t know, you might be able to put a call to action to add to cart there, just
to get that up, just saying. – [Craig] I’m just looking
at the checkout now and unfortunately they’ve
got their checkout spread across multiple pages,
and the first one alone has got one, two, three,
four, five, six, seven, eight, nine, nine boxes to fill
in, plus two checkboxes, and that’s just the first one
about customer information, and then the next one’s shipping method, and then there’ll be billing method, so there’s a lot of steps there, if you were gonna make a
transaction on a mobile, just to go through so, it’s kind of okay, – Some good points
– It doesn’t follow all of the rules
– Yeah I think there’s – And all of the points
– some good points. I don’t know how old the website is, maybe it’s just gone up, I don’t know, but there’s a few things
they could do there just to make life a little bit easier, and improve their
conversion rate basically. ‘Cause I think something like a lamp, I mean, I appreciate some of
these are quite expensive, 500 pounds, but there’s others
which are sort of 80 pounds, there’s a chance that they
would sell them online, you know, on a mobile transaction. – Yep. – People would do that, I would. I would spend that, so you
know 500 quid I might not, but 80 quid, I might well do. 80 quid, listen to us, sorry. Yeah, 80 sterling, or whatever (both laugh) for all you Americans
out there that, you know, yeah, I think that that would, they should be able to
convert from that site. – Okay, so let’s have a
quick look a John Lewis from a mobile point of view. You can have a
– All right I’ll go with the mobile this time and
you go with the thing right, try not to pull your thing, oh okay. So, mobile, nice big clear
banner in the middle, is it swipeable? No.
– Oh really? – Yeah, it’s clickable,
which takes you through to the Easter, sorry, that actually, unless it’s just not a carousel, and it is literally just a static image, which I’m surprised at. – No it’s a carousel, there’s three images – There’s three, now is it swipable? And I can’t even see the buttons to move it on to the next
one, it doesn’t show up. So that’s a little bit poor if I’m honest. – That’s a bit disappointing. – Yeah, yeah that seems
like an easy win, really. But it’s got the burger menu, so they’ve got a header
with John Lewis at the top, then three obvious ones, the
menu, the search, the basket. – [Craig] You’ll notice
they’ve got a sexy thing though where as you scroll
it has a nice clean feel. – Yeah, so that
– The menu. – So the John Lewis header disappears, but you’re still left with
the menu, search and basket when it reaches top of the screen. That’s pretty nice. Search seems a little bit, oh you press the Search
icon, and then a Search box drops down, which is quite
slick, I’ll be honest. – [Craig] Well it keeps
out of the way doesn’t it. – [Mark] Yeah, yeah, – [Craig] Like the header could
take too much real estate. – [Mark] Yeah, I think that’s pretty good. It’s a nice design, and then they’ve got Browse Departments, Home Garden, nice clear icons, you know, imagery obviously with the text
underneath just to do that. I think that’s pretty nice actually. – [Craig] Is it loading pretty quickly? – [Mark] Ah, yeah, wasn’t too slow. When you go into a
category, so I’ve gone into Sound and Vision, you then just get, you lose the imagery and then you just get the subcategories, Television,
TV Stands, little bit, and then you go into another
sub, so at the minute, I’ve gone into a subcategory, and then another
subcategory, it’s all text, TV special offers, now we’re
getting back to actual product. It felt like there was
too many steps there. Not saying I know
– What’s the checkout look like? – [Mark] Okay, so let’s go to the basket, let’s add a nice telly, 899 quid, if I can just have your credit card? – [Craig] Yeah, of course you can. – [Mark] Thanks (laughs). So basket, so Norton
secured, so it’s showing that it’s got some anti-virus
to try and reassure you. Your basket is empty, oh
that didn’t go well did it? Let’s try again. – User error.
– Oh, yeah, yeah, well there was no actual Buy
button on that part, so I’ve gotta go into the product – [Craig] You gotta go
in for the Buy button? – Yeah, so it’s right down the bottom. That was a bit poor. Check out now, right, okay, so, welcome to Secure Checkout,
do you have password, so it’s trying to get you to sign up, now you can create an account (mumbles) So, it wants to capture my email address – Okay. – At this point, so it’s
basically getting your email address to probably send you a – Spam. – Well, maybe not so much spam, abandoned basket I’m guessing, so I’m just gonna quickly pop
in one of my email addresses, let’s just see
– Long as it’s not mine. – (laughs) Yeah. Let’s say, I bet you I get
an abandoned cart email not long after I leave
this website, so okay. Yeah, that’s not a great experience. – I’m disappointed, I
was kind of expecting more off that website. – Yeah. – I was gonna use that as a kind of, you should really use
– Yeah, before you – Yeah, copy this website. – Yeah, so I’m on the
third page, I’ve got to, oh no, there is a PayPal
button, I tell a lie. – What all along, or?
– Yeah so it’s kind of under there, I thought
it was the Visa sign, but it’s not it’s PayPal, so you could PayPal it, but
I’m already in the third page, and I’ve only just got to that. And I appreciate I’m
buying a expensive product – And obviously those
details will come out of PayPal anyway, if that was
– Yeah absolutely, you’re right, totally, so I
can use the billing address, yeah, it seems a little bit – Okay,
– convoluted, – Fair enough.
– be quite honest, so… – So, I guess it goes to
show that not everyone’s doing it properly (laughs) – I don’t think there’s
a, the right answer, but there’s a lot of barriers
that people put like that, we’re talking about one’s page checkout, and on page three, before I
even fill in any payment details and then there’s still the
confirmation after that, so that’ll be at least four pages. – Okay, so there you go,
hopefully you learned something or maybe you’ll look at
websites a little bit more different now, just to see that, oh, they’re not doing that well, and then learn something. Ok, cool. Q and A. So we have got a little bit of time now, to answer a couple of questions. The first one, I’m gonna ask you – Oh okay.
– What’s a good way to encourage customers to
purchase from my website? Let’s give a slip bang answer. – Hard, very generic. Are we still talking
mobile or just website – We’re on the theme of mobile,
so let’s stick with that. – Okay, I think we’d
go back to what we say, less is more, make sure
that they can clearly find what they’re after, whatever
that product may be, if they’re on your website, they’re probably in the right place, ’cause they’ve got to
you via organic or PPC or whatever it is, get your
best sellers easily shown, remove those barriers every single time, nice clear call to
action, press that button, get through, PayPal, and you’re gonna chop my
fingers off ’cause I’m bashing on the table, sorry
– This happened, and he will learn not to tap the table, – Sorry,
– I promise you. – Ah yeah, so yeah I’m
pressing the button that’s why, I’ve bought something (Craig laughs) Yeah so just nice clear
call to actions as well, you want a nice big bang,
bang, bang, thank you, the product’s bought, it’s
more or less a muscle memory, and that’s where Amazon
and people like that do it really well. It’s so easy, just
literally with your thumb, to scroll through, get what you want, add it, select the
delivery address, and pay, and you’ve pressed four or
five times and you’ve done it. – I’m gonna answer this
slightly differently. I’m gonna say the best
way to encourage customers to buy from your website
is to increase your brand awareness, or your
confidence in your brand, and one very quick and
easy way of doing that is by having your phone
number on the site, ’cause people like to speak to people, – Good point
– and people like to buy off people, so if you
have a very direct way of communicating with you,
and not some random Joe via email, then it’s gonna
give you the confidence, or give your customer the
confidence, I should say, to make that purchase. – Do you have any tips to do with images, and I think we touched on this before, so – Yes. – Yeah, so let’s just refresh that, ’cause I think it’s really key. You can have some fantastic
images on your site, and we’d encourage that, because
people buy with pictures, particularly on a mobile.
– I’m gonna jump in there, my favourite type of picture, when looking at product pictures, are product pictures
of the products in use. – Yes. No, no, totally good. – Rather than say a mobile
phone or a remote control on a white background, have a picture of somebody using it. – Yeah, you can still
have that picture of that on the background,
absolutely so people can see, make sure it’s the
right model or whatever, but yes, show it in action, I
would agree with that, yeah. Whatever that product may
be, whether it be a saw, or a chair, or anything like that, put it into a real
– Yeah a magic trick (both laugh) – Well, you know, if you’re a
magicians’ website, why not? I was just coming to see a chair there. So, yeah, whatever it is, you
know show it in real life. I think that’s something that
we’ve learnt over recent years is if you can put that
into a lifestyle image is what we call them,
whatever that may be, people are more likely to
be able to picture that in their own home or in their own car or whatever it might be. – Okay, thank you. (laughs) – Magicians are us .com. – Well, we hope you enjoyed the show, it’s our pilot show, so – It is, it’s our first one, so, sorry – If you liked it, hit
the thumbs up, subscribe, be notified of feature videos. – Some comments’d be great,
let’s get some comments or questions. – Yeah, and if you like it,
well I’ve enjoyed doing this – Yeah. – So if you like it, it’ll
be very easy to convince us to do more, so just let us know. Anyway, thanks for watching, guys, and we’ll catch you next time. – See you, bye.
– Bye.

6 thoughts on “10 Tips to make your website mobile friendly in 2017

  1. We had great fun creating this video. If you also enjoyed this Pilot episode of "The eShow" Series, please let us know (or hit the LIKE button) and show your support. If you would like to see more, then what would you like to see covered in the show?

  2. Amazing content, I really enjoyed the entire show. Search Engine Optimization basics for people starting in 2017 would be a great topic, some people might be watching older content with tactic that might work against them today. The part about the voice search moving forward was something really great to start thinking about.

  3. Under the Microscope would have been much more valuable if it showed us the entire time what you guys are talking about on screen.

Leave a Reply

Your email address will not be published. Required fields are marked *