The Battle for Mobile

…and how it affects YOUR website

Google’s Obsession: Mobile

Google’s online advertising dominance is under threat from the Instagrams and Snapchats of the interwebs, while Facebook and Apple are making moves that could deal heavy blows to Google ad revenue. Where is this battle taking place? On mobile devices.

Mobile keeps people off Google. People search for things within discrete apps and not in web browsers. People ask friends for information via Snapchat and Facebook instead of asking Google. Less people using Google means less ad revenue.

Furthermore Facebook is now getting into news, keeping users inside their walls longer. Apple enabled ad-blocking for its mobile devices.

This is nothing new to Google: they saw this day coming long before 2015. They saw it over 10 years ago, when they decided to buy Android for $50 million. They saw the future and knew they needed a mobile platform to stay competitive online for the coming years.

And Google is fighting back. Last week Google announced a new product called Accelerated Mobile Pages (AMP) that will instantly load pages from participating publishers. AMP promises to deliver Web content on mobile devices faster, a lot faster. It’s like a version of Facebook Instant Articles but in an open standard framework that any publisher can use.

What does all this mean for you?

If you have a website for your business, it needs to be at the very least, mobile-friendly. The rest of the article explains how to determine where your site is at now and how to get it to where it needs to be.

I will cover:

• How to get a deep and thorough understanding of “mobile friendly” websites and an ability to determine whether your business’s site is mobile friendly or not.
• Learning to use the online Google Mobile testing tool to identify which pages of your site are mobile friendly
• Knowing how to use Google Webmaster tools and Google Analytics tools to research past and present web traffic in order to understand what percentage of your web traffic is represented by mobile website users.
• Understanding the main 3 options that can be used to create mobile-friendly websites.
• Choosing which of the 3 options is right for you and preparing to apply it immediately.
• Creating an action plan for creating mobile-friendly websites for business and/or correcting existing webpages to make them more mobile-friendly.

You’ll learn a number of techniques and options so that at the end of the course you’ll be ready to put them to use immediately to increase your business site’s traffic on mobile devices.

Mobilegeddon?

The “Mobilegeddon” is upon us. At least, that’s according to Google, which announced that as of April 21, 2015, it had made a drastic update to its algorithms, which now rank sites that are mobile-friendly higher than those that aren’t.

This change was dubbed “Mobilegeddon” by some techie pundit somewhere, and the moniker spread far and wide. Why the doomy overtones? Because for businesses whose website are not mobile-friendly, it could be a catastrophe that, while it won’t end the world, could dry up the traffic to your website quickly.

Google’s algorithms are closely held secrets and even the most tech-savvy webmaster can’t crack them. But along with announcing that mobile-friendly sites would rank higher in searches, Google also specifically mentioned that websites that are not mobile-friendly will no longer show up in mobile searches.

On Google’s Webmaster Central Blog, the company said, “Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results. Consequently, users will find it easier to get relevant, high quality search results that are optimized for their devices.”

Google has hinted that there are no halfway mobile-friendly websites. According to an article on Search Engine Journal, “Mobile-friendliness is not ranked on a scale – your site is either mobile friendly, or it isn’t. Your site has to fully pass Google’s criteria in order to be considered mobile-friendly.”

Is this just fear mongering? What if you don’t rely on Google for your web traffic? Whether Mobilegeddon is truly the life-changing event it’s predicted to be or not, mobile-friendliness has its advantages. People are increasingly using their mobile devices rather than desktop PCs to search for information and businesses online. This means that whether you’re looking for search engine traffic or not, it’s a good idea to be ready for mobile.

So, what exactly is a “mobile-friendly” website?

The next section is all about defining exactly what this term means, and how you can either build a mobile-friendly site, or make changes to your site so that it’s more mobile friendly.

The Mobilegeddon may be at hand, but if your businesses gets on-board and makes its site ready for mobile, you’ll not only survive but also thrive over your competitors who are still in the dark ages…

Is My Website Mobile-Friendly?

In this module, you’ll start by learning what it means to be “mobile-friendly” and by the end, you’ll know whether your business website currently is or isn’t matching the criteria for mobile.

The definition of “mobile-friendly” is quite simple – a mobile-friendly website is one that displays correctly on mobile, hand-held devices like smartphones and tablets.

There are several important elements that make a website mobile-friendly. Let’s look at these elements and, while reading, ask yourself how your own site measures up (we’ll discuss how to more objectively assess your website’s mobile-readiness with Google tools later).

Sized for Mobiles

A site optimized for mobiles is easy to read on a small, hand-held device. Some mobile devices have screens that are as small as 1/5 the dimensions of a PC. That’s quite small and all of the text, images, and other features need to be clearly visible. The design elements of the site should be uncluttered and images should be kept to a minimum and large enough to see.

Mobile Navigation

A mobile-friendly site is easy to navigate. Navigation on a mobile device is different from navigation using a PC. Mobile devices use touchscreens, which allow the user to tap, slide, expand, pan, and so on with thumb and fingers, whereas a PC uses a mouse. The small screen size makes a difference as well. Navigation should be clear and easy with buttons that are large and easy to tap.

Minimum Scrolling

Your site should be easily viewable with minimal scrolling. Mobile-friendly websites don’t scroll horizontally like a PC website might and they usually put as much content as possible above the fold so that vertical scrolling is kept to a minimum.

Contrasting Colors

A color scheme that includes contrasting (but not clashing) colors is especially good for mobile sites. It helps to make a site easier to read on a mobile and call attention to certain content while it also makes the site more visually appealing.

Fast Loading Time

A mobile-friendly site doesn’t have any elements that take time to load. Mobile users expect faster loading times and many users are looking for information on-the-go. Website elements that take time to load should be avoided or kept to a minimum. In addition, Apple devices don’t use Flash at all, so any videos created in this format won’t show up.

Few Text Fields

Your site shouldn’t require the user to enter a great deal of text. A PC’s keyboard makes typing text into forms and fields on a website very easy. It’s not so easy on most mobile devices. A good, mobile-friendly site shouldn’t require the user to enter a great deal of text.

Big Text Fields

When there is text, fields are big enough to easily fill in. Whenever possible, mobile-friendly sites use auto-fill, which remembers passwords so the user doesn’t have to enter them each time.

Special Mobile Features

It’s nice if your mobile-friendly site can take advantage of the special functions of mobiles, like click-to-call, which allows users to click a phone number and it automatically calls the number. Another example would be features that use the mobile’s geographical location or social media apps. These features create a better experience for mobile users.

Non-Mobile Option

Another handy feature that enhances the mobile user’s experience is a link that leads to the PC site. If the user is used to accessing the PC site or there are special features or content there that they want, they can easily access it from the mobile site, even though their mobile browser automatically redirects to the mobile site.

Testing Your Site for Mobile-Friendliness

You can get some idea of how mobile-friendly your site is by accessing it from a mobile device and seeing how it works according to the points above. Check out the visibility of site elements, the navigation, the loading time, and whether or not it requires a great deal of scrolling.

A better and more thorough way to check your site is to use the Google Developers Mobile-Friendly test page.

Enter your main webpage URL into the field in the middle of the page and hit “Analyze.” After a few seconds, it will give you results. At the top of your results, it will tell you whether your site is or isn’t mobile-friendly. Below this, you’ll find a simple report that explain why it is or isn’t.

The report is separated into three columns. The left-hand column explains problems with your website for mobiles. These might be things such as:

• Text too small to read
• Mobile viewpoint not set
• Links too close together
• Uses incompatible plugins

The center column shows how a Googlebot sees the page. Googlebots are Google’s web crawling spiders, which index websites. This column basically shows you what your site looks like on a mobile with a small screen.

The right-hand column gives you ideas on how you can improve your site for mobile. You first have to select whether you built your site using a CMS, someone built it for you, or you built it yourself. Once you make your selection, there are tips and options to help you improve your site. For example, if you used WordPress to build your site, there is a step-by-step tutorial that will teach you how to make your pages mobile-friendly.

This test should be done for your site’s main page, but also for each page within the site. The main page is your site’s URL.

Depending on your webhost, the fixes to make your site more mobile-friendly may be as simple as choosing another WordPress theme, or they could be very complicated and involve major changes. You may need to update your entire website.

At Google’s Getting Started Guide for developers, you’ll find a menu that asks you how you’d like to build or change your website. Under each category, there is a wealth of information to help you make your site more mobile-friendly.

You can also check mobile-use problems using Google Webmaster Tools. If your site doesn’t already run Webmaster Tools, you’ll have to set it up and get verified, which can take a few days, before you can get started. You can set up your Google Webmaster Tools account here. If you’re already running Webmaster Tools, clicking the previous link will show your websites.

On the navigation bar on the left of the main screen, you’ll see the section “Mobile Usability.” Click here and it will give you a report that shows your website’s errors. It will list the errors at the bottom.

One more resource for learning about mobile-friendly sites is Google’s Mobile-Friendly Websites Guide, which can be found here.

Things to do:

• Starting with your main page, go through each main page on your website and check its mobile-friendliness using the Google Developers Mobile-Friendliness tool or Google Webmaster Tools (if you have a webmaster, you can assign this task to them).
  • Examples of pages to check include the Home Page, sales pages, opt-in pages, thank-you pages, download pages, any product pages, blog posts, checkout, shopping cart, About page, FAQs, Contact, 404 page, etc. If one blog post is mobile-ready, the rest probably are too, so you don’t necessarily need to check every single page on your site.
• Create a file or get a notebook and list the pages that aren’t mobile-friendly and why. You’ll use this for reference later.

My Website Isn’t Mobile-Friendly – Now What?

If you found out in Module 1 that your website isn’t mobile friendly, in this module, we’ll discuss how to go about fixing it.

If the tests show that your website isn’t mobile friendly, this means two very dire things:

• Google’s search algorithms are sending more traffic to your competitors whose sites are mobile-friendly.
• Your website won’t show up in searches on mobile devices such as iPhones and iPads, even if the person searching enters your business’s name.

In addition, you might simply be losing readers who do find your site on mobile. If it’s difficult for them to read, navigate, or use your site, they’re going to leave.

First, you can use Google Analytics to find out what percentage of website traffic comes from mobile devices. Look at this data before April 21, 2015, when Google made the big change. If there is a significant drop in traffic after the change, you’re in trouble and you need to make your site mobile-friendly ASAP.

If you don’t get much traffic from mobiles and you’re not likely to in the future, you may be ok. You can probably avoid making any major changes. However, this is pretty unlikely considering that mobile use grows each year, with users looking for every kind of service or product conceivable using their portable devices. More likely, you’ll discover that you’ll lose a significant chunk of your search traffic if you don’t do something now to make your site more mobile-friendly.

There are a couple of ways to use Google Analytics to determine how much of your traffic is coming from mobile devices. Start by looking at your Mobile Overview. Go to Audience, click Mobile and then Overview.

This shows you various data but here’s the easiest. The main screen shows an overview of your audience and traffic. On the left-hand sidebar, scroll down to the Mobile tab. Click it and you’ll see two options: Overview and Devices. Click on Overview and the graph will show how much of your traffic is coming from mobile devices. Scroll down and you’ll see a chart that breaks your traffic down into the sources “desktop,” “mobile” and “tablet.”

In addition to the percentage of traffic, the chart shows you other information such as the bounce rate and average duration of sessions. Without going into too much detail on how Google Analytics works (it can get complicated), a high bounce rate or a low average time per visit tells you that something isn’t well with your site. If you see a significantly higher bounce rate or a significantly low duration on site for the mobile category, this is a pretty good indication that your site doesn’t function well on mobiles.

You can also click on the menu item Devices below Overview to see a breakdown of traffic and other data for each specific type of device. You can also see this on the main screen by scrolling to the bottom and clicking Operating System under Mobile. It will show you what percentage of mobile traffic is coming from each type of operating system such as iOS and Android.

For some small businesses, the amount of traffic you lose by not being mobile-friendly is pretty small. For others, it’s a significant amount of traffic that could be seriously costing you. It’s important to know how much you’re losing because a complete website overhaul can be expensive. It’s quite an investment and you need to make sure it’s worth it.

If you’re only losing a tiny percentage of traffic to mobile devices, you have two options. One is to not upgrade your site at all. The other option is to make a few minor tweaks in design or functionality, but to skip the website overhaul since the investment isn’t really worth it to you.

What percentage is significant? Search Engine Journal’s Tom Demers, in his article on how to handle Mobilegeddon, says this:

“If you’re getting 5-10% of a limited amount of organic traffic from mobile search and most of that traffic is branded and directed at your home page, you might want to put a mobile site overhaul on the “nice to have” long term project list. If you’re getting 30% of your site’s traffic from mobile, it’s driving to various pages on your site, and organic traffic is a key revenue driver for your business you may need to move this up on the company to-do list.”

These are guidelines from an expert on the subject, but just guidelines nonetheless. You may want to invest in mobile-readiness for your site anyway if you anticipate gaining more traffic from mobile searches in the future.

Another consideration is priorities. Small businesses operate on limited resources. You may feel the need to update your site and make it mobile ready but now just might not be the time. If you have a choice, for example, between updating your site right now, or hiring a stellar new employee who is going to bring valuable skills that will help your business grow, you might choose the latter.

If you decide you’ll update your site for mobiles “someday,” decide on the exact day (or a ballpark timeframe). Otherwise, it can get lost in all of the other things there are to be done.

Things to do:

• Refer to Google Analytics and discover how much of your web traffic is from mobile sources.
• It’s time to make a decision. Using Demer’s guidelines and your own feelings about mobile-readiness, decide whether you need to make changes to your site. If you decide that you will, move on to Module 3.

Your Options for Creating a Mobile-Friendly Business Website

In this module, we’ll look at the three options available for making your website mobile-friendly. You’ll read and evaluate these three methods and then choose which is most appropriate for your business. By the end, you’ll know what you need to do.

Option 1: Create a Separate Mobile Version of Your Website

Many websites aren’t altered at all for mobile-friendliness but instead have a parallel mobile version. When a mobile user visits the website, it automatically detects that the user is on a mobile and redirects to the mobile site.

The URL for your mobile site would be something like http://www.yoursite.com/mobile or http://m.yoursite.com.

This site would have the same branding and basic content, but the navigation and layout would be changed in such a way that it would function well on a mobile device.

You can create your mobile site through custom coding and then host it on a web server just like your regular site. A bit of JavaScript code on your desktop site recognizes mobile users and automatically redirects them to your mobile version.

If you don’t want to spend the money to hire a developer and you can’t do it yourself, you can use a mobile website builder like DudaMobile, goMobi or Onbile. With these, you enter your URL and they automatically create a mobile-friendly site for you, which you can then edit.

Duda Mobile

Option 1 is good if you want your mobile site to convert differently than your desktop site or if you’re targeting different keywords or a different demographic. This is because your mobile site can function differently than the desktop site, so it’s an opportunity for you to target differently.

Option 2: Use a Simple Content Management System (CMS)

This option is cheap and easy and doesn’t require hiring a developer. It involves using a simple content management system (CMS) such as SquareSpace or WordPress to create a mobile-responsive site. These CMS’s are designed to be user-friendly so even if you aren’t a developer, don’t play with code, and don’t have a webmaster, you can use them without too much hassle.

SquareSpace, WordPress offer website themes that are specifically for mobile-friendly sites. To use these, you would choose one of the mobile-friendly themes and then move all of your content into it.

In addition to being quite easy to use, these CMS’s also offer tutorials that show you how to make your site mobile-friendly if the technical side of it is daunting to you.

If you’re using WordPress, you can also install a simple plugin like WPTouch. WPTouch is a free plugin that, once installed, automatically creates a simple but very nice mobile theme for mobile visitors. With its administration panel, you can also customize the mobile-version of your site and you don’t need to mess around with code at all. WPTouch is one popular plugin but there are others available as well.

Option 2 is especially good for businesses that are on a limited budget or don’t have a great deal of technical skill. CMS’s make it easy for you and the simple mobile theme packages they offer are very reasonable. This is also a good option if you want your mobile site and desktop site to essentially function the same and produce the same results.

Option 3: Change Your Site Yourself

If you like to get into the code of your website and make tweaks and changes, you may want to make your site mobile-friendly yourself. This option is only recommended if you have access to your code and feel confident that you can tinker with it.

What exactly should you change? In the Resources section at the end, you’ll find two links, “10 Ways to Make Your Website Mobile Friendly” and “Mobile SEO Guide,” which will offer specific tips on altering your site for mobiles.

Things to do:

• Consider the above 3 options and choose the one that’s most suitable for your website.

Hiring Someone to Fix Your Site

If you choose Option 1 or 3 above and don’t want to do it yourself, you can hire a web developer or designer to do it for you (You probably don’t need a developer or designer to help with Option 2). Hiring a specialist requires a small investment on your part, but it takes the headache and time out of it for you. Plus, their skills can help to make your mobile-friendly site much better.

Where to Find Developers

There are a number of ways to find a web developer or designer. You can:

• Ask someone you know or have worked with for a referral.
• Search the web for a freelance professional.
• Hire a professional through a freelance site like eLance or Upwork.

The best option is the first. If you can get a referral from someone you know, the developer is pretty much guaranteed to be good. They did a great job for your friend or acquaintance; otherwise, they wouldn’t be recommended. You’ll still want to do some due diligence and check them out before you hire them.

You can find web developers online by using Google search. If you want to find someone in your area, add geographical keywords such as your city or country. You’ll turn up a number of websites of professionals offering their services and you can select several and check them out.

Another option is to use a freelance site, which puts website owners and businesses in touch with freelance service providers. The service providers on these sites include writers, designers, virtual assistants, developers, and so on.

What’s nice about these sites is that they offer security. Money is held in escrow until the job is completed and there are various other protections for everyone involved.

These sites are convenient but there are some downsides. First of all, they have their own rules that you have to follow. These rules may not always be to your liking. The site will also take a cut of the money, which is only reasonable since it introduced you to the freelancer. There’s also the fact that you have to make your own profile, which takes a bit of time. It’s a much better deal if you plan to hire others through the site as well.

What to Look for in a Developer

There are six things to consider when hiring a freelancer. You should reach out to several candidates and test them on these five things to see who measures up best.

1. Examples of Work. Probably the most important thing is to see samples of actual work they’ve done for other clients. You need to see the quality of the work they do. Samples also prove that they understand what you want and they’ve done the kind of work you require before.
2. References. You should ask for references from past or current clients. Send these clients a quick email or give them a quick phone call to ask them about working with the freelancer. If they have several happy past clients who will vouch for them, you know they do a good job. You can also Google search the person or company’s name to look for online reviews.
3. Technological Know-how. If you’re hiring a developer, ask them what kind of smartphone or mobile device they use. They should be into mobile devices and possess detailed knowledge of them. Any good designer is surely a mobile user. If not, they’re not experienced enough for your needs.
4. Testing. Ask the freelancer how they will test their work. Any good designer will have a plan for testing your website. They should already know ways to do this. At the very least they should know about the Google resources you’ve learned about in the first two modules of this course. It’s even better if they have something more sophisticated.
5. Communication. Pay close attention to how your developer candidates communicate with you. They don’t need to be available at every second of the day, but they should respond to you fairly promptly, and their communications should be friendly, clear and easy to understand. It also helps if they can explain things to you without too much jargon or technical language. If you have fundamental communication problems with your developer, it will be hard to get things done in a way that’s satisfactory to you. You should also discuss with them how you’ll communicate during the development process including what method of communication (email, Skype, etc.) and when (times available, regular meetings to check progress, etc.).
6. Payment Terms. If you’re using a site like eLance, it will lay out its terms for you. But if you’re hiring a freelancer, you’ll need to discuss payment terms with them and make sure you agree with them.

Budget is another consideration. You should decide how much you’re willing to pay for the work. You can get a good idea of how much this will be by searching something like “going rate for freelancer developers in Google.”

But a word of warning – Don’t let price be your main deciding factor. Decide how much you’re willing and able to pay and look for service providers who are in the neighborhood or cheaper. Don’t go with the cheapest help you can find. There’s usually a reason they’re offering their services so cheaply.

One way to economize if you don’t really have much budget for a freelancer is to offer to barter. Think about all of the services you can provide someone and offer to trade service for service. There are bartering forums and websites you can use to do this.

Things to do:

• Brainstorm friends and colleagues and see who you can ask for a referral. Reach out to the person you’ve chosen and see if they have any leads.
• Do a web search for freelance developers online and see what you initially turn up.
• Visit eLance or Upwork and look at the profiles of at least three mobile website developers.
• After looking at various freelancers and their prices, consider whether it’s worth it to you financially to hire help. If not, return to Module 3 and reconsider other options.
• If you decide to hire help, reach out to several of the freelancers you’ve looked at and test them on the above five considerations.

Next Steps

Now, you know what it means to be mobile-ready and why it’s so important for your site, and you’re equipped with several different options for getting your site ready for mobiles. The next step is to put what you’ve learned into action and make the necessary changes.

You’ve learned:

• What it means for a site to be mobile-friendly
• Why it’s so important that websites are ready for mobile users
• How to test your website using Google’s free tools.
• How much of your website traffic is from mobile devices and therefore whether it’s worth it or not for you to change it.
• Three options for getting your website ready for mobile users.
• Which of the three options is most appropriate for your business.
• How to find freelance developers to help you with your site if you need them.
• How to go about hiring the right developer for the job.

Start by reviewing the notes you took while going through this article, including the research you’ve done along the way. From the work you’ve already done in the course, it should be easy to decide exactly what you need to do in order to move forward.

You’ll weather “Mobilegeddon” and most likely come out of it with even more traffic and customers than you had before.

Checklist for a Mobile-Friendly Website

Is your site Mobile-Friendly? This checklist will tell you if it is or is not.

Once you’ve gotten your website ready for mobile, here is a checklist to help you make sure you did everything you need to in order to ensure a good experience for mobile users.

• Do the sizes look right on mobile devices? Is all of the content clear and easy to see from the smallest device your users use?
• Are images large enough to be clear?
• Is the site uncluttered and easy to look at?
• Is navigation obvious and clear?
• Are navigation links and buttons clearly identified and big enough to tap with a thumb?
• Is the most important information above the fold so that no scrolling is required?
• Does the color scheme make the content clear and differentiated from other content, or is it muddy and indistinct?
• Does the site load quickly?
• Are text fields absent or kept to an absolute minimum?
• Where there are text fields, are they large and easy to fill out on a mobile?
• Does your site have auto-fill for text fields?
• Does your site make use of geographical location where possible?
• Are the phone numbers on your site click-to-call enabled?
• Does your site give users the clear option of choosing the desktop site if they prefer?

Once your site is done, review it with this checklist on every mobile device your visitors use.