• Happy Independence Day to all our friends in America! 🗽We hope you have an amazing 4th of July, filled with family,… twitter.com/i/web/status/1…

COMPANY BLOG & NEWSROOM

11Dec

Google Gives You More Reason to Have a Mobile-Friendly Site

Have you ever used your smartphone to browse the web and opened a website that was clearly not optimized for a mobile device? It is quite annoying, and Google agrees.

Mobile_Friendly
Mobile-friendly sites now have an advantage over websites that aren’t optimized. Google has implemented an update to its search result ranking algorithm that factors in mobile experience elements. Now, when a mobile device is used for a search query, the sites that meet the required criteria will feature a “mobile-friendly” label.

If website owners want to rank well, they must reconsider their website layout, design, and content to ensure that their website is considered mobile-friendly.

What Makes a Page Mobile-Friendly to Google?

One of the main standards of mobile friendliness is the software that is being used. The software that is unfriendly to the majority of mobile devices will be penalized. One primary example is Flash, which has been outshined by the more efficient HTML5 release.
Another key criteria Googlebots look for is text that is easy to read. This ensures that visitors don’t need to zoom-in when they visit a website. The content should be responsive, which means that scrolling is not required. It is also important that links are spaced carefully and are easy to click on.

mobile-label
If you are unsure whether your website is friendly for mobile users, you can always check by submitting it to a mobile-friendly test. This test is a free tool from Google Developers that will instantly tell you if your website is suited for mobile devices or not. It will even tell you the reasons your page might not be mobile-friendly, how Googlebot sees your webpage, and tips on how to make the page more mobile-friendly.

Main Guidelines to a Mobile-Friendly Site

The following are the key design guidelines you need to know when designing your mobile-friendly site.

Put Content First

The most important aspect of your site is the content. Content is king, as they say, and the design of your site should be built around the content, not vice versa. With this in mind, you should begin by outlining all of the content you want to include. This outline should include the main points you want covered, images, data tables, videos, as well as detailed descriptions.
Make sketches of the outline in both a wide and narrow viewpoint version. With these sketches, the skeletons of the page can be built. It is recommended that you start with the mobile version in a narrow viewpoint, and build it out.

Keep It Simple

Keep the design clean and simple in order to keep the focus on your content. You will have a brief opportunity to get your message across to your audience, and a simple design will help to facilitate that. A style guide can also be used to maintain consistency and simplicity across your entire website design.

Set the Viewports

A viewport meta tag is required in order to build a multi-device site. It communicates to the browser that a specific webpage must be scaled in order to fit the destination screen. While there are many different configurations available, the following default can be used:

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

Learn to size content to the viewport here, and to set the viewport here.

Make the Use of JavaScript

JavaScript is helpful when tailoring a website to a mobile audience, as it alters behavior and rendering of a site depending on the device. There are three main types of JavaScript implementations that are commonly used: dynamically served, combined detection, and JavaScript-adaptive. Learn more here. While JavaScript can be helpful, make sure to use it wisely, as it can run differently on different phones, which can affect performance.

Minimize the Amount of Forms

You want to give your audience a place to enter in their contact information, but filling in fields is not fun for any visitor. Make it easy and efficient by minimizing the number of forms present on your site. If possible, include the auto populate options utilizing GPS.

Increase the Size of Links and CTA Buttons

Links and buttons must be easy to press, which becomes an issue on a touch screen. The average size of an adult index finger is 1.6-2 cm which equals 45-57 pixels on a mobile device. With this in mind, ensure that at least 30 pixels is between all links and buttons. It is quite irritating for users to accidentally click on something they didn’t mean to, which results in higher bounce rates.

Break up Text

It is important that the text on your site is easily digestible, with content sections that are short and sweet. Readers scan pages for interesting headlines and answers to their questions. Roughly, 3-4 sentences per section is ideal. In addition, be sure to put the most important content first.

Add Video

Mobile users are 3 times more likely to watch a video than desktop users, so use that to your advantage. An efficient video player is essential to a proper functioning website. A lagging video player can ruin the customer experience and cause visitors to leave your site. Use HTML5 to ensure compatibility with most mobile devices.

4545983597_6b1bcb0006_z

How Do You Ensure That Your Page Is Mobile-Friendly?

Now you have the basics to a mobile-friendly site. Here is how you can ensure that you have implemented them correctly.

Test Test Test

As we have previously mentioned, the mobile-friendly test is a great tool used to analyze your website’s mobile friendliness.

Choose Your Mobile Configuration

In order to make your new website most effective, you will have to understand the workings of various devices, the key points of going mobile, and select a suitable mobile configuration.

Beware of Common Mistakes

If you want to ensure the effectiveness of your website, you must also avoid common mistakes at all costs. The most common mistakes are blocked JavaScript, CSS and image files, unplayable content, faulty redirects, mobile 404s, and slow mobile pages.

Be Supportive

Mobile friendliness involves being able to have your website seen on every mobile device from a feature phone to a tablet. Make sure that your site is configured for all of these devices.

Read Dedicated Guides for the 3rd Party Software You Use

If you are using a third party software for your website, the truth is that most providers have also been preparing for this change. Read various dedicated guides from different software providers on the specific implementation steps regarding this change and how you can convert your website best. These guides include Bitriz, WordPress, Joomla!, vBulletin, Tumblr, Magento, Prestashop, DataLife Engine, Blogger, and Drupal.
No matter which software you use, it is recommended that you back-up your site, ensure that you have the latest version of the software, check if custom themes are available which are “mobile-friendly”, and read up on available forums for potential problems others might be having with their mobile website versions.

Additional Resources

Want to learn more about this change to come? Take a look at the additional resources from Google.
Optimizing your site for mobile users is key to online success in 2015. Luckily, the mobile market will also bring more customers and extra revenue to your site, so these changes will certainly be worth the investment.

leave a comment

All posts Back to top