Eight mobile website design and optimisation tips that will keep your site at the forefront no matter what your consumer is using.
Australia is rapidly going mobile, and if you haven’t already built a mobile version of your website then your competition will gladly take care of this part for you – by taking your mobile visitors away from you.
Here’s a great example of how a ‘mobile makeover’ can drastically change the experience for your mobile visitors. Just take a look at this site we did recently for a drainage expert in Sydney:
Before and after mobile optimization. The difference is obvious.
We’re going to look at some simple guidelines to ensure that your website’s mobile experience is designed to please and convert:
1. Keep your mobile site simple, consistent and easily-navigable
Remember, mobile screens are much smaller to navigate than desktop and laptop screens so only place the essential information needed to make the user experience pleasant and clear. Too much text and graphics can be off-putting and frustrating to a viewer using a small screen and you risk them logging out.
Below are a few things to keep in mind:
- Prioritise the content that users need most and avoid overloading your front page with too much content and information.
- Ensure your landing page is clean, clear and concise.
- Visitors can always click through buttons to access more information on a secondary page.
- Keep important features and structure consistent across the entire site (menu options, back-to-home screen, etc.)
- Lead your potential customer to the heart of the information, making a clear path to the action you want visitors to complete (Call Us, buy now, RSVP, download, submit, visit, etc.)
- Use as few form fields as possible (no more than six) to keep the page neat and streamlined.
- If your site is on the complex side, always include a search bar for easy navigation.
2. Provide an easy scroll experience
Do not set up your user experience to be a ‘pinch and zoom’ situation. You will lose most customers with all of the hassle this creates, especially if you are asking them to fill out a survey or extended form field.
Use checkable boxes and scrolling menu bars to simplify the data entry process. By reducing the content on your page, you have the option to make the text size a little bigger (i.e. legible on a small screen). This makes the essential information on the page accessible in one easy vertical scroll.
Also, make sure the action buttons are a decent size and have enough space in between each for easy navigation with fingers. Always keep in mind you are making a page where visitors will be using their fingers instead of a mouse.
This is a good example of the clear organization of categories, consistent menu bar at the bottom of the page and generous space between buttons with larger, legible font.
3. Keep the font size legible and large
The goal should be to draw the average viewer in with easily-legible text which eliminates the need to zoom in on the screen. You don’t want your viewer squinting to read text or unable to discern the letters so we suggest using at least a 14 point font size (this post is written in 14 point font if you’re unsure). Keep the fonts structured and less stylised. Here are some beautiful, more design savvy fonts that are legible and will look fantastic.
4. Talk in sound bites
Keep your text short, sweet and to the point. Make it catchy. Create memorable phrases that your audience can easily tweet out and repost. You can/should also include a short testimonial from a satisfied customer. Your mobile landing page is where you should consider using the following: Titles, Slogans (USP), Mission statements, Short descriptive phrases, Action buttons, Scroll menus (keep your content in lists), Bullet points (instead of paragraphs)
Here are a few examples:
- “Georgios’s is the best pizza in town!” – customer testimonial
- Enter to win a year’s supply of Beer! – new store contest
- Service is what we do – corporate slogan
- Sign up for discounts today! -local business deals
- Save 20% on your next meal! -download coupon for a restaurant
- “Keeping you one step ahead of the rest” – shoe company slogan
- Want clear and bright skin? Get 15% off our most popular package. -skin care company
- BUY NOW, REGISTER, RSVP, ENTER, DOWNLOAD, etc.
- Sleek and Stylish. Be on every turn of the society pages. – luxury brand designer
- “To bring inspiration and innovation to every athlete in the world. If you have a body, you are an athlete.” – Nike’s mission statement
Notice the short and punchy description lines, clear action buttons, clean backgrounds and complimentary photos and text colour in these examples.
5. Let the imagery speak
In a visually-tight space like mobile, image choice is a great way to quickly sum up your message. The right image can speak volumes, eliciting a quick connection from your viewer that might not be possible with only text on the smaller mobile screens. When choosing imagery, here are a few things to remember:
Select an image that will draw your audience in and incorporate a matching seamless background. Another option is to use a non-distracting photo or abstract image as the background of your page. Avoid choosing harsh and clashing colours for your image or background. Neon yellow and other similar colours are hard to look at on screen and do not make your page pleasant to view. Do not let the background visually compete with the text, so make sure the text colour is easily visible on the background and does not get lost in a pattern.
Always remember to size your photos for the web and compress them so your viewers will enjoy faster image loading time on the site. Keep a complementary color palette in mind when creating your page. It is important to use colors that are complementary to the imagery you have chosen, creating a visual experience that is pleasing to the eye and not too distracting.
Here are a few more examples of complimentary photo, text and background usage. Choosing an image that picks up a color in the logo is always a nice touch.
6. Make sure it scales
It is a shame to have a beautiful page that does not scale to all of the different mobile devices out there. There are over 500 different screen sizes between Android, iPhone, windows, blackberry and tablets, making it a challenge to have a truly mobile optimised device ubiquitous landing page.
Try to follow these three guidelines for scalability:
1. Make sure your page scales to both landscape and portrait views.
2. Avoid coding your mobile site in Flash or using Flash video if you can because it does not load on all devices (mainly iPad and iPhone).
3. We recommend you create your mobile site in HTML 5 because it solves many problems of flash on mobile.
Finally, Google announced last September that websites that are optimized for mobile will factor into ad quality. So if you want to keep your Quality Score up and your PPC costs down so you can continue to run a smooth Adwords campaign, you should probably start thinking about making some well designed mobile landing pages immediately!
FYI – When we set up mobile strategies for our customers we integrate great landing pages with Google ads that are tied in to increase click through rates, this is a MUST.
7. Set up your own analytics
It is a good idea to set up a plan for tracking your analytics in advance. The biggest reason why is that two thirds of mobile traffic does not allow third-party cookies which can make it really difficult to track the effectiveness of your mobile advertisement performance.
For example, iPad and iPhone do not allow cookies unless you turn them on manually. And you can’t assume that consumers will turn them on.
The solution to this is to use analytics software that uses 1st party cookies to track visitors. Ultimately, you should track conversions and conduct A/B or multivariate testing to improve your site’s goal performance. Just last week a simple call to action button was 3 times LESS effective that a click to call button on a clients mobile site we’re working on, so it pays to test.
8. Make interface actions easy
Remember, your visitors are viewing your page on a phone and there are plenty of easy action options to provide for them.
Consumers search locally all the time, so make it easy for them to find you and connect. When placing icons and action buttons, make sure that universally-recognised symbols are used so your visitors can easily understand what to do and where to do it on your page.
Consider including:
Click to Call
Maps
Tumblr
Form Field Submissions
1 Stop Checkout
Visit a URL
Play a Video (becoming more and more important for SEO too now)
This is a good example of mobile friendly, universal menu and content buttons. Time To Get Moving!
The bottom line is that advertisers and businesses must pay attention to consumer behaviour because consumers will be expecting a consistent and dynamic presence on all mobile devices. Mobile is quickly becoming to consumers what the web used to be; an intent-driven space.
Any searches or ads clicked through on mobile will most likely be acted on within 2-3 hours, if not at the moment of engagement. Currently, mobile ad space is 10-25% cheaper than on the web, so now is the time to buy into mobile before the prices rise with the standardisation and optimisation of mobile practices. With these standards in place, mobile is on course to become a 8.6 billion dollar market by 2015.
In order for businesses to achieve their highest potential and profit in mobile, they need a seamless mobile strategy that includes banner ad placement, a correlating mobile landing page and a mobile optimised site.
Many times a mobile landing page will route mobile viewers to the advertised businesses’ unoptimised website where the potential customer is lost (known as ‘bounce rate’) due to jumbled, small and confusing content. In some cases, the page might even appear blank if it was created on a platform that does not work well on mobile devices.
The message is clear: If your business does not have a mobile strategy in place, you need to stop what you are doing and optimise for mobile so you can drop in at full force and ride the mobile wave all the way to the end.
Finally think about this:
Right now your customers are on Facebook, they’e on twitter and they’re on their mobiles.
Search is going social, if you’re still trying to win the customer through SEO you’re living in the past, now you have to target people where they are, mobiles.
To busy to do this? want an expert to do it for you? then check out our services here.