The idea of the responsive layout is to allow viewing the website on devices with small screens. To make this possible the browser should be able to change the layout depending on the available screen width of the device. What and how should be done is described using the CSS3 media rules…
In fact, there already were some attempts to make the Redmine layout responsive… The best known one was made by Xander Dumaine, but his theme is not maintained and currently is available generally as the article describing how to make a responsive theme for Redmine (nevertheless, I used his article a little to make Red-Andy responsive). There is also the RedmineCRM theme of Kirill Bezrukov, which is described as “responsive”, but I have not found any proof of this (neither a screenshot, nor any code making it really responsive – looks like Kirill meant something else, when described the theme this way)… Considering this Red-Andy 1.00 seems to be the first (and only) responsive theme for Redmine!
It should be realized, that the Redmine layout is not small screen ready! So, generally, making its theme responsive is a complicated task and not everything is possible to fix. In other words, to achieve the responsiveness I was forced to use hacks and, as far as I was trying to use as less hacks as possible, some issues are still going to be experienced on mobile devices. However, Red-Andy achieves its main goal – it does makes it possible to view the vast majority of Redmine pages on mobile devices! This is enough for me. And I hope that you will find it useful too.
The discussed responsiveness does not affect the layout of Redmine pages on normal (big) screens!
So let’s now check some shots of screens on a mobile device:
As you can see changes, that are made to the Redmine layout, when it’s rendered on small screens, include:
From time to time being away from my computer I was trying to check issues, reread news, Wiki pages and the similar on my old Samsung bada-powered smartphone (well, I use the cell phone just for calls, mostly). And it was an awful experience! This way I became curious about making my website responsive (but, certainly, first I needed to learn, what does “responsive” mean)…
Currently, I have the blog (this one), which runs on WordPress and still is much based on Redmine… Thus, my blog uses the Redword theme, which in turn uses the Red-Andy theme for Redmine. So, certainly I decided to make my Red-Andy theme responsive. But it appeared to be not easy…
The problem around Redmine themes is that they are pure CSS customizations. Having figured out, that for a responsive website I needed the viewport META, I gave up (as META tags can’t be added using just CSS). But later, thanks to Xander Dumaine, I found, that the viewport META tag can be added using JavaScript and Redmine themes are able to include custom JavaScript code. So I got back to experimenting with my site, its Red-Andy theme and my mobile phone. These experiments (i.e., improvements, customizations and so on), in fact, last till today and will, probably, last some more time… Anyway, the site now works fine on mobile devices – is responsive and usable (but some more improvements are to be or can be done)! So this article is a news/announcement for this! In other words, you can access this site from your smartphones now!
Also, this article is an announcement of the upcoming Red-Andy theme release, which will include responsiveness and, therefore, mobile support. This way the Red-Andy theme will become, as far as I know, the first and only responsive Redmine theme. Certainly, there were other tries like the Mobile theme from Xander Dumaine, but they were incomplete and/or unmaintained (at least accordingly to the information I have – I personally have not tried the Xander’s theme).
And, finally, here are some screenshots of my website taken on my old Samsung bada smartphone:
]]>