Category: Article

New Mobile Usability Issues Detected on your Site?

New Mobile Usability Issues Detected on your Site?

If you have a Google Search Console account, you will probably be familiar with the New Mobile Usability Issues detected on your site email. You’ll then be informed that ‘Search Console has identified that your site is affected by x new issues of type Mobile Usability‘.

Google then advises ‘We recommend that you learn more about these issues and fix them when possible to enable your site to have the best possible experience and coverage in Google Search‘. So you’ll probably want to do something about this if you can but what do the errors actually mean.

Here are four errors that are very common.

1. Text too small to read

This one may seem obvious but it’s a common error. Your text has to be big enough to read on tiny screens. Google will flag this as an issue if it considers your font size for the page to be ‘too small to be legible and would require mobile visitors to “pinch to zoom” in order to read.

Google recommends using a base font size of at least 16 pixels.

2. Clickable elements too close together

Google looks at is how close your links are. Fingers are much clumsier and less precise than mouse pointers and, because of this, Google uses the size and proximity of links as a mobile-friendliness factor.

Google will flag this as an issue if it considers ‘touch elements, such as buttons and navigational links, are so close to each other that a mobile user cannot easily tap a desired element with their finger without also tapping a neighboring element’.

The recommended button height/width is a minimum 48px, and clickable elements should be at least 32px from other elements.

3. Content is wider than the screen

This is usually because a page will contain a fixed width element such as an image that is wider than the screen. Fixing this will make sure your visitors don’t have to scroll sideways to view your page.

However, Google sometimes seems to flag this as an issue even on sites even where everything looks fine so treat cautiously.

Typically, your best solution for managing widths is to make sure fixed width elements scale down and the proper use of the viewport meta tag (see below) . This allows you to instruct browsers to display a page’s dimensions based on screen size.

4. Viewport not set

A website’s viewport controls the width of a webpage for the device a user is viewing it on. If you don’t configure your website’s viewport properly, vsitors will have to keep pinching and zooming to view your content.

Google will flag this as an issue if ‘your page does not define a viewport property, which tells browsers how to adjust the page’s dimension and scaling to suit the screen size. Because visitors to your site use a variety of devices with varying screen sizes—from large desktop monitors, to tablets and small smartphones—your pages should specify a viewport using the meta viewport tag‘.

The ‘meta viewport’ tag should go on the head section of your page’s code:

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

For more information on these errors:  https://support.google.com/webmasters/answer/9063469?hl=en

Testing for Mobile Friendliness

You can run a Google Mobile Test to test how easily a visitor can use your page on a mobile device which will often reports your site as mobile friendly even if Google has been notifying you of the errors above – https://search.google.com/test/mobile-friendly

You may need to look at your mobile usability report in Search Console to find out more and to pinpoint on which pages there are errors and if they are consistent over time.

Sometimes these errors come and go suggesting Google’s crawler is not always assessing pages consistently or correctly, and indeed one.  Personally, I find Google’s reporting on these errors rather erratic, and am not alone in this – see this Local Search Forum post for example.

In addition, John Mueller, Senior Google Webmaster Trends Analyst, recently said:

‘one of the things that sometimes happens is we need to be able to fetch the CSS files for these pages as well so that we can see what they look like. And sometimes we either don’t have enough time to do that for your pages, or your server is a bit slow, and we don’t have enough capacity to get that very quickly. And then the test might fail. So if we can’t get the CSS, then it might look like the page isn’t really mobile-friendly. And usually this is something that settles down over time and maybe you’ll see individual pages that fall into the state. But in general, that’s something I wouldn’t really worry about. If the page is really mobile-friendly, if for the most part other pages on your website are seen as mobile-friendly, then that would generally be fine. It might fluctuate a little bit. You might see that as a warning in Search Console but I wouldn’t worry too much about it if you’re really sure that everything else is lined up properly.’ (https://www.mariehaynes.com/december-14-2018-google-help-hangout-notes/)

In conclusion, it’s probably best to try to fix these errors if they are occurring consistently and over time but there may be no need to worry too much if your site passes the Google mobile friendly test.

If you do not know how to fix the errors yourself, ask your developer to help.

Get Ready for Gutenberg, WordPress 5.0

Get Ready for Gutenberg, WordPress 5.0

Printing Letters

WordPress has now received its biggest upgrade for years to version 5.0, and I have just edited this post using the new Gutenberg editor.

The most major change is to the editor which is now based on blocks with the intention of making WordPress more visually attractive and user-friendly. This is probably one of the most significant changes to the editing interface that WordPress has ever seen, and moves the editor more into the direction of a page builder, albeit a limited one.

To find out more this change, you can read an overview by popular SEO plugin people Yoast  – What is Gutenberg?

Or watch this short video:

So should I upgrade when WordPress 5.0 is released?

It’s really hard to know how you will be affected and it will vary from site to site. The changes to the editor and other more background changes are likely to have some impact on your site when you upgrade to 5.0 – for example, your plugins and theme may not be compatible, or require an update. Any sites with custom coding or highly customised themes may may also be affected and no longer work or work well with the new editor. In the worst case, your site could look fairly broken or your layouts and styling could look very ‘off’. On the other hand, everything may be fine, particularly if your site has uses a regularly updated and maintained theme together with a Page Builder such as Visual Composer/WP Bakery or Site Origin Page Builder. However, there is no real way of knowing until you test the water and make the full switch. Back up first!

There’s No Need to Upgrade Immediately

In the short term, and for quite a while in all probability, you can choose to not upgrade to WordPress 5.0 until you’re ready. It won’t be an auto update, and if there are subsequent 5.0.x security releases, these fixes will be backported for a good while yet. Therefore you can stick with 4.8 until WordPress announce it will no longer receive security updates. Given the change that Gutenberg presents, it’s likely WordPress 4.8 will be supported for some time.

Backup before Upgrading

Longer term, you will need to move to Gutenburg at some point, and I would not put this off for too long. When the time comes, bear in mind that the upgrade to WordPress 5.0 is an irreversible process unless you take a back up first so make sure you do so before doing anything. I recommend using  UpdraftPlus

Check Compatibility of Plugins and Themes

Aside from your own editing experience, Gutenberg will also bring important changes to your plugins and themes. For example, a lot of plugins interact with the WordPress editor directly, whether that’s to add new functionality or include shortcodes. Those plugins will need to become Gutenberg compatible, and the good news is that most leading plugins and themes are ensuring that they are. Before you upgrade, check that all the plugins you need are compatible, replace those that are not and make sure all are up to date. The same applies to themes.

Don’t be too scared either though – the chances are that if your plugins and themes are broadly compatible and up to date, and there is little custom coding on your site, you may find the upgrade is quite smooth, just don’t take that for granted.

Try it out

Gutenburg is a big change so the WordPress community has responded with a few useful plugins that can help you test it out.

Firstly, you can test drive Gutenberg now with the Gutenberg plugin. Or you can try it out directly at Frontenberg.

Want to try Gutenberg but not activate site wide?

And then if you upgrade to WordPress 5.0 but change your mind? There are options – you can use the Disable Gutenberg plugin to remove all instances of Gutenberg EXCEPT on a page or post you specify. And if you upgrade and have problems, you can also revert to using the traditional editor via the Classic Editor plugin.

Disable Gutenberg

You can completely disable Gutenberg by checking the box as well as remove the nagging notice you will get to Try Gutenberg. If you select the disable Gutenberg everywhere option – no other options will appear.

If you you do want to use Gutenberg in some areas – then uncheck the disable Gutenberg everywhere option. Then you will see options for who you can disable Gutenberg for as well as what post types or specific posts you can remove it from.

Disable Gutenberg

Revert to the Classic Editor

Just install the Classic Editor plugin and choose the replace Gutenberg option in their settings. Now you will only have the classic editor. This will be supported until 2022 and now allows you to switch between Classic and Gutenberg on a per-user or per-post level.

Classic Editor

Clone your site to try out Gutenberg

If you are worried about the impact on your site, the best thing would be to clone the site and try out the upgrade away from your live site. You can then test it and make any necessary changes in your own time.

Sites with WP Bakery Page Builder (Visual composer)

If you have WPBakery Page Builder version 5.5 or later installed, you will notice two options related to the Gutenberg editor:

  • A content element ‘Gutenberg’ available in your Add Element menu that allows you to insert Gutenberg layout/blocks directly into the layout of WPBakery Page Builder
  • An option to disable Gutenberg editor on your WordPress site via WPBakery Page Builder Settings (in your WordPress Admin Dashboard).

Sites with SiteOrigin Page Builder

SiteOrigin is making all their Page Builder widgets Gutenberg compatible. So you can add their buttons, tabbed layout, maps, etc. to your Gutenberg pages. The SiteOrigin Layout block will also be available as a Gutenberg block so you’ll be able to create fully nested, columnized, widgetized content, with advanced row, column and widget styling right inside Gutenberg.

Do I still need a Page Builder?

Gutenberg moves WordPress more into the direction of a Page Builder but Gutenberg is taking a more conservative approach to page building, which means there are designs and layouts that you just won’t be able to achieve.

However, there are already some great plugins out there extending the number of core blocks that Gutenberg will offer. In particular I like the look of Atomic Blocks and Stackable, both of which add a great collection of content blocks to those that come as standard. These include for example  Call to Actions, Testimonials, Video pop Ups, Accordions, Headers and Buttons, plus some neat features like being able to add tints to background images in relevant blocks. For simple sites, this may well be all you need and although the simplicity of the current editor may be missed by some, I think this shows that the use of blocks has a lot of potential.

Way Forward?

The best way forward will vary from site to site, and it is still quite early to make definite suggestions, except to tread carefully! There’ll be a period of learning ahead but in general, I think this is the right way for WordPress to go.

In the short term, I would not rush to update on a live site that is working fine right now. Unless you are really keen, I would certainly wait until some weeks after the eventual release, to let others iron out all the likely unforeseen compatibiltily issues and bugs that the release is likely to present in WordPress itself, plugins and themes.

Having said that, I updated this site to WordPress 5.0 within a couple of hours of its release and have not spotted any problems yet. I’ll look at client sites next…..

My Google Map No Longer Displays Properly

My Google Map No Longer Displays Properly

Since June 16, 2018, all businesses which have Google Maps on their websites need an API key and to enable credit card billing on their Google account. Keyless usage, meaning any request that doesn’t include an API key ended on June 16 2018. What this means is that any site without an API key and billing enabled will no longer be supported, and any Maps requests will now show only low-resolution maps watermarked with “for development purposes only”. This is applicable to all users – even those with a simple map embedded on their website’s contact page.

The new system, known as the ‘Google Maps Platform is ‘pay-as-you-go’ and operates under the wider Google Cloud Platform. For most sites, the service is still effectively free – there is $200 free monthly credit which is enough to cover small business websites displaying a contact page map – up to 28,000 free loads of Dynamic Maps – but nevertheless all businesses need to enable billing.

To get API key:

  • go to https://cloud.google.com/maps-platform/#get-started
  • choose Maps
  • Name your project e.g something like My website map and click on Next
  • you will be asked to create a billing account (if you do not already have one)
  • agree to terms and fill in your contact and credit card details
  • once filled in, you will be redirected to a page and your API Key will be shown on a popup like this screenshot

Google Maps API

You will then need to copy and insert the API code into your website. This will depend on how you have embedded the map. If your site is a WordPress one, many WordPress plugins and themes have a place where you can input this.

Restricting Access to your Key

Google Maps Platform will prompt you to restrict access to your API. This is to prevent unauthorised usage and quota theft, which this new pricing model encourages, you are also advised to restrict usage of the key to your website.

To add web browser restrictions to an existing, generic API key, do the following:

  • Go to the Credentials page of the Google Cloud Platform Console.
  • Select the project that contains the API key you want to edit.
  • On the Credentials page, from the list of API keys, select the name of the API key to edit the details of the key.
  • In the Key restriction section of the page, select HTTP referrers (web sites), follow the on-screen instructions to set referrers, then click Save.

More Information:

More information on billing at: https://cloud.google.com/billing/docs/how-to/manage-billing-account

To avoid a large bill, you can set a daily cap on usage: https://developers.google.com/maps/faq#usage_cap

Transition Period for Existing APIs

For existing API projects without a billing account, there is a “Google Maps Platform Transition Account”, created to help Google’s customers transition to the new pay-as-you-go pricing plan. This transition account enabled Google to provide these customers with a one-time credit, so that they could continue using Google Maps Platform up to the limit of the $200 free tier. Once this limit is exceeded, the billing account will shut down and you will lose access to the service. To avoid service interruptions, you should set your own billing account, and you will then benefit the $200 monthly free tier.

Do I really need an API? Can I just embed a map on my site instead? 

Yes, instead of going through all the above and giving Google your credit card details, when you really don’t necessarily need to, you can embed a map on your site. Just do a Google Maps search for the required address, go to Share, Embed a Map, then copy and paste the code into your website. If you’d like a little more customization or are using something like a store locator plugin, then you may need a API and go through the above process, but if not, keep it simple and just embed the map into your site.