Skip to Content

You are here

Creating your Drupal site mobile compatible

First thing you should do is to install few addons to the Firefox browser which are as follows :
A. User Agent Switcher
B. Modify Headers

Now, we need to add a x-wap-profile HTTP Header. Most intelligent mobile Web sites look for this header to identify a mobile device. To my knowledge, only the iPhone doesn’t pass this HTTP Header. You can search around the Web to find UA Profile URLs (type “UAProf URL List” into a search engine).

Here’s the UA Profile URL for Nokia’s X6:
http://nds1.nds.nokia.com/uaprof/NokiaX6-00.1r100-3G.xml

1. In Firefox, click on the Tools > Modify Headers. The Modify Headers dialog appears
2. In the drop-down list at the top-left of the screen, choose Add
3. In the first text box, type x-6 -profile
4. In the second box, paste in the UA Profile URL for the Nokia x6
5. Comment you can write or its optional.
6. click on add button and headers appear in green icon alongside it.

To test the different user agent like Nokia - x6 use following procedure :
1. Tools > Default user agent > Edit user agent
2. select New > New user agent
3. In Description put the user agent name in our case Nokia x6
4. in User agent textbox you have to enter the exact information of user agent
For nokia x6 its as follows :
Mozilla/5.0 (SymbianOS/9.4; Series60/5.0 NokiaX6-00/20.7.007; Profile/MIDP-2.1 Configuration/CLDC-1.1 ) AppleWebKit/525 (KHTML, like Gecko) Version/3.0 BrowserNG/7.2.5.2 3gpp-gba

Note: To get useragent information of Nokia you can refer the link http://api.handsetdetection.com/properties/vendormodel/Nokia
select your model from the list and get the detailed information about the user agent and the user agent profile URL.
the useragent profile can be found as option - uaprof / uaprof2 /uaprof3. you can just do ctrl+f to find the one of those options.
Most manufacturers change the user agent for a particular device model over the course of its life.

Now your firefox is ready to test your moblie site.

Lets setup the Nokia mobile theme using Different modules :
1. download the modules - http://drupal.org/project/mobileplugin & http://drupal.org/project/mobile_tools
2. download the theme - http://drupal.org/project/nokia_mobile
3. install the above two in sites/all/modules and sites/all/themes folder respectively
4. Enable the nokia_mobile theme DO NOT SET AS DEFAULT.
5. Use the following configurations for nokia phones :
# Go to Site Building > Mobile Plugin > Device groups
# Click on "Edit group" for the group "mobile"
* Set the field Theme to nokia_mobile
* SAVE
# Click on "add new group"
* Set the field Name to nokia low-end (IT IS case sensitive)
* Set the field Theme to nokia_mobile
* SAVE
# Click on "add new group"
* Set the field Name to nokia high-end (IT IS case sensitive)
* Set the field Theme to nokia_mobile
* SAVE

# Click on "add new group"
* Set the field Name to nokia high-end with touch (IT IS case sensitive)
* Set the field Theme to nokia_mobile
* SAVE

# Click on "Filter group css and js" for the "nokia low-end" group
* in the text area for Allow JS files for group nokia low-end: enter the value sites/all/themes/nokia_mobile/scripts/low/
* SAVE

# Click on "Filter group css and js" for the "nokia high-end" group
* in the text area for Allow JS files for group nokia high-end: enter the value sites/all/themes/nokia_mobile/scripts/high/
* SAVE
# Click on "Filter group css and js" for the "nokia high-end with touch" group
* in the text area for Allow JS files for group nokia high-end with touch: enter the value sites/all/themes/nokia_mobile/scripts/high/ (yes, this is the same as the high-end without touch)
* SAVE

# Go to Detection rules
# Edit the last detection rule, the one that sets the device to the group "mobile". Change the group to "nokia low-end"
# Go to Site building > Themes > Configure and choose nokia_mobile. At the bottom of the page make sure you have checked "Detect devices based on Nokia rules (default)." and pick a color for the buttons, "Blue" if you go with the standard Drupal color,
for example. Click "Save configuration".

#Finally go to Administer > Site configuration > mobile-tools
* Click on the theme switching tab and select the option "Switch theme for a mobile device".
* select the nokia_mobile theme from the first dropdown
* Save

Logout of admin and test it with different user agent using firefox tools > default user agent / nokia x6
Theme will change

Comments

Really good, thanks