Parkytowers: Mobile support 








A while ago Google started complaining that these pages are not mobile friendly. I don't know if I'm atypical[*] but personally I wouldn't use a mobile phone to look up the sort of information on this website - unless on that rare occasion when I might be standing in front of an unknown thin client on a stall at a flea market.

If you are using something with a relatively small screen to access this website please feel free to email me to tell me what you're after. If I can understand the why I may be able to improve things.

Checking over December 2016 and January 2017 it looks like 78% of you are using a desktop, 17.5% a mobile and 4.5% a tablet.

Step one

In the first instance I've been playing with the CSS so that the left-hand menu vanishes if the display screen is less than 780 pixels wide. Instead there is a 'hamburger' icon at the top-left of the page that can be used to load just the navigation menu when required. When loaded on its own, the menu buttons are larger and further apart to help those with large fingers and small screens.

I picked on 780 pixels as it means things are normal on an iPad in landscape mode but you get the new approach if you switch to portrait - also an easy way for me to check things. I don't have a swathe of devices to check things on - so please feel free to complain if the site doesn't render properly on your particular phone or tablet (or computer).

Note: I had a frustrating time sorting this out until I realised that the browser was using a cached version of the CSS file rather than the one I'd just amended. If you experience any problems the first step may be to delete your browser's cache and see if that fixes things.

Step two

I may look at seeing what I can easily cut out without losing anything significant. For example not showing the the lspci listings might help as they often set the minimum window size. Some of the larger photographs could be omitted. If I do do anything dramatic I may look at introducing a cookie so that you have the opportunity of saying that you always want the full content on that device.

The Technology

A simple approach, which is what I've done so far, is to use the CSS @media tag to detect the screen size and, if the screen width is less than 780 pixels, then suppress the display of parts of the web page. While this may improve what you see on the display it doesn't reduce the amount of data delivered to your mobile over the network.

My preference would be to suppress it at source, but there doesn't seem to be an easy way of reliably detecting what device is requesting the webpage. If you know better please let me know.


[*] I can't understand why the colour of paint on a wall can stop anybody buying a house. The things that count are whether the house is structurally sound and the size of the rooms and layout suits you. A can of paint and a paint brush can easily and quickly fix the colour problem!


Any comments? email me. Added December 2016