Last Updated on May 15, 2015 by Nicholas Ho
Progressing to mobile friendly websites
Google is always tweaking it’s search algorithm (smart formula) to improve the quality of its search engine results. The last updates “Panda” and “Penguin” downgraded websites with poor content and manufactured links from it search engine results.
The search page ranking algorithm is complex and made up of many contributing factors such as keywords, backlinks, site structure, privacy policy, structure speed, etc. There are over 200 Ranking Factors. Google has announced that mobile-friendliness will become a ranking factor.
This is Google’s recent announcement regarding mobile-friendly websites:
Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results.
Here is a checklist of what you should be doing to get your website to be mobile friendly.
- Check to see if your website is mobile friendly
- Check the overall speed of your website
- Check to see that your website is fully responsive
- Check your website on different devices
- Check for mobile usability
Step 1 – Check to see if your website is mobile friendly
Your website needs to be mobile-friendly. Use the Google Mobile-Friendly tool to test your website If your mobile fails the test it needs to be remediated as soon as possible.
The test will indicate whether your website is mobile friendly or not. It is a Pass or Fail test,
This is the result if you have passed the test. All green lights.
If your website failed the mobile-friendly test, the screen will look like this. These are some of the common problems.
- Size of the text (which is way to small to read on a mobile)
- The links are too close – making it hard to press links with you fingers without pressing the links next to it
- Viewport not set – which means if you turn your device from portrait to landscape the website will automatically adjust with the orientation
- Content wider than screen – the dimensions of the image is fixed and the dimensions override the scaling
Recommendations to fix
- If you website is template driven – update the template if the newest version is responsive (see below to find about responsive)
- If you website is template driven – and you cannot upgrade to a responsive template then consider changing templates
- If your website is custom made – then the next project is to ask your developer to make the website responsive
- Tip – ask your developer to use a Responsive framework (this will save months/years of work)
Step 2 – Check the overall speed of your website
Head over to the resources page and click on the Google PageSpeed or after you have finished reading this article head over to the resources section of this website. If your website scores less than 80/100 points for either the mobile test or desktop test, then you need remediate some of the issues.
Normally the issues found are:
- Images not optimized
- CSS not minified (you can compress code to run faster)
- Move javascript (you can move some interactive code to the bottom of the website to make the website load quicker)
Don’t expect 100/100 because that would mean you don’t run things like JavaScript (to make things interactive) or use “Google fonts” (funny that), things that make your website look and feel nice).
Recommendations to fix
- Use Website Caching (Loading parts of the website in server memory rather than loading from disk) – it can be simple and complex depending on the solution.
- Ask your webmaster/developer to minify code and move scripts, be careful and test your website thoroughly if you decide to take on these actions this might result in problems such as slideshows not working or forms not working as designed.
- Optimize your images (this is the number one problem for most websites)
- Ask your designer to redo the images and save the “images for web” in Photoshop or Gimp
- Use a Image processing website to optimize image smush.it, imageoptim and Kraken.io
- If you use wordpress then use a plugin to optimize the images
Step 3 – Check to see that your website is fully responsive
A responsive design allows you website to respond and adjust depending on the device and screen format you are viewing the website. Normally websites are divided into 2 or 3 columns; a responsive design will collapse the website to 1 column. The images and font will adjust accordingly.
Use a website such as Am I a Responsive Design to test your website.
The other characteristic of a responsive web design is the changes to the navigation system. The menu should ‘transform’ to a mobile friendly format normally display on the top corner of the website represented by three horizontal lines. The line format is the most common representation. I have seen implementations where the menu items become drop down menu items or the menu is simply squeezed to fit the screen (really small font); in my humble opinion, this is not responsible responsive design and are poor solutions.
Recommendations to fix
- Use a good commercial website templates that is responsive – device and browser technologies are always changing, so make sure that the template has technical support that will keep up with the changes and send updates as needed.
- Unless you have access to good development resources and they are skilled at developing User Interfaces (CSS coder, Part- Graphic designer, Interface Designer) and you can afford the time, we would recommend going with a good commercial template.
Step 4 – Check your website on different mobile devices.
Use the website – http://mobiletest.me/ to see what your website looks like on different mobile devices. Not every element will appear in the same order as the desktop just accept it. As long as it does not look out of place.
Warning: not every element is going to work that same as your desktop. Also, not every mobile / tablet will display the website the same. For example some website features will appear on iPhone but not Android – Just make sure the features that don’t work are “nice to have” features and “must have” features.
Recommendations to fix
- Same as previous
- Upgrade the template and if this does not fix the problem – request technical support from your template provider to fix template issues
Step 5 – Check for mobile usability
Most of the tests that we have recommended have relied on tools. This test is a human test – test for things that are event driven features such as menu systems, buttons and forms, they might need to be some adjustments.
Recommendations to fix
- Adjust features such as timeouts, One-click, popups (bad ideas for mobiles)
- Have as many users test your website
- Delve into your Google Analytics to gauge users mobile experience
Final Words about Mobile Friendly Websites
Making mobile friendly websites is an important exercise both from a usability point of view and NOW a search engine point of view. If you need any advice or further help on your website and getting your website Mobile Friendly – please contact Netology with the contact form below.
[contact-form-7 id=”404″ title=”Contact form 1″]
