Create Mobile Friendly Site with Movabletype

  • Posted on
  • by

In order to create a mobile friendly version of my site, I try most existing methods, but none of them meets my require.

The existing methods include:

1) Using movabletype smart blog theme.

The problem is that I keep getting "500 Internal Server Error", and I never make it work.

2) Mid-Century mobile theme.

The mobile theme cannot work with my existing blog theme.

3) iPhone Template Set

Users cannot sign in to comment.

So I try to make a mobile friendly site with my existing theme. The mobile site uses a sub-domain m.veryword.com. When a mobile device visits a link of my site (Like http://www.veryword.com/archives.html), it will be redirected to the mobile version (http://m.veryword.com/archives.html). Visitors can use all the functions of the site, like sign in to comment, search, etc.

Here is my solution:

1 Create a sub-domain name.

In my case, I use m.veryword.com.

2 Use .htaccess to redirect visitors from mobile device to the mobile version of my blog.

Doing this will redirect all requests from mobile devices to the mobile version of my site. The problem is that users can not sign in to comment, because when they visit http://www.veryword.com/cgi-bin/comment.cgi, they will be redirected to http://m.veryword.com/cgi-bin/comment.cgi, while the latter link does not exist.

This is my .htaccess file.

3 Copy existing installation files to folder /m

In order to resolve the above problem, I copy the existing folder my-static/ to m/, and copy all my cgi files in cgi-bin/ to m/cgi-bin/, change the permission of these files to 755. All the data and file structure are similar to the existing installation, except mt-config.cgi. I change the domain name with the newly created sub-domain name for CGIPath and StaticWebPath in mt-config.cgi. Other information keeps unchanged. So the desktop version and mobile version will use different copy of cgi and static files and share the same databases. For the desktop version, path of the static files is /public_html/mt-static/, and the path of cgi files is /public_html/cgi-bin/, the path of output html files is /public_html/. While the mobile version uses /public_html/m/mt-static/, /public_html/m/cgi-bin/ and /public_html/m/.

4 Create mobile theme with existing theme

In order to create a mobile theme, you can duplicate and rename related templates, change the template output path and use "replace" to change output urls. For example, you can duplicate "Main Index" and rename it to "Main Index Mobile", change the output file to "m/index.html". You also need to change all the urls in the templates. For example, if you need to output m.veryword.com instead of www.veryword.com in your file, you can change <$mt:BlogURL$> to <$mt:BlogURL replace="www","m"$>. Use firefox+firebug+user agent switcher and notepad++ to accelerate your work.

5 Rebuild your site

And the mobile site is created. As you have known: m.veryword.com (removed)

Please inform me if my instruction is not clear.