[Owncloud] Responsive design for web frontend

Stefan Goeckeritz goeckeritz at rheinahrcampus.de
Wed Feb 22 00:03:32 UTC 2012

Hey guys 

this is AFAIK the way jquerymobile handles the job. Worked out quit well. I'd definitely vote for this method since it was thought for exactly this use case. 

Keep it 


-------- Original message --------
Subject: Re: [Owncloud] Responsive design for web frontend 
From: Thomas Mayer <thomas at residuum.org> 
To: Frank Karlitschek <karlitschek at kde.org> 
CC: Owncloud <owncloud at kde.org> 

---------- Ursprüngliche Nachricht ----------
Von: Thomas Mayer <thomas at residuum.org>
An: Frank Karlitschek <karlitschek at kde.org>
Cc: Owncloud <owncloud at kde.org>
Datum: 21. Februar 2012 um 23:52
Betreff: Re: [Owncloud] Responsive design for web frontend


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

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:

Best regards,

[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)
Owncloud mailing list
Owncloud at kde.org
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.kde.org/pipermail/owncloud/attachments/20120222/9da938f6/attachment.html>

More information about the Owncloud mailing list