[Owncloud] Responsive design for web frontend

[Stefan Goeckeritz]

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 

cheers 
Stefan 

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

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