Switched Keys

Mobile-friendly Searches

Webmasters that have been developing websites for a long time will remember the times when Google changed their ranking algorithms. In some cases the results were catastrophic, but the best managed to recover. Google's algorithms have always been kept from the public and webmasters have had to determine how to regain their positions themselves, but given some principles, it was possible. Last month Google began implementing another change in their algorithms, but unlike the other changes we know precisely what is changing. On April 21, they began giving higher ratings to websites that are mobile-friendly. According to https://support.google.com/adsense/answer/6196932?hl=en, the change only affects results returned from mobile searches, but considering the number of devices of all sizes, it's still a good idea to verify the results.

Google has even provided tools to help webmasters see what needs to be changed. The first tool is the mobile-friendly test page at 
https://www.google.com/webmasters/tools/mobile-friendly/, which I assume is a key parameter in their new algorithm. Webmasters can use the tool simply to tell if your website is mobile-friendly. The other tool is the PageSpeed Insights at https://developers.google.com/speed/pagespeed/insights/. This page will give you some tips for improving your site's performance, even if it is mobile-friendly. 

Counting mobile visitors

Many webmasters will wonder if it's worth the trouble. One question is how to tell how many visitors use mobile devices. One article in 2013, estimated 13% of all traffic was mobile; higher for shopping. Google analytics also has a tool for just that purpose, but if you are like me and rely on your host's stats page, you may still be able to estimate the mobile-concentration of your visitors. In awstats, the standard stats page on cPanel systems, you can drill down to get an idea. After displaying the Summary page, select Operating Systems > Versions. It will list operating systems and include Android as a subset of Linux. There is also a list for iOS (iPhone and iPad), and Others which may also include mobile devices.

Changes to make

If you want to modify you site to make it more mobile-friendly, and Google search friendly, here are a few things you can do. 

Viewport 

In the head section of the webpage, add

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This may be the only change you need to make to get the mobile-friendly badge, but you should verify with a mobile device that it is indeed mobile-friendly. 

Link proximity

One of the issues with desktop pages is that links can be defined and selected easily with a mouse. On a mobile device, the contact area of the finger is larger, so links can be too close to each other. Often this can be fixed by adding spacing (margin) around the element.

Lists

Often developers use lists to display and format menus. Most of the time they are displayed horizontally. Since the normal orientation of a mobile device is portrait, you may want to change those list to display vertically, and make necessary changes to the style to make it aesthetically appealing.

Javascript

Javascript that displays popup information can be annoying on a mobile device, particularly when sized improperly. Use JavaScript judiciously. Of course, you may not be able, or may not choose to. One of my pages, for tax volunteers,  relies on Javascript to function as it does. The filter can hide much of the page and mouseovers display large windows of additional information. The size has been modified so that it is manageable on a mobile device. The user experience is more important that mobile-friendly rules.

Font sizes

The font size is an important characteristic. Stylesheets often define sizes for each tag, and these sizes may not be suitable for mobile use. First thing to consider is the use of ems instead of points, or percentages. Using ems enables you to define sizes proportionately to other tags. An extra for mobile websites would be a page font size adjustment script. 

Divs

Websites that are built around divs may need some adjustments, particularly when there are more than two divs horizontally. An easy fix for content that is squeezed on the page is to stack divs that were initially side by side. In some cases, you may discover that the smartest way to handle a content block is to eliminate it, and provide a link to the same resource. 

Structure and Inheritance

Make it easy on yourself. When designing any website, keep the html structure and inheritance in mind. With inheritance, you may not have to define as many elements and changes would be simpler.

responsive css files

Since most of the changes needed to make a site mobile-friendly can be made in a stylesheet, it is often easiest to use responsive head links. There are differences in opinion regarding what width to use for mobile devices, so at the time you read this the recommendation may change. The best test is to try it on the devices that are popular. The viewport will help the device considerably, so it is not as critical as it once was. The pixel values here should be taken into consideration when designing the mobile site. You probably wouldn't want to try to display pictures wider than the min-device-width.

<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-device-width: 479px)"/>
<link href="css/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" />

Some developers may prefer to have only two css files, one for desktop, one for mobile. Since most styles remain the same, I generally use three, with desktop.css and mobile.css having only the styles that change.

Switched keys changes

Switched Keys uses the content management system b2evolution, so changes generally can't be made directly to a source html. Instead, changes have to be made to the php, or to the CSS file of the skin. Following are the changes I made:

Viewport

Instead of adding the meta tag mentioned above, viewport was changed by adding the "responsive" parameter to the function skin_include() that includes _html_header.inc.php. Find the function in index.main.php and change it from

skin_include( '_html_header.inc.php', array() );

to

skin_include( '_html_header.inc.php', array(
   'viewport_tag' => '#responsive#',
) );

It's possible to change the actual meta tag in _html_header.inc.php, but it's not necessary in this case.

CSS

Once that is done all of the other changes would be made to the cascading stylesheet, in this case, style.css. On Switched Keys some items had fixed widths which I had to modify. Some were min-widths smaller than my phone. In development it would be better to define widths as percentages of the window or a div. I also had to change sizes, some fixed pixels. Viewport actually changes the display of fonts to correspond with the device, so css pixels are not the same as actual pixels.

I chose a skin that had a side panel listing the categories, but for the mobile variety. I hid it and added an option to the menu to show categories. Hiding extras is often as simple as defining that element with display:none. Images are proportional to the viewport, though in many cases, designers may feel the need to further adjust them, or eliminate them altoghether. In my site, I thought the mug shot was unnecessarily large, so I reduced it.

In short, I only changed a few things to get it functional, and tweaked it to my personality. It's not hard, but if you want to be friendly to your mobile users, taking these few steps will go a long way.