Lets assume we have two menus that we have designed for a website – one for displaying on desktop or higher resolution devices and the other for mobile or lower resolution devices. With CSS Media Queries we can tell the browser that if the screen width is or becomes smaller than X amount, then hide the desktop menu and display the mobile menu instead. This approach works, and what the user sees is a nice mobile menu design that is much easier to access than its desktop counterpart. However, if you were to inspect the source code delivered to the browser, you will find that the html markup for the desktop menu is still being returned from the server and is simply hidden from the device’s screen. This is not optimal because the server is now having to process unneeded information and will ultimately take longer than necessary to return the request. A better way to handle the two menus would be to detect the type of device making the request before loading either of them from the server. This allows the device itself to tell the server which of the two menus to load and more specifically not to load any of the markup for the menu not being used.
Managing which content the server delivers on a conditional basis by detecting what type of device is asking for it, along-side of conventional CSS Media Queries, will lead to improved performance and accessibility of a website on mobile devices.
DEVICE DETECTION
Device Detection is possible at the server level by reading the HTTP USER AGENT information passed to a server when they request resources from it. It is relatively impossible to guarantee that all types of mobile devices will be detected by this approach; however, it is still very important and beneficial to use this approach whenever possible to save valuable load time on mobile devices.
Using these two approaches together would look something like the following when dealing with an element or section of a site that you do not want to appear on mobile devices.
First, we want to make sure that the element appears, even if the device type is not recognized as mobile by the above device detection technique. To do this we can set a media query to tell it not to display the element if the screen is less then say 768 pixels wide like this.
@media screen and (max-width: 768px) {
.hidden-element{ display: none}
}
There are several libraries on the internet that have been written and made available for use to detect mobile devices. I personally prefer using a PHP library available on GitHub called Mobile-Detect. Below is an example of how to access the Mobile-Detect class and create a simple function with which to wrap conditional resources.
<?php
require_once ‘../Mobile_Detect.php’;
function is_Mobile(){
$detect = new Mobile_Detect;
$is_mobile = ($detect->isMobile() ? true : false);
return $is_mobile;
}
?>
The above code allows me to now write a conditional statement that looks something like this.
<?php
if(is_Mobile()){
// Return the mobile version of the resource being requested
}else{
// Return the non-mobile version of the resource being requested
}
?>
Using these concepts in your next project will not only lend to better performance of your applications, but more importantly it will create happier users. Let’s give the world the experience they deserve and start creating more robust and fully accessible websites.
Happy Coding!!!
