Responsive design for user interface

[Ryan J Ollos]

Trac currently has an interface that provides a good experience when viewed through a desktop browser. However, the experience is not so good on mobile and tablets. Trac would benefit from a responsive design that improved its presentation on all devices.

The issue has been raised in a few tickets: #11940, #11466. Several users have attempted to improve on the user interface by developing themes, and Apache Bloodhound used Bootstrap to implement a new interface.

A good first step could be survey and discuss frameworks we could adopt to ease the implementation of a responsive interface, and more dynamic functionality in general. That would best be done on the MailingList.

[lkraav <leho@…>]

I would suggest opening a specific thread up on ML then and link to it. Not sure it's beneficial to spread the discussion around multiple threads.

[Christian Boos]

I've got mixed feelings about Bootstrap. I'm not saying that we have the nicest design around, but… I fail to see the Bootstrap-based ones (#11940, [BH:]) as improvements. Of course there the spacing and button sizing is probably more adapted to mobile devices but we could also address this issue while keeping our visual identity or an improved version of it.

That being said, I know that Bootstrap is quite modular, so we could take the responsive parts only (grid and media queries). Bootstrap also uses Less, so that could be an incentive for us to also use it and restructure our stylesheets to factor out common sizes, colors, etc.

I think that we'll need anyway to go beyond the stylesheet level, as in some cases, like for the two columns ticket properties display, it would be nice to dynamically restructure the table to single column, using ​js callbacks as in ​enquire.js.

[Ryan J Ollos]

Replying to cboos:

I've got mixed feelings about Bootstrap. I'm not saying that we have the nicest design around, but…

Similarly, the question in my mind is not whether we should move to Bootstrap, it is rather about how we can implement a responsive layout and what frameworks might help with that. I also like Trac's existing styles and I'd like to see incremental transformations that retain the fundamental styling.

[thomas.akesson@…]

Mixed feelings about Bootstrap might warrant an evaluation of Foundation 5.

​http://foundation.zurb.com/

[brian@…]

Depending on your need to support legacy browsers, i suggest skipping Bootstrap and Foundation, and going directly to a flex based grid. ​http://www.w3.org/TR/css3-flexbox/

[mkosek@…]

I just saw that ​Google announced change in the search algorithm, mobile friendly sites will get higher rank, especially when searched on mobile devices.

I think this bumps priority of this request a bit, otherwise Trac based project sites may not have as good rank as other mobile-friendly sites.

BTW, I was just pointed to alternative Trac 1.0.1 theme, that tries to implement responsive theme: ​https://github.com/wearede/DEtrac. Maybe it could be used for basis for this work.

[Florian Berger <florian.berger@…>]

Any progress on this? trac is a pain to use on my 540x960 px Fairphone.

[Christian Boos]

#12685 will try to improve usability for people with big fingers or small screens (or both).

But don't hesitate to point out other areas that could be improved on mobile. While doing so, be sure to refer to recent Trac versions (1.3.2dev), like this one, where a lot of updates on the CSS has already been done.