Since more and more internet traffic is coming from mobile devices, it is now time to turn each of my Drupal 6 sites into a mobile site. The complicating factor here is that I use the Boost module to make my sites to load faster. Searching the internet, I found lots of article about the Mobile Tools module, mobile themes and the Domain Access module. I also found articles about the main “duplicate content” SEO problems with mobile sites and the solution with canonical URLs.
However, what I did not find was an ultimate tutorial on how to make it all work together.
And there is a bonus. Many of my Drupal sites are part of a multi-site set-up. They share a common Drupal installation but have each their own database. The mobile site solution I have created here works also in a multi-site setting. How do I know? Test this site yourself. This Drupal Internet Business site is for example a site that is part of a multi-site set up.
Mobile Site in Sub-Domain Tutorial
Before you go any further, please be aware that I am not a Drupal guru. I do not do any Drupal or module development. I am just a user who thinks Drupal is awesome. I just want to use standard modules. This approach described here below is probably far from perfect. Please point out the errors. And there are no doubt issues that I have overlooked.
As part of the solution, some lines needed to be added to the htaccess file. And it required a very small change in the mobile theme files that I am using. I had never done this before. But looking back, it was not that difficult. Even if this is new to you, you can probably do this as well. And if you get stuck, just post a question in the comments below. I can’t promise that I can answer them, but I’ll try.
As a final note, please observe that I do not take any responsibility for if anything I wrote here crashes and ruins your site. Just keep a backup of all your files.
Mobile Site Solutions That Do Not Work for Drupal 6
Here are a few solutions that for mobile sites that do not work or do not work as I like it to do:
- There are no Responsive HTML 5 themes for Drupal 6 to create a mobile site. This solution is available for Drupal 7 using for example the Omega theme. Nice for Drupal 7, but this concept does not work for Drupal 6.
- When you use a cache solution like Boost, it does not work to have the mobile device and desktop served from the same URL, using for example the Mobile Tools module. The mobile device could get the page cached for the desktop or vice versa. This would only work for low-traffic sites without cache functionality.
- Installing the mobile site on a sub-domain like m.example.com using the multi-site approach (one installation, different databases) would give challenges on how to synch the mobile database with the desktop database and how to avoid duplicate content issues from a search engine optimization point of view. Any partial solution I found were way over my head. Maybe there is a good solution here, but I gave up on it after some initial research on the topic.
Boost, htaccess and www Default
Before we go further, here are a few assumptions. I assume that your site is working well with amongst others the Boost and Global Redirect modules. And I assume that you are using “www.example.com” as default for your site and not “example.com” without the “www”. You can set this preference with a small modification in the Drupal htaccess file (open the file on your desktop; see the comments behind the “#” signs in the file).
I have not tested the solution below for a situation in which “example.com” without the “www” is the default. You probably can make this work when you make some changes in my htaccess lines and module settings. But don’t ask me how. If you have a solution for this, please post a link in the comments.
Mobile Tools, Mobile Theme and Domain Access
The Drupal 6 mobile site solution is based on the following components.
- Mobile Tools module
- Domain Access module and Domain Meta module
- Meta Tags module
- Nokia-Mobile Theme module with a small modification to a theme file
- Some extra lines in the htaccess file.
The concept for the total solution is the following:
- The extra lines in the htaccess (using RewriteCond and RewriteRule lines) direct mobile device users to a URL in the m.example.com domain and desktop/laptop/iPad users to a URL in the www.example.com domain.
- Domain Access is used to create and manage the mobile sub-domain m.example.com.
- The Nokia Mobile theme is used to display your site on mobile devices. You can use another mobile theme as well. Just make sure that you check if you need to make any changes in it.
- The Mobile Tools module is used to confirm a number of settings in the other modules. It might be possible that this whole solution also works without Mobile Tools since I cannot say exactly what it does. But I assume that this is my limitation and not a lack of value in this module. You are free to see if the total solution works without this module and share your experiences in the comments. I just keep it.
- The canonical Meta tag is used to point every mobile page back to the desktop page. Every link on a mobile page links back to desktop pages. However, the extra htaccess lines redirect the mobile device user back to the mobile sub- domain.
To avoid that this page gets too long to scroll through on a mobile device, click here to go to the next page for the step-by-step tutorial how to implement your mobile site.
This solution could not have been created without the work of many others who created their solutions, overviews, htaccess code, tutorials and insights before me. I just used their work and applied it in a way that works for me.
Each of these references had their own inputs again.
Here are the most important references that I used in the end as most important input:
Great overview on everything that has to do with Drupal and Mobile
I took the htaccess code from here and modified it slightly.
Next - Go to