How to create a mobile version of my Drupal 5 and 6 site?

Hi Drupalina,

You can always take a look at the resources in my delicious account http://delicious.com/tdrycker/mobile+drupal
I try to keep track of all the solutions allowing making mobile drupal.

I'll try to give you a short overview of what you can do (please other mobile developers, add where necessar :)).

There are basically 4 solutions:

1. Do nothing and let it over to the browser of the user... Indeed some browsers do a good job in displaying your desktop site... But this doesn't help you because you don't have control over your precious site
2. You can try to remove your css markup. If properly coded (e.g. no tables for layouting), you will get all your 's on one column... But this is never satisfactory, and it get's all the spirit out of your site...
3. Create a second theme and use the option of theme switching when a mobile device is detected
4. Transcoding of your site by intelligent software in order to generate an adapted version of your site

The last two are the options that are in front of you, and that both can generate very good results if done properly.

So let’s say you choose option one, then you need two things:
- device detection
- a mobile theme

For device detection, there are several solutions, for example, your php code can look at

There are also several webservices available that help you to detect the device (http://deviceatlas.com/). Problem with device detection is that daily new devices are brought to the market, and a simple agent detection, and they don't tell you anything about the device and its capabilities (screen size, video codec, …).

Next, if you managed detecting the device, you should try to switch themes. There are some modules that help you with al this:

• .mobi loader
• Mobit
• Accessibility module

You will see that these modules are not very active and only for Drupal 5... Next to the detection of devices (that is almost impossible to keep track of), there is a big complexity in transforming your content, like scaling images, enabling/disabling blocks, linearizing tables, pagination of long texts, putting menu items in user friendly select lists (or numbered items), optimisation of download size, etc … All things that are important for mobile sites… But I think if you use for example the accessibility module, you should already come far.

Then there is a second solution based upon intelligent content adaptation. This means that the regular desktop site is processed by special software in order to create a mobile version. An example is http://www.operamini.com/, where the browser sends the site to a adaptation server located elsewhere and that adapts the website.

Currently I am working on an integration of another adaptation server (http://open.siruna.org) with Drupal. The concept is that you make a regular desktop site and use Siruna (a free hosted server for non commercial usage) to convert your site. This concept is much simpler then making your own theme (after you learned the basics of the system). The system is based upon serial transformers doing something with your site.

The steps that you have to do are:
- make an account on http://composer.siruna.com
- start a new project (related to your website)
- add a filter
o this means that you can make a specific adaptation for each page you want,
o I am making a filter generator for Drupal, to make things easier in the future
- Now the difficult part (when you use it first) click on your new filter.
- You will see a preview of your mobile site in the left, and some code at the right
- You will see that your website is already very much adapted to the mobile world! And that your images are indeed smaller
- Now you can add some extra filters (contact me if you need help with them)
- e.g. to remove CSS attributes and specific < div > blocks

- http://open.siruna.org/documentation/sitemap-api for help
- use firebug to test what changes you have to make to let the site fit in the emulator

If you want to test the result on real devices, you can use the test-url that is given to you in the composer.
This sounds very complex, but actually ones you get the principle right, you can very quickly create your mobile site

Concerning the domain name, there are different options.
- choose a .mobi domain and use .mobi loader to switch the team if .mobi is detected. Just direct your .mobi domain to the same site as your regular domain
- choose a m. mobile. or .mobi domain and direct them to the siruna proxy (e.g. setting a cname towards the test url you get)

You see, currently going mobile with drupal is not yet a piece of cake :) It needs time and devotion....
If you need some more help, just contact me, I'll be happy to guide you through the Siruna basic configuration

I hope someone else can give a more elaborate overview on the creation of a own mobile theme!

Tom

Hi,
I am new to this world of Mobile Internet.
I am using siruna platform. I have downloaded the siruna platform. I created the project as mentioned in documents. The thing i want to know is how to use filter for different web pages. Right n ow my filter is being used for default home page.
How can i use for multiple web pages. Please explain me briefly with example. I am a slow learner. if possible explain with snapshots

i will be waiting for your reply