Web products should be designed for mobile first (even if no mobile version is planned). Over time, designing for the desktop web first will become a backwards way of doing things.

Why design for mobile first?

1. Growth = Opportunity
2. Constraints = Focus
3. Capabilities = Innovation

Mobile web is growing eight times faster than the desktop web. In the past using the web on a mobile phone really sucked. There was the mobile web before the iPhone and the mobile web after the iPhone.  AT&T mobile data traffic increased 50 times in 3 years.

When you move to mobile, you lose 80% of your canvas. From 1024×768 to 320×480 pixels. Compare Southwest Airlines Desktop Web site to their Mobile Web site.

In iPhone apps, the main function should be immediately apparent. -iPhone Human Interface Guidelines

There are things that make sense on mobile, don’t always make sense on desktop and vice-versa.

Why iPhone?

• Focus on places where you can create a great experience
• Design matters on the iPhone
• You must fit everything that matters onto the screen
• Make content the interaction point

Pixels-per-inch

Android and Nokia recently increased screen resolution and pixels-per-inch. Your controls are going to scale much differently on a higher pixel-per-inch screen. PPI has a big impact on design for mobile devices. One way to accommodate is to design in vectors and scale down. Create a default reference, then scale up and down.

Optimize for speed

Eliminate redirects, use HTML 5, minify your code, use CSS sprites for images. Users exposed to 200 millisecond delay on a site will fall off slowly over time. Check your site using tools, such YSlow or Web Page Analyzer.

Context

People use devices for short bursts throughout the day. While at home, waiting in line, at a stop light, at work. Users are performing small, quick, time-consuming tasks. People don’t use Web sites for long periods of time. Peak value for using web pages  is frequently between 2-3 seconds. Short bursts of activity, frequently throughout the day. Quick, bursty, check-in behavior.

Touch

Simply your interface and don’t count on hover. Interface elements must be larger. All smart phones are moving to touch-based. Tough targets, Apple recommends a minimum of 29 pixels wide by 44 pixels tall to accommodate our fat fingers. Pay attention to minimum spacing between elements. Realize slipping of the finger happens more often than slipping of the mouse cursor.

Touch gestures include tap, double tap, drag, flick, pinch, spread, press, press and tap, press and drag, rotate. Working on a way to annotate this in your wireframes.

Hover

Hover is used as a crutch to hide functionality, and they overuse it so things pop out at you left and right.

Location

Integrate user location to enhance the user experience and to simplify your interface.