>Before you start…

• Mobile App vs Mobile site: A mobile site should be con­sid­ered manda­tory, and an app is optional. With a site opti­mized for mobile, it’s not absolutely nec­es­sary to have an app, but it is some­thing you could consider.
• Famil­iar­ize your­self with the var­i­ous hard­ware and soft­ware available.

>Con­sider:

• Screen size and res­o­lu­tion: your site should work on the widest range of pos­si­ble mobile devices. The iPhone 3 for exam­ple has a 320 x 480 screen res­o­lu­tion, and the iPhone 4 has a 640 x 960 res­o­lu­tion. Many of these screens can com­fort­ably dis­play a stan­dard web­site, but you want to make it as easy as pos­si­ble for users to navigate.
• Dif­fer­ent devices and browsers: Care needs to be taken to match your mobile design to the capa­bil­i­ties of your audience’s devices: a site is only ever as good as the browser that dis­plays it.

These dif­fer­ent fea­tures and screen sizes will ulti­mately affect how you design your mobile site.

Mobile web­site design has to be approached in a dif­fer­ent way to desk­top sites as it’s far more restric­tive. The goal of a mobile site is to allow user to find and be able to read what they’re look­ing for. These tips focus on opti­miz­ing the user’s expe­ri­ence on a mobile site, ensur­ing the site remains as effec­tive and use­ful as your stan­dard site.  If it’s dif­fi­cult for mobile read­ers to make their way around your site, they sim­ply won’t.

>Tips for Mobile Usability

1. Mobile Means Mobile, There­fore Con­text is Key

Peo­ple using their mobile device tend to be on the move, need­ing imme­di­ate infor­ma­tion rel­e­vant to their sit­u­a­tion or loca­tion. You must deliver a highly con­tex­tual, per­son­al­ized mobile expe­ri­ence, based on cus­tomers’ past behav­ior and cur­rent envi­ron­ment, which is too con­ve­nient for them to pass up. Try to think about the infor­ma­tion that a mobile user may be look­ing for such as loca­tion, con­tact info, prices, in-store avail­abil­ity etc. Make this infor­ma­tion a pri­or­ity on your mobile site, read­ily acces­si­ble with min­i­mal nav­i­ga­tion required.

2. Get to know your users

Con­duct a few usabil­ity tests or voice of cus­tomer sur­veys on your stan­dard site to dis­cover the most crit­i­cal pieces of infor­ma­tion that users look for when com­ing to your site, and then make sure your mobile site deliv­ers that. Talk to your users to find out where they might be and what they might be doing if they were to inter­act with you on the go.

3. Sim­plify

A mobile site should, in most cases, be a sim­pler ver­sion of your desk­top site, with larger but­tons, reduced graph­ics, and an eas­ier nav­i­ga­tion sys­tem. In many cases, a mobile site home page will be more or less sim­ply a menu. Below is an exam­ple of a mobile opti­mized site, and how the cor­re­spond­ing stan­dard site looks on an iPhone screen.

4. Elim­i­nate Hor­i­zon­tal Scrolling

Screen width is an impor­tant fac­tor for opti­mal usabil­ity and mobile site attrac­tive­ness. Design­ing for mobile devices requires think­ing in por­trait mode. Hav­ing to scroll both ver­ti­cally and hor­i­zon­tally is frus­trat­ing for users, there­fore sin­gle col­umn design lay­outs with text that’s left jus­ti­fied work best.

5. Opti­mize Your Navigation

Design your mobile site so that your users can move quickly and freely through­out it. When it comes to site nav­i­ga­tion, less is def­i­nitely more.

• Mul­ti­ple drop-down options and lev­els takes up valu­able screen space, and can over­load the user with a lot of infor­ma­tion in a small space.
• For­get about per­sis­tent pri­mary and sec­ondary nav­i­ga­tion schemes (the same nav­i­ga­tion repeated on every page). Bread­crumb nav­i­ga­tion works best on mobile.
• Remem­ber that it’s impos­si­ble to “hover over” an ele­ment when a user is using their fin­ger – they’re either click­ing it or not.

6. Min­i­mize the click path to achieve a desired action

• Pri­or­i­tize links by pop­u­lar­ity, ensur­ing that the most sought-after con­tent appears first.
• Limit links to ten per page, and don’t crowd links together where it would be easy to click on the wrong one.
• Play safe and go for micro-conversions – tasks that are easy to per­form from a mobile device and will estab­lish a solid first con­tact with your audience.
• Colour plays a large role in mobile web­sites usabil­ity. It’s more visu­ally appeal­ing, and can help to make CTAs stand out.
• Make click­able but­tons larger that you would on a stan­dard site to take into account the fact that many mobile devices are touch screen (e.g., Apple’s mobile guide­lines sug­gest a min­i­mum tar­get height of 44px).

7. Mobile Con­tent is not Desk­top Content

The user’s loca­tion and con­text should be the pri­mary dri­ver for your unique con­tent and design. Think away from “above and below the fold”. Con­tent needs to be sim­ple, short, focused, and as much as pos­si­ble, within the screen. Users should eas­ily be able to scan the screen for infor­ma­tion that’s rel­e­vant to them.

• Con­tent is still king, even on a mobile device, how­ever limit your con­tent cat­e­gories to avoid user dis­ori­en­ta­tion as they nav­i­gate deeper into the site.
• Include as much con­tent on your mobile site from your desk­top site as makes sense. If the user will find it use­ful for their sit­u­a­tion, keep it. If not, dis­card it.
• Con­sider the need for scrolling and how this affects the way your con­tent is viewed.
• Think about band­width con­straints –use images only to get your mes­sage across.
• Even with band­width con­straints, how­ever, don’t stop using richer forms of con­tent such as videos and audio if they are an inte­gral part of your mes­sag­ing, just keep usage to a min­i­mum, con­sider the size of the file, and don’t set them to auto­mat­i­cally play or download.
• Avoid using Flash as it is not sup­ported on the iPhone, iPad or iPod.

8. If Using Redi­rects Make Sure They Work Properly

• Set up your server to auto­mat­i­cally serve the appro­pri­ate ver­sion from a sin­gle URL. E.g. mobile ver­sion for mobile users, (m.yoursitename.com), vs. desk­top ver­sion (yoursitename.com).
• If peo­ple have fol­lowed a link to your mobile site, make sure you take them to that link. Don’t send all ini­tial requests from a mobile device to the site’s mobile ver­sion homepage.
• Give your mobile vis­i­tors the option of vis­it­ing the stan­dard site (e.g. through a link in the footer).
• If you do not have auto­matic redi­rects, make sure vis­i­tors know that a mobile-friendly ver­sion of your site is avail­able.

9. Cre­ate Mobile-Friendly Forms

Forms are prob­a­bly a crit­i­cal part of your desk­top web­site, and chances are users will encounter a form on your mobile site as well.

• Avoid free text entry if pos­si­ble – allow data selec­tion via a menu.
• Labels should be posi­tioned above the form field so that the user can still see the label when the mobile device zooms in on the field.
• Set the input type to match what the user will be typ­ing in:

1.         input type=”url”> brings up a key­board includ­ing “.”, “/”, and “.com” keys
2.         input type=”email”> brings up a key­board includ­ing “.” and “@” keys
3.         input type=”number”> brings up a numer­i­cal keyboard
4.         If you’re cap­tur­ing the user’s loca­tion, give them the choice to set it using the GPS.
5.         If you have a cal­en­dar, don’t make users scroll through months using small arrow but­tons. Instead, use a con­tin­u­ously scrolling cal­en­dar or a com­pound menu.

10. Test­ing Your Mobile Website

With the grow­ing frag­men­ta­tion of mobile plat­forms, test­ing how your mobile site ren­ders in var­i­ous for­mats and res­o­lu­tions is crit­i­cal. The devel­op­ment of effec­tive usabil­ity within your mobile web­site will require you test early on in the design process.

• Test every­thing and test often.
• Test on mul­ti­ple devices, mul­ti­ple plat­forms, and mul­ti­ple browsers.
• Get feed­back from real peo­ple to ensure that the widest pos­si­ble audi­ence can access and use your site.
• Test with Mobile Device Emu­la­tors e.g.
• Opera Mobile Emulator
• Black­Berry Simulator
• Android Soft­ware Devel­op­ment Kit
• iOS Soft­ware Devel­op­ment Kit

Biography / Resume : Ian is the Manager of User Experience & Research at Mediative, helping clients optimize the online experience for their potential customers. He manages several key accounts and leads the company’s ongoing research projects to better understand search, buyer behaviour, mobile, and user experience. With a background in neuroscience, web design and eye tracking, Ian brings an invaluable knowledge of human behaviour and human-computer interaction to his position at Mediative. He plays a key role in many of the company’s SEO projects and lends his expertise to the strategy development of both PPC and display advertising projects. Ultimately, Ian believes that success in digital marketing comes down to two things: being found and being good. So he works with clients to make they tick both boxes and establish a successful and lasting presence online.