Warning: Table './internetbusiness/url_alias' is marked as crashed and last (automatic?) repair failed query: SELECT COUNT(pid) FROM url_alias in /home/content/e/r/a/erahbee/html/includes/database.mysqli.inc on line 134
Ultimate Drupal 6 Mobile Site Step-By-Step Tutorial | Internet Business

Mobile Full Site Switcher

Powered by Drupal, an open source content management system
user warning: Table './internetbusiness/url_alias' is marked as crashed and last (automatic?) repair failed query: SELECT dst FROM url_alias WHERE dst = 'node/11767' in /home/content/e/r/a/erahbee/html/sites/all/modules/globalredirect/globalredirect.module on line 138.

Internet Business

Ultimate Drupal 6 Mobile Site Step-By-Step Tutorial

Before you go through this step-by-step tutorial for creating the ultimate Drupal 6 mobile site, make sure that you first read the introduction to this mobile site tutorial.

OK, here we go.

Post any questions, observed errors and possible improvements in the comments below.

 

We start with the beginning: creating the sub-domain m.example.com.

 

1)      In your domain manager (there where you manage your domains), go to the DNS manager. Add as “Host” the sub-domain “m” for your mobile sub-domain m.example.com and point it to the same IP address as your example.com domain. Note that it could take 48 hours till this sub-domain is active. But often it is ready to go in one hour or so.

 
2)      At your webhosting point the “m” sub-domain to the root folder where Drupal is installed.
 
3)      There is no need to create any folder m.example.com in your Drupal sites folder.


Mobile Theme and htaccess Modifications

 
 
4)      Prepare the changes for the htaccess file. Download the htaccess file to your desk top. Make a copy of it. Add the text from the attachment to this page (or shown on this page here) to your htaccess file before the “Boost” section in that file. Do not replace the file on your server yet. I got the code from here (make a boost site mobile) but made a few changes to ensure that the site works well with canonical URLs.
 
5)      Download the Nokia Mobile theme to your desktop.
 
6)      The problem with the default Nokia Mobile theme is that it is missing one line in the page.tpl file. As a result, the default theme does not contain the canonical URL and other Meta tags. It is essential from a SEO point of view that you have these Meta tags present in your mobile pages. Therefore, replace the following lines in the page.tpl file:

<head>
<?php //print $head; ?>
<title><?php print $head_title; ?></title>
 <!-- nokia_mobile theme by Andrea Trasatti -->
<?php print $styles; ?>
<?php print $scripts; ?>
</head>

with these ones:

<head>
<title><?php print $head_title; ?></title>
<?php print $head; ?>
<?php print $styles; ?>
<?php print $scripts; ?>
</head>

7)      Install now the Nokia Mobile theme on your server.

 

Drupal Modules

 

8)      Install the following Drupal modules (the version I am using):
 
a.      Mobile Tools (6.x-2.3)
 
b.      Domain Access (6.x-2.13)
 
c.       Domain Meta Data (6.x-1.0)
 
d.      Nodewords / Meta Tags (6.x1.13)
 
 
9)      Before enabling the modules, read the “Domain Access” Install.txt or Quick-Install.txt carefully and follow the instructions. You need to add some code to your settings.php file. (Note that you may need to change the read/write property settings for this file and folder to allow you to make changes to it. Do not forget to reverse any read/write property changes made after you have made the changes to the settings.php file).
 
10) Enable first the following modules:
a.      Domain Access
b.      Nodewords
c.      Nodewords basic meta tags
d.      Mobile Tools,
 
11) Enable now:
a.      Domain Configuration
b.      Domain Content
c.      Domain Meta Tags
d.      Domain Source
e.      Domain Theme
 
12) Note that should be OK when the Drupal site needs now to rebuild the permissions on site content.
 
13) Enable the Nokia Mobile theme

 

Settings Tutorial

 

14) Maybe it is a good idea now to put the site off line to avoid interruptions or to turn off Boost temporarily (I’m not sure about this. Use your own judgment).
 
15) Go to Site building - Domains.
 
a.      Domain - Create domain record: Create a new domain for m.example.com (For the site name I use my normal site name + “Mobile”. In this way you can easily see when you are on the mobile version of your site.)
 
b.      Domain – Settings:
          i.      Under Advanced Settings, tick for SEO “Rewrite all URLs to point to a single source”, select your primary non-mobile domain and tick the “Correct Canonical URLs” box. (see picture on separate page)
          ii.      Under Theme settings, I select a strong negative value (-100) with the aim to get as often as possible the right theme selected. This is a guess, not wisdom.
 
c.       Domain list – Theme for m.example.com: select the default theme for your mobile site.
 
d.      Domain list – Settings for m.example.com: here I have kept the “Site frontpage” field empty.
 
e.      Domain list – Meta tags for m.example.com: this link does not work for me; but you can set the Meta tags via “Batch Updating” and edit via Domain list – Settings for each domain.
 
f.        Node settings: make sure that all the node types that you want to see on your mobile site are ticked here.
 
g.      Batch updating: I added the Domain Keywords and Domain Description as text that I want to add for all mobile pages to the page specific keywords and description.
 
 
16) Go to Content Management – Meta tags – Settings
 
a.      Make sure that “Canonical URL” is ticked for both “show on edit forms” (not sure if this is needed) and “output in HTML” (definitely needed).
 
b.      For Base URL give the complete address: http://www.example.com
 
c.       Tick the box “Canonical URL use path analysis”.
 
 
17) Go to Content Management – Content types: ensure that for the types of content you want to see on the mobile site, you have selected for “Meta tags settings” that Meta tags are in any case automatically generated when the Meta tag content is empty.
 
 
18) Go to Site configuration – Mobile Tools:
 
a.      Notification / redirection:
          i.       Give the full URLs including http for mobile and desktop site e.g. http://m.example.com and http://www.example.com.
          ii.      Tick “Enable automatic redirection of the mobile user”.
          iii.      For the redirection cookie value, I have 525600 seconds.
          iv.      Under Additional Settings, I have just used “node” as front page for the mobile user (that is the same as for my desktop site) but I have limited the number post on the mobile main site.
 
b.      Theme switching:
          i.      Select “Switch theme based on the URL”.
          ii.      Choose nokia_mobile as the default Mobile Theme. (This should be the same selection as in the Domain Access module. I am not sure which one overwrites which; thus it is better to keep them the same.)
          iii.      Tick the “iPad” box and select as Mobile theme your theme for your desktop site (I think most normal sites look very good on an iPad).
 
c.       External modules: we do not use any, thus “Mobile Tools” shall be selected as Device detection module.
 
 

Mobile Site Blocks and htaccess Upload

 
 
19) Go to Site Building – Blocks – List – Nokia-mobile: specify what blocks you want to show where in the mobile Theme. The left sidebar appears above the content. The right sidebar appears below the content.
 
20) Upload the new htaccess that you modified before.
 
21) I experienced the problem that after the boost page cache had been cleared and this page was first visited by a mobile, this page showed up on the desktop in the mobile theme. To avoid this problem, I had to tick the Boost setting "Do not store the cache file path in the database" under "Boost directories and file extensions". After having put this setting, I cleared Boost's Database and File Cache and all Other Caches..  Now turn on boost. Note that I set the Boost – HTML – Default maximum cache life time to 52 weeks. See further below for my reasoning for this.
 
22) Turn the site back to online if you turned it off-line before.
 
23) Optional: Clear Boost’s Database and File Cache and all Other Caches (Maybe this is not needed if you add a mobile site by exactly following this tutorial. I had to clear several times to get rid of all the wrongly cached pages when testing during trial-and-error.) After you cleared the cache, visit from a browser (not being logged in) the pages that are most frequently visited. The problem is: if after the boost page cache has been cleared a mobile visits that page first, that page may come up in the mobile theme on the desktop.
 
 
If you do not get immediately to see the theme and desktop or mobile URL that you expected to see, maybe clear cache, history and cookies in your web browser. That helped me in most cases.
 
What we have not done yet now is to resize any pictures that you use on your normal pages to show as smaller version in your mobile pages. But I assume that of you managed all the above, you will be able to find somewhere a solution for that as well.
 
There is a Firefox plug-in (User Agent Switcher) that allows you to show in your browser how the site is displayed on an iPhone. That is a great tool to check that the right theme and URLs appear. And with Firebug you can check that the canonical URLs point back at your main site.
 
 

Next - Go to

 
 
 
 
 
 
Before:
 
 
 
 
 
AttachmentSize
extrahtaccesscodedrupalmobilesite.txt2.79 KB
 #

To make sure that your mobile pages have a canonical URL reference to the corresponding desktop page (needed for SEO), for each page you shall set the "source domain" to your "desktop domain" and not to "use active domain".

All the existing pages in my site got the "use active domain" as their value. This caused the mobile pages to refer to themselves and not to the corresponding desktop page.

I had to manually update each page via the "Edit" tab. I tried to do this in bulk via the domain access "affiliated content" menu but did not get that to work.

For large sites with many pages this is of course a problem. Now I start to update the pages that get most SEO traffic manually.

 

 

 
 #

As mentioned under point 23 (now crossed out), I experienced before the problem that after Boost caches were cleared and a page was first visited from a mobile before it would be visited from a desktop, this page would be displayed on the desktop using the mobile theme.

Point 21 above describes the solution that I found for this problem.

 

Recent comments

User login

Navigation