With such a dramatic increase in the use of mobile internet in recent years, ensuring that your visitors get a great experience on mobile as well as desktop is more and more important. Here’s a quick summary of some different approaches:
Can’t afford specific mobile treatment?
Fear not: people on mobile devices can view your content. We make sure that your website is built according to web standards, and is optimised for page loading (both of which we are keen to do for all users). We also consider factors such as interaction. For example, navigation elements (links, buttons, and so on), need to be of a suitable size. This not only helps mobile users, who have to hit them with a fingertip, but also those who have difficulty with high levels of mouse precision.
Some tools / services can perform image optimisation on the fly, such as Cloudflare, where image quality is altered, when appropriate, to cater for the means by which someone is accessing a site.
Tailoring your site for mobile users
There are two key approaches to this, which I’ve outlined below. The crucial thing to bear in mind is that giving a site specific treatment for mobile and/or smaller browser windows needs careful consideration and planning. For example, we need to properly present the hierarchy of content on any given page, making sure the most important content comes first. Maybe there are decorative aspects which would best be removed, or particular elements which would not work when scaled down (e.g. graphics which wouldn’t work at a smaller size, such as charts or maps) and which need special consideration.
We can help you to plan your content, build on that with a functional specification and design, and determine the approach which is right for your visitors.
Responsive site?
This is a popular approach, whereby the presentation of a site is altered according to the “viewport” size (i.e. size of the browser window). A big gotcha is images. We must not take liberties with visitors’ bandwidth – while many mobile users have unlimited and fast data, or are on Wi-Fi, plenty are not.
Use of a tool such as Adaptive Images means that users with a smaller viewport actually get a smaller size image, rather than a large high resolution image presented at a smaller dimensions. This helps allow for faster loading times by cutting out unneeded information. With suitable consideration of factors such as this, the responsive approach is well worth exploring, as it presents content in the best way possible according to actual viewport size rather than making assumptions based on the device or browser used. However, there are fewer opportunities for minimising page download size compared to use of device detection.
Will, our Head of Design, has penned thoughts on the implications of the responsive approach from a designer’s perspective.
Device detection
This is the approach of the “m.” subdomain for mobiles, where a specifically-built “mobile site” is given to devices detected as such. The two versions could be built on top of two different sets of content, or it could be alteration of the presentation of one set of content, using different templates and/or stylesheets. This approach gives the most opportunity for minimising bandwidth usage for those on a mobile connection.
It’s crucial to avoid the situation that someone on mobile finds exactly the result they want from a Google search, but then can’t view it on their mobile (getting the homepage instead) because that page is only in the “desktop site”. This is highly frustrating. If a mobile visitor attempts to load a page which isn’t in the mobile version, just give them the page they’ve asked for. Using the latter approach makes it easy to avoid this situation because there’s a single set of content.
Want to know more?
Drop us a line to find out how we can help you with mobile.
Article by Bryan Gullan
I am Head of Digital Development at Heehaw. Career highlights to date include working on projects for The University of Oxford, The Nuffield Trust and, more recently, Citizens Advice Scotland. I'm a keen advocate of Open Source, with particular experience of Drupal.
Be the first to comment