What's a Smartphone? (for Web Designers)

by Luke Wroblewski February 7, 2011

While many sources define a smartphone as a mobile device with an operating system that allows people to install and run applications, this definition doesn't do much to help you as a Web designer other than saying you can create a native application for such a device.

Something more useful to Web designers would cover the device's context of use, primary input method, average screen size, and Web browsing capabilities. Sounds like a mouthful but in this model a "smartphone":

  • Is palm/pocket sized: it needs to be portable so it can be used everywhere and anytime
  • Primarily operated through a touch-based user interface: hardware buttons and a physical keyboard can be present but are optional.
  • Has an average screen size of 3 to 6 inches: anything smaller makes touch-based interactions hard; anything much bigger makes it hard to transport everywhere easily.
  • Features a Web-browser with decent CSS (floats!) and Javascript support: ideally CSS3 and HTML5
  • Is used with a data plan (not just voice!)

This definition is helpful because it tells us how to design our interactions (touch/NUI), the context we are designing for, and a good amount about the capabilities we have at our disposal. It also allows us to organize the myriad tablets, phones, and mobile computers out there into specific device classes that we can design appropriate Web sites for. For instance, we could apply a similar structure to better define "feature phones" as:

  • Is palm/pocket sized
  • Primarily operated through trackpad/trackball/joystick physical controls and/or a keypad or keyboard
  • Has an average screen size of 2 to 3 inches
  • Features a Web-browser without decent CSS and Javascript support
  • More likely to be used without a data plan

With these definitions we can better classify devices based on the factors that influence Web design on them. Blackberry devices without a touch-based UI and with poor Javascript & CSS support? They qualify as "feature phones". Because of smaller screens, trackpads/trackballs, and lack of good CSS and Javascript support, Web sites for these devices would be designed and build differently than those for the latest volley of Android phones from Google. They qualify as "smartphones" because of touch UIs, larger screens, and an advanced WebKit Web browser. These factors (primary input method, average screen size, and Web browsing capabilities) can really impact design solutions.

So if these definitions are so useful for grouping devices into classes we can design Web experiences for -what's the problem? Smartphones & feature phones are already loaded terms in the industry. Re-appropriating them to help Web designers isn't going to work. So to that end, anyone have terms they've been using for a similar set of devices classifications? Please send them over!