Electronics World Cover,TOC,and list of posted Popular Electronics articles QST Radio & TV News Radio-Craft Radio-Electronics Short Wave Craft Wireless World About RF Cafe RF Cafe Homepage RF Cafe in Morse Code Google Search of RF Cafe website Sitemap Electronics Equations Mathematics Equations Equations physics Manufacturers & distributors Engineer Jobs Twitter LinkedIn Crosswords Engineering Humor Kirt's Cogitations Engineering Event Calendar RF Engineering Quizzes AN/MPN-14 Radar 5CCG Notable Quotes App Notes Calculators Education Magazines Software,T-Shirts,Coffee Mugs Articles - submitted by RF Cafe visitors Simulators Technical Writings RF Cafe Archives Test Notes RF Cascade Workbook RF Stencils for Visio Shapes for Word Thank you for visiting RF Cafe!

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!

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 

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

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

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

Try Using SEARCH to Find What You Need.  >10,000 Pages Indexed on RF Cafe !

Copyright 1996 - 2016
Webmaster:  Kirt Blattenberger, BSEE - KB3UON
Family Websites:  Airplanes and Rockets | Equine Kingdom

All trademarks, copyrights, patents, and other rights of ownership to images
and text used on the RF Cafe website are hereby acknowledged.