Mobile-first is designing for the smallest screen and working your way up, rather than the other way around. As more and more users use their mobile devices to visit sites and research purchases it makes sense to create an experience that is as awesome as possible for those users.
Google is moving to a mobile-first index which means sites will be ranked according to their mobile experience first. Don’t risk your visibility by having an outdated or non-responsive site.
Read more about Google shifting to a mobile-first index: http://searchengineland.com/faq-google-mobile-first-index-262751
Here are some mobile stats that we found interesting.
1) 48% of consumers start mobile research with a search engine. (Smart Insights)
By not having a mobile-first strategy, you risk driving away almost half of the people searching for your product. Consumers are not patient. They will not fiddle with their screens to get your site to work. They will hit the back button and move on to a competitor in a matter of seconds.
2) Tablet devices account for the highest add-to-cart rates on e-commerce websites at 8.58%. (Smart Insights)
More customers are making eCommerce purchases using mobile and tablet devices than desktops. When we launched the new website for Newcastle Florist in 2014, we had to embrace a mobile-first philosophy because of the huge percentage of people who were using mobile and tablet devices to make purchases.
We found people at work were more likely to use their private device than the work computer to purchase flowers so it made sense to ensure they had an amazing experience selecting and purchasing flowers.
We deliberately created over-sized elements which were easy to touch and used images that went full-width and zoomed in on touch so customers could see what they were buying. This, as well as an aggressive Local SEO campaign, has pushed Newcastle Florist to the top of the Google rankings for florist and florist related searches in Newcastle and surrounding suburbs.
3) Google says 61% of users are unlikely to return to a mobile site they had trouble accessing and 40% visit a competitor’s site instead. (MicKinsey & Company)
A bad mobile experience will drive a customer away quicker than a good experience will attract a customer. You are doing your competitors a favour by having a poor mobile user experience.
How can you make your site more mobile friendly?
Firstly, you can start by making sure your site is responsive or that you have a mobile version of your site (like an m.yourdomain.com.au). If you don’t have these, you will need to sort that out quickly before the Google algorithm update kicks in.
A responsive site is a site which ‘responds’ to the size of the screen the user is viewing the site on. Generally, a responsive site will stack elements vertically to make them fit down the screen rather than having to make the user scroll horizontally. Most responsive sites will respond to many different screen sizes for tablets, mobiles and desktops in both landscape and portrait mode. You can see how your website will stack by minimising your browser window and making your window smaller or larger with your mouse.
You should check your site on your mobile device but also get a friend to check your website on their device. Ask them if everything makes sense or if there are elements that are hard to understand or difficult to use. Think of elements that disappear from the screen or are too small to click on so you have to zoom in to accurately press the element. You don’t want users to get frustrated with your site and switch off.
If you’re using WordPress you can find plenty of plugins which will make your site more mobile user-friendly. We like WP Touch. It has a free and paid version so you can try it out first. WP Touch optimises your website’s layout, speed and elements to be more mobile-friendly.
What is AMP?
Heard of AMP? AMP stands for Accelerated Mobile Pages and is a project of Google and other big tech players to make the internet a better place for mobile users. The idea behind AMP is to strip back all the unnecessary stuff to make a clean, pure and simple page for users to do what they need to do. No content is left out on an AMP page, but shiny elements, transitions, moving backgrounds and unnecessary design elements are cut. AMP makes the browsing experience faster, cleaner and simpler for the user.
You can learn more about the AMP Project here – https://www.ampproject.org
Can your customers click-to-call?
Make sure you have a click-to-call button so that users on a mobile device can quickly and easily call your number to reach you. It’s really simple code to implement. Here is the click to call code for our number:
<a href=”tel:+61240582000″>02 4058 2000</a>
TIP: Remember to identify your country code so that you don’t send your customers overseas. Australia’s country code is +61. You also need to drop the leading ‘0’ (zero) or Australian numbers so for the mobile number 0412 345 678, you would use +61412345678. For landlines, the same rule applies. For 02 4921 2345, you would use +61249212345. For 1300, 13 and 1800 numbers it’s a little different. You do need to make sure you use the ‘1’ at the start at the number so 1300 576 793 would be +611300576793.
For the link above, the first part of the code (href=”tel…) tells your customer’s browsing that the link is a telephone number and that instead of opening it in a browsing, it should open the link using the phone’s dialer. The second part of the link is the number it would dial. The bit between the ‘>’ and ”</a>’ is what is displayed on the screen. So you could simply have a link saying ‘Click here to call us today!‘ by using this code;
<a href=”tel:+61240582000″>Click here to call us today!</a>
If you use WordPress, simply highlight your phone number in your editor, select to add a link and use this code (with your phone number) as the destination:
There’s a WordPress plugin to create a click-to-call element on your mobile website which we love called Call Now Button by Jerry Rietveld. It makes it super simple to add a click-to-call on every page by using a neat element at the bottom of the mobile screen.
You can also have a Skype link or click-to-SMS link on your website.
You’re not limited to only have a click-to-call button on your website, you can use a variation of the above code to allow your customers to contact you however they see fit. You can use the following codes to prompt a different response from the user’s mobile device.
- tel: – place a phone call. eg href=”tel:+61240582000″
- mailto: – open an email app. eg href=”mailto:firstname.lastname@example.org”
- callto: open Skype. eg href=”callto:+61240582000″
- sms: – send a text message. eg href=”sms:+61400000000″
- fax: – send a fax. eg href=”fax:+61240582000″
Remember that the SMS prompt must be for a mobile device otherwise, it will probably fail.
Need some help making your website mobile-friendly?
Brothers Digital are happy to help you be more mobile-friendly. We can provide you with a mobile audit where we will check your website on many different devices to make sure the user experience is amazing on every device. We’ll make recommendations to make the mobile user experience better for your users which will deliver more leads and conversions to your business.
Are you in the market for a new website and want to make sure it is built mobile-first? All of the websites we produce under our Fixed Priced Website packages are built mobile-first. To find out more you can call us now on 02 4058 2000, SMS us or email us. We’d love to chat about making your website more mobile friendly.