Forum OpenACS Development: Mobile Theme?

Posted by Dave Bauer on
Has anyone worked on a mobile theme for OpenACS?

I know there are some simple steps to take to make a theme friendly for mobile browsers, but there is a trend towards javascript enabled mobile web sites as well.

Does anyone have any experience building OpenACS for a mobile browser?

2: Re: Mobile Theme? (response to 1)
Posted by Torben Brosten on
Hi Dave,

I find that most issues don't deviate from plain browser issues, once one switches from pixel-based dimensions to resolution independent ones, such as inch or cm; and using minimal amount of graphics (and repeating image use when possible).

I'd be curious if you're finding other issues.



3: Re: Mobile Theme? (response to 1)
Posted by Dave Bauer on
I guess I am more interested in a theme that is specifically for a mobile browser, instead of a them that works acceptably.

For example, Many Wordpress sites use a completly different mobile theme that is optimized for mobile use.

4: Re: Mobile Theme? (response to 3)
Posted by Ryan Gallimore on
Hi Dave,

I've been looking into this as well and it seems media queries in CSS work well. Content is adapted to different device widths using something like:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
// css rules go here

You can exclude large images, for instance, with display:none.

Probably the best implementation I've seen of an adaptive mobile display is here: After poking through their CSS it looks like they used a similar rule.

There are other ways of doing it, like server side detection, but this seems the most common. This allows you to develop one theme package for many devices.


5: Re: Mobile Theme? (response to 3)
Posted by Torben Brosten on
A mobile / small device theme is an interesting concept.

Have you ever gone to a website that serves a small device version, and wished that you could browse the one for standard browsers?

Our main beta tester made an interesting observation. He has to carry his glasses around, just so he can see websites on his phone when they serve a mobile version.. that doesn't allow the phone's browser to zoom in/out. The adaptive "zoom" feature is often disabled on mobile versions.

There are times when an optimized, mobile version is necessary; many times, the design criteria should be applied to the main site as well.

6: Re: Mobile Theme? (response to 5)
Posted by Ryan Gallimore on
Hi Torben,

I agree. Your complaints can be addressed with proper mobile design, for instance, the "zoom" feature can be controlled with the meta viewport tag.

With a media query solution, an optimized mobile version can be delivered. For example, CSS can reduce a multi-column listbuilder list to a single column for the mobile version, but show all columns in a large screen format. The single column could include links to detail pages.

In this way the structure and functionality remain the same but the presentation layer (CSS) adapts to the device dimensions.

jQuery has a mobile library which looks very slick, and provided some good ideas.


7: Re: Mobile Theme? (response to 1)
Posted by Dave Bauer on
Thanks for the input, I guess this can be handled mainly with CSS and I do agree that allowing zoom is important, but a mobile friendly layout controlled by CSS is also nice.

This is specifically for filling out forms etc, where a standard layout with zoom is functional but the experience can be improved.

I'll update if I develop anything interesting and let you know what I learn.

8: Re: Mobile Theme? (response to 7)
Posted by Dave Bauer on
To anyone interested I am working with jQuery Mobile. Right now I am replacing most of the ADP pages with jQuery Mobile specific versions and looking into the possbility of a switchable mobile theme using the subsite theme features available since OpenACS 5.6.
9: Re: Mobile Theme? (response to 8)
Posted by Jose Agustin Lopez Bueno on
Hi Dave!

We are interested in your works.
Can you explain it to us?
Can we test it?


One specific case where a targeted CSS solution may not be enough is in the writing of a 'WebApp' specifically for iOS devices, with OpenACS driving it. I am about to experiment with this, and one of the presentation layers I thought I'd try (wAN) requires content to be delivered asynchronously conforming to its own XML DTD.

As well as the WebApp interactions, I'd also want OpenACS to be able to serve the same content in the conventional interface for non-iOS users. CSS @media or javascript feature detection client-side to determine would not be enough in this case, because I need to serve fundamentally different underlying markup as well.

Which of the following would be best?

1) iOS device requests include a parameter webapp='t' which gets passed from page to page?

2) iOS device is identified at the time the session cookie is created and the session cookie is flagged (obviously this would a core change)?

3) Write completely new set of adp 'pages' to drive the webapp?

How best to do this for Xowiki content?

a) Should the render method for ::xowiko::FormPages be adapted, or should I write a new render_4iOS method?

b) Subclass ::xowiki::FormPage to ::xowiki::iOSFormPage, but then what about serving content to normal browsers (problem in reverse)?

b) Should this be done as per 1, 2 & 3 above, by modifying the xowiki adp templates?

There's no correct answer I know, but I'd really appreciate some opinions.


10: Re: Mobile Theme? (response to 1)
Posted by Dave Bauer on
Here is some new info I have discovered:

regardinfg responsive web design, which might be more useful to OpenACS developers instead of using a mobile toolkit like jQuery Mobile.

This involves designing for 320 pixel wide screens, then progressively adding CSS for different screen widths to optimize for different platforms.

jQuery Mobile is best if you are designing a seperate interaction flow for mobile platforms as opposed to a mobile friendly web site.

12: Re: Mobile Theme? (response to 1)
Posted by Antonio Pisano on
I made some experiments with JQuery Mobile and seems very effective, easy to use and relatively lesser in footprint than other libs as ExtJS. I like JQuery's agnosticism about style in development.

The results with JQuery are "a lot like mobile", meaning that you have real buttons, drop-down menu and stuff which seems quite native on every platform.

The drawbacks of using JQuery or other rich js libs is that you will somehow throw away all the HTML gui features in OpenAcs, which are very solid... the css approach is more prone to reuse in this sense.

With JQuery you end up creating javascript applications running on the browser, which speak with RESTful webservices written in OpenAcs. The platform would become a "mere" interface to data, which could be queried in many ways other than from the smart webpage.

Speaking about different templates for each device, one of the many alternatives could be to query the user agent to detect a particular browser, then use a different adp for it by esplicitly telling the tcl to compile against it instead of the generic one. Data logic would be only one, with many dresses.

13: Re: Mobile Theme? (response to 12)
Posted by Dave Bauer on
Jquery Mobile or similar platform based on HTML5 is probably the best way to go. Pretty much anything is going to require serious work to get something that is a "App" instead of just a mobile-friendly web application since you not only need to redesign the interface, but to get the best user experience you'll need to redesign how a user interacts with the application.

This means you need to write code to handle this. Each application is going to be different, so it is best to customize this to your specific application.

I have been experimenting with Jquery Mobile for specific forms and interfaces that are required to be used on a mobile phone and it really does give you some good user experience with little effort on the front end. OpenACS provides a great resource for the back end development.

If you go this way you might need Json-procs.tcl from CVS HEAD.