Designing for a Mobile Audience

Design, Other One response so far

You’ve got your web design down pat. You know how users interact using their mouse and their track pad. You know that those devices are precise. You also know that they’ll spend quite a few minutes at a time. What do you know about your mobile users?

Understanding the Mobile User

Mobile users are completely different beasts than their desktop counterparts. They all have their favorite mobile browser, some of which may be unknown or independently built; but because the browser has a built in calculator or flashlight it becomes their favorite.

The average mobile user spends 8 minutes in a single session. This is shared between your site and their favorite “& friends” games, so you need to understand that your site must be front loaded with the features they’re looking for. Hiding anything important to the user behind a single click – or tap – could mean the difference between a successful interaction with the user and their attention being directed elsewhere.

Typically, when users are using mobile, they’re searching for something familiar. Their using the mobile version of your site for refreshing their memory or continuing the research they’ve already begun. A usual mobile visitor isn’t looking to do new research, or re-search for the same content they’ve already found. Coupled with the short attention span of a mobile user, your website should be what is called ‘Responsive’. Take a look at our previous post teaching the basics of responsive design if you’re not sure what that is.

Again, your goal should be to front load the parts of the site with the highest value for users.

Understanding their Device

Mobile devices aren’t as precise as their desktop counterparts. Buttons should be a minimum of 44px by 44px otherwise users will find it hard to touch. This may not seem like a big deal, but it’s amazing how many websites are almost unusable because of the buttons on the menu. 44px is the minimum by the way; people with large fingers still have issues at that size!

Flat and open are the new style; partly because it’s aesthetically beautiful but also because crowded assets will be frustrating to users trying to tap on specific areas.

Scrollbars are also unusable on mobile devices. Users are used to swiping up and down to scroll through a page; whereas scrollbars behave the opposite. Remember to give your user space to place his finger to scroll, at least a single column that’s always clear of buttons and menu items.

Just like monitors, mobile devices come in a variety of sizes and resolutions. Your design needs to fit the common smaller devices, and expand to nicely fit the larger ones. Coupled with size is performance. Leaner is better in most cases in web design and it’s only augmented more when the user transitions to mobile.

Front-loaded, lean, touchable are all important; but like all things you do, you should be aiming for the maximum impact possible with all these restrictions.


Obviously mobile sites need to be tested on mobile devices. Generally, if you test on one of each of the four major providers (Android, iOS, Windows and Blackberry) and at least one is a tablet, you should have your bases covered.

Remember though: when you’re testing a responsive site you need to understand that any changes you make to the mobile version of the site need to be included on the desktop version. This introduces a feedback loop of testing on mobile devices, adjusting, and then testing on a desktop to be sure you didn’t break anything. It can be a lot to keep track of – so keep an eye on your developer’s change log for missing changes!

Why do we do this to ourselves?

Mobile support is worth it. According to KISSmetrics, a mobile analytics company, industries including mobile in their online plan can increase their online sales at an average rate of 51%.

If a 50+% increase in online sales doesn’t grab your attention, you’re not doing enough online sales!

The Growing Importance of Mobile Website Optimization

Source: http://blog.kissmetrics.com/mobile-mania/

The following two tabs change content below.