What it takes to be ̵...

scrollto
What it takes to be ‘Mobile Friendly’
by
23 April 2015

What it takes to be ‘Mobile Friendly’

If you have your ear to the ground, you’re sure to have heard about Google’s most recent algorithm changes, due to be rolled out today: displaying search results in favour of those optimised for mobile devices — or, as this article suggests: those that are mobile friendly. With nearly half of users saying they wouldn’t return to a website if it wasn’t optimised for their device, it seems imperative business owners, users and designers alike understand the importance of the mobile Web. Now, like a lot of terminology used to encompass a multitude of techniques and technologies, this can mean different things to different people. So, what does mobile friendly mean and what can you do to ensure you’re ready for the upcoming changes?

Well, if you’ve recently had your website designed or revamped, I hope this was discussed, or at least mentioned, in the early stages of development. You may have been told, to your complete and utter bemusement, “We cantotally make your site responsive” or, “By the way, for an extra £££ your site will adapt to a variety of different viewport dimensions and resolutions”. However it was sold, it should’ve been sold, and as this article will hopefully establish, if it’s not currently included in the website quote, it’s worth your hard-earned cash.

Simply put, mobile friendly web pages are those that are built with portable devices in mind. They detect what device a site is being viewed upon, and adapt accordingly. Designer Ethan Marcotte explains in his book ‘Responsive Web Design’, that as web designers, we’re in control of a very new, unfamiliar and constantly evolving medium; so it only makes sense that we would grab hold of tried-and-true terminologies and practices that have served us for centuries previous, and lug them into the 21st Century. The effects of this have been somewhat stifling to our creativity and productivity — handfuls of phrases we use everyday of our working lives, borrowed and moulded to fit our needs. The ‘canvas’, for instance, is one such reclaimed term. Whether it’s print or paint, carpentry or calligraphy, we use some form of canvas; a starting point that the web simply does not afford. Sure, we replicate and re-use, but with half of all online product searches leading to a purchase, it was high time we started thinking differently.

Responsive Design

Not too long ago a designer would create a website that looked great on desktop platforms, and possibly even squeeze in a standalone mobile website for good measure. But, as things progressed and user experience varied, we found ourselves designing for an increasing range of devices, with no way of determining who or from where users were viewing our content. In short, we needed to ‘future-proof’ our processes.

As far back as 2000, when the web was in its infancy, a guy named John Alsopp recognised the opportunity for a more diverse web experience, but it wasn’t until Ethan Marcotte coined the phrase ‘Responsive Design’ in a 2010 article, that the concept really entered our consciousness. We’re all familiar with the mega-frustrating experience of zooming and panning around a website, prodding buttons with our pinky fingers and scrolling in all directions for what seems like an eternity — all in an effort to locate a phone number. Sound familiar? Enter responsive design. Responsive design is not itself a singular technology, rather a collection of techniques which, when used in conjunction with one another, can be used to create an improved mobile experience. Slide-out menus have now become commonplace, and nice, chunky buttons with a streamlined ‘touch’ experience in mind, are strategically placed. Less confusion, more speed. With that in mind, there are a few boxes a website needs to tick in order to be considered ‘responsive’, or truly mobile friendly.

Load Time

Now, despite what we may think, not every man, woman and child have access to super-fast fibre optic broadband, capable of delivering blisteringly-fast download speeds; and let’s face it, we’re an impatient bunch. We decide we want something and we’ll be damned if it’s not immediately within reach. In reality, it’s all about the money. Users, forced to stare at that blank loading page, will jump ship quicker than you can say “Oooops, there goes a sale”. This time last year, just 21% of all mobile websites, rated based on load times, were deemed ‘good’, made all-the-more shocking when you consider that 64% of smartphone users expect websites to load in 4 seconds or less. This is likely to have improved somewhat in the past 12 months, but it’s about time we started looking at this process as a necessity, as opposed to a ‘nice-to-have’.

Now, there are many things that affect load times, much of which is down to the developer and your design team to consider — such as fewer HTTP requests, reducing client-side Javascript’s and using CSS3 in place of images, along with having an all-round ‘mobile first’ methodology in place. However, with an increasing number of websites being edited and maintained by the website owners themselves, there are still things you should be aware of, so that you can discuss these with your design team, and get yourself a strategy.

Images and other media

We all know a picture speaks a thousand words, right? This is all well and good in theory, but when your all-speaking, all-dancing image prevents anything else on your page from loading, you’re probably missing the point. Image size and resolution is often overlooked, but it’s hugely important for site performance. Again, your design team may discuss the option of ‘swapping out’ larger images for lighter alternatives, depending on device resolution and/or bandwidth.

Alternatively, when uploading your own images to your web pages, there are many online tools designed for this very purpose — compressor.io and free photo editing software such as GIMP, have worked well for me in the past.

With website visitors 64% more likely to make a purchase after viewing a product related video, and the pretty remarkable impact it has on search engine results, it seems video marketing is truly on the rise; with hosting sites like YouTube making the transition and implementation ever easier. With this, we need to ensure videos are handled correctly on our sites. Flash, a software that dominated the web for a number of years, has almost entirely lost its place in the video arena, due in no small part to Apple’s lack of Flash support on its’ devices. Also, agonising load times, costly fixes and a requirement to install the software have left Flash somewhat dead in the water. Some would argue it still has it’s place, and it is a powerful animation tool, just not on the mobile web.

Optimise for Touch

A lot of work goes into making a website perform great on numerous platforms, the end result being: to create a uniform and pleasant experience across the board— one that the user expects, regardless of whether he or she is sat on the sofa at home, or stood at the till of a high street store. Considering all circumstances as we must, we need to create a mobile experience that serves it’s purpose, without sacrificing content for convenience. To accommodate an ever-growing plethora of mobile touch devices, such as the iPhone or the Nexus 6 (that’s right, not everyone owns an iPhone), we utilise the relatively small screen size, and create an almost app-like experience — complete with large ‘thumb-sized’ buttons, clickable icons, interactive email addresses and telephone numbers and appropriate navigation. As well, we’ve become accustomed to mobile ‘gestures’, so swiping, pinching and tapping should all form part of the experience.

Navigation

Arguably one of the most important and under thought elements of responsive/mobile friendly design is navigation. Before aesthetics are even considered, a sitemap should be thoroughly devised. How this translates to other platforms, besides desktop screens, is something you should discuss with your designers, but there are a few solutions. You may be familiar with the ‘burger’ menu? These are the three parallel lines which, when clicked, cause a menu to appear. This has been quite widely adopted, and is the go-to for a host of responsive websites. When combined with slick animations and flair, these can be quite impressive. Others opt for the classic drop-down menu. Whichever you decide to use, make sure there’s a reason behind your decision.

Mobile friendly design should in no way be an afterthought. It should be a carefully considered process, based on research and reliable user data. If it’s not improving the user experience, simply don’t do it. Ask your audience for feedback, and then use that feedback to make improvements.

And so, by the time you read this article, a Google search from your mobile phone or tablet should result in a list of sites deemed mobile friendly, taking into account some of the points raised above. With businesses finally realising the value of online marketing services such as SEO, Google’s updates may just be the spark that ignites our imagination.

It’s time to respond to the needs of your users.