Making Site Mobile Friendly - the Google Way

To have presence in online ecosystem, there is no option but to follow rules set by Google.

Last month, I receive an email from Google mentioning that my site selling Shiroi Koibito is not mobile friendly, and the site rank will be effected.  As many other web owners, I freaked.

Email from Google mentioning that there is an issue with the site

As in previous blogs, I have been working hard to put mobile friendly site, but I did it wrong according to Google.  As I read the instruction from the email, I notice that the content of the mobile friendly page must mirror the content from the desktop page.   What I did earlier was to create a new interface using OpenCart framework and have user click to go to the new site if they are using mobile. However, the structure of the new page was not the same as earlier and did not mirror the content of the original site. Oh boy.

So I decided to see what Google tell me to do.  I decide to make the site responsive keeping the other new site still being operational.  There are multiple ways of making the site mobile friendly, but since I am making changes to my original site, I thought I should follow "Google way" of implementing this. I find out later that this was my second mistake.

Google provides "Web Starter Kit" to allow site owners to make the site mobile friendly. 

As I mentioned earlier, my profession is software development, and I have experiences with making a site mobile friendly; however, I have not used the implementation method that Google suggests which is called WebStarter Kit.  In summary, this is extremely complex task due to technology used.  I have windows machine that I develop the site, and the site is hosted on Linux server.  In order to have windows work with the new approach, I had to install following software on my Windows machine. There are not too many documents of "how to install" them (as of March 2015) so I had to read a lot of external documents for my windows to work correctly.  I spent a day understanding and installing following software on windows; Git, Cigwin, node.js, Ruby and SASS.   After banging my head to the screen many times, I was able to successfully configure all the software at the end to have the website display on my local machine. Great! I was quite happy at this point.

Now I turned to the web server admin and asked if they can do the same.... well they faced the same issues as me on Linux environment where they have to install and configure all the tools that is being used by what Google suggests.  They spend two days and realized that it does not work on shared environment. As I do not have dedicated server for my site, and my site is being shared by other users; they could not do the configuration unless I have dedicated server.  So that was my dead-end. With the cost of having dedicated server, I could be spending on many other enhancements like translating to other languages and I was not willing to do that at this point.

I backed out, and used other method called bootstrap framework (most popular way in the industry as of March 2015) to implement the mobile friendly site.   Google has a site to see if a site is mobile friendly or not. After all above, according to it, now my site is mobile friendly, and good thing is that traffic did go up after implementing the change.

Google finally accepts that the site is mobile friendly

The traffic did go up after all.

I am still not 100% satisfied with how the site looks as I coded everything by hand without using any frameworks like OpenCart, I will more likely making some changes to the site so that the site looks good.  For now, at least the site is "Google certified".


Update: April 2015

As I made two set of the code for the same site with the above effort (one for mobile and the old desktop version). Since I still like the old look on the desktop, even the new site is mobile responsive, I have used split method following reference from Google with Java Script to mirror the contents between desktop and mobile.  So based on the user's device, the site now automatically routes to either mobile or desktop site.