E2 Mobile Interface

Having recently acquired an [iPhone], I was in equal measures impressed with the mobile interfaces on sites like [http://facebook.com|Facebook], [http://www.textsfromlastnight.com/|Texts from Last Night] etc, and horrified by E2's interface.

E2's already-cluttered user interface degrades severely on a mobile device with a tiny screen, as well as suffering from the low bandwidth inherent in these devices and the CPU time needed to render all that extraneous stuff.

For a long time I've been saying that E2's user interface needs to be decluttered and simplified, and a mobile device interface seems like the perfect excuse for doing just that.

Most of the clutter on an E2 page comes from nodelets that we rarely even look at on a pageload. They make for a lot of extra text and clutter, and placing them to the side of the page makes for a very wide page on a mobile device. But nodelets themselves are generally just about the right sort of size for a mobile display. So aiming at the maximum benefit in usability for the minimum amount of code changes, I decided to refactor the UI a little:

Don't display nodelets on a page. Just the page please, ma'am.
Display nodelets on a page of their own, one per page.
A 'controls' page/tab gets the most commonly used bits of clutter. Currently, the search box and a list of the available nodelets. A meta [nodelet meta-container], if you will.

While this vastly reduces clutter and improves usability on mobile devices, it retains more or less the full functionality of the site: the mobile interface has access to all the regular nodelets, and they behave pretty much exactly as they do on the regular interface. This isn't a reimplementation of the UX, it's just a refactoring.

Schema

[general container] (container): Modified to detect 'mobile' mode by hostname or cookie, and set the parent container to a settings- or theme-driven mobile-specific parent.
[zen mobile container] (container): Zen theme mobile container, sets the viewport and presents a main display without nodelets. Also displays control tabs (below). The 'wrapper' element is contained within a further 'mobilewrapper' element for easy identification in stylesheets.
[zenMobileTabs] (htmlcode): Control tabs for the mobile interface.
[Zen theme]: Added 'generalMobileParent_container' key to point to [zen mobile container].
[node listnodelets page] (htmlpage): Display page for any node which presents the 'controls' view of that page. Mostly, links to nodelets, hence the displaytype name 'listnodelets'.
[node shownodelet page] (htmlpage): Displays a single nodelet for a page, identified by the 'nodelet_id' parameter. Contains a fairly nasty hack to ensure that any links in the nodelet which preserve the displaytype of the current page will also preserve the 'nodelet_id' parameter.
[zen user display page], [zen writeup display page], [zen e2node displayfull page]: Annoyingly, these had their parent containers set to [zen container] rather than [general container]. It seems somewhat logical given that the only previous use of [general container] was to override parent containers on a per-theme basis. So I reset them to [general container].
[zen stdcontainer]: To reduce the load imposed by google, the zen stdcontainer sets a 'base' for the page which effectively makes all links point to 'everything2.com' regardless of whether the link came from everything2.org or everything2.net. This scuppers attempts to use an HTTP hostname to determine whether to show the mobile interface or the regular one. So disable the base insertion for mobile hostname.
[kernel blue]: Stylesheets (more below) generally set the 'wrapper' element's padding to a fixed size to leave space for the nodelets along the side. On mobile devices, this amount of space is typically just about the whole screen. So I have modified [kernel blue] to override that, and also add some styling to the tabs presented by [zenMobileTabs].

Stylesheet modifications

Additional elements are added (mostly by [zenMobileTabs]):

#zen_mobiletabs: div containing the tabs
.zen_mobiletab: Tab which is not selected
.zen_mobiletab_selected: Tab which is selected
#mobilewrapper: Wraps #wrapper in the mobile interface, so that the selector "#mobilewrapper > #wrapper" can be used to override #wrapper's styles (particularly, the padding for nodelets!)

Still to do

Make other stylesheets play nice.
We need a mobile-specific front page.
Fix guest user caching so that guest user pageloads from the mobile hostname don't redirect to the regular site.
Link from the regular site if we detect a mobile client device.
Testing and feedback!
Tabs and titles are in the wrong order: since the tabs select views within the page, the title of the page should be above the tabs. Probably a CSS issue more than anything else.
Notifications: since the epicentre isn't on every page, we'll miss XP notifications etc. It would also be good to have a 'new messages' notification too.

Access

You can give it a whirl by going to: [http://m.everything2.com/node/login].

root log: July 2010 (log)