To those doing responsive web design in #drupal, what base theme are you starting with?

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
You are viewing a wiki page. You are welcome to join the group and then edit it. Be bold!

I posed the following question on Twitter, and thought the answers might be helpful to others (as well as a place to archive further discussion that's actually searchable :P).

Only local images are allowed.

Here were some of the more detailed responses. This is a wiki, so feel free to add additional ones, either in the post or comments!

Omega

By popular vote, the people who responded by far favoured Omega. Here were some things people said about it:

  • @karschp responds, I haven't done too much, but I've played with Omega a bit and it seems pretty awesome.
  • @michaelschutz responds, Experimenting with Omega for responsive work. I think it's a fantastic base theme.
  • @valariems responds, just downloaded #omega tonight, and very impressed. Responsive design built in. Can't wait to play with this more.

Zen

[Edit: The twitter comments directly below apply to the old Zen 7.x-3.x release and not to the new HTML5/responsive/mobile-first Zen 7.x-5.x release.]

Zen also makes a strong showing, although not too many people seemed that excited about it. :)

  • @dserrato responds, I recently did a responsive design and I started with Zen.
  • @jeff_shamley responds, using Zen for now, though its not optimal. Omega seems to have the lionshare now. #drupal
  • @aveldina responds, we use Zen. It's not responsive out of the box, but excellent to work with. Haven't fully tried Omega yet, but it looks promising!
  • @epersonae responds, since I started w/Zen, I've been trying to shoehorn into that, so far not super-successful. (will be coming back to it later.)
  • @jpamental respnonds, started with a zen starter theme and built up with html5 boilerplate, respond.js and other bits ( #responsivedesign )

Custom

However, there were also a lot of people who recommended against the idea of a base theme at all:

Other

There were a lot of varied answers to this question, as well, including lots of theme names I'd never heard of before. Might be worth checking into some of these if Omega doesn't suit your style:


Other themes

Here are other themes added by folks in this thread.

Adaptivetheme 7.x-2.x

Just released in beta is the new Adaptivetheme 7.x-2.x version with full mobile support - it does responsive and adaptive layouts out of the box and allows you to configure layouts, widths etc for various screen sizes. The theme uses respond.js to parse the generated CSS file that holds the media queries for easy support of IE. You can view a short intro video on responsive layouts in Adaptivetheme 7.x-2.x.

The theme ships with a blank starter theme with sensible default media queries and layouts for each device (standard, tablet, smartphone), and there are three styled sub-themes you can download and try and/or modify to suite your purpose: Sky, Pixture Reloaded and Corolla (7.x-2.x versions respectively).

The 7.x-2.x responsive version of Adaptivetheme was brand new when this was published so I'm putting in here because I know its rock solid with years of development behind it and powers something like 7500 sites already, and the media queries driven layout engine is simply an evolution of the framework and well worth taking a look at. / Jeff Burnz

Comments

subscribing!

marcrobinsone's picture

subscribing!

Awesome idea webchick, thanks

Jeff Burnz's picture

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.

Thumbs up to Adaptivetheme mobile responsive design

bluepal's picture

My vote goes to Adaptivetheme for responsive design, mobility, ease of use, flexibility, IE compatibility and accessibility. The theme settings are awesome and intuitive.

Based on Adaptivetheme, a mobile theme for the Drupal Commerce module is in the works, AT Commerce.

Plus, many popular themes are already converted to AT's mobile responsive design:

Jake's work on Omega is really impressive

jpamental's picture

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

Jason Pamental
[ @jpamental ]

Another vote for Omega - it's

cweagans's picture

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

--
Cameron Eagans
http://cweagans.net

Omega

cgroche's picture

I agree Omega gives you a lot of regions to work with, and provides a lot of flexabilty. There are other themes that are pretty good as well, a lot of it boils down to personal preferance.

It would be great if someone

laura s's picture

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?)

Laura Scott
PINGV | Strategy • Design • Drupal Development

Basic, it's the one we always

oskar_calvo's picture

Basic, it's the one we always use.

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

Oskar

Framework

bradrice's picture

Nice html5 clean slate to work with.

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

I had to hit up a search

Garrett Albright's picture

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

dqd's picture

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

ZEN + Custom

Ujval Shah's picture

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

Ujval Shah
Linked-in : http://in.linkedin.com/in/ujvalshah
Skype : ujval99
Gtalk : ujval99

Still working on it, but here

KrisBulman's picture

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.

My Vote goes to

njmahesh's picture

Omega - Its best theme among others.

Omega is built very logically

Adam S's picture

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

Marine job board with Drupal 7 at http://windwardjobs.com

In what way is that site

mkindred's picture

In what way is that site responsive?

Subscribe!

hansyg's picture

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.

I love TAO as a starters

eYeCasH's picture

I love TAO as a starters theme. It resets drupal core css great, and is really simple to adjust. http://drupal.org/project/tao

Mobile first. . . .

jpw1116's picture

Means I'm in the Omega ZONE.

Sub
scr
ibi
ng.

Adaptivetheme for Mobile

truegal's picture

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 FTW!

alltooeasy's picture

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!

adams950's picture

Thanks everybody to answer my questions!

Have a nice day!

:)

Another vote for Adaptivetheme and Corolla

mowgli's picture

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!

Pop

chriso's picture

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 +1

ngmaloney's picture

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.

Omega!!!!!

joewired's picture

very helpful! Thanks

zen this best solution to start a theme

hariharasuthan_mk's picture

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

Adaptivetheme +1

poohpal's picture

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.

Doune

botris's picture

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

Doune

botris's picture

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

Great idea

golchi's picture

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

Seeking knowledge - Omega question

rosemeria's picture

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?

Base theme doesn't matter.

rupl's picture

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 :)

Well said Chris, out base

Jeff Burnz's picture

Well said Chris, out base themes are exactly that, a base implementation, and by the very nature of Drupal and web, broad and generic. The onus is on the user to implement the finer grained approach required for their specific use case. +1.

Adaptivetheme + AT Commerce

piwicasso's picture

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.

965 v2 is up (now called Sasson)

tsi's picture

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.

big plus one to Sasson

blasthaus's picture

this is a very exciting theme, encourage everyone to check it out. we are also using it now on all new sites

Omega Convert from Zen

halcyon209's picture

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.



Working so much on computers, we can easily neglect our own bodies. Be sure to take a break and get some exercises in every now and then!

Delta is great with any

tsi's picture

Delta is great with any theme, not only Omega.

I also suggest Omega theme,

pflame's picture

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

AdaptiveTheme is my choice

DruBerrymore's picture

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

gaurav_m's picture

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

Silence is golden.

Great posts Thanks

Davidis's picture

Great posts
Thanks

ZEN

chrisguindon's picture

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

Zen is NOT responsive

DruBerrymore's picture

Zen is NOT responsive. The question was: "To those doing responsive web design in Drupal, what base theme are you starting with?"

ZEN can be responsive.

chrisguindon's picture

Zen is not "responsive web design" out of the box but you can code it to be. You dont need a "drupal responsive base theme" to create a responsive web design.

I use ZEN because it simple. I can start with this theme and create what I need from it.

I agree with Chris on this

KrisBulman's picture

I agree with Chris on this one. The 7.x-5.x branch of Zen is a great base for responsive design theming, it's very easy to get your head around with all the components you need to get started, drop in a new layout and you're well off. The title was interpreted properly here and Zen should not be left out of the mix.

Oh c'mon now. I've used Zen

Circlefusion1's picture

Oh c'mon now. I've used Zen and I like it, but the whole point of this thread is clearly to ask for a base theme that provides responsive design out-of-the-box.

Otherwise, you could answer the question with any theme because, yes, you can do responsive design with any of them if you know what you're doing.

That's odd.

NonProfit's picture

Zen is mentioned in the original post, so to get in a huff when someone says essentially, "I like it too" seems peculiar.

No love for zen

chrisguindon's picture

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

echoz's picture

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

Omega

davidburns's picture

Omega is powerful and flexible. +1 for Omega

Adaptive Theme > Sky > FooTheme

Danny Englander's picture

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.

High Rock Media | Drupal Photography | Skype: highrockmedia | Twitter

Arctica, Tundra

mazze's picture

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

chintan4u's picture

Thanks for wonderful post

start Bartik theme

headstartcms's picture

Easy to go and stable. Learn all the functionality.

Omega is awesome, but I like Sky a lot too.

rmontero's picture

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.

Best regards,

Rob Montero
Zend Certified Senior Drupal Engineer
Achieve Internet

My vote also goes to Omega.

tejaspmehta's picture

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

patrickavella's picture

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.

Definitely Omega

Kendall Totten's picture

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

Passes the acid test

dOwen's picture

Good work.

I looked at it on http://quirktools.com/screenfly/
in the Mobile/Motorola RAZR V3m emulator (wasn't that mean of me?) and except for a little horizontal scrolling it looked great.

Omega-

quardz's picture

Omega -> O my gawd. It Make my life easier. Surely it going to make me rich.

I done this in a day http://dev.vantagetax.co.uk/ using omega

Going to test Omega

Brolag's picture

Thanks for this post, very helpful!

New to Omega. Awesome so far!

drdave17's picture

New to Omega. Awesome so far! Would also seem reasonable that if we benefit that we also support the project financially.

Subscribing

chrishrtmn's picture

Subscribing

Definitely Omega. Responsive,

dropletz's picture

Definitely Omega. Responsive, flexibility with a load of powerful options, i used it in some of my projects:
http://demo.dropletz.com/community7/
http://demo.dropletz.com/glossy/

I can't live without in Drupal.

From a themer perspective I'm

joetower's picture

From a themer perspective I'm looking favorably at the Twitter Bootstrap theme. I like lighter-weight themes like Framework. I've found Omega and Adaptive to be far too bulky for my needs, though they're great for a site builder who doesn't want to touch code.

http://drupal.org/project/twitter_bootstrap

Performance

joshuautley's picture

With search engines determining a site's rank based on performance as a factor I can say Bootstrap (no longer called Twitter Bootstrap) is the lightweight champion.

We used Bootstrap 2.0 on the THQ site and now in its 3.0 version it can be implemented very efficiently.

One most note however that additional modules for D7 that enable CSS on Blocks and Images as well as field groups are necessary in order to take full advantage of Bootstrap.

We've used Zen and found it to be too heavy. We've designed around 15 sites using the Bootstrap base theme thus far.

Our most recent build+design is a great example of this base theme.

Check it out and let us know what you think:

http://www.oceanbeachsandiego.com

Adaptive

eCnet's picture

Like the Adaptive theme. Flexible great option.

Mojo theme

dcmouyard's picture

If you prefer lightweight themes that don't make a bunch of assumptions when it comes to layout, checkout the Mojo theme.

Less Framework

mksweet's picture

I just built a site based on the Less Framework 4 Adaptive Grid System and found it really intuitive, not bulky at all. I started with Steven Wood's initial project http://drupal.org/sandbox/stevenwood/1086606 but found that it needed a some work. But it was a great place to start when you essentially want to build the theme yourself, but want to start with something rather than nothing.

What I like about the Less Framework is that it uses grid based break-points, and its not fluid. I prefer adaptive theming to fluid theming.

It is also based on the default desktop layout first, rather than mobile layout, so the old-school IE folks see the desktop site, not the mobile.

More here: http://lessframework.com/

HTML5 WebSite or WebApp

davidmac's picture

There are a some great themes for designing with HTML5, it depends on how involved you want to get. I personally think that if you want to design a straightforward website in HTML5 then a theme such as Omega provides a great base. For sites that are more complex, you will most likely find yourself unpicking the theme and would perhaps be best to start from scratch.

This is a great idea for a wiki, however It'd be helpful to see a feature set comparison when discussing what each theme has to offer:

I recently found this article when doing some research on HTML5 themes and it goes some way to providing such a comparison:

http://www.digett.com/blog/06/29/2011/html5-base-starter-themes-drupal-7

watchdog

mossy2100's picture

There's actually a good feature comparison of base themes in the latest Drupal Watchdog.

AdaptiveTheme & Omega

PlayfulWolf's picture

In the last few weeks I was doing some own "research" of the same topic (looking for good responsive/adaptive base theme for Drupal 7) and most of the themes mentioned here are either built with very narrow capabilities or are buggy and not getting out of "alpha" stage.
The only two of them really kick-ass:
AdaptiveTheme - enough powerfull and made simple to customize, with most of the needed features simply working, and working flawlessly
Omega - simply unbelievable. I could say that it is ahead of most of the other base themes in the same level as 7.x core to 5.x, but for the most of small projects it is still an overkill. It is a bit disappointing, that some of sub-themes are stuck to old base theme versions and you need to do much work form the ground.

drupal+me: jeweler portfolio

Had good Experience with both

quardz's picture

Had good Experience with both omega and Adaptive.

Omega theme is easy to develop. Done 20 so for. But tough to reuse and do custom TPLs and regions.

Adaptive takes more time but better flexible and easy to add custom tpl.

I using both depending on need.

AdaptiveTheme, but wondering about Omega...

Hanpersand's picture

I'm a themer and site builder I work exclusively with nonprofits who are almost always on tight design and development budgets. I'm mostly working in D7 these days, and AdaptiveTheme has been my favorite for the last six months or so. Even when nonprofits cannot afford to officially support mobile in a project, I can at least provide them with basic mobile support via AdaptiveTheme.

In the past, when I've tried Omega, it seemed like serious overkill for clients who are not enterprise-level. AdaptiveTheme feels, to me, compact and easy to use. I am comfortable in template files, CSS and PHP, and I don't need every last thing to be clickable in the Drupal admin. The AT Corolla sub-theme, along with Sky and Pixture Reloaded, provide excellent starting place options for low design budgets.

I often use Panels and/or Context in projects. I am wondering about trying Omega again because I see that it has Context integration via Delta, and this appeals to me. Do others find Omega to be overkill? Is it really advantageous to do away with templates entirely and rely on Omega/Delta/Context? What are the pitfalls of that approach? I'd love to see more discussion about this.

Finally, I know ChapterThree is leading a re-think of the theming layer for Drupal 8. http://www.chapterthree.com/blog/jennifer-lampton/new-theme-layer-drupal-8
Serious kudos to them. I've been theming Drupal since 4.7, so I'm comfortable in the theme layers even in their most complex D7 form, but I do think that the D7 complexity hinders accessibility and I'd like to see it be easier for new themers.

I'm comfortable in

cweagans's picture

I'm comfortable in PHP/CSS/HTML too, but Omega is really nice, IMO. I wrote the panels layouts that are included with Omega, as well. Nobody can tell you how well you'll like Omega - you just need to try building something with it.

--
Cameron Eagans
http://cweagans.net

Omega

mel-miller's picture

It's a bit of overkill for some things, but I understand the concept and like how it's structured. I haven't done away with template files completely. I prefer to theme my node types (and some fields) with tpl files. I primarily use Omega (and Delta) for page layouts and variant layouts, as well as the built in responsive features.

It probably comes down to personal preference, but I'm comfortable with this theming setup:
Omega base
a custom sub-theme
Delta
Context
node--xx.tpl.php files

@melissamiller, thank you.

Hanpersand's picture

@melissamiller, thank you. That's helpful, because I, too, like to use tpl files for nodes (as well as fields when needed). So it helps to know that you find that setup manageable with Omega.

I have a big project coming up that will be using Domain Access, and I think I am going to give it a go with Omega/Delta/Contexts.

One thing that's frustrating is that I'd like to see some sub-themes for Omega. Most of my clients have design budgets for a custom sub-theme, but sometimes a tweakable existing sub-theme is what I need. Omega's sub-theme listing page is out of date: http://drupal.org/node/1298632
Does anyone know of a more up-to-date listing?

Give Arctica a try

mazze's picture

I have similar experience with Omaga, because my clients are also not at enterprise level. I really can recommend http://drupal.org/project/arctica , the approach is somewhat different but much more suitable for smaller projects. The additional "Tundra" subtheme gives you an additional starting point for the most commen jQuery features.

Artica

dOwen's picture

Took a look at it and looks quite useful and modestly robust. +++

+1 to Arctica

marcrobinsone's picture

I second this. Sometimes turning over Omega themes to clients give them a head-ache (ending up with one too).

http://www.SooperThemes.com — all made using Arctica is very robust and light-weight. The easy to understand theme-administration & skinr integration is also a huge plus.

Hmm. . . .

jpw1116's picture

Isn't it ironic that their own main site is not responsive design?

(No, I'm not referring to D.o here. . . .)

Seriously, even the Respondr demo site is minimally responsive for me in Firefox--it seems to have only two states and text is still truncating when I resize on the fly.

Meanwhile, Omega still performs like a champ for me.

Hmm....^2

aaronaverill's picture

Documentation: coming soon (last updated Nov 2011)

... meanwhile six months later ...

This is not a good sign for their level of support and ongoing commitment.

Contrast: http://drupal.org/node/1298616

SooperThemes not responsive

alexrayu's picture

I am narrowing the screen - not only it's not responsive, but also the header theming breaks. For myself, it has been a struggle to find an example of a good responsive site that would also have a complex layout. I know such module as Panels will not work with a responsive layout.

AT Theme is too heavy

joshuautley's picture

I see you like AT for it's ability to give your non-profits a bit of functionality out of the box and are considering Omega.

While I have not personally used Omega I have recently experienced cleaning up someone else's mess who used the Adaptive Theme.

From a very thorough review of the AT theme I can see that they tried to think of everything and in their documentation they recommend removing any selectors which are not used. Yes, please do this no matter the base theme.

We use Bootstrap and every bit of CSS is used, it is light weight and nothing to remove when you are done. As I said in an earlier comment you will need to add some additional modules that allow for adding classes to blocks, images and field groups but once you've done that you are ready to knock out the project.

We just completed a non-profit project so I know what you mean about budget constraints.

Check it out and let us know what you think:

http://www.oceanbeachsandiego.com

P.S. There is a compression issue with the AT theme which prevents core compression. Hopefully this link will save an AT user some time with this issue. https://drupal.org/node/1995938

and how does it compare to

PlayfulWolf's picture

and how does it compare to AdaptiveThemes?

drupal+me: jeweler portfolio

Omega

svettes's picture

Omega is our Hammer of voice exclusively. :)

One more option...

geoffAuthor's picture

Didn't see this on previous list:

http://drupal.org/project/boilerplate

Seems to be pretty fast. I've been using Omega, and just noticed when I changed the theme, boilerplate loaded up much faster... the version of Omega, I've got on my hard drive is not optimised, though... and I guess boilerplate comes in as a stripped out version...

Sky

peterx's picture

I start some sites with Sky because it is close to what is needed. Of the published themes, it is one I use frequently and now it is responsive thanks to AT.

There are suggestions you should move all responses to Javascript, or equivalent, in the handheld device. I tried that a few times. I find many pad/tablet users are using browsers that break with really basic javascript. Chome fails to indicate the right size for the viewing window. The browsers cannot tell you what will happen when a scroll bar appears.

You always need a plan B when you use Javascript and Javascript on handhelds is worse. Apps need a plan C. A good server/client relationship would include reporting the falures and avoiding those situations for subsequent interactions with the same device or browser or app. I have not found that level of responsiveness with the themes mentioned here.

Omega ++

dbazuin's picture

I have started with Zen for my first two sites. Actualy I would have switcht to Omega after one but the second one need to be finished very fast so it seems a good idear to stick with Zen.
Nothing bad about Zen it is a very solid base theme but in both sites I need to adjust the page_tlp.php to add extra regions to get what I needed.
With omega you got lots of regions and you can just order them how you want them just using the UI and if you need a extra one you only need to add it to the .info Clear cache and it apears in the UI.

So now I use Omega for every site I build and so are my collegues.

Omega as it is now is a very flexeble base theme. And I know it only is going to be better in the future.

If you use it in combination with context and delta as recommanded in the omega docs is even beter.
http://drupal.org/node/819164

Thanks to Jack and Sebastian for this awsome job.

Regards
Dirk

Ps this is one site I build with Omega
http://www.winkelpromenadehesseplaats.nl

I've been building my own

hamburgers's picture

I've been building my own responsive theme and hoping to have it on Drupal.org soon. I'd love to know what people think so far

http://drupal.org/sandbox/hamburgers/1417228

post a demo

PlayfulWolf's picture

post a demo

drupal+me: jeweler portfolio

adaptIC Demo:

hamburgers's picture

Here is a link to my adaptIC Demo: http://adaptic.indiecred.net

I have also used adaptIC in a subtheme experiment on http://evilengine.com

it works! so, it already does

PlayfulWolf's picture

it works! so, it already does the more than some fake-adaptive themes

drupal+me: jeweler portfolio

Omega is easy to use and highly configurable

Rajan M's picture

There are some other great starter themes like zen, framework etc.
But I strongly recommend omega, it is HTML5 grid layout , adaptive, mobile support, easy admin interface to change number of layout/block/ size and much more.
I think even http://www.acquia.com/ uses the customized subtheme of it :)

Omega, once installed.. it

gaurav_m's picture

Omega, once installed.. it will persuade easily.. and it is quite difficult to say No! As there is a clean demo.
"Just try it"

Silence is golden.

Disgusting use of votes

JohnAlbin's picture

I find it really disgusting that every single comment that mentions Zen in a positive light has been voted down into negative numbers. Is it really so bad that people have different tastes? One person likes Omega better. One person likes Zen. It's all good. Why are there so many haters firing off -1 votes?

EchoZ commented “The roadmap for Zen 7.x-5.x is to provide a responsive layout.” She offers no opinion on the matter, just a statement of fact. What warranted 4 people to vote that down? Are you really so petty?

hansyg said “I have used Omega mostly for responsive stuff. I used Zen as well […]” and apparently that is deemed deserving of a -1 vote too. No disloyalty allowed in the ranks?

headstartcms mentions their preference to build responsive designs off of Bartik. Again… -4 votes.

oskar_calvo says he likes Basic. -1 vote!

It seems that some basetheme fans think its more important to oppose other basethemes then to keep things civil. But to make it clear that I’m upset with the behaviour and not one particular basetheme’s fans, I’ll even call out the poor conduct of a the people who voted down cweagans’, adam S’, alltooeasy’s and oskar_calvo’s comments favoring Omega.

If you think a comment is a off-topic or content-free, go ahead and vote it down. AFAIK, that was the intent of setting up comment voting on g.d.o.

If you disagree with a comment, reply! You know… with actual words. Hitting -1 because you disagree is poor, passive-aggressive behavior.

For shame.

For shame!

  - John (JohnAlbin)

That's what happens inavitably

alexrayu's picture

That's what happens inavitably John. I have witnessed that on other mostly Russian IT platforms like habrahabr - when a good IT community turns into a quarelling company of karma-f####rs, then teaming for the + and - signs, etc. That is inavitable where there are "-" signs. Behind people at Drupal.org there is not only professionalism, but also financial interests, and ambition. And that can ruin a lot in a community. I am finding myself just going around the site trying to put "+" wherever I can to level out the negative impact a lot of votes can have on both the old and the new members.

I agree. I say, what's the

tsi's picture

I agree.
I say, what's the point of the down-vote anyway ? vote up if you like it, leave it alone if you don't. the result is pretty much the same and no one gets hurt.
Is there a discussion somewhere about losing the down vote ?

There is!

JohnAlbin's picture

I found this thread about the possibility of changing the ability to down-vote comments. http://drupal.org/node/1116820

  - John (JohnAlbin)

Thanks for pointing that out. . . .

jpw1116's picture

I find value in this part of tsvenson's comment there:

I like @webchick's idea about just having a "Like this" button combined with a "Flag as offensive" button. The offensive data should however not be visible unless for webmasters.

That would put focus on positives instead of like it is now when the voting can be used for expressing negatives about something just because it will mean they will have to adapt to something new.

Also FWIW I've had to up-vote my own comments just to equalize extraneous negative ones back to neutral. Someone with too much time has been negating. Thumbs down to that.

Back on topic, this recent webinar with Jason Cranford Teague brought up the thread's original gist pretty nicely, in case anyone missed it: http://youtu.be/nqfx4rXj1j4

Voting?

aaronaverill's picture

Ahh... the challenge of democracy!

I guess you put too much emotional weight on voting. +/- 10 is probably noise. Its completely reasonable a handful of people will cruise by without reading the content in depth and click + or -

Funny thing - I didn't even notice the votes in a full year of using this website. :)

I also agree

dbazuin's picture

I am a big fan of omega.

But for my first two sites I used zen and I was very happy that it was there for me to use.

So respect to John for that.

--
regards
Dirk

I am the co-maintainer of the

fubhy's picture

I am the co-maintainer of the Omega base theme. I didn't really follow this discussion because I am currently drowning in other work (including my diploma). Even though we maintain different base themes I consider us all (Jake, John, Morten, Jeff and all the other base theme maintainers, including myself) part of the same team. I hate to see our users fighting over whether one base theme is better than the other.

I am currently working on a new major release of Omega. The first thing that I did was to look at Zen, AdaptiveTheme and Mothership and talk with their maintainers. These people were also the first to look at the code and concept of what I am currently working on and I asked them for and highly appreciated their input. It really hurts me to see that the people that I depend on when working on and developing base themes are being attacked by the users of "my" base theme.

Anyways: Let's please be supportive of each other and be productive as a team instead of spreading hate. After all, it should be our goal to improve the themeing experience for all of us.

Mother? Ship?

peterx's picture

Fubhy, what is in Mothership that interests you? Mothership is one theme I have not used. I have used Stark and some other minimal themes.

Using Sky is a bit like buying a ready built house. AT is a bit like buying off the plan and specifying the colour of the tiles. Stark is closer to buying a truck load of bricks then wonder what could be built with them.

Given that Omega is in the AT range and Mothership is at the other end, when is Mothership an advantage over Omega?

mothership is focused around

mortendk's picture

mothership is focused around cleaning up the horrible bloathed markup that drupal delivers & is trying to make it easier for frontend developers to get into a more natural workflow, based upon how you would write you markup in hand. its not a theme thats build for people that wanna click things into order & be happy with the status qou - its made for handcoding lean n mean markup.

So its a very different aproach to the frontend development, that drupal normally provides.

/morten.dk king of rock
morten.dk | geek Royale

Can we have the ability to

banghouse's picture

Can we have the ability to click things AND have clean, lean code? That seems like a noble effort IMO. Diminishing the value of non-coders being given the ability to develop complex operations by "clicking things" seems less so.

Unfortunately, it seems that

rupl's picture

Unfortunately, it seems that click-to-config and ultra-efficiency are rarely compatible. The reason is because for a system to cover all the scenarios via admin UI alone it has to output some level of meta markup to handle the edge cases. See: Views.

I think the reason that we have so much contention around the "best" theme is because nothing can satisfy the diverse definitions of "best."

I personally want to avoid clicking a UI when I build a responsive site. I prefer not using Drupal in fact! Using tools like Sass and Compass require some learning, but the power extends far beyond what any easy-to-use UI could ever deliver. Ever.

Adding a UI on top of any technology is a huge investment. To achieve a good UI, someone must be both an expert at the tech in question AND have the compassion to understand the basic comprehension issues and address them in an efficient matter. When we think about this in the context of something as complex as a CSS preprocessor, the request for a UI becomes almost comical.

On the other hand, some people don't have the desire or time to learn these technologies. They want a UI and to them the perfect solution is something fast and easy. This definition of a perfect solution does not often involve being lean and efficient, because you're not looking at the code, you're looking at a UI. It's just a trade-off. While improvements can always be made, I think it's safe to say that an "easy" solution will never be as efficient as today's "advanced" solution. By the time it catches up, there will be a new level of efficiency achieved. It's just the nature of the technology cycle.

We shouldn't give up trying to provide good tools, but I think we all need to realize that priorities differ between everyone's unique situations, business models, etc. There is no "best" theme.

I could not agree more.

banghouse's picture

There is no "best" theme.

I could not agree more. See comment below: http://groups.drupal.org/node/175234#comment-792458

An extensive and flexible UI can produce clean lean

peterx's picture

An extensive and flexible UI is only an overhead if it calculates everything in a template or .tpl file. The output could be generated code with no calculations during a page view. There a gazillion chucks of software implementing the code generation approach and Twig will do it in D8. So we can click things and have clean, lean code.

This is all stuff that was known from online systems in the 1980s. If you customise every page for every user, you have a bigger overhead than customising per group and per group is bigger than per site. Good code will do only the minimum required for a page view while other code does everything on every page view even if not needed.

Most of the stuff in a UI is not needed for the page view and does not have to be loaded all the time. If you want clean lean with the most flexibility for a theme developer, you can give the developer a specific role and splatter the UI junk all over the screen only when someone logs in with that role.

Does any software do that?

The first example to consider is the blocks editing drop down in some themes and that usually defaults to appearing all over the place for all administrators despite that fact that only 15% do any theming and of the 15%, only 32.7% of their time is spent on theming of which only 11.735% is related to blocks.

Twig may not be the best choice and may not do everything it is promoted as doing, but it is a step towards code generation. The colour setting options in some themes are another example. If we put the best of what is already available into a module, it could generate a clean lean responsive theme.

A theme generator could start with a clean lean base theme. That would change the topic of this discussion to a question of interest to me:
To those doing responsive web design in #drupal, what is the cleanest leanest base theme to start start with?

@Fuhby Afaik the community

banghouse's picture

@Fuhby Afaik the community surrounding Omega (in IRC at least) is highly supportive of a persons right to choose to use whatever tool works best for them. I know for a fact there are zero Omega users in #drupal-omega that would suggest otherwise. But if they did they would be immediately corrected by the incredibly generous and supportive group of people that help out in that channel everyday both with Omega & non-Omega related issues. These people should be publicly commended for their efforts as they genuinely reflect the best of what makes the Drupal project truly great. The core ethos of Drupal is represented there consistently and with true passion for the project. I have personally witnessed everyday for 1+ yrs the selfless acts of kind, non-judgmental, genuinely Drupal principled support being given from all the folks that chill in that room regularly.

So true

dbazuin's picture

I totally agree with you.

Lets not forget that we do not pay for all this great stuff.
This guys are making our Drupal work a lot easier, lets be grateful for that.

lets get on with are job and have fun doing it.

Fubhy best of luck ( as if tou need it ) with the diploma.

Agree absolutely

mlangfeld's picture

I missed the discussion, I guess, where negative votes were discussed. They lead to this outcome. Too easy to anonymously be negative. I participated in a news site that only had positive votes. Worked very well, IMHO. Otherwise, the DIGG effect takes place.

Best, Marilyn

Re: What is the best starter theme for responsive web design

banghouse's picture

I've said it a thousand times, you should use whatever works best for you and your goals where you are currently in your development as a developer. For me and many other Drupal site builders who are less comfortable than others using php in .tpl files, Omega's UI mixed with Delta & Context are fantastic tools. This combination of tools immediately elevates that type of user to a whole new level of capability. It's the UI that makes Omega the right fit for me. And IMHO the "responsive" part of Omega is simply icing on the UI cake.

If you're a php coder and you know the theme system well then Zen or another similar theme is likely a better fit for you. Any debate that may exist about one framework being better than the other is as they say, "apples and oranges". Omega serves a specific user set VERY VERY WELL. Zen and the other base themes serve a different user set.

I'm continually disappointed that this isn't more obvious and that the arguments persist reagrding which theme is better than the other or even that Omega is so heavily identified with the "responsive" buzzword since it's true power is in its theme settings UI.

Adaptivetheme is really great.

arboldeolivo's picture

Currently I'm using it on all my sites in drupal. It's very easy to work with, and the mobile site lays out well.

arboldeolivo
Olive Tree Web Design
Web Design in San Diego

Hanpersand's picture

(Not trying to argue for a "best" theme, but adding my updated 2 cents about two I'm using in case others find it helpful.)

In the last month, I started using Zen.x-5.x on a project and I really like it. It seems to have lightened up and a lot seems much improved over 3.x. I'm also using the new 3.x branch of AT. Both are HTML5, responsive, and are compatible with SASS/Compass. AT 3.x branch organizes CSS like Zen does, so it's not so hard for me to switch between the two.

Many of my projects are small, and I haven't yet had a chance to take the SASS/Compass for a spin. But the one thing that both these base themes now have that rocks for me is optional responsiveness. These versions of AT and Zen have an easy-to-find place where you can disable responsive CSS.

This is great because responsive is not always possible or best for every project. I have lots of nonprofit org projects where the designers and clients aren't quite on board yet with responsive. They don't get it, or they may be resistant or inexperienced. Or they may want to do a really, really good job with responsive mobile UI and they don't have the funds in an initial build budget to have a designer handle it properly. The ability to disable responsiveness is awesome for me, because I can get those base themes on board, and build out the responsiveness later as the concept slowly makes its way into the zeitgeist, funds come in, or board members or org constituents start asking for it, etc.

How about the Twitter Bootstrap theme?

kappaluppa's picture

Has anyone given this one a go? I saw a sandbox with Omega + Twitter Bootstrap. I've seen a lot of vids on how to use Bootstrap outside of Drupal. And I see there is a Twitter Bootstrap theme project for Drupal. I have installed it and have not been able to figure out how it works. :p Although the basic page is responsive.

Twitter Bootstrap = Awesome

pcoffey's picture

Twitter Bootstrap is awesome! I've been working on a Twitter Bootstrap Theme for Drupal called Base Buidling Blocks. I just released the first version a couple days ago. It's really simple, and I have documentation on how to use it: http://basethe.me/documentation

Check it out: http://basethe.me. Please let me know any suggestions you may have for it! And please feel free to fork me on github.

It has modernizr, ios orientation fixes, IE classes, so it can be useful.

AT seems to have it all

tchopshop's picture
  1. You can strip out stylesheets in the UI like Mothership,
  2. it has a great variety of Responsive Panels Layouts if you choose to use Panels, which also work within Display Suite if you design with Context/Display Suite -- so you could go either way.
  3. It's lightweight (like Zen and unlike Omega)

I love the power & flexibility of the new Zen Theme with its zen grids' content-first layout methods... but you'd have to build your own responsive Panels layouts if you use Panels... it's not that hard, but AT has already done it.

I just wish that we could have AT theme with Twitter bootstrap's default styling!

AT is great

pcoffey's picture

I agree, adaptive themes is awesome! Twitter bootstrap is a pretty good responsive/grid solution, I like its responsive-ness a lot better than AT, that's why I use http://basethe.me. its really lightweight as well, upgrades jquery to 1.8 and html5-ifies a lot of Drupal aspects.

My vote goes to Omega

abdots's picture

I built many sites using Omega and they are doing just great.

  • Flixible.
  • Clean code.
  • Time saver.

Zen

OptimusPrime23's picture

Hi there,
I would always recommend to start with zen Zen and it supports Sass.

Responsive with omega and sass

dbazuin's picture

You can use sass with omega np.
Interesting will be the next step when we start using sass/susy with omega 4.

Then we can keep the grid classes out of the html and get a more flexible responsive site.

Have to try that soon.

Regards
Dirk

Omega

joseu's picture

Awesome idea webchick, Omega is my choice!

Kalatheme

pirog's picture

If you guys are looking for an easier way to do responsive design out of the box with full integration for panels i would recommend http://drupal.org/project/kalatheme

+1 omega/Responsive WYSIWYG?

trickyricky26's picture

With Omega and Delta the possibilities are pretty much endless.

It is most likely overkill for simple layouts where adding a framework like skeleton or bootstrap will get you the same results faster with a bit of coding but great for complex regions.

With all of these responsive minded people posting - I have to ask if anyone has any intel on a WYSIWYG editor or setup that can easily accommodate responsive grids inside nodes for front end users?

Bootstrap is actually very

pirog's picture

Bootstrap is actually very small so it's not overkill. My guess would be that it's probably faster then omega.

With Kalatheme, there is no WYSIWYG component (yet) however all the panels layouts are out of the box responsive and there is a style plugin to easily toggle the responsive visibility of each panel pane.

At themebrain.com

themebrain's picture

At themebrain.com (http://drupal.org/user/1446728), we build responsive Drupal themes (http://themebrain.com/drupal-themes) using our own base theme Nucleus (project/nucleus). Try out our free responsive theme TB Sirate (http://drupal.org/project/tb_sirate)!

ThemeBrain - new generation of Drupal theming
http://themebrain.com

Skeleton

rongok's picture

I am doing a responsive theme based on Skeleton (http://www.getskeleton.com). Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size. Check the dev site here: http://dev.rongok.gotpantheon.com

starting from html/css?

AlexBorsody's picture

I have a client that came to me with the responsive HTML/CSS already complete. I have built responsive websites before by starting with a PSD and a base theme like Omega, but what would be the best way to minimize effort by using the responsive HTML/CSS already created?

You could try Beep Edition

jpamental's picture

That's one I just posted. If you use Sass/compass you might have good luck with that. It's very minimal so pretty easy to build on. It's what I've used for a bunch of sites lately and is meant to be used as a starting point rather than as a true base theme.

http://drupal.org/project/beep_edition

Jason Pamental
[ @jpamental ]

I've been using Zen theme

Pascal.s's picture

I've been using Zen theme since i've started using Drupal. But it doesn't come with a responsive menu and I don't like the modules available so far (select menu). So i stripped out the menu script from the Professional theme which is fully customizable in CSS and now I have a 100% responsive starter theme.

Thanks

suntog's picture

When I first saw this post years ago I built three sites in parallel using zen, omega and fusion. Back then omega won. But now I use zen and tomorrow I'll prolly use mothership, depending on whether or not mortendk is cooler than John Albin (fuhby is cool too). Since they are all really good themes, I think we should all use more superficial criteria for theme selection, such as what the client thinks, or what your boss is forcing you to use. Personally I use the "who's the coolest themer" as my selection criteria.

I am not sure if I can beat

fubhy's picture

I am not sure if I can beat Morten and John in terms of coolness :P

Theme development

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: