Redmine Responsive Design Theme

In development is a responsive design theme for Redmine. Redmine has native support for themes, allowing you to include a JavaScript file, a stylesheet, and any necessary images.

My theme, which is currently called "Mobile" (I need a name - leave your suggestions in the comments, or let me know on twitter), is based on Redmine's default theme. I'm using responsive design for this template to allow Redmine to scale for better user experience on phones and tablets. I'm developing this theme for two reasons: 1. I use Redmine for personal projects, love to check on issues at night or in the morning from my phone in bed, and I have not yet found a decent mobile app, and 2. The company I work for, which uses Redmine actively, is about to give tablets to all employees.

To develop this theme using Responsive Design, I started with the default stylesheet, injected the necessary meta tags with JavaScript, modified the styles for mobile optimization, and reset the styles using media queries.

Comparison of Design

The most important decision in this responsive design theme is to make all functionality and content equally available on a mobile screen as it is on a full sized browser screen. As you can see below, the sidebar from the full sized version turns into a full width section above the main content in the mobile version. This is to maximize use of screen real estate, and make everything quickly and easily accessible.

Compare the following two images, of the themes default and mobile respectively, at full screen in a browser. They should Look the same.

Now compare these three screenshots, of the same page in the screenshots above, using themes default and mobile from an iPhone. You'll see that the layout is quite different with the mobile theme, giving a much better user experience with text of a readable size, buttons of pushable size, and removing the need to zoom and side scroll.

Implementation

As I mentioned above, for the responsive design, the page must include a meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

This viewport meta tag, coupled with the following property in the css:

body {-webkit-text-size-adjust:100%;}

resets the width for mobile devices to use the device width as the page width, and resets the scale to 1, so the device won't autoscale text to "fit" the screen. This was important to me, as I believe that in landscape mode, the user should see the same size text as in portrait, but more per line. Additionally, using this method to prevent autoscaling of text, we are not removing the user's ability to zoom on the page themselves - something often done on mobile sites, which is quite frustrating at times.  In order to inject this meta tag into a pre-existing page, of which I do not want to modify the source, I use JavaScript:

I use the following media queries in my stylesheet to apply different styles according to device and screen width:

The first two ensure that the styles contained are applied to any devices with screen sizes wider than 480 and 600 pixels respectively. The last will only be applied when the window width is wider than 770 pixels. This means that, for example, a laptop 1080 pixels wide will evaluate the last media query to true, but if the browser window is resized to less than 770 pixels, the last media query will evaluate to false. If this last media query is changed to min-device-width from min-width, then the style changes inside would always be applied on a device with a screen wider than 770 pixels, regardless of browser window size.

My choices of widths to use for the widths are not arbitrary. The design of the page is initially done for very small screens (less than 480 pixels wide). A few changes are made at 480 pixels (iPhone width - for mobile phones), more changes are applied at 600 pixels (Nook Color width - for tablets) and the final changes are made at 770 pixels (anything wider than iPad). Because of these widths, I get a neat effect on tablets - in Portrait mode, tablets display the tablet sized styles, in Landscape mode, tablets display the desktop, or full sized styles. This is the exact effect I want. However, If I wanted to specify styles specifically for landscape and portrait modes, I could use the following media queries:

@media screen and (orientation:portrait) { ... }
@media screen and (orientation:landscape) { ... }

The kinds of things that I styled in the theme were:

• Floating sections are 100% width on small screens and default (50% or 33%) on larger screens.
• Table cells display as block on small screens to give a stacked-list type effect, as you can see in the screenshots above, and then display as default table cells on larger screens.
• Sidebars appear as full width sections above main content on small screens, and right floating sidebars on larger screens.
•  List items that make up a menu have more padding in smaller screens to give an easier "button-press."

Caveats and Extras

I wanted to inject a "theme signature" of sorts. I did this through JavaScript:

I'm using JavaScript to inject links for apple touch icons (which were first conceived and implemented by Apple, but now Android uses the same icon files, to make it easier on developers), so there is an icon when adding a bookmark to the homescreens of devices, instead of defaults (default icon on android, crappy screencap thumbnail on iOS). Relevant code, and screenshot of result:

Check out the live theme on my Redmine server (server is down), and let me know if you have any suggestions or comments. For downloads, check out the github repo. I'll post releases as they are ready.