Mobile site: back to the 90's - developed.be

Introduction (back to the 90’s)

Apple lovers (= those who would kill for a €599 iPhone and trade it for a €20 coupon within two years) have forced webdevelopers to go back to the 90’s. Those phones appear to have 56k modems, can’t play flash videos, and use screens even smaller than 800×600.

If you want to make a mobile version of your Drupal 6 site, you’ll not only have to strip half of your functionality, but also half of your html, css, js, images, flash and anything the w3c recommends since 1989.

I thought in terms of teletext (80’s kids will recall: texts, slow page loading, and low graphical use). (that it is what mobile is).

Hey, I’m 28, not 16 anymore. I’ve grown a tech-conservative old boy in the mobile ages, running a mayor version behind every software application (because, at least old versions work and are compatible with the rest of the world).

Modify Headers

First problem arose: I don’t have such a phone. So I looked for an emulator (for free, of course) The Modify Headers plugin was just what I need. The tool modifies the requests headers sent to the webservers. So it can fool the webbrowser by saying we are on an iPad, while we are actually using Firefox on a Lenovo Thinkpad.

Install, go to: “Tools” > “Web Developer” > “Modify Headers” (those with the Web Developer toolbar installed, will see two “Web Developer” menu items. Search for the one with “Modify Headers” in it). Click tab “Headers”, select “Modify”, type “User-Agent”, and use the value:

Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10

Click “add”, click “start”, and now we’re browsing like we would do on a mobile.

Mobile Plugin & Garland Mobile

Now: how will we change our website to look mobilese? There’s the excellent “Mobile Plugin” that will take care of most of our business. It recognises mobile devices, has a switch function between the default site and the mobile site, a distinct theme for browsing mobile, and some other stuff. Next to that we need the “Garland mobile” template: a template designed for mobile.

Configure it, it’s really straightfoward.

Make new site-folder

Suggest you want to use different views, blocks, modules or panes and pages. The Mobile Plugin takes care of blocks, but if you really want to split up both sites (by sharing content, but not layout), you have to make a subsite and some database rearranging.

In your Drupal folder structure: create a new site. For example: m.mywebsite.org

In that, you create a copy of your settings.php file (from your default website).

Splitup database

Now you should decide what to splitup and what not. Therefor I copied a list of all my tables, put it in a spreadsheat, and decided which tables should be accessible for both sites, and which should be split. I splitted cache, node display (ds) and the panes.

Part II coming up soon!


Rss Comments

Comments

No comments yet.

Leave a comment