Special Series:
The Big 3 Website Audits and Why You Can’t Live Without Them
Website Audits Technical, UX, & SEO Congratulations! The fact that you’re here means you’re invested in the success of your…
Read More
If you have been involved in web development in the last 5 years, you have heard the words “responsive design” over and over again. You may even have a pretty good understanding of what those words mean and why it is important to implement responsive designs when developing websites. However, it is becoming increasingly important to consider mobile devices much more specifically when developing websites.
CSS Media Queries are used to handle the way content is displayed to the end user depending on the size or type of device accessing it. It is highly important to minimize the amount of scrolling, resizing, or panning that a user has to do when accessing the content on a mobile device. Media Queries are used to alter the style of html elements depending on the overall size of the device’s screen that is accessing them. This method is commonly used to alter the appearance of a grid, change the size of an image, or hide or alter an element’s visual attributes to make it more accessible and appealing on the screens of smaller devices such as mobile phones or tablets.
Responsive does not mean optimized for mobile performance. CSS is interpreted by the device’s browser that is requesting it. This means that is has no way of directly communicating with the server, so all it is able to do is effect the visual attributes of the elements within the website.
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 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.
There are currently 4 responses.
November 18, 2014
Good read. Although I would say that in the first place you shouldn’t have two different HTML-codes for (for instance) the same menu.
Also, I discovered a small typo in your is_Mobile() function. You need to globalize the variable $detect in order to use it inside your function.
November 18, 2014
Mattias,
I agree that the $detect variable should either be inside the function or more appropriately globalized. For the sake of this illustration I corrected the typo by placing the variable inside of the function. Could you elaborate on the below statement?
“I would say that in the first place you shouldn’t have two different HTML-codes for (for instance) the same menu.”
The intention is to allow the server to return only one menu, specific to the device requesting it. You are correct if you are suggesting it can be done by altering a menu’s output rather then having two menus. Either way would provide an increase in performance on the device itself that standard Media Queries could not.
Thank you for posting your thoughts.
November 12, 2014
Awesome points made here. Another approach in my experience is to actually modify the menu (using one instead of two) based on the display size. It is a bit more heavy in CSS, but not much. I like the use of php to catch which content to load on the server side. Thanks for sharing.
November 12, 2014
Jeremy,
One of the other nice aspects of the above approach is that you can load light weight stylesheets from the server when dealing with mobile devices as well as minifying them in production.