Here are the things that you need to do to make your website mobile friendly.
- First, test if your website is already mobile friendly or not. You can check it by simply visiting your site using your mobile phone and see if you can easily surf it (your eyes can tell) or use the Google mobile friendly test tool here. If you pass the said test then you have nothing else to do but to sit back and wait for the “Google Mobilegeddon” to pass and see if you will receive the grace of high ranking in search. Otherwise, proceed to the next section of this post and read on.
- Determine if your site is using a CMS (content management system) or not. In my case I’m using WordPress as my CMS . What’s yours?
- If you are using a CMS like WordPress, you can easily make your site MF (mobile friendly) by activating a theme that is responsive. A responsive web design theme automatically adjust to the size of your device and gives mobile users an optimal viewing experience that let them easily navigate your site by simple resizing, panning and scrolling. Actually my sites like Serzf.com, Kentips.com and this Serzfus site. This is the fastest and easiest way to convert your site to pass the mobile friendly test.
- Another MF option that you can do is to create a separate website that is for mobile. Usually it is a sub-domain that uses a mobile theme or design. For example, you deliver www.bleuken.com (main) for your desktop users and m.bleuken.com (mobile version) for your mobile users. But this requires you to have a script that checks the User-agent to determine if what device is used and deliver the appropriate domain based on this header data. If you are having trouble with this, you can utilize Cloudflare’s service to do this for your. Their service automatically determine the device and forward your users to the appropriate version of your website. Aside from this, you will also add some meta tags to tell the search engine that it is the sub domain is the mobile version of your site. In the example you should put the following tag to m.bleuken.com’s <head>
<link rel="canonical" href="//www.bleuken.com/"/>and insert this code inside www.bleuken.com’s <head> tag:
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.bleuken.com"/>
That’s it ! It is that simple but if you neglect it, you might regret it so start moving those fingers and pass the mobile challenge today! 🙂