๏ผ Implement a Mobile Friendly Configuration (Responsive Web Design, Dynamic Serving, or Separate URLs)
๏ผ No Blocked Files
๏ผ All Content Plays on Mobile
๏ผ All Redirects are Suited for Mobile
๏ผ Redirect any Mobile Only 404s
๏ผ No Annoying Interstitials
๏ผ Relevant Cross Links
๏ผ Fast Loading
๏ผ Correct Viewport Settings
๏ผ Adequate Font Size
๏ผ Touch Elements Spaced Well
๏ผ Passed the Mobile-Friendly Test https://www.google.com/webmasters/tools/mobile-friendly/
๏ผ Signal to Google when a page is formatted for mobile
With smartphones being fully integrated into our world, it is imperative that websites are mobile-friendly. In fact, they should be able to be accessed on a number of devices a user might choose to view them with.
Not only do mobile users want relevant information, but they want it presented to them in a way that is easily read, navigated and interacted with. If you do not have a mobile-friendly website, the chances are extremely high that these users will quickly move from to look elsewhere, often to your competitors.
In this article, we will look at the steps you need to take to ensure your website is as mobile-friendly as it can be.
Implement a mobile friendly design
There are three ways this can be implemented.
Firstly, by responsive design. This is perhaps the most popular and in fact, is recommended by Google. Here, the HTML code, as well as the URL for your website, remain the same no matter the device used to view it including desktop, tablet or mobile phone. The display is then rendered differently, depending on the device and its screen size.
Secondly, by dynamic serving. Here, the same URL is used no matter the device accessing it. The HTML delivered, however, is different for each device. It is then the server that decides which version of the HTML to send based on the information it receives from the userโs browser.
Thirdly, by separate URLโs. Here, the server attempts to determine which device a user is browsing with. Once established, it redirects their browser to the corresponding page by way of HTTP redirects.
No blocked files
Google makes use of a bot, aptly called โGooglebotโ to view web pages and to determine their suitability for high search rankings, even those optimized for mobile devices. It is imperative that โGooglebotโ is able to access all parts of your website, including all image files, CSS and JavaScript used throughout the site, just as an average web user would. This will mean that the complex algorithms used to index the site will work in your favor and it will receive high search engine rankings. To check how โGooglebotโ views your site, use the โFetch as Googleโ feature in the Google Search Console. Also, remember to test your robot.txt in the console as well. Lastly, use the โMobile-Friendly Testโ to make sure the mobile version of your website is detected and viewed as such.
All content plays on mobile
Take note that some forms of content might not be playable on mobile phones. This is typical of flash related media requiring a flash player. If you want your website to be mobile friendly, make sure you use mobile friendly content. Users will quickly leave your page when they find videos that will not play on their devices. Ultimately, this leads to a very poor mobile experience and it is unlikely that they will return to the site. One way to overcome this is to use standard HTML 5 tags to embed video or other content. Always include a transcript of the video for any mobile user that may still have a problem playing it. In this way, at least the information contained in the video is available for them to read.
All redirects are suited for mobile
When using specific mobile URLโs make sure those mobile users who have accessed the wrong URL (most likely the desktop version) are redirected to the correct mobile site. Again, this ensures that even though the user has made a mistake, they are quickly redirected to the appropriate page for their device. Make sure that the redirection works across the various operating systems, including Android, IOS, and Windows Phone. Always test thoroughly!
Redirect any mobile only 404s
In some cases, sites may show content when accessed from a desktop but give a 404 error message when accessed from a mobile device. If a mobile user accesses a desktop page, they should be redirected to the equivalent mobile page, not shown a 404 error message. By using responsive web design, problems such as this donโt exist.
No annoying interstitials
Interstitials are messages or even adverts that the user first sees before accessing a website. They normally need a click to be closed. They should be small and unobtrusive. Be warned, when they cover large parts of the page content, you are creating a bad user experience, and in most cases, many will simply not return. In mobile web design, these should be kept to a minimum, especially as mobile screens are small. Of course, they remain useful to ask users to sign up to mailing lists or when promoting your companies app, but consider using a banner format in this regard as the website content can then appear below it.
Relevant cross-links
Many web page designs for users on separate mobile URLs make use of links to desktop versions as well as from the desktop to the mobile version. Ensure that these links work properly and that they point to the relevant pages.
Fast loading
In this instant world, nothing infuriates mobile users more than slow load times. Google recommends that load speed for any page be around 2 seconds. Anything more than this and users start to leave the site.
Correct viewport settings
Your website will be accessed by users with a variety of screen sizes. For this reason, it is imperative that pages specify a viewport by making use of the viewport meta tag. This will tell the various browsers used to access the page how the dimensions and scaling should be adjusted for each specific device. Never use fixed-width viewports.
Adequate font size
Although this would seem fairly obvious, may websites make use of font sizes that are hopelessly too small and therefore difficult to read. This problem is obviously amplified on mobile devices. Of course, the user can โpinch to zoomโ to increase the size, but reading them becomes very difficult due to constant scrolling. Once you have set the correct viewport for your various web pages, make sure you scale the font sizes within the viewport.
Touch elements spaced properly
Mobile web design makes use of numerous touch elements for navigation. Unfortunately, however, these are often spaced too close, which makes it difficult for the user to select the relevant touch element. Buttons should not only be sized properly, but the space between them should be significant enough to allow each to be touched without interfering with those surrounding it. Important buttons should be around 48 CSS pixels tall/wide. Less important ones can be slightly smaller.
Passed the mobile-friendly test
Always make sure you test all pages on your website through Googleโs mobile-friendly test. This will help give a comprehensive overview of how mobile friendly your website is, even pointing out problems that can then be fixed accordingly.
Signal to Google when a page is formatted for mobile
By alerting Google that a page is formatted for mobile viewing, you allow them to include your website in the search results of mobile users.
By following these simple steps, you can ensure that mobile users visiting your website remain and perhaps more importantly, engage with your content.
