[Owncloud] Responsive design for web frontend

[Thomas Mayer]

Hello,

On 14.02.2012 17:27, Frank Karlitschek wrote:
> Thats great. We shoudl support different formfactors. At the moment
> Desktop, Mobile, Tablet and Standalone.
> Please see this page for more information. 
> http://owncloud.org/dev/formfactors/
> 
> You just have to put the new css files in the same directory with the special name and they are automatically used.
> 
> You can also provide special templates, images and js if needed. It´s of course better if special CSS files are enough.

sorry for only replying now, but I have not had any time to look at the
stuff.

I have just taken a look of the code for form factor detection, and IMHO
detection of form factors is a herculean task, because there is such a
wide range of HTTP_USER_AGENT strings to detect, that even specialized
projects like WURFL[1] sometimes cannot keep up with the pace, and every
new phone on the market may or may not fail to the test.

A better approach is starting with responsive CSS (for examples see [2])
and including media-queries in the basic CSS files, that detect for
width[3]. The base template could include a (display:none) link that is
only made for devices with width smaller than a threshold, and e.g.
moving the navigation from left to top for these devices can also be
made with these queries.

I have pushed a simple, but working example of this:
https://gitorious.org/~residuum/owncloud/residuums-owncloud/commit/1dd0dea56bf6736d2eedb91420bb1207a1e29a9d


Best regards,
Thomas

[1] http://wurfl.sourceforge.net/
[2] http://designmodo.com/responsive-design-examples/
[3] http://www.w3.org/TR/css3-mediaqueries/#width

-- 
"From the perspective of communication analysis, government is not
an instrument of law and order, but of law and disorder." (Gracchus
Gruad in: Robert Shea & Robert A. Wilson, The Golden Apple)
http://www.residuum.org/