Australia is leading the world with our use of mobile devices (smart phones & tablets). Already over 84% of all mobile Aussies now own a smart phone.
It’s 2014 and already up to 70% of all visitors to a website are arriving via a mobile device….. yet still only about 1 in 5 Australian websites are mobile ready.
Since March 2013, Dave Gillard and his team at Tall Timba Consulting have been pioneering the charge in getting client’s websites made mobile responsive, mobile friendly and ‘mobile preferenced’.
What is Mobile Responsive Design?
When a website is mobile responsive, the layout and/or content responds (or adapts) to the size of the screen it’s presented on.
In other words, a mobile responsive website automatically changes it’s layout and content to fit the device you’re reading it on.
Generally there are four different screen sizes, known as step-downs, that a responsive design aims to adjust to: the widescreen desktop monitor, the smaller desktop computer (or laptop), the tablet and the mobile phone.
Mobile responsive design is all about automatically delivering your audience the content they want, within the context that they’re viewing it!
Here’s some key guidelines to consider when you are wanting to create or improve your website’s mobile user experience.
- Reduce & adapt the amount of content: Space is short and every pixel counts so it’s important to reduce the amount of content shown on the mobile-optimised version of your website. Only include the most important content or features. Mobile websites should be very focused, making them easier to read and move around, as well as quicker to load on devices that can sometimes have slow Internet connection speeds. Think about the different needs of a typical user on a mobile phone compared to a user looking at your website from a desktop computer. Using a a Restaurant website as an example, a mobile user would be likely to be only interested in the opening hours, location, how to make a reservation & have a look at your menu while a desktop user probably ins’t looking to eat right now but is rather looking ahead and want’s to see if you offer a good atmosphere and what kind of food is available
- Single column layouts work the best: Wide web pages are difficult to view on the mobile phone’s small screen. Even on smart phones like the iPhone , most text is unreadable until users zoom in to the part of the screen they want to view. Zooming in isn’t ideal because it adds an extra step (Zooming in & out isn’t easy to do on all phones). Remove low priority content and utilise a single column layout. Instead, create single column pages that use the whole width of the screen. When adding additional content the page should expand downwards rather than across, as scrolling down is easier .
- Present the navigation differently: It’s difficult to fit the navigation across the top of a web page on a mobile screen and then stacking at the top would push the content too far down. So here’s some tips: a). On the homepage, place the navigation and site search at the top and leave the bulk of your content for later pages. b). Place the navigation at the bottom; so users can still access the navigation but it doesn’t get in the way of the content you want them to read. c). Place the navigation in a drop-down link at the top of the page. d). Don’t offer a ‘Back’ button on your Home page as this will keep the page design simple while giving users the ability to navigate to another section of the mobile responsive/ mobile friendly version of your website.
- Minimise Text Entry: Entering text onto a website using a mobile device is far more difficult than when using a desktop computer or laptop keyboard. So bear in mind users don’t want to have to type as much when visiting a website on a mobile phone. Some tips in reducing the amount of text entry required include: a). Allow user to sue details already stored in their ‘My Account’ section when going through a checkout experience on the mobile version of your website. b). Ask users to use a PIN instead of a password. c). Take advantage of the mobile device’s inbuilt functionality (See next point).
- Take advantage of the inbuilt functionality of a mobile device: Mobile Phones have an advantage over Desktop & Laptop Computers – they come with lots of inbuilt functionality that makes it easier for users to perform tasks and thereby removing the need for manual steps. a). Making Calls – All mobile phones by default can make phone calls so easily allow your website users to automatically ring a number when they tap or select your phone number; very useful for your Contact or Location Finder pages. b). See an Address on a Map – give the user the option to easily select your address and have it automatically open their mobile phone’s map application. c). Find The Nearest….Mobile Users are often away from their home when they use the internet on their mobile devices, so allow the user to take advantage of their mobile phone’s inbult location-detection capability (eg GPS) to find your business’s nearest location, contact, place or event. d). Design for a touchscreen – make it easy for user to select or ‘tap’ through to important links, calls to action or key sections of your website, Making the buttons or tappable links large enough and with enough space around them.
Recommended By Google
Google states that responsive web design is its recommended mobile configuration, and even goes so far as to refer to responsive web design as the industry best practise.
This is because mobile responsive design sites have one URL and the same HTML, regardless of device, which makes it easier and more efficient for Google to crawl, index, and organize content.
Additionally, Google prefers responsive website design because content that lives on one website and one URL is much easier for users to share, interact with and link to.
One Website, Many Devices
One of the most appealing aspects of responsive website design is that a responsive website can provide a great user-experience across many devices and screen sizes. A site that works well regardless of these variables will provide a better and more consistent user-experience.
If a website has a mobile responsive design, the user will have a positive user experience when transitioning from mobile to desktop because they will view the same website on their desktop as they did on their smartphone.
Conclusion
Responsive web design is recommended by Google, it allows one website to provide a great user-experience across many devices and screen sizes, and it also makes managing your SEO (Search Engine Optimisation) strategy easier.
For more information please contact Dave Gillard at Tall Timba Consulting.