As a response on the ticket: #1489838 “separate mobile interface is needed” (http://trac.roundcube.net/ticket/1489838)

First of all, I agree... Mobile/tablet interface should be there in the standard product, as a lot of people are more and more using tablets and mobiles as their primary device.

About a solution...

I guess one would first need to make a choice whether to implement Responsive Design in Larry or to select another template/theme based on the device-type using the user-agent string.

Both solutions have advantages and drawbacks.

Selecting a different template based on the device type, gives you the possibility to create separate functionality per device. Some functions should work a little different for a tablet then they should for a mobile device. So, in some cases that might require different javascript calls or so. The major drawback is, that you're always behind on supporting all devices. To stay compatible, it needs effort around the clock.

On the other hand, Responsive Design is the choice for a future-ready template. It doesn't care about which device you are on, it just looks at the capabilities of the device and adapts the design along. It is a pure CSS solution. That is good, but that also means that you don't get to have separate functionality.

The major drawback to Responsive Design is that the CSS structure can be harder to maintain.

That all said... I have made a first attempt at enabling Responsive Design for the default Larry template. In about one day, I've succeeded to redesign the email screen for the most part.

The boundaries I used for my attempt was to only use one CSS file to do it all. This one CSS file is simply added to the default CSS includes.

The biggest problem that I faced, was that not all styling is done in a CSS file, but for some elements CSS is added directly to the element using the style attribute. In some cases I had to entirely corrupt the CSS of some elements to undo the CSS that was put into the style attribute.

I’m not sure if and how attachments are processed by this mailinglist (as this is my first post), but I’ve attached a zip file containing the css. Also added three screenshots of the result on my Android device. The screenshots show the Dutch version of Roundcube, but it should give you an impression.

In order to try it out and see how Responsive Design works, just add the css file (mystyle.css) to “root-of-roundcube/skins/larry” and add the following line to the “root-of-roundcube/skins/larry/includes/links.html”:

Reload the page in your browser and adjust the size of your browser window to a smaller width. Currently (for testing purpose) the width at which the Responsive Design kicks in is at 1111px.

Please keep in mind that this is just a simple try-out from my part. It’s incomplete (at best) and the result of only one day of trying. A better result is possible by adding an additional javascript file for adjusting some html elements before the Responsive CSS kicks in. And an even better result can be get by removing the style attributes from the HTML and adjusting the HTML of Larry in small ways to better adopt smaller windows.

Regards,

Martijn