... 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
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
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
(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