html

Check your webpage for mobile friendly readiness

One of the issues I came across again and again was the e.g., the Google Search Console error with “Text too small to read” and/or “Clickable elements too close together“.

This might hit you all of a sudden and can have multiple reasons.

The best way to start is using the F12 key in your browser and looking at the indicated page emulating a mobile device using the Toggle Device Emulation function. See if you can visually identify the issue right away. If not, it becomes trickier.

You can engage the Google Mobile-Friendly Test page and/or the Bing – Mobile Friendliness Test Tool to see if you can find out more. But as a matter of fact, they might not even find anything. Still, validating the fix, what will take days, might fail especially if you didn’t change anything.

You will quickly discover that there is a lot of talk about the html header tag “<meta name=”viewport” content=”width=device-width, initial-scale=1″>“, of course if you do not have this one yet, implement it, but if you use a current CMS like WordPress it is likely already there.

In my case it came down to the TAG CLOUD that showed a lot of TAGS and because of the sheer amount some of them became rather small und therefor closer together when it comes to clickable items. This seemed to be no issue visually but still, Google interpreted it as one.

Needless to say, that ignoring any errors thrown by the Google Search Console might cost you valuable ranking or simply cause Google to not index certain pages. Especially since Google is primarily focusing on mobile usability.

June 15, 2022 by Uncategorized web

Tools for WebAnalytics and SEO

SEO and Web Analytics are a very important part of successful web pages and blogs, like this page as well.

You want to use SEO tools and plugins on your website, read up on how to use key phrases and other tools in this constantly changing world of web pages and search engines as well as now mobile first development. Having been in IT over 25 years, I saw a lot of changes.

When creating a website, make sure you engage some tools right away, make sure you have small images, JPG is still a very good idea, engage image optimizer plugins and don’t over-size them – I am guilty of this as well.

Caching or your pages with plugins and other techniques and systems is highly recommended, because SEO judges you also on render time and things like LCP – Largest Contentful Paint.

Keep all the overhead CSS and JavaScript under control, especially side loading is a huge problem when it comes to lagging speed to load websites.

To get a good overview – use Google PageSpeed Insights to see how your page is performing and where you should start improving.

Another important tool Google Analytics – it recently changed to GA4 which you can simply switch too. The data there can give you a good idea how people finding your website and where you should improve your marketing efforts.

Now, marketing is not necessarily spending money on Google Ads, find out where people interested in your page collaborate and exchange and interact with them, if there you have e.g., a good blog entry about a topic, you might be able to link it and get more visitors.

And then there is the Google Search Console – the easiest way to find out how your page is ranking on various search requests and also making sure your page has no issues – what is critical. Make sure Googles algorithms are happy with especially the mobile version of your website, that it is deemed readable and fast. Only then you will get a good SEO rating. Ignoring issues there can cause Google to stop indexing your webpage, what will result in less clicks and a decline in visitors.

Of course, there are other tools and search engines out there, but let’s face it – the DeFacto standard is Google. This does not mean you can ignore the others, but I found that Googles free tools are most of the time already very sufficient.

All of this is just a quick overview, this topic is huge and a whole industry stays behind the SEO and web marketing – my only goal was to give owners of smaller website a good overview and some tips on how they can improve without spending a fortune.

Finally, you also should make sure your website is secured and monitored for threads. Not just the incoming threads, also that your website is not unintentionally causing a thread to your visitors due to malicious plugins or altered content. Engage third party firewalls and scan systems. Yes they will cost you money, but they will save your reputation with your visitors.

April 21, 2022 by recommendations web

Auto-Cycle through URLs

Auto-Cycle through URLs

Our challenge was to have several Paessler/PRTG MAPs (www.paessler.com) cycling through a TV in the IT room. We did not want to have just one static MAP at all. This was originally posted by myself here: https://kb.paessler.com/en/topic/79668-prtg-maps-auto-cycle

In order to accomplish this – we created a simple HTML file with some JAVASCRIPT code that runs through several URLs you easily can specify. Per URL there is a timeout value. Further is there a company logo that will be displayed while a MAP is loading, that will fade out and actually make the MAP visible.

The HTML code including the JavaScript is below – here are some things I wanted to explain and share about it.

Line 6 – to the end: src=”bgpicture.png” This can be replaced by any other file-name – simple use a LOGO here that you want to see while the MAP is loaded – it will fade out

Line 11 – 21 – those lines hold the URLs in var Source=[] – add a line per URL you want to cycle through, each URL has the same format as follows. Please MAKE SURE that the last URL entry is not followed by a comma “,” otherwise the script might fail to cycle.

Entry format:

  • ‘URL’,timeout,showBGfading,’title’
  • URL in text-marks
  • timeout in seconds
  • show background picture/logo fading out – 0 (do not show) or 1 (show and fade)
  • title/description in text-marks

Example: ‘https://prtg.company.local/public/mapshow.htm?id=1111&mapid=ABCDEFGH-1234-ABCD-1234-123456789000′,60,1,’Network Map’,

This would mean:

  • URL = https://prtg.company.local/public/mapshow.htm?id=1111&mapid=ABCDEFGH-1234-ABCD-1234-123456789000
  • timeout = 60 seconds
  • bgpicture = 1 – start with BGPicture from the HTML code and let it fade out (fades the map in)
  • Title/Description = Network Map

We simply load the HTML file in the browser and display it as full screen – avoiding any browser title-bar etc.

Features:

  • you will see a timeout counter in the upper right – this shows you how much longer the current view will be available.
  • you will see a title/description in the upper left while the element was loaded – it will slowly (slower the bgpicture) fade out – you can use any text there – per URL
  • you might or might not see the BGPicture element – fading out – depending on your URL configuration – we found it worked out nicely cause we didn’t want to see a …load map data… or anything and have a smooth transition between the maps..
  • we set timeouts per MAP like 60 seconds etc. – so we a) cycle quick enough and b) have enough time to look at the data shown to us
  • you can use the LEFT and RIGHT arrow key on your keyboard to jump to the previous or next URL while you execute the HTML file (if not randomized)
  • the up/down arrow keys allow you to show/hide a menu of all links available, this then allows you to click on a specific item in the list and show this specifically – the list is always generated on the fly – this prepares for future adjustments like showing where you are right now…
  • added a feature for to PAUSE the script – press P to stop the cycle any time
  • added a randomization – you can activate it and any of the URLs will be accessed randomly – if it is disabled, the script will cycle through the URLs as defined
    • var bolRandomize=true;

For fun – or how to add a few Easter Eggs:

  • you can use any file (we use MP4 and GIFs) to be displayed as well – our URL list is rather long – mostly just going through the same URLs but every now and then showing briefly a little IT joke in between – of course it depends a bit on your company – how ever – wanted to mention that we even like to do that for a short 5 seconds period.

Updated – December 2018: This is version 2.0 of the script. Updates are some minor bug fixes and mainly the ability to scroll forward and backward through the URLs while using the left and right arrow keys on you keyboard. Additionally do the up/down keys show or hide a complete menu of all links that are cycled through.This then allows you to click on a specific link to show the content.

Updated – April 2019: Version 3.0 of the script has now a PAUSE feature and a randomization feature that you can enable/disable.

Notes as per May 2022: Did not change the script but wanted to make you all aware that you might run in to issues with X-FRAME-OPTIONS set to SAMEORIGIN. This can be investigated while using your browsers developer tools (F12), you should see script errors revealing this issue. Eventually it boils down to some pages not loading (e.g., https://www.google.com) due to them not allowing to be embedded. You can see if the page offers special embedded links/URLs or try to use a proxy-script that feeds to page to the iFrame. At this point I can not offer a good working solution, the script was designed to load Paessler PRTG MAPS and this is still working just fine. Using the script beyond this purpose might work or not due to the target page settings and configurations.

June 1, 2018 by prtg recommendations scripts web

Blog Archives