When it comes to mobile web design, how do you distill the design but still give an engaging experience that drives a sale or pushes people to get in touch with you via your contact forms?
This is a question that we ask daily and are constantly designing new ways to deliver content quickly, without removing the experience a person has with your brand, products and services.
Below, here are 3 of our latest little tricks to give a bit of inspiration and show how we’ve kept the essence of the content in-tact. In the example below, we’re using our latest mobile web design for MIAC Analytics – miacanalytics.com
01. Turn navigation menus into hamburgers
The hamburger menu. The jury is still out on whether or not people realise that those 3 little lines (the hamburger menu) denote a navigation menu. Our faith is that the more [tooltip type=”link” link=”https://www.google.co.uk/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&cad=rja&uact=8&ved=0CD0QFjAB&url=http%3A%2F%2Fdictionary.reference.com%2Fbrowse%2Fubiquitous&ei=fDy8VMCfK8r3UNaPgtAO&usg=AFQjCNE1DSxu8X1TvQq7rvVG1fTj6b35aA&bvm=bv.83829542,d.d24″ tooltip=”present, appearing, or found everywhere.” style=”top” ]ubiquitous[/tooltip] it becomes, the more people will be familiar with it and recognise it as a menu.
Anyway, it serves a great little device for reducing down the navigation menu, which is usually a strip or list of links in the header of a site to help people navigate there way around.
02. Make sure your content is as light as a feather (or even lighter)
There’s no room for over weight content on the mobile web. We need to make sure site’s are loading as fast as possible – people will bounce away if your site doesn’t load within 3 seconds flat. So swap out any heavy goods (e.g. video) for mobile friendly lighter loads.
The desktop version of MIAC has a lovely motion graphic of birds forming the letter M. As you can imagine, the animation video file for this is pretty big, so for our mobile friends, we created a graphic alternative – still creating the visual concept but not losing out by waiting for the site to load video.
Lovely animation on desktop
Replacement image for mobile
03. Make more of your bottom
When and if people scroll to the bottom of your site, don’t leave them hanging. A nice, simple trick is to ensure you offer up alternative navigation. In this example, we gave visitors a list of site links at the bottom of the site, as opposed to the hamburger menu in the header of the site.
This little trick comes in handy for a couple of reasons:
1. If the visitor hasn’t found what they want, they’re given some really obvious navigation to use.
2. If visitors don’t want to scroll all the way to the top of the site to get back to navigation.
The mobile web is still a relatively new landscape and the bottom line is – it can’t be ignored. Over 50% of visitors (on average) are using your website on mobile.
So, it’s no longer good enough to ensure your website is just responsive (meaning the site responds in size to the device). The order of the content in your site and the way it works for site visitors needs strong consideration to ensure an engaging experience on mobile.
I hope the mobile web design tricks in this post have been helpful. If you’d like to discuss, catch me on Twitter or email andy[at]factorypattern.co.uk