Last updated October 27, 2010. Created by teemule on May 10, 2009.
Edited by joachim, bertboerland, LeeHunter. Log in to edit this page.
Mobile Plugin provides a mobile optimized view to a Drupal site.
Features
- Automatic device detection
- Domain based mobile site distinction
- A block for user to select mobile or full desktop site
- A distinct theme for the mobile site (documented theme provided)
- Separate block administration for the mobile site
- Filtering out system or module CSS and JS if not specifically allowed
- Suggesting word breaks to long words
- Scaling images smaller or setting smaller view size to external images
- Replacing embedded youtube videos with thumbnails to m.youtube
- Separate configurable mobile groups based on device properties
- Testing for selected roles or from the administration
- Hooks and API to extend or support in other modules
Installation
You will need a mobile optimized Drupal theme to properly use this module. Install and enable a simple mobile theme mobile_garland.
- Download the latest stable Mobile Plugin -release for your Drupal branch.
- Extract the contents to your sites/all/modules -folder.
- Enable the module and optimizations in Administer > Site building > Modules
- Enable the module for your test roles in Administer > User management > Permissions
After testing enable the module for all roles in Administer > User management > Permissions
To enable users to override automatic device detection add a full/mobile switch -block to a desired region on your site in Administer > Site building > Blocks
Configuration
The module configuration can be found in Administer > Site building > Mobile Plugin
Domain based mobile version
You can use m.example.com or similar solution to separate your mobile version from the full version. All desired domains must be configured to point to your drupal installation. Type in your m.example.com and normal www.example.com to the settings form.
Automatic device detection
It is strongly recommended to use automatic device detection. Domain separation and device detection works together nicely. The module includes a simple and effective device detection code. However the module automatically uses exact device detection by WURFL module if it is installed and enabled.
Alerts
Page caching must be off to support multiple themes! Aggregating and compressing css is a good idea to speed up your site for mobile bandwidths.
While being an install and run solution to mobile optimize a drupal site the module is fully configurable. Using rules the module can be configured to assign any number of device groups based on WURFL properties. These groups have individual theme and optimization configurations.
Device groups
Here you can add, edit and test device groups for different mobile devices. Each group can use one of the installed themes and do desired optimizations only. You may filter out css and js added by other modules. Selecting less or different blocks to use in the mobile version of the site is a powerful tool. The group test in browser can be end from this same view or by closing the browser session.
Detection rules
You may edit and add rules that inspect the User-Agent header or the 'is_wireless_device' detection status. A matching rule with the lightest weight will determine the assigned group.
When using WURFL module for device detection the rules may inspect also WURFL ID or WURFL capability names. Names are listed in the http://wurfl.sourceforge.net documentation.
Extending
Themes
We have created a simple theme mobile_garland that is easy to modify and has it’s own documentation. Look at this theme to learn more about creating and modifying a mobile theme.
Modules
hook_mobileplugin_setup(&$group_setup) : $form-array
This hook provides a way to add more options to Hello Mobile group settings. Returns a drupal form-api array to merge with the full form. It is recommended to use a fieldset unique for the extending module. The $group_setup will have the stored values keyed with the option field names. Keys for any unstored values will be missing.
hook_mobileplugin_optimize_dom(&$group_setup, &$dom)
This hook is invoked to modify node fields as html-dom before viewing the node. This is a place to do general content optimizations. The optimized values will be cached. The $dom is an object of http://simplehtmldom.sourceforge.net/
It is straight forward to make your site serve mobile compatible content. Designing mobile user experience is more complicated and device depended issue. For example horizontal screen, touch screen or qwerty-keyboard have a big impact to the user interface. Any module may adjust itself using the information provided and configured into Mobile Plugin.
if (module_exists('mobileplugin') && mobileplugin_is_mobile())
Using module.info to make dependency is an easy way to go. To have less installation requirements you should wrap your mobile optimizations inside this if-clause.
mobileplugin_get_group_setup()
Gets the current active group setup. It is very handy to use the hook_mobileplugin_setup to create group level configuration and get the field values with this function.