Enabling Drupal website for access by mobile devices

Rich content of a Drupal website looks good on a large screen, but is, at best, difficult to read and use on a small screen of a smart phone. This article will describe a way to customize a drupal website so that it works well on both big and small screens.  Following a list of desired functionality:

1. Ability to detect that a website is being accessed by a mobile device
2. Switch to a "mobile" theme when access by mobile device is detected
3. Administrative/developer tools to specify which content should be displayed and how when site is accessed by a mobile device. 

Two modules are required to achieve the desired functionality:  Mobile_tools and Browscap.  In addition, a theme is required, we will choose Nokia_mobile.  Browscap provides the first functionality; Mobile_tools provides the second functionality; and Nokia_mobile provides the mobile theme and the third functionality. Install modules and themes using the normal drupal process, and enable them.  Next go to Admin -> Site Configuration to configure the two modules:  

1. Browscap has a single checkbox for "Monitor Browsers."  It will monitor all user agents that visit the site
2. Mobile_tools configuration.
   1. General Configuration.  There are two options: Theme switching without redirection, and Redirection.  In both cases, this module detects if the request is coming from a mobile site.  This configuration is to setup the action after a mobile user has been detected.
      • In the first option, the theme of the website is changed to a specified mobile theme.  There is no redirection.
      • In the second option, all mobile users will be redirected to a subdomain or domain that specifically hosts mobile pages of your website.  For example, if you want all your mobile users to use: m.mysite.com, then this option will redirect all mobile users that come to mysite.com to m.mysite.com
   2. Extra.  In this section of configuration specify the landing page for a mobile user.  If your desktop website has a splashy frontpage with graphics, then you should specify an alternate page for the mobile user.  Another item that should be configured is the number of posts; by default it is set to 10, you may want to limit to 2.

In order to configure Nokia Mobile go to Admin -> Site Building -> Themes:

1. On the Themes page, Enable Nokia_Mobile theme.  Save the configuration
2. Click on the "Configure" link adjacent to the "Nokia_Mobile" theme.  Make sure only basic items are checked on like:  Logo, Search Box and Primary Links.  If the desktop logo is large, consider uploading a new smaller logo for mobile sites
3. Next go to Admin -> Site Building -> Blocks.  Click on Nokia_Mobile
   1. Choose only the bare minimum number of essential blocks to display
   2. In the Region column choose "Content" for all the essential blocks
   3. In the Region column choose "none" for all the non-essential blocks
   4. Change the weights to adjust the sequence of display
   5. For further refinements to display setting of a block, click on the "configure" link
   6. Finally Save Blocks configuration
4. Test the theme settings from a mobile device or you may test from a desktop using Firefox browser with Agent User Switcher extension.  Pay close attention to the primary menu, logo size, and content, to ensure good usability