Before we start talking about how we might treat mobiles differently in the world of the web, let’s answer the question - why should we treat them differently? It’s obvious that mobile devices typically have smaller screen sizes than “full” or “desktop” browsers, and that the screens can be rotated to switch between landscape/portrait modes a lot more often than with desktops and laptops, but what other factors can come into play, and how might they affect the way a site looks, feels, and performs?
Even without optimisation, most sites will function fine to some degree on a mobile device (go ahead, try it), however there may be some limitations and issues. You may find yourself squinting to read small text as your mobile attempts to resize a page to fit it on your small screen. You might find links and buttons are harder to click due to their size, and that unless you zoom in so you’re only viewing a small part of the page, that you can end up clicking on the wrong thing and need to use the back button to try again. Pop up dialog windows may be hard to view or to close, and some functionality may not work properly or may run sluggishly (usually when complex scripts are involved - some devices are faster than others). Any Adobe Flash content won’t run at all on a large percentage of devices (thanks, Steve Jobs – seriously, thanks, Flash is horrible). You may also find that a site can look fine in portrait mode, but flipping the device 90 degrees to shift into landscape alters the experience entirely – or vice versa.
The point is that today’s websites have a lot of moving parts and interactive elements, both in their designs and in content - sometimes all the parts don’t translate across perfectly to mobile devices without a little bit of extra work (but sometimes they do!). Every site is a unique snowflake, so when you’re discussing an approach for mobiles for your site, the most useful thing you can do is simply to load it up on a range of devices (your phone, your friend’s phones, steal a phone!), and use it – see what works, see what doesn’t, and plan changes accordingly.
This is also the justification behind our suggestion that “do nothing” can sometimes be a valid approach – if a site looks “good enough”, then there may not be a need to make any changes (or to make a few minor adjustments only).
At the start of this post I mentioned the size of the screen - it’s pretty easy to see how screen size affects the way a site looks and feels on a device, however there’s a range of other technical and non-technical aspects that might not be so immediately apparent.
Unsupported features, and Extra Features
Some mobiles don’t support all features of a desktop browser, and some mobiles have extra features (or features which simply make more sense to use on a mobile than a desktop) – Geolocation is a good example of this. Geolocation is where the browser can make location data available to websites so they can tailor content based on where the user is – if you’ve not seen this, visit the NZ Herald website on a mobile with GPS built in, and look for the dialog box it raises asking to use your location. It’ll then use this to display bad news that’s tailored for your region. Don’t forget to close the Herald site quickly, in case you get distracted and read any of their attempts at journalism – we don’t want to make your day bad, we just wanted to show you an example of Geolocation on a mobile! While this can be done with desktops too (“sort of”) it’s much more relevant and common on mobiles where there’s a high chance that a GPS device might be present.
Mobile devices are… mobile!
Hopefully this isn’t a surprise to anyone! They’re often used on the go which means their users aren’t always on a fast wired connection, and may be using their cellular data (GPRS, 3G, and 4G if you’re in Auckland and have a boat) to browse the web. Cellular data speeds can vary greatly, so anything you can do to ensure your site loads quickly on a mobile is usually much appreciated by users, as it saves them both time and money through reduced data charges.
Less caching
Firstly, what is a cache? Put simply, a cache (in this context – as caches are used in many parts of computing - http://en.wikipedia.org/wiki/Cache_(computing)) is a location where your browser stores resources that it has downloaded, in case you need them again. If something needs to be loaded and it’s in cache, then it’ll do so much quicker than if it needed to be re-downloaded. Mobiles and tablets have much smaller caches than desktops, so the chances of resources being in cache is lower, which means that large sites can appear much slower on a mobile device.
JavaScript performance
JavaScript is used by many websites, some more than others, and large amounts of it can have performance issues in some mobile devices. Mobile JavaScript performance is improving all the time, but it’s still not guaranteed to be amazing on all mobiles, so if your site uses complex JavaScript then you may want to hide that from lower spec devices (the graph on the right shows some performance figures that illustrate just how much the performance can vary) or ensure that the code is optimised so it runs as smoothly as possible.
Non-Technical Reasons
Everything that we’ve discussed so far is more about the device and has a technical aspect to it, but there are also many non-technical aspects worth considering. If your visitors are visiting your site on a mobile phone, then they might have a specific task in mind, so you want to do everything you can to help them complete that task as quickly and easily as possible. For example, think of a site for a restaurant - odds are that mobile visitors might be wanting to find the contact page for phone or address details, or to quickly make a booking, so make it easy for them to find and use those things rather than forcing them to wait 20 minutes while they have to download the latest 1000 Instagram photos of people’s breakfasts that are proudly displayed on the site.
To take that example a step further, here’s a few possible things that the restaurant above could think about doing when they detect a mobile visitor:
- Click to call integration for the phone number which could be displayed in large font, handy for people with stubby fingers or using dialing wands
- Add some interactive map functionality enabling users to click to get directions – integrating with the functionality of Google Maps makes this sort of functionality easy to add to pretty much any situation
- Ensure that the enquiry/booking form is easy to use on a small screen, is optimised as much as possible for 1 thumb typing, and doesn’t contain 324983948 mandatory fields. Ensure the form offers suggestions as you type where possible, default values where relevant, and that using the form isn’t going to end up with a device being thrown out the window of a moving car (not that we’re implying anyone would ever use such a device while driving, that’s illegal!).
Some of the “Why” reasons that we’ve covered above might not apply to all sites (because as we said, every site is a unique snowflake!), but odds are that some of them will. Each of these reasons is a factor to consider when deciding how you want your site to handle mobile devices. Do you need a special mobile optimised version of your site? Maybe you only need to make a few quick fixes to the desktop site to make the experience better on mobile devices, or are you lucky enough to not need to do anything?
There’s always value in asking ‘Why’ before deciding ‘How’, and it’s the ‘How’ that we’re going to move onto with our next post.
-Ross