Developing a Mobile Version of Your Dokuwiki Site:
I assume that you have some basic understanding of dokuwiki and some familiarity with php/css in this tutorial. I will do my best to clarify and answer any further questions you might have. For reference sake I am talking about the following site:
http://www.erichowey.ca/pabctest . Point your mobile phone (iphone, android, bb etc) to this page and you will be redirected to
http://m.erichowey.ca (this will look weird not on a mobile phone). Before I get any further a big thanks to Andreas Haerter for his excellently commented templates. They were easy to modify and work with. Please be aware that I accomplished all of this WITHOUT changing a thing in the basic dokuwiki install so what this means is that this way of implementing a mobile website will not break on an upgrade of DW. I am not a web developer by trade it is just a hobby so bear with any errors I make.
Step One: Mobile Phone Detection
There are generally two common ways to do this. One is with a media query to detect screen size and then use different css styles. The second is to detect the USER_AGENT string from the browser used to access the site. Both have their ups and down. For the purposes of dokuwiki and the complexity of the websites I felt it was easier and more effective to use the second method and detect the USER_AGENT string. The benefit of this is that you can redirect them to a separate website such as m.yourwikiname.com. The downfall is that your are effectively coding two separate sites BUT because dokuwiki has some great features you can have both sites reference the same data so you DONT have to put your data in all over again. Make a change on your main website and it will effect your mobile site and vice versa. More on this later.
So, php detection of the USER_AGENT string. Open up your lib/tpl/tpl_name/main.php file. At the VERY VERY start of that file before anything else insert the following code:
<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
header('Location: http://m.yourwebsite.com');
?>
At the very end of that code change the line ‘header('Location:
http://m.yourwebsite.com');’ to the site you want to direct mobile visitors to.
Step 2: Transfering Data
Ok so you now have a subdomain and it is an empty site. At this point if you want something totally different than DW go ahead and do that however you want. I assume though that you want some part of your DW site to be mobile and usable.
2a. Do a clean install of DW into this new subdomain. (Alternatively you can copy a complete backup of your non-mobile site BUT I would suggest against this because in the head this could cause a headache for you).
2b. Download/copy/install the template that you have on your regular website. Change the name of this template to something like “template_mobile”. Set this as your template.
2c. Here is where DW is an amazing resource. We are going to sync your data files from your regular website to your mobile site and vice versa in a very easy step.
Goto the configuration menu and look for the “savedir” option. You need to set this based on the root of your webserver to the data file used by your main dokuwiki install. You should be able to get this root directory from your webhost somehow. Mine looks something like this:
/home/users/web/b2xx6/ng.howey/public_html/erichowey.ca/pabctest/data/
If you get this setting right then voila the mobile site references the non-mobile site and their data is effectively synced.
You should now see basically your non-mobile site underneath your mobile domain.
Step 3: Apply new CSS/customize your template for mobile use.
First thing. You do not want or need mobile detection in your new main.php file. Delete that if you left it in there (I did woops)
2nd thing. Add the following code in between <head> and </head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
This code basically tells the mobile phone to make the page width the same as the device and sets the initial scale to be 1.0 and turns of user-scalable. This makes, in my opinion, for the best user experience IF your have a properly setup webpage.
Some other suggestions would be that you can change the ‘start’ config value for the wiki to be something other than ‘start’, perhaps ‘mobile_start’. This way you can have a separate entrance page for mobile users of your wiki.
As far as modifying the CSS for mobile use goes my suggestion would be to ensure that you have a 1 column layout. Simple, big easy to touch navigation. Think about potentially reducing your content. Big easy to read text. You will need to tweak away until you get what you want. You will likely need to use display: none !important; and comment out certain parts of main.php to get the desired look.
I hope this helps people and is useful. I will answer any questions as best I can. I can't tell or teach you how to modify CSS to work for mobile development though. Try a google search there are a lot of good blog articles on mobile design standards.