If Google’s Mobile Friendly update in April 2015, their recent announcement of increases in the effect of said mobile friendly ranking signal, or the simple fact that a non-mobile friendly site can hurt your company’s reputation has not convinced you to invest in a mobile friendly solution you are not going to find anything here to change that.
What you will find, however, is how you go about making your site mobile friendly.
Decide on the best solution for your business
There are three ways you can go about creating a mobile friendly solution outlined below. Whilst responsive design is often cited as the best route to go down it is not always right for every scenario. It is worth exploring the other options before making a decision that can significantly impact your sites performance and understand the business impact from a resource commitment perspective.
Responsive
Often cited as the best route to go down due to everything sitting within a single site and Google recommending this approach above the other two. Responsive design eliminates the need for multiple URLs with the same content or re-coding of the same content to fit different devices.
Pros:
Compatible across all current and future devices
Single site to maintain
No duplication issues
Saves crawling the site multiple times
Cons:
Can be expensive
User experience can be limited to design
Can slow websites down
Dynamically served HTML & CSS
This approach serves different CSS and content to a user depending on their device. The user agent is detected and the most relevant code is displayed.
Pros:
Content can be tailored to device in addition to design
User journey can be customised by device
No duplication issues
Cons:
Costly to maintain, new pages need to be coded multiple times
Technically most complex of the three options
Mobile Version (Separate URLs)
Often comes in an m.example.com format but there is no preferred format for search engines, as long as their bots can crawl these URLs. When a user hits a desktop version of a URL on a mobile device the user agent is detected and pushed to the relevant m.example.com page.
Pros:
Cheapest to implement
Content can be differentiated as well as design
Customisation of the user journey
Cons:
Potential for duplication issues
Potential indexation issues
Risk of penalisation if redirects are not implemented properly
Optimising your mobile site
Once you have decided on the best solution then it is time to start optimising your site for mobile devices which includes making it mobile friendly for both search engines and users.
Google’s mobile testing tool is a good place to start as it will provide you with the core elements you need to change in order to make your site mobile friendly and receive a boost in mobile SERPs.
The mobile testing tool highlights the most common errors that may occur on a site and prevent it from performing as well as it could on mobile devices.
Page cannot be reached
Remember that the tool accesses your site as Googlebot and so you can block it in robots.txt. If you get this error be sure to check the page you are trying to access is not blocked to search engines in your robots file. It is also possible for this error to occur if your site is down or the network is experiencing connectivity issues.
Blocked Resources
Most commonly found in relation to CSS, JS or image files which traditionally would be blocked to search engines. Now search engines are able to much more effectively render a page in the same way a modern browser would it is recommended that these file types are accessible to search engines so they can more fully understand how the page will look to a user.
Also it is possible for you to have a page that functions perfectly well on a mobile device but actually fails Google’s mobile test because the blocked CSS changes the appearance of the site for mobile users but search engines would have no way of knowing this.
Viewport not configured
Pages should make use of the “meta viewport” tag to instruct browsers on resizing the page based on the device being used to access that page.
Fixed-width viewport
A legacy issue from a tag that was commonly used to set a fixed pixel size so non-responsive pages can be adjusted to fit most common screen sizes on mobile devices.
Content not sized to viewport
Users are accustomed to scrolling vertically but not horizontally and typically pages that require horizontal scrolling are not mobile friendly as a result of large fixed width elements or reliance on a particular viewport width to allow content to render well. This issue can be fixed by making sure pages use relative width and position values for CSS elements and that images can scale.
Small font size
One of the most common issues I have seen and often not a problem on desktop machines due to large screens. Small fonts requiring pinching and zooming on a mobile are a pain for users. Once you have set the viewport for your webpages then you need to set your font sizes to scale within each viewport.
Touch elements too close
We have all been there; tried to click on a link on a site and accidentally mashed the next link along with our giant hands…just me? Well help me out by making sure there is enough space between navigational elements on your site and that they are sizable enough that I am not going to click four links at once and ruin my data usage.
Interstitial Usage
Do the world a favour and stop pushing your app with a full page interstitial that pops up the moment your site loads, unless you are a fan of poor user experience and harming your mobile rankings.
Yes, Argos!
Calm yourself, Etsy
The mobile usability report in Search Console is the next place to head after you have ran a few pages through the Mobile Testing Tool as this will give you a an overview of issues across the site rather than just at a page level. This will help you understand the scale of the challenges your site faces to become mobile friendly.
Once your site is mobile friendly you can begin improving page speed and conversion on mobile devices but that is a whole other can of worms!
TL;DR
The whole world is accessing your non-mobile friendly site through a mobile device*. Use Google’s mobile friendly testing tool as a starting point to improve mobile user experience on your site and also SEO performance in Google’s mobile SERPs.
*potentially an over-exaggeration
If you need any guidance on which mobile implementation is right for you or help optimising your site for mobile drop a comment below or you can find me on Twitter.