Google is a search engine. It's supposed to index the web. instead, is it in effect dictating how your website should look. Although I have a fundamental disagreement with this, and more than a little suspicion about Google, I present here the research I've done on this subject for our mutual benefit. I may have made mistakes at various points. Feel free to point them out.

Google Mobile Search

This is a tweak that is being done in Google search for web sites, rolling out 21 Apr 2015, and for a few weeks thereafter. This tweak only affects mobile search results. That is, if you search for something on a mobile device, Google will rank "mobile-friendly" sites above others. If you perform the same search on a non-mobile device, there will be no changes to the normal Google rankings.

To test for mobile weaknesses, use the Google tester at this URL:

http://g.co/mobilefriendly

This site approaches the target website as Google would, using the googlebot. So sites may appear differently than they do in a desktop search (when viewed on the site).

There are 4 primary reasons for failure of a site to be "mobile-friendly":

• Fonts too small to be easily read on a mobile device
• Links too close together to be easily fingered on a mobile device
• Mobile viewport not set
• Media not suitable for mobile display (like Flash on iPhones)

Incidentally, all our corporate sites fail this test, for what it's worth.

Mobile Viewport Not Set

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

Mobile Site Architecture

• responsive
• dynamic
• mobile domain or page (e.g. m.mainpage.html)

Responsive

• page element styling (CSS) in relative units (%, em) rather than absolute units like pixels and points.
• flexible images sized in relative units so as to prevent them from displaying outside their containing elements.
• media queries-- using different styles based on the device, most commonly judged by the width of the browser

The guy who came up with the term "responsive" in this context wrote a book: Responsive Web Design by Ethan Marcotte (PB 2011) $17.79 on Amazon. Beware that his idea of professional design involves original mock-up design in Photoshop, and then turning the mock-up over to HTML coders. This is in contrast to taking care of the whole design process in a package like Dreamweaver. Judging from what I've seen in job requirements for designer jobs, it appears that Marcotte is in line with industry standards.

One of the major advantages of this type of design is that it may not any changes to the original site, and ultimately only one version of the site needs to be maintained. CSS does the rest.

Dynamic

Uses a combination of server-side (PHP) and client-side (Javascript) scripting to point the user at a mobile page instead. Problem is that many mobile devices offer either no or weak support for Javascript.

Mobile Domain

This can be used on its own or as part of other schemes. More or less, it means a different page or domain/subdomain built just for mobile users. Often if the main site is example.com/index.html, the mobile version will be m.example.com/index.html.

Detecting Mobile Devices

Do nothing

Javascript browser detection

• There are literally thousands of mobile platforms. Your javascript would have to be huge to detect all of them and would still fail for a finite number of mobile browser platforms.
• Many mobile devices simply don't support Javascript or do so only weakly.

Use CSS @media handheld

@media handheld { ... }

Server Side Detection

WURFL

Miscellaneous Notes

<link href="styles.css" rel="stylesheet" media="screen" type="text/css">
<link href="mobile.css" rel="stylesheet" media="handheld" type="text/css">

There are other ways of doing this if you find "handheld" doesn't work well. But these generally involve setting some arbitrary screen width, below which the system selects the handheld CSS. This option means that with minimum redesign of the site, the CSS handles the whole selection and styling issue itself; no separate site (or site maintenance) needed.

You can use a single stylesheet which handles both mobile and screen environments by @media {} attributes inside your CSS file, but I believe this would be confusing and require a lot of duplicative code in one stylesheet.

• vw - viewport width
• vh - viewport height
• vmin - minimum of viewport height and width
• vmax - maximum of viewport height and width

Site Repair Alternatives

Call your web host

Other services

Call a local web host

Repair/Original Design Notes

Regarding Sizes

Container Sizes

So here's a question: On my screen (which is probably typical for this day and age), what percentage is 780 of the whole width of my screen? The answer depends on the width of my screen. Let's say it's 1024 pixels. So if I want to find out 780's percentage of the overall 1024 width, I would divide 780 by 1024. The answer is 0.7618. Multiply this by 100 to get a percentage and you get 76.18 percent. So 780 is 76.18 percent of 1024. So if you want to convert the overall container size of the site (780) to a percentage, you can use 76.18 as your percentage. (Don't worry about the number of decimals after the period; PC CPUs have special instructions for handling floating point (as opposed to integer) math. They can, in effect, do this stuff in their sleep.)

Pixel measurements are absolute. You want relative. That's why you're doing this percentage calculation. If the other containers on your page are taking their size from the percentage of the overall screen size, then you can simply divide each one of them by your screen size. If, on the other hand, other measurements are relative to your container, then you'll have to divide by the container's size to get a percent. For example, if you have a side bar that needs to be measured relative to your overall container, then the calculation may be slightly different. As an example, a 180 px sidebar, relative to your 780 px container would be 180 / 780, or 23.0769 percent of your container.

I bring this subject of container sizes and percentages up because you'll see a lot of these measurements in your CSS, and a lot of them will be repeated. So my best advice is get a piece of paper and a pencil. Go down the whole length of your CSS document and write down each of these numbers you may have to convert to percentage, one per line. Get a calculator and do the calculations and write out the percentages next to the original pixel counts. Once done, go back to the top of the page and start changing your pixel counts to percentages, based on what you've written on your sheet. That way you won't have to redo calculations all the time. They'll all be there each time you have to do a substitution.

Actually, a better piece of advice is to eliminate container sizes altogether, and let the mobile browser do the work of resizing containers, as needed. If necessary, provide an overall container for everything which specifies a width of 100%.

Font Sizes

Font sizes on mobile devices will need to be relative instead of absolute, as in pixels. (Actually, this should be standard practice by default.) For this purpose, ems make the most sense. Incidentally, in doing research for this subject, I repeatedly came across the complaint that designers specified their font sizes too small from the beginning. Apparently, designers appear to prefer body copy to be 12px, when the standard size for body copy in browsers is 16px.

The following is a table put together from web research.

On the assumption that font sizes have already been specified in pixels, it will be necessary to re-specify them in ems, preferably using the above as guidelines. The easiest way to do this is to inspect the CSS for font sizes specified in pixels, and write down all the numbers you find. Then do the math to convert them to ems all in one place. Then as you go down, you can simply look up the original numbers on your list, and substitute the correct em size, based on your original calculations. There's no sense in doing math more than once.

An example of font-recalculation follows. The basic assumptions is that your body copy should ultimately be 1em size but was originally sized at 12px. Let's say that you have a piece of type which you've sized at 18px. That's larger than your body copy by half. The calculation would be 18/12 = 1.5. So it's half again as large as your original body copy. If you want to retain that ratio, then your calculation is over: 1.5em. Similar calculation it possible all the way down the CSS document. It would be like this:

original_size_in_pixels / base_font_size_in_pixels = font size in ems.

The following are attributes which may likely need to be adjusted, based on my experience.

• font-size
• letter-spacing
• line-height

Images

It should be noted that images, particularly as called out in CSS, may need to be deleted. This is one of the points which can cause a site to be mobile-unfriendly. They can consume excessive bandwidth in downloading to mobile devices. You'll need to check for them in the HTML files as well. Unless they're important to understanding or clarifying the other content, they are best avoided.

Another suggestion that appears to work to ensure that images do not overflow their containers:

img {
max-width: 100%;
}

Other Measurements

Other measurements generally are of less importance, but may still need to be adjusted. The following are measurements which should be examined.

• width
• height
• margin-left
• float
• background-image

For the most part, these things needn't be adjusted, but width and margin-left can be problematic. Widths can often be eliminated entirely. Margin-lefts are often used to space a container over from the left margin. These should normally be eliminated.

Firefox's "Responsive" Mode