Edgewall Software

Opened 7 years ago

Last modified 3 years ago

#11953 new enhancement

Responsive design for user interface

Reported by: Ryan J Ollos Owned by:
Priority: normal Milestone: undecided
Component: general Version:
Severity: normal Keywords: ​layout
Cc: thomas.akesson@…, florian.berger@… Branch:
Release Notes:
API Changes:
Internal Changes:


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.

Attachments (0)

Change History (8)

comment:1 by lkraav <leho@…>, 7 years ago

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.

comment:2 by Christian Boos, 7 years ago

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.

in reply to:  2 comment:3 by Ryan J Ollos, 7 years ago

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.

comment:4 by thomas.akesson@…, 7 years ago

Cc: thomas.akesson@… added

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


comment:5 by brian@…, 7 years ago

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/

comment:6 by mkosek@…, 7 years ago

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.

comment:7 by Florian Berger <florian.berger@…>, 5 years ago

Cc: florian.berger@… added

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

comment:8 by Christian Boos, 5 years ago

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

Modify Ticket

Change Properties
Set your email in Preferences
as new The ticket will remain with no owner.
The ticket will be disowned.
as The resolution will be set. Next status will be 'closed'.
The owner will be changed from (none) to anonymous. Next status will be 'assigned'.

Add Comment

E-mail address and name can be saved in the Preferences .
Note: See TracTickets for help on using tickets.