Goal: mobile-friendly version of localwiki sites.  First reading, then full editing support.

Current status: There are branches (mivanov and sethvincent) that implement some responsive design stuff, but they're not complete.  Still need significant polish.

Individual problem areas:

• Editor
  • Latest CKEditor has some mobile support, at least on iOS.W
  • We should explore a vastly simplified approach for mobile contributions - e.g. just show a simple "comment-style" box.
• Map and map editing
  • There is mobile support in OpenLayers.  We may just have to turn it on.  There's also mobile editing support but we have some customizations that might get in the way.

Misc thoughts

start w/ a good web-based mobile interface, then maybe explore making custom apps (not worth initial effort, in all likelihood).

Look at  http://www.phonegap.com/

 http://shipordie.com/post/4662729644/mobile-social-local-pivot-well-one-of-those

Django-specific stuff:

•  http://code.google.com/p/django-bloom/ - kinda mobile-specific
•  http://pypi.python.org/pypi/django-mobile - actively developed, has idea of override
•  http://stackoverflow.com/questions/164427/change-django-templates-based-on-user-agent - some somewhat old ideas
•  http://code.google.com/p/minidetector/ - detector

(For the other Django project I've been immersed in lately, an assumption/requirement is that we use the same URLs for mobile and "normal" views, instead of doing the  http://m.example.com/ thing. I like this requirement.)

Consider designing the default theme to be responsive to browser size. Some resources:

• http://www.alistapart.com/articles/responsive-web-design/
• http://getskeleton.com/
• http://lessframework.com/

Here's a first pass at making the sapling theme responsive using the skeleton css framework:

• https://github.com/sethvincent/sapling-responsive

Things like images, tables, and the edit page still need significant work.

Responsive design

Working in my spare time on making theme responsive.  My notes below. --Mike

Responsive design reading

Apparently one of the first blog articles about this, written by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design/

For background, the article references two articles about flexible layouts:
http://www.alistapart.com/articles/fluidgrids/ (using em to set text sizes and % to set margins and max-widths)
and
http://unstoppablerobotninja.com/entry/fluid-images (sizing images down instead of breaking layout, kinda hacky in IE)

Ethan has a book I just ordered http://www.abookapart.com/products/responsive-web-design

More recent article on MSDN (November 2011):
http://msdn.microsoft.com/en-us/magazine/hh653584.aspx

The main takeaways are:

• Use a fluid layout, not absolute widths, margins, font size, etc
• Media queries let you use different CSS based on things like viewport widths
• Fully supported by everyone except IE 8 and older (doesn’t matter much, but can use JS to fix this if needed)
• Use CSS to lay things out better for very small (or very large) screens, including typography
• Some mobile browsers will fake the viewport size, so to reset this add:
  • <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
• In the near future, keep an eye on media query listeners, which let you load totally different assets based on these queries.