Jake Charman

Resident Geek of Nitrous Junkie Racing



Implementing Mobile Pages The Modern Way

Mon 7 Aug 2017


Please don’t redirect me to a subdomain because I decided to read your site on my phone. It’s annoying as hell.

That said, it was the done thing for many years, a user visits on a mobile device, the server detects the user agent and redirects to m.example.com. I myself have one site which does this because it was correct when the site was built. I’m currently in the process of refreshing the site and will be replacing this. 

There’s a couple of reasons why it’s so terribly irritating to use this system now, the first and most prominent is the way we share content. If I open a site on my phone and copy the link into a WhatsApp message to my friend, he should be able to click this link on his desktop PC and have the site render the proper size for his screen. Also, the lines are blurred between mobile and desktop devices. It is possible to buy a 12″ laptop running Android (though I’m not sure why you’d want to) and I have one 10″ Tablet running Windows 10 and another running Arch Linux. Detecting the user agent is an increasingly unreliable way of detecting the type of device the page is being viewed on. 

The way I personally like to detect devices is to use the screen size as an indicator of the device type, this is the easiest way for me as I can test how the code works on my dev machine simply by changing the window size of the browser. The CSS for this is relatively simple, anyone familiar with basic web development should find it easy to implement this feature. 

The basic method for detecting screen size is as follows:

@media (max-width: 500px)
{
/* CSS for mobile design */
}

@media (min-width: 500px)
{
/* CSS for desktop design */
}

As with most things code, there are many variations on this and different ways of implementing it. I tend to write my desktop theme and add a small section at the bottom of the file to adjust parameters for mobile. This saves time when writing as is allows for the minimum of code to be rewritten for mobile. However, on a low powered server or a site with large amounts of traffic, this approach is less than ideal as the client is required to read and set parameters for desktop only to change them again for mobile. 

My preferred method for large projects that were designed to scale would be to write two complete style sheets. You could keep the size of the file down by using imports to serve only the correct stylesheet authough be aware that older browsers won’t support this function.