Over the weekend, I decided to whip up a mobile (iPhone) version of Playground Blues. I walked into Broadway Cafe around 3pm on Saturday, and by 5:30, I had m.playgroundblues.com. Here's how it went down.
Step 1
Since I'm still using Dreamhost and FastCGI, I created my .htaccess file along with my dispatch.fcgi file for my new sub-domain as usual. Made one little change to my dispatch file: instead of having DJANGO_SETTINGS_MODULE pointing to playgroundblues.settings, I pointed it to playgroundblues.settings_mobile.
Then, in my project folder, I made a duplicate of my settings file and renamed it to settings_mobile.py. Let me emphasize again, this is a duplicate.
Step 2
Created a new templates folder and named it "templates_mobile." Opened up my settings_mobile.py file and added a new line to the top of my TEMPLATE_DIRS tuple. This tells Django to first look in mobile templates, and if the template doesn't exist, fall back on regular site templates. (Remember, this is only for my mobile site.)
TEMPLATE_DIRS = (
"/home/playgroundblues/templates_mobile/",
"/home/playgroundblues/templates/",
)
Step 3
In my new templates_mobile folder, I created a new base template called "base_mobile.html" which I'll use to extend in all my child templates instead of the main sites base.html. Then I went through the sites pages and recreated mirrored templates in the mobile folder. So /templates/blog/post_detail.html was overwritten by /templates_mobile/blog/post_detail.html. I stripped out extraneous content that was unnecessary for someone on the go, leaving core content and functionality.
The nice thing is if someone happens to creep into a section that you haven't gotten to (as long as you didn't override base.html), your site will display as it would on a computer proper. If there's a more succinct way of doing this, please let me know.
Comments
Jeff Croft http://jeffcroft.com/
That's exactly the way I've always done it, and I think the ease of creating an alternate version of your site (for mobile or any other purpose) using the same core content is a huge strength of Django that isn't talked about enough. Well said, my friend!
Josh Pyles http://www.pixelmatrixdesign.com
Nice to hear the process from someone who has done it. I'm considering creating a mobile version of my own site if I ever get time.
Andrew Ingram http://andrewingram.net
I haven't got an iPhone so I can't check it out, but the photograph suggests that it's a very elegant approach.
It's definitely something I'll be looking into myself.
Patrick Beeson http://patrickbeeson.com
I love the simplicity in this technique!
Do you have any plans to develop a method of detecting whether someone arrives at your primary domain using a mobile device and then sending them to that version?
I know Newsvine uses JavaScript to detect for screen resolution (also has an out for the iPhone), but I would think there is a better way.
Nathan Borror http://www.playgroundblues.com
@Jeff is spot on and oddly enough no one has every really demonstrated this capability. We use it daily at the newspaper for all our mobile editions and redesign projects.
This strength becomes even more pronounced when you start to think about future contextual devices that will undoubtedly have unique features. This is where you begin to realize the power of separation.
@Patrick I just finished adding browser detection. iPhone users are now notified of the availability of a mobile version. Thanks!
Eric http://ericholscher.com
I love how easily your design with the icons mapped well onto the iPhone's icon based scheme. Do you think this has any meaning on the 'goodness' of the design, or just a random coincidence?
Nathan Borror http://www.playgroundblues.com
Looks like my colleague Matt Croydon wrote this very same article nearly two years ago, check it out.
He does a much better job explaining this stuff than I.
Nathan Borror http://www.playgroundblues.com
@Eric - It just felt like the right thing to do :)
Brooks Travis
Looks like you get into a bit if a loop with the version-select script when you try to access your library section in mobile safari.
Ben Spaulding http://benspaulding.com/
Powerful yet simple idea. I think I'll try the same thing on my site. Just one thought though -- making a duplicate seems to violate the DRY principle. Would a settings_mobile.py like this be more maintainable:
Django settings for playgroundblues mobile project.
It doesn't look very graceful, but it saves the repetition.
Nathan Borror http://www.playgroundblues.com
@Ben - good point. I've actually settled on the following for my settings_mobile.py file:
One important note to keep in mind is if you are using file caching you'll want to set your CACHE_BACKEND variable in your mobile settings so your mobile site isn't caching into your main site.
Mordy Ovits
There' a django project to autodetent mobile browsers: http://code.google.com/p/minidetector/
Jon Buda http://www.inkandcoffee.com
Nicely done Nathan. Commenting from my iphone now. I believe the same can be easily accomplished in rails. I'll definitely be trying it out
Nathan Borror http://www.playgroundblues.com
@Jon - does Rails have template inheritance?
stg
:) Nope, unfortunately Rails does not have template inheritance. I got here searching for a template inheritance hack.