Drupal is a great Content Management System and it has some powerful caching options… but getting them to work well with a mobile site subdomain can be tricky. The Boost module is a very popular static caching one that can produce huge performance benefits for sites with a lot of anonymous visitors.
It works by creating a flat .html version of every page and serves that to browsers. This cuts a lot of load from the database, but it means that any PHP based mobile detection/redirection scripts won’t work.
As yet there isn’t really a simple module or way of setting up a Boost cached site to use a subdomain mobile site – i.e. www.mysite.com for computers and m.mysite.com for mobile phone browsers. Note that you don’t have this issue with a ‘responsive design’ site.
After a fair bit of trial and error, I pretty much got it working. This is what we’ll end up with:
- A desktop site and mobile site on two different domains, but the same Drupal installation (not a multi-site setup).
- Buttons that can manually switch from the desktop to the mobile site from any device.
- I’ve set mine so that tablets use the main ‘desktop’ theme rather than the mobile one, but you could include tablets and mobiles together if you want.
- A system that avoids duplicate content/canonical issues and penalties from Google.
This may not be the best way of doing it, and hopefully some of the modules have been updated and improved now. If it’s a problem you’ve run up against and have been Googling some solutions then I hope that this might at least help point you in the right direction. I won’t go into a lot of detail but get in touch with me and I can provide some code snippets if you need them.
Let’s dive in:
- Set up the subdomain in your DNS record. In my case I have used ‘m’ for the mobile subdomain. Put it underneath the www one and point it to the same IP address. There may be some further things that your hosting company needs to change to make this work. If they’re any good they should easily be able to help you out for free if you open a ticket with them and tell them what you’re trying to do.
- Create a new theme, or just make a copy of the existing desktop one and modify that. In the theme’s .info file it’s perhaps a good idea to add some new regions, or at least change the name of the sidebar ones so it’s easier to manage the Blocks later on. Because this is a separate theme, in the Blocks menu you can put some blocks in the header, sidebar or footer regions in the desktop theme for example, but leave them out of the mobile one (or put them elsewhere)
- In the mobile theme’s style.css file you can @import the desktop theme’s style.css at the top and then override some of its rules underneath. In particular you’ll probably want to set a lot of the layout divs to width:100% for example.
- Get the jsmobile module that is talked about in this useful blog post http://bitcookie.com/blog/integrating-drupal-7s-boost-and-mobile-tools I edited my version a bit to get my Views pages to work properly.
- In the jsmobile.js script that’s in the jsmobile module I have used my own javascript device detection script that redirects mobile phones but not tablets. You can get and customise a version of the script from here: http://detectmobilebrowsers.com/
- You might need to change or comment out some of the lines in your main .htaccess file if that is set to redirect all http://mysite.com visitors to http://www.mysite.com instead. The m subdomain is likely to get caught up wrongly in this redirect rule.
- Set up two new folders in your main sites folder – so now there’s four subfolders: default, all, mysite.com and m.mysite.com (you obviously need to replace ‘mysite.com’ with your domain. In each of the two new folders you need a settings.php file. There’s plenty of Drupal tutorials on this bit I think but give me a shout if you’re suck as to what to put in each one.
- For the menus I have a separate mobile menu which I have allocated to the Header region in the mobile theme. The jumpmenu module is quite useful here, but there’s a choice of mobile menu options to choose from.
- If you’re using the Panels module in your site then there are options within that to switch off some panes on some themes – so you could turn off a big image carousel and replace it with a single smaller static image on the mobile site for example. If you have the PHP filter turned on for your Admin role then you can use a PHP snippet to show one bit of content (e.g. a Block) on one theme, and some different content on the other theme.
- There’s some code in that bitcookie blog article with some hyperlinks that enable the user to switch between the desktop and mobile themes. It’s a good idea to put those in your footer.
- Now that Google will potentially be indexing two versions of your site (their advice is that you don’t need to hide a mobile version from their spiders) you need to tell it which is the ‘main’ version. This is done with the canonical meta tag. There’s probably a better way of doing this but I used the Meta Tags module and put my main mysite.com domain as the canonical one. To test this is working, inspect the source code in a page on your mobile version – it should contain a canonical meta tag that is pointing to the www version of that page.
- Lastly, you may need to alter some settings in your Google Analytics code as it isn’t set to track subdomains by default.
That was a whistle-stop tour because most sites are being built responsive these days so hopefully not many people will be facing this headache in the future. If this looks like it’s a very niche wall that you’ve been banging your head against then email me and I’ll send you a copy of some of my files and modules to see if they help. Or if you can help improve on any of the above advice then please chip in via the comments below.
