Now Mobile-Friendly Website means Google-Friendly Website

Do you have mobile-friendly website?
Does your website have responsive design?
Do you consider users who use web on mobile?

If yes, then here is good news from Google. Google will now officially add “Mobile-friendly” tag to those websites in search results that are mobile friendly.

Nowadays, increasingly number of users are using web on mobile devices and hence it becomes imperative to optimize your website for these devices. But, how do you find out if your website is mobile-friendly or not? You can check it out here.

You can also carry out Mobile Usability Test through Google Webmaster Tools.

Points to keep in mind while creating a Mobile friendly Website:

Be responsive

• Responsive design allows you to give your visitor similar experience across desktop, tablet or smartphone. It not only gives better user experience but is also easy to manage.

Size of content

• The size of text should be ample enough so that it is easily readable on mobile screens. It should neither be too small nor too large. The idea behind this is zooming in or out frequently isn’t much of good user experience.
• Similarly, the button and content size should be appropriate so that user doesn’t have to scroll all the time. Though most modern browsers are smart browsers and adjust font size and overall screen size, it is advisable to take precautions beforehand.
• Keep links apart so that user doesn’t accidentally click on wrong links.

Keep it Short and Simple

• Convey your message in as clear and concise way as possible. Nobody would like to read long paragraphs on mobile unless somebody is reading a book!!
• Use of flash, heavy-weight images, graphics etc is highly discouraged. Use them only if unavoidable or theme of your website needs them.
• In case you need to use video, use HTML5 video player so that it runs on most devices.
• Page Loading Time should be minimum so that no one is kept waiting and use of memory is optimized.
• Use icons instead of text links for navigation wherever applicable.

Avoid overuse of Javascript

• Different browsers and phones treat javascript differently. Also, users might have disabled javascript on their browsers. Hence, it should be used with proper caution.

Design for mobile

• Browse your website on desktop and resize browser, reducing width while keeping website still readable. Now set this width as below.

<meta name=viewport content='width=600' content='user-scalable=yes'>

• With user-scalable attribute set as yes, user will be able to zoom-in and zoom-out.
• To resize images and input fields on mobile devices, set max-width to 100%.
• For background images, set background-size to contain so that they are automatically resized.
• Make use of latest technology standards for design. For example, you can utilize placeholder attribute of input tag so that you don’t need to use labels.

<input id="Email" name="Email" type="email" placeholder="Email" value="" spellcheck="false" class="">

• Use media queries to apply different CSS for different devices.

<style>
/*CSS for Desktops*/
.button {
font-size: 1.2em;
}
/*CSS for Other devices*/
@media screen and (max-width: 500px)
{ .button { font-size: 1.0em; } }
</style>

• Instead of setting position of objects to fixed, set it to static for mobile devices. Fixed position will distort the view while scrolling.

Use SEO Tools

• If your website is hosted on CMS, then make good use of wide variety of SEO plugins available.
• Use tools like Site-Ninja that give a preview of how your content will look to your users, irrespective of any device.

Utilize GPS information

• Present location specific information to users, for example, local discounts and offers.
• Set language of the content based on geo-location.

 Link to Full site / Desktop version

• Mobile friendly version is a miniature version. For users who want to see full desktop version of website, provide a link in footer so that they dont have to re-type URL in address bar.

And finally,

Test well on all platforms, devices and browsers

• Make sure your user has a pleasant experience using your website and returns to want more.

Above is just a short compilation. There are number of ways to present mobile friendly content to your visitors. You could be losing out important business in case you are neglecting mobile friendly website, as now Google has started showing "Mobile-friendly" tag for all responsive websites in their Result Page itself (like below).

Conclusion

Remember, “Mobile-Friendly” website is “User-Friendly” and hence “Google-Friendly”. With the latest post by Google, I speculate that soon Google might consider “Mobile-Friendly” feature as ranking parameter too.