This is not the only way to build a mobile site - certainly, some methods are probably better depending on your needs.
But this method is simple, and if your mobile needs are also simple, this may be the way to go.
Maybe you just have a blog (such as this one) that you want to format a little differently for mobile devices? Or maybe you're runnng an online shop with inventory to display, where almost every page is a product page (e.g., http://www.amazon.com/gp/product/B006PALI6Y/ versus http://www.amazon.com/gp/aw/d/B006PALI6Y - that second one looks a lot nicer on a mobile device).
This method is ideal for sites without a lot of specialized navigation, where the majority of the content is displayed in the same template. And I'd be surprised if it took more than an hour to get up and running.
Create the mobile page with jQuery Mobile
For this blog site, I started by creating a new base template just for mobile pages. It's a stripped down version of my main base template that includes all the jQuery Mobile CSS and script references:
Then, under the application that serves all my content, I created a new template that serves as my mobile template. This template actually contains the entirety of what displays as the mobile version of my site, but uses internal links to navigate to each "page".
Use this Quick Start guide to get some basic information about jQuery Mobile tags, styles and themes: http://jquerymobile.com/demos/1.1.1/docs/about/getting-started.html.
In my home "page", I've opted to display links to the 5 most recent articles - that fits inside a content div like so:
Dynamically generating "pages" for each of those articles uses that same list of five to create the internal link names:
And so on.
A new view
The list of articles comes from a simple view method, again in the same application that returns my regular article content:
In my urls.py:
With all of that in place, a user on any major mobile device visiting http://www.mechanicalgirl.com/ should automatically be redirected to http://www.mechanicalgirl.com/mobile/. I've set up a subdomain that does the same thing, using an Apache rewrite condition:
What you won't get with this method
- Your URLs won't map exactly. For example, if you hit my post at http://www.mechanicalgirl.com/post/where-have-all-the-women-gone/ on a mobile device, you're redirected to the mobile home page at http://www.mechanicalgirl.com/mobile/.
For example, if I add "?m" to the end of a URL in the mobile page:
I can use it to limit the redirect in the base template:
There are certainly more elegant ways to do this, but this one does not rely on changes to the Python code.
Some other ideas:
- Depending on what you need out of a mobile site, it might also be more useful to keep your mobile template in a separate project or application, import the relevant views and models across projects/applications so that you don't have to duplicate any code, and use server settings to map the separate projects/applications to different URLs.
- There is a lot of Django middleware out there that will give you more control over your device detection and URL redirects, but I can't recommend any one package in particular - I would recommend using Google and doing a little research.
Your choice, of course, is dependent on your server setup, how your projects are organized and how comfortable you are with changing them.