By Siong Eng
User Experience Architect
While it might not be the most glamorous of subjects, website metrics are front of mind for most business owners and marketers today. There is a growing general awareness of the value of a website’s analytical data and its capacity for providing an advantage over competition. As a result, investment in resources that track these metrics is also on the rise.
In 2008 Mary Meeker, a technology trend analyst from Kleiner Perkins Caufield Byers, caused headlines with the bold prediction that by 2014 mobile will have overtaken fixed internet access.
Today we're well past Meeker's predicted tipping point and it is safe to say that considering 80% of internet users own a smartphone in 2016, mobile accessibility is a well accepted essential.
'Responsive websites' are all about enhancing the user experience by adapting a website's design and content to suit the device: iphone, android phone, tablet etc.
We've all had experiences with 'non responsive' websites, it often means a lot of time pinching, zooming and dragging the site all over the place just to properly browse the content. It is time consuming and frustrating to say the least.
Plus, all this time spent searching and struggling for content means the user is spending far less time taking more important actions that lead to conversion.
Not only does a well designed responsive website vastly improve user experience and drive better conversion, but it also consumes a lot less bandwidth resulting in less data consumption for the user (cheaper bills) and a faster loading website. Stats show that if a user has to wait more than six to 10 seconds for a page to load, they will abandon it and go elsewhere; so fast loading is super important!
Responsive design is undoubtedly the way of the future, so much so that from 21 April 2015, Google implemented a new mobile-friendly algorithm that effectively penalises websites that fail to jump on board the responsive bandwagon. Google's 'mobile-friendly test' looks at core design areas, things like buttons that are too close together, too many images on a single page, small font etc. Websites that fail the test are punished in search engine ranking; a significant incentive to update!
(You can actually check to see if your website passes the mobile friendly test here.)
Here are five top tips to keep in mind when designing an effective mobile responsive website:
1. Understand behavioural differences
The way we browse a website on desktop is vastly different to how we browse on our mobile phone. We need to first understand these key, behavioural differences before we can identify the areas of a website that can be optimised for a better mobile browsing experience.
The most obvious example being the use of a mouse on desktop versus the user of fingers on a mobile phone; how does this affect the user experience and therefore the design parameters? Research shows that the optimum size for a finger clickable area on a mobile device is 44px by 44px.
2. Don't cram everything 'above the fold'
There was a time where designers were preoccupied with keeping content 'above the fold'. This was mostly due to the fact scrolling was a relatively new action and users were unwilling and unlikely to scroll down for content.
This isn't so much the case today because mobile technology has effectively made users into scrolling/swiping professionals. In fact, studies show that on mobile devices users have a natural tendency to scroll downward. While a user's attention might be focused above the fold initially, they will naturally scroll down especially if the page is designed to encourage scrolling.
Also, screen real estate is already scarce on mobile phones; so it is crazy to try and cram reams of content into above fold space! Space out content so it is easily digestible and ensure font is large enough to be easily legible.
If you build it well, they will scroll!
3. Prioritise page speed
The majority of users will be browsing your website on a 3G connection which is generally slower than a WiFi connection on desktop, so it's important that your website is snappy to ensure users don't get frustrated and opt out.
Slow page speeds not only alienate users, but it also has a negative effect on your site's Google search results ranking.
When it comes to slow page speeds, the usual culprit is images. Yes, images must be fairly high resolution on a large desktop, but on a mobile device you can get away with reducing some of the fat and still have a nice looking page.
4. Don't neglect tablet users
The market is full of mobile devices of varying screen size, so it's important to make sure your website looks good across the board.
Unlike an 'adaptive' website that only concerns itself with specific device widths, a 'responsive' website will adjust it's layout at any given point. That's the idea anyway! However, there are plenty of sites out there that claim to be 'responsive' but are only really optimised for a desktop and mobile phone, ignoring tablets.
Tablets in portrait mode are often given the 'mobile treatment', where the full potential of the extra screen real estate is not taken advantage of, or the 'desktop treatment': where the content is heavily condensed.
Having a consistent level of quality throughout your website shows the user you are willing to take that extra step to provide them with the best experience regardless of device.
5. Remove nonessential content
So, we are aware that screen real estate on a mobile phone is at a premium and as a result we really only need to keep the important content. But how do we know what content is important?
A good place to start is to consider how your users browse your site on a mobile phone. For example, let's say you run a website that promotes and sells tickets to live music shows.
After analysing user behaviour, you find that majority of your mobile users visit your site on their phone so they can find the location of a venue or see which shows are playing nearby. Once you have this information, you can prioritise this information on your mobile site and everything else is deemed low priority or hidden altogether.
Not only will this provide a welcome boost to conversion rates, it will also increase your page speed by reducing the number of elements the website needs to load.
That being said, users don't always access websites from their phone for specific actions. Some users browse a mobile site the same way they do a desktop, and as a result they might find it annoying when certain bits of information isn't immediately accessible.
This really reaffirms the importance of understanding your users and how/why they access your website, and this can be done using analytics, performing user tests or conducting user surveys.
If you need more advice regarding your website’s mobile strategy, feel free to call on (09) 9218 8622. Our team would be happy to schedule a time in to discuss your needs and formulate a strategy that works for you.
For more information contact: