Mobile. Are we still designing for mobile? Only? Although there are cases in which it still makes more sense to have only two designs for a website - big screen (!) and mobile, we are quickly graduating out of that period. Even mobile phones and laptops have so many different screen sizes that it’s difficult to account for all of them in this two-tier approach.
Thus i think we are moving out of this intermediate phase in which we have separate layouts for smartphones and we are rapidly going into the next one: responsive layouts that look good on any screen size. The different sized tablets, smartphones, laptops and desktop screens are pushing us towards this reality, and if we want to stay ahead, we need to conform.
However, it has come to my attention that there aren’t so many free Drupal themes that respond to different screen sizes. You can find a couple of adaptive starter themes and a bunch of premium ones, but the Drupal community has been always used to a generous set of free resources. So I tried to find some free responsive themes. If you are interested in Drupal modules that can help you build responsive or mobile sites, you can read my other post.
Professional
Created by Pradeep Saran, Professional is a pretty simple looking theme, much like a crisp and technical blog. However, the front page has the flexslider image slideshow that’s pretty cool and even a bit corporate.
It also has a nicely done drop-down menu which looks professional and a typography that draws from Google Web Fonts. The layout can be 1, 2 or 3 column-based, totalling 11 block regions.
And yes, it is responsive. It adapts nicely to the screen size based on a few breakpoints, everything looks good, maybe apart from the front page slideshow product description on a small screen. The menu is particularly noteworthy as it changes into a mobile version, which is very useful and should not be taken for granted.
So feel free to check it.
Premium Responsive
From the same creator, Pradeep Saran, comes Premium Responsive. Pretty nice, has some similar elements as Professional, but it also differs quite a bit. It still looks like a blog theme, but it has a nice image slideshow on the front page. You gotta love those no?
It has a nice typography and also an attractive looking drop-down menu. But I have to say, I liked the menu for Professional more. Especially when you resize the window, this one turns into a simple select list jump menu which is not among my favorites. But it is a good solution to a difficult problem, so kudos!
Above the menu you can find some nice social buttons that contrast very well with that part of the header background. The node pages on the other hand are similar to Professional, apart from the comments layout which I prefer in this one.
And again it responds quite nicely to different screen sizes based on a few breakpoints. It is not fluid, but still a good solution.
So definitely check it out!
FontFolio
FontFolio was originally a portfolio Wordpress theme ported to Drupal by Israel Shmueli. Right off the bat I am going to say that I am not a big fan of this one, but I am impressed with its responsive character and fluidity.
I would say the main characteristic is the front page portfolio of product images that fluidly responds to changing screen widths. It also has a blog and a right to left version of the layout. It has a simple menu which on a small screen closes up and you get that neat little 3 horizontal bar icon. If clicked, that then opens to a horizontal menu.
All in all not a bad theme, it also provides some documentation, so you can definitely check it out.
Responsive Business
Another one from Pradeep Saran, Responsive Business is somewhat similar to the Professional and Premium Responsive themes. It has a nice blog layout with a fancy image slideshow on the front page. The menu also looks nice and has an attractive drop-down effect.
It responds pretty well, again only with breakpoints and the menu turns into something quite weird that I think is not really useful for mobile phones: buttons are too small. But check it out!
Responsive Blog
I know it seems that only Pradeep Saran makes responsive themes for free, so here comes another one (last one I think): Responsive Blog.
It is very similar to the other ones so I will not go into it but let you explore. All I will say is that it looks simple, crisp, clean and likeable. Very easy to customize to your own brand and is definitely worth checking out.
Skeleton
Skeleton looks crisp and professional and can be very well used by a company, showcasing products but also writing blog posts. Originally for Wordpress, it has been ported to Drupal and is supported by More than (just) Themes.
It also uses only breakpoints to respond to different screen sizes, but it does so nicely, apart maybe from the menu and images that are in the demo.
Another big like on this one, so do check it out.
Bonus: Omega
How could I finish this post without mentioning the Omega theme? This theme is absolutely wonderful. It provides a billion options in the UI and is also friendly in the template files. If you want to create a great responsive theme with your own design idea, this is your starting point.
OK, so that's it for now. If you find more responsive themes that are free, please share them in the comments. I wouldn't mind seeing that there are others out there. But anyway, I am sure that the number does not compare to the one of free but regular Drupal 7 themes.
Hope this helps.
Daniel Sipos
Danny founded WEBOMELETTE in 2012 as a passion project, mostly writing about Drupal problems he faced day to day, as well as about new technologies and things that he thought other developers would find useful. Now he now manages a team of developers and designers, delivering quality products that make businesses successful.
Comments
Nice collection
I love the list. Thank you. Oh, and i will going to cry if you didnt mention Omega!
Very Helpful Article
The year 2013 will be the responsive year so i must say awesome themes. Thanks for taking the time to discuss this. If possible, as you gain expertise, would you mind updating your blog with more information? I am in Drupal development so it is really helpful for me.
Thanks a lot!
You're savin me!! Thanks a lot with the above themes. And one more free theme I'm using that has responsive design is ThemeBrain Sirate (http://www.themebrain.com/theme-detail/tb-sirate). I think Sirate will not fail any of your expectation guys! And I've heard from ThemeBrain admin that they are going to update responsive design for all remaining free themes. Can't wait!
Journal Crunch and Corked Screwer
http://drupal.org/project/journalcrunch and http://drupal.org/project/corkedscrewer are very good as visually although I didn't try them.
Thanks.
Thanks a lot for this collection.
Add new comment