How to Make a Quick Django Website For Mobile

I was really bored at the Christmas night, so I decided to create the mobile version of my Django based weblog real quick.

First I added a mobile detector middleware to the list of my middlewares on settings. I grabbed a nice middle ware from here.

Then I created new templates for the mobile version. I could easily use my current templates with doing a few hacks here and there, but I wanted to make my mobile templates using html5 and CSS3 only. Here is a nice article on that.

One thing you really have to pay attention when making your html templates is the use of a meta tag called viewprint. If you use this meta tag on your page, users won't need to zoom in to read the content, as everything should be big enough to be read.

Using the content attribute you can specify the width of the page. You can use any number you like, but I recommend using device-width, as it makes the width of your page the same as user's device. All the other attributes are self-explanatory and are optional.

If you're using a non-mobile browser, you won't be able to see this page on mobile, unless you change your browser agent. However, the following mobile page can be viewed using regular browsers if you're interested to see how the html looks like.

http://mohtasham.info/resume-mobile/

I took three screenshots of my website using the Android emulator:

home