This page discusses possible directions to enable MoinMoin to become more usable for handheld/mobile devices. The importance of small handhelds devices is growing, so is the need to build web-sites which are optimized for these devices. Those have usually smaller displays, have lesser internet connections, sometimes (still) no colors and less processor power.
Restrictions and Problems of Handhelds
- Low screen resolution ranging at smart phones from 96px × 65px (width × height) on elderly devices up to resolutions from 208px × 320px, at PDAs from 160px × 160px up to 320px × 640 px. (I think we should concentrate on PDA which have nowadays around 320px * 480 px)
- A wide range of different proprietary web browsers which do not support all the CSS standards.
- No (or rather uncomfortable) keyboard and mouse input
- nokia 770 has 800x480 (opera is the default browser), other devices like the nokia e61 have 320x240 (safari).
Hints for Developers
- To develop a support for mobile devices one doesn't need to have such a device. Opera9 can emulate a PDA view and for Firefox you can download the "Web Developper"add-on. Also nearly all the PDA and handheld-browser manufacturers offer some software for emulating these devices on normal computers.
Some Considerations and Ideas for an Implementation in Moin
Related: WikiSynchronisation MoinMoinAsPim PersonalMoinMoin.
Space is a major factor. We must reduce the information displayed.
- Use smaller logos, drop the searchboxes, move the quicklinks to a drop-down menu.
- Do not allow both logo and logotext, but logo or wikiname? Drop interwiki title?
- The "more-actions" menu is too long for small screens.
- Limit available Actions? Maybe have 3 or 4 icons for the most used Actions on top of the page?
- Page trail
Tables like in RecentChanges.
- Edit Action: Text editing of a page is nearly impossible. The buttons are far too big, spoiling the whole layout of the page. The edit form is too small. GUI editing with its big toolbar is even worse. How to solve that?
- Add a CSS support for "media=handheld" in one theme (moderne theme?)
- make a new theme for testing?
Nokia e61 Safari does not use a css offered with media=handheld. For the problem of heterogenity and bad CSS support with handhelds see also http://www.thestyleworks.de/tut-art/layout_handheld.shtml (German only).
- Since handheld.css is not supported: Offer some kind a switching ability in the navibar (like ?action=print) which onyl adds optimizied css for handhelds to the page and keeps this setting on further navigation in the wiki?? I.e. we could use the same workaround we did for browser which do not support print.css correctly...
- Maybe using icons (larger?) is better than the dropdown list? Revival of the icon bar of classic theme?
Write some selected actions (History, Subscribe/Unsubscribe, AddQuicklink,..) and navigation stuff (FindPage...??) in the footer of the page like you can see on this Moin wiki http://www.handhelds.org/moin/moin.cgi/FrontPage?action=show&redirect=StartSeite .(Is this a modified classic theme? Maybe RalfMoll, the owner of the wiki is also interested in working on MobileMoin?)
Interrelation between AccessibleMoin and MobileMoin: it's a must for accessibility to leave the layout of forms (like the page edit form etc.) completely to the CSS and not to do that by frames or hard code it in the .py files. The CSS decides where to put the button and how the buttons looks like (normal button for normal screens, small icons for mobile devices). Futher: maybe also some code of the gui editor concerning display issues must move to theme/_init_.py so that you can also customize the icons und their sizes. That's might be also interesting for normal theme developers not interested in AccessibleMoin or MobileMoin.
Maybe we have to go to XML representation and XSLT processing of pages to have a fully mobile and accessible moin which is able to cope with different devices and users. XSLT processing is state of the art in mobile webdesign, see for that http://www.cameronmoll.com/archives/000428.html Comment number 3! Moin pages to this topic: XmlWiki, FeatureRequests/PipelineArchitecture, MoinDev/WikiDom
MoinMoin also as a WAP 2.0 server?
- it would be nice to make some mockups?
Interesting Links
Wikipedia project for 800px screens, see http://de.wikipedia.org/wiki/Wikipedia:WikiProjekt_800-Pixel-Bildschirme (German only)
W3C Mobile Web Best Practices http://www.w3.org/TR/2006/WD-mobile-bp-20060113/
Series on Mobile Web Designg http://www.cameronmoll.com/archives/000398.html
Introduction and overview on mobile web design (German only) http://www.bs-markup.de/blog/archiv/category/mobiles-netz/
For interdependence of MobileMoin and AccessibleMoin: http://www.w4a.info/2006/
http://www.thestyleworks.de/tut-art/layout_handheld.shtml (German only)
http://en.wapedia.org/ (Wikipedia for WAP)
Socialtext. Article "Socialtext's Mobile Wiki: Miki" - Socialtext Hey Miki - Miki Does Opera
As Opera is or is probably going to be one of the leading browsers in the phones' and handhelds' realm: see OperaMini for phones and OperaDevices for other handhelds. Have also a look at the OperaMini simulator online and surf with it to MoinMoin! http://www.operamini.com/features/simulator/
Discussion
I'm no expert on this and no programming crack at all, but how about this: Maybe it is enough to have for a start some Bool value in ThemeBase which indicates whether display for mobile devices or for normal devices it wanted. This value can be set either by some action=changeskin?device=mobile (we will also need such an action for AccessibleMoin e.g. for a serverside zoom functionality or switching to high contrast CSS) or by analysing the request header of the remote device asking Moin to send out a page (????? see http://www.cameronmoll.com/archives/000428.html). So one could check for this value e.g. in def logo(self) and decide whether to put a normal logo or a small logo for the page. The same is true for the other functions e.g. having smaller icons for classic theme, omit the pagetrail or put it somewhere else, assemble a shortend edit bar... This would be a first step towards MobileMoin. Still unsolved: How to deal with the page editor and these huge buttons "Save changes..", the huge edit field. Checking the Bool value might also be needed here... I don't know how to deal with that, also with Gui-Edit... -- OliverSiemoneit 2007-02-14 21:20:50
MoinMoin has interested me compared with other wiki software because it works with files rather than a database. This should make syncing between a handheld and desktop easy. I have seen Pocket Python, and am looking to see whether MoinMoin would run on this. I would love to have the same files show up differently (more simply) on the handheld than the desktop/server. On the handheld, I would like to have the editing window take up the whole screen with an OK button on the top right. -- Frank
- Most PocketPCs are either QVGA (320x240) or VGA (640x480). The VGA ones have about the same screen dimensions, so they use a larger font to compensate, so you don't really have 4 times the real estate. The soft keyboard will take up a good chunk of the screen as well, so your useable area on QVGA may only amount to 240x240, depending on the input panel in use. This, incidently, is also the size of the smaller Treos, which have a hardware keyboard. The larger Treos are 320x320. -- David
An additional useful link: http://validator.w3.org/mobile/check?view=cat&async=false&docAddr=http%3A%2F%2Fmoinmo.in%2FMobileMoin%2F (do not overuse it, or you will be locked out!), the mobileOK checker suggests to start from fixing caching information, and that is a one line patch (see discussions of better solutions at HttpHeaders):
diff -up /usr/share/python-support/python-moinmoin/MoinMoin/wikiutil.py.orig /usr/share/python-support/python-moinmoin/MoinMoin/wikiutil.py
--- /usr/share/python-support/python-moinmoin/MoinMoin/wikiutil.py.orig 2009-01-30 03:56:24.000000000 +0200
+++ /usr/share/python-support/python-moinmoin/MoinMoin/wikiutil.py 2010-02-01 11:42:10.000000000 +0200
@@ -1273,6 +1273,7 @@ def send_title(request, text, **keywords
# include charset information - needed for moin_dump or any other case
# when reading the html without a web server
user_head.append('''<meta http-equiv="Content-Type" content="text/html;charset=%s">\n''' % config.charset)
+ user_head.append('''<meta http-equiv="cache-control" content="private">\n''')
meta_keywords = request.getPragma('keywords')
meta_desc = request.getPragma('description')