The other day I blogged about an email I received from Google suggesting that I make a website that I maintain mobile friendly.

• Mobile Devices are the Way of the World

I recently learned that there is a method to their madness in that on April 21 (tomorrow), Google will be updating its search algorithm to "upgrade" mobile-friendly sites in the search results, and thus non-mobile friendly sites could appear further down in the list of results.

Old Home Page (mobile unfriendly)

Luckily I have made changes to my site so I can still corner the market on people searching for "Crown Harbor Homeowner Association Alameda California."

New Home Page (mobile friendly)

The old site design had 8 small navigation icons across the bottom. The new design has 9 — 3 rows of 3. So even if I had not made my site mobile friendly, I could not have fit all 9 across the bottom.

To make my site more mobile-friendly, here are the four kinds of changes I made.

1. When possible, I formatted the site to make it not so wide. On the old site I often had tables with 4 columns to make the information appear less cluttered. For example, on the minutes for our annual meeting I had:

   

   Now to make this fit on a smaller screen, now I only use 2 columns.

   

2. Because it was too wide for devices like iPhones, I replaced the navigation menu that used to appear across the top of the page with one that is hidden but pops out from the left side:

   Old menu:

   

   New menu:

   

   The new left-side menu is invoked by clicking on:

   

   or:

   

   The blue image appears at the top of the screen, and the black one always stays in the same spot. For long pages, after you have scrolled down, if you want to use the menu to navigate to another page, you can use the black one without having to scroll back up to the top of page. Very handy.

   To get rid of the menu, click on:

   

3. I created a strict separation between "what the site says" and "how the site looks." In other words, all of the formatting comes from a separate cascading style sheet (CSS) instead of being sprinkled among the site content. This is considered standard practice nowadays, but the Crown Harbor site is 5 years old. It used to have HTML that looked like:

   Old Page:

   

   Now it looks like:

   New Page:

   

   CSS:

   

   The site has 233 HTML files. Using the TextPad editor, I could make many of the changes en masse, but some of the changes had to be applied individually. Painful.

4. Since styling is in a separate CSS file, it can be customized to the device (i.e. mobile versus desktop). This means that pages that look like this on a PC or Mac:

   

   can appear like:

   

   on an iPhone. The decorative images can be dropped since they are not essential but take up space. The images used to provide a grouping mechanism to identify one topic from the next. Since the images disappear on a mobile device, I added header level 3 items to separate the topics.

   

   The disappearing images strategy had an interesting side-effect. I used to provide some visual separation between table rows by using horizontal lines. For example, in a table that had 3 columns, I would have:

   

   Now that one of the columns is optional based on display width, I had to change this slightly. I now have to use:

   

   To show you how geeky I really am, try viewing the exterior windows page on an iPad (not iPhone) in portrait mode. Now turn the iPad to landscape mode and watch the little images suddenly appear. Then go back to portrait mode and watch them magically disappear. Totally captivating.

I am sure I will find other changes I can make as this is a work in progress on nights and weekends. And to think it all started because Google sent me an email.

So it's becoming quite clear that our traditional PC and Mac-oriented internet world will continue to shift towards mobile and tablet devices. As an example, we've got someone looking into how we should reformat all of the Autodesk blogs for this new world order. Shaan Hurley has started experimenting with making changes on his own. Let's see what develops.

Mobility is alive in the lab.

Related articles

The Anatomy of a Top Selling Ecommerce Theme