RF Cafe Is Now "Mobile-Friendly"

... so says Google, anyway, and after all, that's the only thing that matters these days. People not in the business of publishing a website might not be aware that as of April 21, 2015, any webpage that does satisfy Google's criteria for displaying properly in a mobile device viewport is down-ranked in search results that originate from a mobile device. Supposedly PageRank ratings are not impacted if a user searched from a desktop computer - only if from a phone. Notice of the intention was served in the middle of last year and many webmasters, including myownself[sic], scrambled to learn what the requirements were in order to receive Google's coveted "Mobile-Friendly" blessing. Basically, the page content must not overflow the device screen width, text sizes must be a minimum size for easy reading, and clickable spots (images and text) have to maintain a certain minimum spacing to avoid fat fingers mistakenly "clicking" stuff that was not intended. For simple websites with just a few images and a little text, compliance is easy. For websites like RF Cafe, however, the task is much more difficult.

RF Cafe's Responsive Website Design Wins Google's "Mobile-Friendly" Rating!

Of course I was gobsmacked with Google's bold move that is indisputably discriminatory toward websites that do not have a team of developers on-hand to transition to a format that makes Messrs. Page and Brin happy. A lot of people were/are ticked off. I spent a large amount of time researching available options but could not find anything that did not require some sort of JavaScript, PHP, ASP, ASPX, or other code which, in my opinion, was overly complex and often resulted in inconsistent displays across web browsers and machines. Adobe's Dreamweaver software came out with a solution long before Google mandated the format, but transitioning to Dreamweaver would require a total rework of both "RF Cafe" and my rather extensive hobby website, "Airplanes and Rockets." So, I kept everything as it was while hoping maybe Google would change its corporate mind. It didn't. To their credit, though, Google has made it fairly simple to determine whether your web page(s) conform to the "mobile-friendly" mandate by providing a place to plug in a URL for checking. 

 

RF Cafe's "Mobile-friendly" Google search result tag on a Samsung S4

Fortunately, the W3C group that issues Web standards came out with an "@media" CSS (cascading style sheet) meta tag that checks for the user's device viewport size and facilitates defining separate style types depending on the screen pixel width. Doing so allows RF Cafe to detect whether the device being used is likely a mobile phone or a desktop computer and use dedicated styles accordingly. My challenge was more involved than simply making font sizes larger because it was necessary to shift around and/or eliminate entire portions of the display. For instance, if you are reading this on a desktop computer, you are almost certainly seeing the traditional layout with banner ads in the left and right borders and a wide header area (see screen capture below). Retaining that format in a small viewport would result in a main content area that would be barely wide enough to contain useful data.

RF Cafe's Responsive Desktop Layout

The solution ended up being a removal of those ads so that the main content fills the entire screen horizontally and a re-working of the header area that uses a narrower menu selection (see screen capture below). Pulling off the layout change without the use of custom coding required a method I devised after not being able to find anything acceptable in extensive Web searches. How I did it is certainly not rocket science, but it is as far as I can tell a unique implementation. To see the metamorphosis between desktop and mobile layout modes you need to view RF Cafe on a desktop computer where you can change the browser width. Open www.rfcafe.com in your browser (use the latest version available) and change the width from being able to see the entire desktop view and then drag the right window border to the left until you see it switch to the mobile layout (currently set to trigger at 510 pixels).

RF Cafe's Responsive Mobile Layout

I won't go into the gory details of how the scheme was accomplished since most readers don't care. The way the top menu area appears at this time is not really what I want to keep, so watch for a change there in the coming days. Not every page is fully "mobile-friendly" yet, but Melanie and I are spending all our available time bringing them into compliance. It will take a while.

Oh, another thing we're doing as part of the change is implementing a relatively new CSS feature that affects automated column wrapping of content. RF Cafe pages are being reformatted to display two columns in the desktop view and a single column in the mobile view (except the homepage, which is always two columns). I really like the 2-column layout in desktop mode because it looks like a magazine page, and prevents needing to read across the entire screen with each line. It also makes transitioning to a single column in the mobile mode much more natural. Here is an example of a vintage magazine article 2-column page (this page you are now reading is also a responsive 2-column page). View it in the desktop mode on a computer and then drag the window width to something less than 510 pixel to watch it switch to mobile mode - très cool!

 

 

Posted on June 3, 2015