Forum OpenACS Development: Re: Mobile Theme?

Collapse
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.

Collapse
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: http://www.ecentricarts.com. 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.

Regards,
Ryan

Collapse
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.

Collapse
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.

Regards,
Ryan