Welcome, Guest
Username: Password: Remember me
Got a Joomla problem? Post as much detail about it as you can here to see if you can get a solution.

Help others in the community - post your Joomla tips and how-tos here.
  • Page:
  • 1

TOPIC:

Mobile Usability issues reported by Google 1 month 1 week ago #8777

  • robertf
  • robertf's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
  • Posts: 32
  • Thank you received: 4
Every so often Google reports Mobile Usability issues with my Joomla based writers' website tallandtrue.com.au and my (dark side) Word Press blog robertfairhead.com .

The issues reported for both websites are:

  • Text too small to read
  • Clickable elements too close together

The common element for both seems to be a Grammarly banner ad (728px × 90px) that doesn't scale well on smaller devices:



I found a smaller banner ad on Grammarly's affiliate website (320px x 50px) and soon had it swapping for the larger ad on smaller devices on my WordPress blog.

However, I don't have the same template/pagebuilder functionality on my Joomla website, so I searched for a CSS workaround. The background-image property with @media checks for the max-width looked like the solution. And with a *bit* more fiddling and testing, I got it working.

BUT, it wasn't clickable! And despite lots of suggestions by Dr Google (including from Joomla.org), it took me a long time to find one that worked:

CSS Trick: Turning a background image into a clickable link – Take 2 by Aaron D. Campbell

This tip is from April 2012. Perhaps there are new tricks to make background-images clickable? Or maybe there's a better way of achieving my goal than using a background-image?

But for now, it seems to be working and hopefully, I won't get any more Mobile Usability issues from Google.

Regards, Robertf
Attachments:

Please Log in or Create an account to join the conversation.

Mobile Usability issues reported by Google 3 weeks 4 hours ago #8778

  • pjackson
  • pjackson's Avatar
  • Offline
  • Moderator
  • Moderator
  • Posts: 120
  • Thank you received: 36
Robert,

I'd have used Joomla's Banner Component for this. Gives you some additional ad tracking functions that might be of use, but will display the ads through a module, and most likely dynamically serve them randomly if you have a few.

Looking at the site today, was the Grammarly ad appearing where the Pixabay one is now?

Also, looking at the site in mobile view, you could also improve some of the other aspects relating to the Mobile analysis by turning read more links into actual buttons, adding some margin around the buttons and bumping your text up to 16px base size.

Patrick
Patrick Jackson | Melbourne Australia | Certified Joomla Administrator
kps.fyi/pj
volunteers.joomla.org/joomlers/213-patrick-jackson
Australian Joomla Community: joomla.org.au/get-help

Please Log in or Create an account to join the conversation.

Last edit: by pjackson. Reason: Afterthought.

Mobile Usability issues reported by Google 2 weeks 6 hours ago #8779

  • robertf
  • robertf's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
  • Posts: 32
  • Thank you received: 4
Thanks for your feedback, Patrick.

I have used Joomla's Banner Component in an earlier version of the website. But as you say, the ads were displayed in Module positions (as per the old template design). Whereas I display the Grammarly ads in the Articles via Regular Labs Articles Anywhere. (Which I use for other common elements, like the Writer bios.)

The Pixabay banner ad is still displayed using a Module position and always down the bottom of the page, just above the footer.

I wanted to steer clear of Read More buttons on the website because on the desktop version it looked a little cluttered. (Although I use them on my blog, RobertFairhead.com ! :whistle: ) I am interested in your comment on adding margin/padding around them. That's is something I could tweak.

But I am surprised about your suggestion of using a 16px base size for mobile. I've increased the text size on my phones from time to time and I've found it harder to read articles, whether from my website or elsewhere (like the ABC). Probably explains why I prefer using a desktop or laptop - but Google says most of my website visitors are on mobile devices!

I hope to be "at" the next JUG. Maybe we could discuss these issues in the group forum. I'm always open to feedback. :)

Regards,
Robert

Please Log in or Create an account to join the conversation.

  • Page:
  • 1
Powered by Kunena Forum