Google's upcoming algorithm update will have a major impact on organic search rankings, and ultimately referral traffic from the search engine to many websites.
This algorithm update is expected to be Google's biggest to date, and will affect a greater number of searches than ever before. Google's Penguin update affected 4% of global searches made via desktop and mobile devices. Its Panda update affected about 12% of all searches made in English.
The upcoming algorithm update, which will begin its roll-out on April 21st, will use mobile-friendliness as a ranking signal. After this algorithm update has been rolled out, your site will be penalized in mobile search engine result pages if its not optimized for mobile devices.
What Makes A Website Mobile-unfriendly?
1. Mobile Viewport is Not Configured
Your website visitors consume your content via a variety of different devices, all of varying screen sizes (small desktop monitors, large desktop monitors, tablets of different heights/widths and every kind of smartphone on the market).
Responsively-designed, mobile-friendly websites specify a viewport using meta viewport tags that tell browsers how to adjust a page’s dimensions and scaling to fit the device being used.
2. Mobile Viewport is Set to a Fixed Width
Since there are so many different devices with varying screen sizes, it's a big no-no to set fixed widths in viewport meta data. Defining fixed pixels (for that of a common smartphone screen size for example) for a viewport will prevent a page from adjusting properly to larger or smaller phones.
3. Content is Not Sized to Mobile Viewport
When content is not sized for a mobile viewport, the user will have to scroll horizontally to read and view images. This is a big issue that Google's mobile algorithm update will target.
This usually happens because a page uses images meant to look best within a specific browser width or as a result of absolute values in CSS declarations.
To make sure all content is sized for mobile viewports, make sure all CSS elements use relative width and position values and ensure sure images scale optimally.
4. Font Size is too Small
For mobile users, fonts should scale to a size that can easily be read without having to pinch to zoom. To ensure that fonts scale properly, set font sizes within your viewport meta data.
5. Touch Elements are too Close Together
Touch elements, like buttons and links, should not be so close together that a user has difficulty trying to tap on an element without interference from another link or button. Correctly size and space out buttons and links so that mobile visitors have a pleasant and user-friendly experience.
6. Use of Flash Components
Since Flash components are not compatible with most mobile devices, it's best to leave them out entirely. If a page's design, content and other elements rely on flash, it will receive a failing grade for mobile-friendliness.
Test Your Website using These Two Tools
Google's Mobile-Friendly Checker: Simply copy and paste your website's URL into this tool, and it will give you a thumbs up or a thumbs down on your mobile-friendliness.
W3C mobileOK Checker: The World Wide-Web Consortium's mobile-friendly testing tool provides more in-depth technical analysis and suggestions on how to optimize it for mobile viewports. The tool also provides a severity rating for each infraction so you can fix any problems with your website based on how critical it is.