What is the best starter theme for responsive web design in Drupal?

subscribing!

Awesome idea webchick, thanks for the roundup, I bet this will grow a lot over the coming months, I added my theme since the shiny.new.responsive.mobile version is brand spanking at time of publishing. I pushed this out to some other groups as well, the mobile and theme dev groups.

Only reason I didn't start with that was I didn't have time to get my head around all of the configuration possibilities. HTML5 Base was also one I've worked with - I like the idea of a well-reset base and Jesse did some awesome work there ferreting out how to deal with a lot of peculiarities and dark corners of Drupal theming. I essentially started from scratch with my Zen starter theme, eliminating most of the base style sheets and building up an HTML5 theme using LESS.css to do all my conversions for widths, margins, padding, etc. That let me set my 'base design' widths in pixels for page width, columns and gutter -then the theme converts everything to percentages. Since I use LESS.app when I develop, I only put the 'compiled' css on the server - I don't use the client-side JS libraries.

Jason

Another vote for Omega - it's chock-full of awesomesauce.

It would be great if someone could work this wiki into a table of responsive themes comparison. Some column ideas:

IE support method (Respond.js, static css, none)
HTML5 (boolean)
Base theme (boolean)
Grid (descriptive answer)
Active development (boolean)

Anyone have some time to pull that together? (Maybe, so this wiki's organization isn't lost, it should be a new wiki?)

Basic, it's the one we always use.

We have a mobile -basic and a custom (html stripped) also.

Oskar

Nice html5 clean slate to work with.

http://www.drupal.org/project/framework

I had to hit up a search engine to figure out what this "responsive web design" is. Darn buzzwords.

At any rate, maybe it's getting a bit long in the tooth, but Zen has never done me wrong, even though I've done it wrong from time to time. There's a lot to be said for its maturity.

I go with the most comments sorted under "custom" in the start post. but I like lauras idea.

Combination of ZEN and custom theme is awesome !!
Use of CSS3 is also making work much easier.

Still working on it, but here is the cocktail so far:

Base theme: Zen 7.x-5.x (with Sass/Compass support)
IE support method: Respond.js (included in zen)
Markup Language: HTML5 (with shim, included in zen)
Grid: Fluid 960 (added support in subtheme for fluid 960)
Modules: Fitvids, Responsive Images
Description: it's a little work to make it responsive, but with the help of a couple modules, percent calcs, and html5 coding, it's not hard.

Omega - Its best theme among others.

Omega is built very logically which means my approach to theming with it is consistent with how I use code and systematic. It really makes it easier to theme freeing up a lot of thought to be more creative with other aspects of Drupal development which in my case is with maps. If somebody is creating an application website instead of a brochure than I highly recommend using it.

If you use the Context module then the Delta module that integrates with Omega makes creating completely different layouts for different sections of a website tremendously simple to the point that experimenting with different layouts costs very little in time.

+1 for Omega

I have used Omega mostly for responsive stuff. I used Zen as well but converted most of the pixel based layout items to %.
Jeff's HTML boilerplate sandbox is a great % based grid with MQ http://drupal.org/project/html5_boilerplate as well.

Means I'm in the Omega ZONE.

Sub
scr
ibi
ng.

Adaptivetheme 7.x-2.x is a superb starter theme for mobile. It does responsive and adaptive layouts with easy point-and-click configuration. It's powerful, yet it's the easiest responsive theme by far. I love playing with it. Good accessibility too!

http://drupal.org/project/adaptivetheme

Omega +1

Brings a lot to the table and keeps you more in the front end screens.
Plus rumour has it that Himerus is at work on a responsive Commerce compatible Omega SubTheme/Expansion.

Since having adopted it a few months back its saved a lot of time in comparison to others.
I think in time too, it will accommodate a more mobile specific approach as well.

Again reducing the legwork in getting it up and out the door.

Thanks everybody to answer my questions!

Have a nice day!

:)

I've been using the standard non-mobile Corolla theme for some time on my sites. Corolla, http://drupal.org/project/corolla, is a great theme by itself.

I'm happy that it is now MOBILE thanks to Adaptivetheme , http://drupal.org/project/adaptivetheme .

By making Corolla a subtheme of Adaptivetheme, Corolla inherits INSTANTLY the responsive design and mobile features with little effort of my own.

Hope more themes can be converted to subthemes of Adaptivetheme!

I used Pop for a D7-based blog recently. Still no stable release but nice and easy to work with.

Aside from colours and fonts and the usual stuff, the main work I had to do for for my sub-theme was to ensure tabbed links collapsed to a vertical list below a certain width, to centre/size-tweak input fields on forms such as comments and all the /user pages, and responsively fold the sidebars underneath the content as necessary.

Omega does a really great job of making it simple to construct a responsive sub theme. It also makes it easy to disable this feature if you don't wish to use it.

very helpful! Thanks

you can start zen based sub theme

we can inherit the base theme property through sub theme concept,
for this we have to configure

http://drupal.org/project/zen => zen

the below module is used to create zen based sub theme

http://drupal.org/project/zenophile => zenophile

The question was: "What is the best starter theme for responsive web design", not just any starter theme. Note the emphasis is on Responsive Design.

Some of the well-known starter themes are not there yet.

Adaptivetheme is already a responsive design and mobile starter theme. Creating an Adaptivetheme's subtheme is easy and intuitive.

I am also a big fan of Pixture Reloaded which is now responsive design although not a starter theme.

I'm missing this great theme here.
Doune has got the best of a lot of worlds, but great for responsive layouts.

I'm missing this great theme here.
Doune has got the best of a lot of worlds, but great for responsive layouts.

Wow this post is really helpful; you don't know sometimes where to start from :-)

Which is the best responsive starter theme for smaller sites?
Omega looks fantastic but... The Omega theme is much larger than most starter themes; is Omega best for large sites only? Is Omega over kill for a small to medium size site?

I think it's important to realize that responsive web development cannot be properly executed with ANY of these themes out of the box. This is a fundamental shift in our approach to front-end development; it is not as simple as wrapping the grid CSS with a media query.

The real issues that should be considered are:

• Why? Why are you making your site responsive? Are you doing it because you think it's cool? Are you doing it to experiment and learn? Are you trying to provide a robust mobile solution to your client? Depending on your goals you can be lax or strict with the following:
• Context: Use a library like Modernizr to feature detect and request assets based on device context. Context should not be done on the server, for a multitude of reasons that are out of the scope of this discussion. Screen size is one of many, many contexts. min-width and max-width are the 101 of responsive development.
• Lean functionality: Are you actually using all the JS in the various screen sizes? If you decide to skip the context-aware asset loading, at least check context before executing JS or jQuery plugins.
• Responsive images: max-width: 100% is not the end of the fluid images issue. We already have an insanely powerful tool with ImageCache, so we need to apply its goodness to mobile. Oh look, there's a module for that.

In a nutshell - Discard every byte you possibly can. Use context-aware images, CSS and JS. Test on a device that doesn't start with i. Strive to be future friendly. Drupal theme layer (and subsequently base themes) can't/don't address these issues independently.

Edit: I wrote this in a rush yesterday, and want to add a PS that I'm only offering this slightly off-topic opinion because I don't want people thinking you can download one of these themes and sidestep a true understanding all this awesome — yet complex — technology. We all have a loooong road ahead figuring this stuff out. IMO it's exciting :)

I like Adaptivetheme mainly because of the AT Commerce theme, http://drupal.org/project/at-commerce , for building shopping sites in Drupal 7. Responsive web design is ideally suited for e-commerce and mobile users on the go.

Also impressed with Adaptivetheme for supporting responsive panels for layout.

I think some of you might like the new 965 Sasson base theme, now with SASS support built in, HTML5boilerplate integration, semantic & responsive grids and more...

[EDIT] You can now even choose between a mobile first or a desktop first approach, right from your theme settings. not to mention build any grid system you can think of while keeping the responsiveness, just enter page-width, # of columns and gutter-width and your layout is ready.

I know I'm a bit late to the table here but I just finished migrating a Drupal 7 theme from Zen to Omega and I must say, Omega is great to work with. Using the Delta and Context modules make the Omega theme quite flexible without having to create new template files.

I also suggest Omega theme, it is great. We created a responsive theme using Omega for Drupal Camp Deccan 2011 site http://www.drupalcampdeccan.org/

Thank you @webchick for this thread!

I successfully converted a Zen and Fusion site to Adaptivetheme, gaining instant responsiveness for the new sites. I also like the accessibility and responsive panels of AT. A pleasure to use.

http://drupal.org/project/adaptivetheme

Basic theme is for Starters
http://drupal.org/project/basic

and AT is also good
http://drupal.org/project/adaptivetheme

i never played with TAO
so, don't know much about the same

Great posts
Thanks

I've been using ZEN lately and it's a great starter theme.

I'm quite surprise about this but anyways you guys convinced me to use Adaptivetheme in my next project that require responsive web design.

The roadmap for Zen 7.x-5.x is to provide a responsive layout.

Omega is powerful and flexible. +1 for Omega

I recently started theming a new responsive site using Drupal 7. I started out with Omega because it seems to get the most promotion and notoriety as far as responsive base themes go but for some reason I found it awkward and I think that's because as a themer, I like to get my hands a little more into the code.

I found Adaptive Theme and specifically the Sky Theme. I ended up finding a nice post on Adaptive's site how to use FooTheme to create a Sky subtheme. Once I did this, I never looked back and have been really happy with it. I also found Adaptive's Theme settings UI more intuitive then Omega's.

A new player has entered the stage: the Arctica Theme. I currently have two projects running on Arctica (with Tundra Theme extender). I still might go for Omega for some bigger projects, but for mid size projects I really recommend to give it a try.

Thanks for wonderful post

Easy to go and stable. Learn all the functionality.

I love Omega... does everything and then some but it feels too bulky sometimes... maybe with like a lighter subtheme or something.

Now Sky is a very easy, does what it needs to do out of the box kinda theme and it feels less cluttered.

I would only like to be able to change the background image with a little bit more ease to make it the perfect theme for small sites.

My vote also goes to Omega. For D6 and D7 both we used omega and its fun to work with omega

I've been using the Omega base theme exclusively ever since DIWD2011. The CSS files are laid out well, and the major elements of the markup are easy to style. Unfortunately the markup is really bloated, but that tends to be Drupal in general. The bloated markup makes mobile loading slower than what I'd like it to be. There are also some bandwidth issues concerning images, as an image sized for desktop can potentially take a long time to load over 1g or 3g.

I'm a big fan of Omega out of the box since the responsive design works beautifully right from the beginning. Yes there are a lot of configuration options on the theme settings page, but that just means that you don't have to go digging around in code and potentially breaking things, espeically if you are new to theming.

I love that it gives you the ability to nuke stylesheets that are being loaded from enabled modules. That's a delightful perk for any themer. Then if you incorporate the Delta module with context, you have a huge toolbox in front of you that makes creating dozens of custom template (.tpl) files a thing of the past.

I built a responsive theme for www.tbdug.com in less than a week, and it was pretty simple & straightforward. I also utilized the LESS module to make writing the CSS a lot faster.

The Omega documentation is a great resource to get off the ground running, but here's a quick rundown of all Omega has to offer:
http://www.mediacurrent.com/blog/inside-look-omega-theme