Tools from Google to help ensure websites look great on mobile / tablets

Checking your website looks good on mobile is now very easy thanks to a range of automated tools. Google have a fantastic collection available, here. Including a great page checker service where you can type in a URL and get it checked for mobile-friendliness as well as components that fail to load. You’ll get a report of problems and an overall summary of whether your site is mobile friendly.

If you find pages where the service reports

• “Page cannot be reached
• This could be because the page is unavailable or blocked by robots.txt”

It is usually an indicator that your site blocks google robots/spiders and as such your pages aren’t being ranked for google/search engine listings. Google have a great introduction guide to strategies to make your digital content mobile/tablet friendly and a speed checker to help you optimise the page loading.

If you are considering using an agency / digital marketer to make or maintain your site, it’s well worth asking for examples of their work and checking how well the Google tools evaluate it!

For a commercial site use of such tools should be considered within a formal content management and testing framework that includes a form factor plan. However, it’s an interesting exercise to check your own personal site or blog.

Content Marketing – The form factor plan.

A form factor plan is a key component of any content management strategy or plan. It’s pretty hit and miss in many campaigns as to whether it is implemented formally. A formal plan helps ensure and track that you don’t miss this key step in ensuring a delightful experience for your users when viewing your content. Here is a guide to creating a basic form factor content strategy.

What is a form factor plan?

Form factor is a term to refer to the capabilities of the end-point hardware a user is using; differentiating a PC from a set-top box or a mobile phone. In practice for those involved in content management there are often three key things to think about when considering who is viewing your website:

• The screen-size of the user’s device
• What kind of network the end user is likely to be on (paying for data on wifi?)
• Where the user is when they use your website

A form factor plan is simply about considering these factors and ensuring your end users experience and access to your content is optimal regardless of the end device (or form factor) they happen to be using.

Basically, for most people it’s about making your website work optimally (and not look broken) on mobile smart phones!

Step 1 – Audit your users’ form factor usage

• Google analytics collects data on “mobile” devices. Most content projects have access to similar data. https://www.hallaminternet.com/google-analytics-desktop-vs-mobile-vs-tablet-metrics/
• Check the metrics for common patterns, most companies will find:Blogs and similar tend to be read more on mobile devices at times of day when people may be on a train or similar
• Technical product information about software is probably read more on traditional workstation/laptop end-points.
• Look at the time users spend on pages and the bounce rates and whether they differ on mobile devices to
• Make sure you know what your top content is, this is your priority to ensure it looks/feels good (a little on the theory is available in a past article).

Create a couple of ppt slides overviewing the device usage on your website:

1. The percentage split for mobile / desktop for various content types (support articles, forums, blogs, web pages, technical documentation).
2. The commonly used devices and screen sizes used to view various content types

Step 2 – Create guidelines / checklists

• Set up some guidelines and keep it simple – what size and resolution should images be?
• Have a page template that you use repeatedly
• Over time build up checklists of testsDoes the user have to awkwardly scroll on mobile to read the full line of text?
• Does the user see something that looks sane on arriving on the page?
• Is it clear to the user how to navigate?
• Is there a clear “call to action” when viewed on mobile – a clear link?
• Is it easy to identify and click on buttons/links (even for the fattest fingers)?
• What metrics from tools like Google supply do you want to achieve?Check when you change / add content your target metrics stay the same or improve.

Step 3 – Pre-flight testing

Test your new web content in-house. Consider having a process whereby you

• explicitly ask your own staff to try the content on their own devices
• test the most common devices
• test the outliers – the smallest/largest screen sizes
• test both Android and IoS etc
• ask other departments who aren’t familiar with the content to check, especially those that rely on it such as sales or support
• ask a select group of customers / partners to give feedback, whenever content moves around it disrupts users who are familiar with the pre-existing structure (no matter how bad the structure was) so involving those using it is a good idea.
• Use the tools and advice available from Google / WordPress to test your page for mobile-friendliness; whilst these are great they are never a replacement for some real human testing though.

Step 5 – Ensure you hear about problems from users

• Make sure your content has a feedback mechanism. A simple feedback button allows customers and staff to quickly report buttons when they find a page with issues. “Self-curating” content should always be the goal.

Some simple tips to avoid website problems on mobiles

1. Avoid weird/obscure fonts. Most standard publishing software is tested most on Microsoft default fonts and those used most widely. Stick to something like Calibri and you will minimise your chances of encountering issues. Many tend to draft blogs in word and paste to WordPress or similar and some obscure fonts have issues.
2. Use popular industry standard publishing tools such as WordPress if you can and popular highly rated themes – they generally take care of form factor issues for you. In Enterprise though you are more likely to have a bespoke legacy system.
3. Think very hard about where you use high-resolution images and content. If users are on a mobile they may well have limited connectivity / signal and be paying for data so high-res imagery that doesn’t do much on a small screen just makes your site slow and less usable.
4. Think hard about selective use of video. Avoid legacy formats such as Flash (often not available on mobiles) and consider if a user really wants to pay for data without explicitly choosing to view the video.
5. Avoid click-through buttons/images or banners, to most users especially on mobiles they look like facebook or similar spam/ads and will be ignored.
6. Ensure information is available as text/meta data and not just on an image so that search engines can find it, this will also make your site disability friendly for software that aids the partially sighted etc.
7. Be aware search engines such as google downgrade the ratings of sites which have limited accessibility for different devices, so overlooking form factor issues can reduce your site’s reach.
8. If you do use WordPress or similar beware of adding too many widgets/plugins and look carefully at the reviews. Such add-ons can increase the time a site / web page takes to load and can lose your audience.

Mitigation for legacy platform issues

In a large enterprise, it will not be uncommon to come across a range of legacy tools and infrastructure hosting content that may well be owned by a completely different teams or groups to those generating the content. If you are in this situation you may have little control over how well form factor considerations are addressed; often it will be a case of making sure it is on the organisations long-term agenda and doing your best.

So, if you have a legacy blog that displays badly on mobile devices and know that many of your readers access blogs on mobile devices, you could:

• Document the problems so they feed into future testing and development of the platform
• See if you can reformat any material so it displays better (triage)
• Consider posting the content elsewhere (e.g. LinkedIn or another site designed for form factors) with links to area of your website you know look ok, whilst you want to attract traffic you don’t want to attract it to a bad user experience that tarnishes your brand.
• Avoid posting links to awkward .pdf files on channels where users are likely to be on mobiles (e.g. twitter)

Mitigating against zoom features

Certain viewers and features can often display strangely if the user’s browser is set to a zoom other than 100%. You may want to test at different zooms and/or consider adding a warning to the user that they are not at 100% advising them the site displays best at the default zoom.