Yashh

Creating a Mobile site for django powered

Monday, 22nd December, 2008 // 4:54 p.m.

Tagged: django , iphone , middleware , mobile , python and site

Last week I decided to create a mobile interface for my blog. I just wanted to create one just to prove my self that I can do it. And it was quite an easy task. A site optimized for mobile should be light-weight and fast to load.

Some of the important principles to be remembered are: 1. Avoid images (espcially big pictures) as much as possible. 2. Load css and javascript to the minimum (as necessary). 3. Keep the data in the page to minimum.

To put it in simple put everything to minimum level. Now to create a mobile interface for your django powered app is as easy as writing templates. Nathan Borror wrote an excellent piece of mobile middleware which sniff's domain from request object and then sets the template directory accordingly.

In your settings.py set your DESKTOP & MOBILE template dirs accordingly. 

MOBILE_TEMPLATE_DIRS = (
   os.path.join(PROJECT_ROOT, 'mobile_templates'),
)
DESKTOP_TEMPLATE_DIRS = (
   os.path.join(PROJECT_ROOT, 'templates'),
)

Now start writing your templates in mobile_templates folders. Write your base.html and all other templates. Now you can minimize the data on your templates using few tips and tricks.

Example: I display my last 4 blog posts on my home page in the original desktop version of this blog. I only want to show the last post on the mobile site. Just avoid the for loop and use only the first object in the context variable. 

{{ post.0.title }}  #First object in the list
{{ post.0.body }}

Similarly I show last 20 items in my tumblelog. I only want to show last 5 items in my mobile interface. You can use the 'slice' django template tag to slice the context variable and use it. 

{% for object in object_list|slice:":5" %}
    // print out object's attributes
{% endfor %}

Well with these things in mind we can create a mobile site with no extra apache instance, no extra RAM, and just a few extra templates.

Django rock's ain't it.

Other than that there is a reusable app 'djangobile' which works similarly through a middleware which checks every request object and sets device accordingly in the request. Use it if you want to do support each mobile differently.

Check out my mobile site here. http://m.yashh.com. Feedback appreciated.

Comment Form

MarkDown syntax enabled

5 comments:

  1. 001// godDLL// Monday, 22nd December, 2008, 9:40 p.m.

    Dude, with respect, it isn't going to be read. "Creating a Mobile site for django powered(?)" and "Load css and javascript to the minimum (as necessary)(?)" are not the Django community style. Django people are "perfectionists with deadlines", as in "my post is going to be all-lowercase, because that looks stylistically better then weird capitalization, I'll sort it out later to be proper, when I have the time". Not "let's publish it as it is".
    No offence intended.

  2. 002// Yashh// Monday, 22nd December, 2008, 9:48 p.m.

    "Creating a Mobile site for django powered (blog / any django app you name it)".

    "Load css and javascript to the minimum"

    Ok i'll put it with an example. The blog post on this page contains a code snippets. To stylize those snippets I have a syntax.css file which contains css to style the code. Now I need to load the syntax.css only when I render a blog post. It's unnecessary to load when I rendering a index or tumblelog. That's what I mean by load minimum. This can be acheived by having various base.html files with various css and js included and use the right base accordingly.

  3. 003// Peter Bengtsson// Tuesday, 23rd December, 2008, 4:21 a.m.

    Great work. You should check it in ready.mobi http://ready.mobi/results.jsp?uri=http%3A%2F%2Fm.yashh.com%2F&locale=en_EN

    Thanks for the tip about djangobile. I'll check it out. I've used the MUA script from Google to manually do a check in context_processor to check the user agent but that stuff seems more powerful since you can get information about the device and the WURFL project seems to alive.

  4. 004// John M// Tuesday, 23rd December, 2008, 9:29 a.m.

    Guys, why so harsh on the man, he's just trying to help out.

    Happy Holidays.

    John

  5. 005// versae// Tuesday, 30th December, 2008, 7:07 p.m.

    Thanks for Djangobile mention in your article. I just wanted to tell you that Djangobile supports devices custom families, so if you want your application Django differences between Desktop and Mobile enough to define a family for all mobile devices.

    Best regards.

thnknsblvng