[Answered ]-How to design a Web application in django for mobile devices (phones / tablets)

1👍

I would suggest you to give a chance to Twitter Bootstrap http://getbootstrap.com/
It’s becoming more and more popular when it comes to development of responsive web sites.
They recently realeased new version (Bootstrap 3) which is really great and it helps you to easily control what and how to disply on specific screen size.

If you want to learn more about it you could also visit this youtube channel http://www.youtube.com/user/CodersGuide?feature=watch

1👍

Well you can certainly make a list of common browser strings and create custom layouts for browsers most common on Android/iOS and serve those directly. (not preferred)

However the generally preferred method is to use CSS media queries for responsive web. These queries look something like:

@media screen and (min-device-width:321px)
{
    ...
}

@media screen and (min-width:769px)
{
    ...
}

@media screen and (min-width:1025px)
{
    ...
}

And in those locations where it says ... you can do custom classes/positioning/styling for all your elements. But Google is your friend in finding good tutorials for these.

Also there are many CSS/JavaScript libraries out there to create good buttons/layouts for mobile devices. These libraries often take into account that the touch areas for buttons need to be larger then the visible area, that there is enough spacing between elements. Often they also include “mobile” widgets, e.g. fancy dialog selectors that pop open and look just like the native popups on iOS or Android. Once again Google will be your friend.

If however you find yourself forced to do browser string comparisons don’t expect your guess at the device to be correct. Browser strings are quite tricky and don’t reveal a lot of information of the device. E.g. you may have no idea if the visitor is using Chrome for Android on a tablet or a smartphone. You can use browser strings to determine if the user is on Android or iOS for instance. But for Android don’t expect to be able to identify all possible screensizes/devices on the market from the browserstrings.

👤EWit

Leave a comment