Developer Guide Series: How should I divide up the world of mobiles?

Here are  a few quick recommendations for dividing up the mobile world online. You can use the FREE open source MobileESP mobile device detection code to help you optimize your web experiences.

OVERVIEW

In general, I recommend having two versions of each web page. They can offer the same news, articles, and other content, but the UIs (especially around page layouts, navigation and search) may vary considerably between them.

  • One mobile site should be optimized for iPhone, Android, WebOS and other “iPhone Tier” devices.  These devices can display rich CSS (with CSS-driven layouts, colors, buttons, input fields, etc.) and handle rich JavaScript (such as sliding drawers, thumbnail image marquees, smart CSS-coded”popoups”, etc.). Use the DetectTierIphone() method to detect these.
  • The other mobile site is for all other mobile devices, including smartphone devices with poor CSS and/or JavaScript capabilities (Nokia S60, BlackBerry, Windows Mobile) and the long list of mass market “feature phone” devices with small screens and limited browsers. (Think the Motorola RAZR, LG Dare, and anything else you can get free on a plan nowadays.) Use the DetectTierRichCss() and DetectTierOtherPhones() to detect these.

RICH CSS DEVICES

A quick note on what I call “Rich CSS devices.” If you’re really fancy, you could show the iPhone version of the page to Rich CSS devices (like BlackBerries and Nokia phones), but there are… a few issues with such a plan.

First, the Rich CSS class devices often display CSS acceptably if you are willing to make many compromises in your design. Plus, since these devices can’t reliably use JavaScript (or for some like BlackBerries, not at all), you would have to disable JavaScript features on these pages. So, unless you have a very compelling reason to go through such pain, I recommend simply offering these devices your general mobile-oriented pages.

Look at it this way: Why cripple the experience for your iPhone and Android users just so a few Nokia and BlackBerry users can see a prettier-but-crippled web page?

OPTIMIZATIONS FOR IPHONE THAT OTHER DEVICES CAN USE — OR GRACEFULLY IGNORE

As you may have heard, the iPhone has some extra smarts built into the browser. When you optimize your web site for the “iPhone Tier” of devices, the good news is that some of these features can also be used by other devices since most of them share the WebKit-based browser engine. Whatever the other devices can’t use, they will simply ignore silently and without causing error popups. Of course, I’m hoping that other devices pick up some of these unsupported features soon-ish. But in the meantime, don’t leave these out!

<HEAD> Section

  • Optimize the Viewport for Mobile Screenwidths: <meta name=”viewport” content=”width=device-width, user-scalable=no”> (Alternatively, you could turn on scaling, if you prefer. Helps ensure content is re-laid out when the user rotates touchscreen devices.)
  • Set the Favicon: <link rel=”shortcut icon” type=”image/x-icon” href=”images/favicon.ico”> (Some mobile browsers store the favicon for the bookmarks list, too. Not used by iPhone.)
  • iPhone Home Screen Icon Image: <link rel=”apple-touch-icon” href=”images/apple-touch-icon.png”> (The icon needs to be 57 x 57 pixels.)
  • Run a Web Page in Full Screen Mode: <meta name=”apple-mobile-web-app-capable” content=”yes”>
  • Content is Mobile-Optimized: <meta name=”HandheldFriendly” content=”true” /> (De fact standard, not used by iPhone. Tells search engines and mobile browsers the content is mobile friendly.)

CSS Styling

  • Input Field Virtual Keyboard Optimization: Tell the device’s virtual keyboard if the input field is for general text entry, an email address (<input type=”email” />), a telephone number (type=”number”) or a web address (type=”email”). Supported by the iPhone; other mobile browsers ignore these hints for now and default to plain text. [View article]
  • Input Field – Turn On Auto-correction and Auto-capitalization:Sometimes you want these features on and sometimes you don’t. For example, you explicitly want them off in an email input field. Or you might want them on in a site-wide search input field. Here’s how: <input type=text autocorrect=”on” autocapitalize=”on” /> (Seems to be iPhone only)
  • Input Field – Show ‘Watermark Hint’ Text: Show the label in the input field or an instructional hint such as “Enter search” which is shown only in an empty input field. Here’s how: <input type=text placeholder=”Enter search” /> (Seems to be iPhone plus some desktop browsers. You might consider a fancy JavaScript technique for clearing the field for non-iPhone devices on focus if the text in the input field matches the placeholder value.) 
  • Rounded Corners: Don’t use clumsy images to give your boxes rounded corners! Instead, use CSS. All of the iPhone Tier devices can use the “-webkit-border-radius” and related CSS hints, so please use them!
  • CSS3 No-Image Buttons: There are multiple techniques available for displaying custom buttons without using background images. They look great on the iPhone Tier device browsers.
  • iPhone Animations: Mobile CSS/JavaScript toolkits like jqTouch are great and can include cool iPhone-specific animations — which don’t work on other devices. So be sure to turn them on only for iPhone devices. (For example, by putting animations in a separate CSS file that you dynamically load only for iPhone devices. Use the DetectIphoneOrIpod() method in MobileESP.)

 

FYI: This page has been translated into Serbo-Croation: http://science.webhostinggeeks.com/mobilni-dizajn

Owner of the MobileESP project. For the latest source code downloads, visit: http://code.google.com/p/mobileesp/

Posted in Mobile Web Site Design
6 comments on “Developer Guide Series: How should I divide up the world of mobiles?
  1. Anthony Hand says:

    I’ll be putting some examples together later. It’s on my To Do list.

    In the meantime, you might check some of the other articles I wrote on the Hand Interactive site:

    http://www.hand-interactive.com/resources/

    The Java one has a good example.

  2. Antonio says:

    Hi,

    Do you have an html page example that uses the API to do a detection and redirect?

    Many thanks,
    Antonio

  3. Hi Anthony, I’m not familiar with PHP and programming in general so I’m not getting this to work.

    I have a website in flash and I want people to see the HTML version if accessed by any mobile devices.

  4. new era hats says:

    Hi Anthony, I’m not familiar with PHP and programming in general so I’m not getting this to work.

  5. Catmini says:

    Is there a way I can let the visitors of my mobile site choose to switch back to the desktop page

  6. Anthony Hand says:

    Thanks for the note, Catmini. MobileESP is optimized for one thing only: to detect whether the guest is using a mobile device. All other business logic, such as redirecting a user to a mobile-optimized version of your site (or not), is up to the web site publisher to determine and implement in a way that makes sense with your goals, your CMS’ capabilities, and so on.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>