Going Responsive

Responsive design is a way to make websites work both on desktops, tablets, and smartphones, without having to create a separate site for each of them. There seems to be a generally recognized mother article on responsive design, so go there if you want to know what it is all about.

Something had to happen with my site to make it more mobile-friendly, and I’ve decided to “go responsive” with this site for several reasons:

• The percentage of mobile visitors is increasing steadily, so the “problem” becomes more important each day.
• The bounce rate (the percentage of users that leave after viewing a single page) of the mobile visitors is higher, which indicates that they don’t like the experience as much as the non-mobile ones.
• I need a sidebar to show things like popular articles, but if I add one to the current layout, the site becomes completely unreadable on a phone (even in landscape mode). I also do not want to make my photos smaller, so simply making the main column narrower is not an option.
• The truly optimal solution is possibly a separate mobile site, but it think that responsive design is more doable for my one-man operation.
• On a personal note, landing on one of those sites that are completely mobile-unfriendly is simply annoying. For some sites you “only” need to rotate your phone to landscape, zoom, and center the main column of text. For others, there is no way that you can read the main content without scrolling left and right all the time.

Given that my site runs on Drupal (also see my other Drupal related articles on spam and caching), the hunt was on for a responsive Drupal theme.

Omega vs. AdaptiveTheme

After some looking around on Drupal.org, I quickly narrowed down my choice to one of Omega or AdaptiveTheme. I decided to stay with a non-premium (a.k.a. free) theme. I am aware that my design skills are insufficient for creating a really professional looking site, but for this blog it’ll do for the time being. I don’t doubt for a second that there are other alternatives besides these two, but Drupal themes are really out of my comfort zone, so I’m not going to be able to give you a complete overview of the possibilities anyway…

Choosing between these two themes is not necessarily easy, since both are clearly very well written. A key difference that was very important to me, is that Omega bases its layout on a grid, and AdaptiveTheme doesn’t. This means that it seems difficult or impossible to build an Omega theme that has a fixed width sidebar with only the main column shrinking on a smaller screen. But that is what I wanted. So, in the end, I went for AdaptiveTheme.

Responsive Bartik

[update]

In the very end, I went for a different solution. Since my previous theme was based on Bartik, the default theme of Drupal 7, it was much more convenient to go with responsive Bartik, the default theme of the upcoming Drupal 8. Doing this was quite easy, since that theme has been backported to Drupal 7…