That Does Not Computer

Mobile Friendly Web Design has impact on Google Search Engine ratings

If you wernt aware already as I wasn't. Google have added an extra factor into how they rate your website. This is if your website is is readable on mobile devices. Yep so not only SEO keywords and description your website now needs to be mobile friendly. But fear not there are easy ways to achieve this without reiventing the wheel. If you have built your website with main stream cms like word press or blogger.com then they usually have mobile device support out of the box without having to tweak lines of code. However, if you did make your website some time ago and are not sure how about to go at making your website mobile friendly you will need to make tweaks to your code. This article will give an example of the php programming language.

What do i need

You will need a method of detecting if your visitor ias using a mobile device. Sure you could re-invent the wheel but why?. Mobiledetect.net is a php class which does the leg work for you.

You will also need some coding knowledge i.e copy/paste and write some lines of code.

You will also need to isolate key parts that should act differently when your website is viewed from a mobile device. This is essential and some good knowledge of CSS.

How do i get it to work

If you haven't already done so. Download the Mobile_detect.php form Mobiledetect.net and place it in a directory on your server that your pages can access.

Once you have done this you will need to do a couple of things.

You will need to enable session in php with code similar to the following:

 

if(!isset($_SESSION)){session_start();}

The if isset in the above makes sure that it will only start a new session if not already started.

You will then need to add a couple of helper methods to a php helper class so that you can resuse the code again and again:

// Update this array if you have fewer layout types.
public static function layoutTypes()
{
return array('classic', 'mobile', 'tablet');

}

public static function initLayoutType()
{
// Safety check.
if (!class_exists('Mobile_Detect')) { return 'classic'; }

$detect = new Mobile_Detect;
$isMobile = $detect->isMobile();
$isTablet = $detect->isTablet();

$layoutTypes = self::layoutTypes();

// Set the layout type.
if ( isset($_GET['layoutType']) ) {

$layoutType = $_GET['layoutType'];

} else {

if (empty($_SESSION['layoutType'])) {

$layoutType = ($isMobile ? ($isTablet ? 'tablet' : 'mobile') : 'classic');

} else {

$layoutType = $_SESSION['layoutType'];

}

}

// Fallback. If everything fails choose classic layout.
if ( !in_array($layoutType, $layoutTypes) ) { $layoutType = 'classic'; }

// Store the layout type for future use.
$_SESSION['layoutType'] = $layoutType;

return $layoutType;

}

You will also need to include the Mobile detect class in the top of your helper php class:

 

require_once("myclasses/Mobile_Detect.php");

Once you have added this to your help class you will then need to include your class for use like the following to the top of the page you want to make use of the mobile detect:

require_once"myclasses/MyHelper.class";

Once you have added a reference to your helper class you can start using it.

$MyHelperobj = new MyHelper();
$layoutType = $MyHelperobj ::initLayoutType();

Once you have added the above to the top of the page you want to include the mobile detect on then it is time to start making use of the functions in your helper class:

 


if(strcasecmp($layoutType,"")!=0 && strcasecmp($layoutType,"classic")!=0)
{
include("myincludes/mobileCode.inc");
}
else
{

include("myincludes/nonMobileCode.inc");
}
?>

The completed code snipet should look something like the following:


require_once"myclasses/MyHelper.class";
if(!isset($_SESSION)){session_start();}
$MyHelperobj = new MyHelper();
$layoutType = $MyHelperobj ::initLayoutType();


if(strcasecmp($layoutType,"")!=0 && strcasecmp($layoutType,"classic")!=0)
{
include("myincludes/mobileCode.inc");
}
else
{

include("myincludes/nonMobileCode.inc");
}
?>

The above could just as easily be used to include a different sytle sheet or extra javascript files etc.

Styling and other things to consider

So that google will see your website as mobile friendly stick the following line in the head section of your website:

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

  

The above line tells google the viewport of how your site fits your visitors device.

If you have been using hard coded pixel sizes i.e 800px in your css then you need to start using percentages i.e a simple css change might be:

#mydiv{width:800px;}

to

#mydiv{width:100%;}

The above tells your visitors browser to calculate aspects of your page as a percentage. So using 100% will ensure that #mydiv will stretch to the full width of the page regardless on the size, orientation of their device.

 

Conclusion

Whilst the above may not be the best method. I think it is a pretty good example and saves having to maintain 2 versions of your whole site one for mobile devices and the other for desktop. It's simple little changes that go along way but hopefully this helps someone.

 

 

Get drawn to Kevin on SocialPeepl.com
Follow Kevin on Twitter
Follow Kevin on Facebook
: Follow Kevin
kevin-sharp.co.uk Cookies and privacy
We use cookies to monitor statistics of the website. We do not use advertising or marketing cookies.If you click "Accept & Continue" then you accept our use of Google Analytics. If you click "Disable" then Google Analytics will not be turned on. Please Click Here if you would like to know more about how we use cookies