Mobile Design Best Practices

Want to improve the user experience on your website? Designing for mobile can be tough, but by following a few simple guidelines, you can greatly improve the functionality of your site, and the ability for users to engage with it through ActOn.

1. Link to Checkout Page directly, not to intermediary page (★★★★★)

The link you provide should bring the user to where they can complete the action, rather than an intermediary page such as a checkout page or more info page. This will greatly improve the experience for the user, since they will be able to quickly and simply take the action.

2. Use big, easy-to-press buttons in your UI (★★★★★)

It can be hard to press small buttons on a mobile device, especially if the layout of the page is cluttered.

Other potential enhancements include:

  • Highlight call to action button
  • Link call to action button to bottom of screen on mobile

3. Scroll vertically ↨, not horizontally ↔ (★★★★)

The user's ability to quickly and easily read a page is greatly impacted when they have to scroll left/right as well as up/down. Using a flick of your finger to move the page up or down is simple and intuitive, but becomes combersome when you add a second direction. By having your columns collapse into a vertical stack, you simplify things for the reader.

  • Fix width at device width
  • Disable scaling—if your UI has items that are too small to see without zooming, they need to be redesigned!

4. Collapse columns to stack vertically for scrolling (★★★★)

5. NO FLASH—Use HTML5 (critical)

It is critical that no necessary content on your site uses Flash, as it is not accessible from iOS devices (iPhone, iPad, iPod Touch).

Mobile devices ship with the latest browser versions, and can handle all the newest features in HTML5, which make the use of Flash unnecessary. For a personal explanation from Steve Jobs, see Thoughts on Flash.

6. Text should be clear, and large enough to be legible. (★★★★)

  • <p> tags should take full width
  • Min 16pt text size for body text
  • Sans-serif with high-contrast to background

7. Collapse menu, no need for full-size header (★★★)

Remember, visual space is very limited on a mobile device, so unnecessary elements must be removed or collapsed into smaller versions.

On the left is a header and navigation that are being displayed on a smaller screen, without any adjustment for a mobile device. By doing this, the actual content of the page (you know, the stuff the user is there for), doesn't start until 1/3 of the way down, wasting valuable visual real estate.

8. Remember: No onHover event, only taps! (★★★)

If there is content in your site that currently requires a user to hover to view, such as a menu or slideshow, remember that there is no mouse pointer on a mobile device. Make sure your user still has access to that content if it is necessary (and if it's not necessary, consider removing it from your mobile page altogether).

9. Auto-populate any forms from $_POST[] array (★★)

10. Want your page to load faster? Compress CSS, JavaScript, and avoid unnecessary file calls. (★★)

a:link{display:block;float:left;color:#blue;padding:4px 18px 4px 12px}
shoutOut = function(name){
		alert('Hello '+name+'!');
shoutOut=function(n){if(name!='Tammy')alert('Hello '+name+'!');}                  

Minifying (compressing) the CSS on the left reduces it's size from 142 bytes to 70 bytes, an improvement of over 50%. The JavaScript file on the left is 95 bytes, compared to the compressed version at 64, an improvement of 33%. By doing this to components that are commonly loaded throughout your site, such as CSS, Javascript, images, and even HTML markup, you can greatly improve your loading speeds, especially on a mobile network.

Less time waiting = better user experience