Home / Taxonomy term

Webinar

Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme [July 19, 2012]

Click to see video transcript

Speaker 1: Hi everyone, thank you for joining in on the webinar today. I’m going to go over a few slides and then pass it over to Dana. Today’s webinar is Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme with Dana DeMet and John Wilkins from Palantir.

Dana: Hi everybody, I’m Dana DeMet. I’m the business manager here at palantir.net. I’m here today obviously with John Wilkins. He’s one of our senior Drupal developers and themers.

Palantir.net is a full-service web strategy design and development firm that was founded back in 1996. We’ve been working with Drupal since 2006. Our team is made up of about two dozen or so web design development and Drupal experts. We specialize in open source technologies to develop sophisticated solutions that help people share information online in new and pretty exciting ways. We’re also very involved in the Drupal community, the Drupal association and DrupalCons, and we’re also an Enterprise Select Acquia partner.

Our team also includes some of the leading contributors to Drupal 7 core and we also have a number of folks who are leading core development initiatives for Drupal 8. On top of that, many of our key members are responsible for maintaining or co-maintaining some of the most widely used Drupal contributed modules. We’re currently looking for Drupal developers as well as Acquia and engineers to join the Palantir team, so if you’re looking for a new challenge definitely contact us at soon as you can.

At Palantir we’ve been focusing on developing mobile first solutions for our clients for the last couple of years now. This is included the development of both dedicated mobile apps for iOS and Android devices, dedicated mobile and adaptive websites and of course responsive designs.

While we recognize that a responsive design approach isn’t always the best for every situation, we’ve definitely found that it is ideal for many of the clients who we work with who are looking for a robust and sustainable solution that is as future proofed as possible. The way that people interact with websites is changing very rapidly. It’s been estimated that within three years the majority of us will use mobile devices such as smartphones, tablets and eReaders to access information online, while a sizable minority will continue to use desktops and laptops for many years.

In this rapidly changing ecosystem, what’s required is an approach that focuses on the needs of the user rather than the capabilities and features of their device. That’s one of the reasons that Palantir has provided support for the development of the Zen base theme and the Zen Grids project. What you see today in Zen 5 is the result of a year’s worth of work over several projects, including our own responsive site, which coincidentally was recognized by responsive design pioneer Ethan Marcotte as one of his 20 favorites, and the responsive sites we’re currently building for the University of Michigan Medical School.

We like to use Zen and Zen Grids because it enables us to build sustainable, best practices driven sites that focus on the needs of the user using the most current and standard compliant tools and techniques. With all that information I’m going to turn it over to John, who’s going to take you over Zen and responsive web design.

John: Hello everybody, I’m John Albin Wilkins. I’m actually really excited to be talking today. I wrote all those lines just for this presentation. Primarily I’m the Drupal 8 mobile initiative lead, which means I’m sort of rallying up and helping people get coordinated around adding mobile solutions including responsive design to Drupal 8. It’s pretty exciting but the thing I want to talk about today is things you can do right now in Drupal 7, and that’s using Zen and the Zen Grid system.

The Drupal Zen thing has been around for a while, I think over 700,000 downloads, which I actually just saw that download statistic recently and it’s pretty humbling. It’s really amazing that that many people said, “Let’s take a look at the project.” Obviously you can download it from drupal.org/project/zen.

The Zen 7.x 5.0 release is actually the fifth major release. Those of you who have been keeping track of Zen releases may have noticed that we skipped version 4, but that’s just because when I quoted then from Drupal 5 to Drupal 6, I thought it was going to be a straight course and it turned out to be a major overhaul of the system because the previous system is so different than Drupal 6. I sort of forgot to bump the version number up when I quoted the Drupal 6. I’m just basically catching up from that being behind by one.
Zen 5 is the fifth major release, and I started out just trying to add HTML files features to Zen. What ended up happening was that I got a whole lot of other great best practices into the new Zen 5 theme including Normalize, Respond, Sass and Compass, Responsive Design of course as well as accessibility things like ARIA and RTL language of course is all in there. There are a lot of really great encompassed about this new release, and you can read more about all those different features on the project home page.

One of the things that I noticed once I tried quoting Zen to HTML5 is that Drupal things can’t really … they can’t really alter the markup that you need for good HTML5 websites because the theme level just doesn’t know about the semantics of your actual content. Of course Drupal is a system that allows you to create content types and create add fields to those content type, and I hold them to the configuration of Drupal. The theme system really doesn’t understand anything about all those different fields. All we know is that there are X areas or text fields, but it doesn’t know what HTML5 element it should be using. It’s the HTML5 elements that really makes a nice semantic markup, so while developing the Zen 5 theme, I got together with smart people at Palantir and we wrote census modules specifically to address the markup of Drupal’s field’s module.

The default markups that Drupal 7 provides for a field is kind of the worst-case scenario in that it assumes that you’re going to have a paid multi-value of fields with no markup of its own. It’s like a plain text multi-value field with a label. Really that’s an edge case, but that’s what Drupal 7 first assumes. It provides all the markup you need or that edge case, whereas Fences sort of does the opposite. It assumes that most of your elements are going to have markups inside them already, they just need sort of a single wrapper element around it. You can see that Drupal 7 with Fences provides a much leaner semantic markup for your content. We really like this start. We were building the sites to make sure that Fences had been installed and configuring each of our fields to use the right semantic markup.

When we were building a responsive Drupal site, basically we’re configuring Drupal fields with Fences. Then we build a Zen sub-theme and then design our layouts with Zen Grids and Sass. That’s basically … those are the things we’re really talking about today. Yes, this is probably the most boring slide that I have, but it’s not quite as boring.

The guiding principle applied in Zen has always been that it makes no assumptions about your content design and it does the most minimally useful thing for all designs and then gets the hell out of your way. Basically, what this means is that we don’t know you users. We don’t know your content, but there are a lot of best practices and good development practices that you should be following. Zen will help you to do those things. On those places where people may honestly disagree about the right approach of things, Zen makes sure that it provides a sensible default that’s really easy to override. You can swap out Zen’s default principles or default implementation of anything and replace it with your own.
For example, the Normalize CSS files that’s now included with Zen. Normalize is an interesting project in that instead of resetting all of your HTML elements with a really overzealous, in my opinion, selector and reset style that removes all margins and padding and bold and everything, removes all style from all elements. Instead we normalize that CSS. Let’s make the default styling consistent across browsers, so it adds sort of a light sprinkling of markup to a select group of CSS or HTML elements in order to provide consistent styling.
Then one of the best ways to Normalize Zen is to edit that file directly. Basically instead of resetting your styles, you’re setting your styles inside the Normalize CSS file, so you’re setting sort of your standards.

Again, this is as a single file. It’s really easy to rip that out and replace it with, if you prefer, an HTML reset. You could certainly do that. The rest of Zen will continue to work with systems normal. That’s been a valuable content and it will continue to be that way.

Lean, semantics HTML5 markup, the new Zen has gone through all of the relevant template files and really removed a lot of the ractives that has been sort of the development station of Drupal 7. It also to provides a sort of a flexible lightweight responsive stream and it does it with the meta tags and some supporting libraries which I’ll show you in a second, as well as the Sass and Compass.

When you start to build a sub-theme of Zen, which is the pretend way to use Zen, there’s applications which you can find on the Zen project page which lists all the five or six steps that you need to do in order to take the starter kit folder, which has been included with the Zen theme, and copy that to your new spot on your site and modify it to your new sub-theme.

Alternatively, you can use Drush. Drush and Zen go to together quite well. You can download them, clear the cache and then as soon as you do that the Drush-specific Zen commands are now available. You don’t even have to enable them. You can just start creating start creating sub-themes using Drush, so Drush Zen and then in quotes “My First Sub-theme.” Then sort of the machine name of your sub-theme, or we’re just going to choose first in this example and then description.

Then my favorite thing is this backslash without-rtl plug because that’s … well, RTL is a great feature if you need it. It does sort of double the number of CSS files and adds a whole bunch of comments on the side of the CSS files. Let’s say LTR, the backslash without RTL will strip out all of those extra files and all of those complicating the one application. That’s quite nice. Then we do that and it just goes and creates a new sub-theme for you because all those steps automatically for you. It puts it in sites/all/themes and whatever the machine name was. That’s really, really handy.

Once you’ve built your sub-theme, of course we go to the admin insurance and they will make it default and then you can edit the settings. Now, the settings on some themes are quite extensive. I was actually one of the developers who helped make the theme settings available and working in Drupal 6 and Drupal 7, and I’m happy to see developers continue to improve and create interesting settings inside their themes, but then it really takes sort of a minimalist approach to the settings page.

There are just sort of a handful of settings. The idea here is that probably you don’t need that many settings usually because when you’re building a website you know exactly the type of theme that you want and then instead of adding a bunch of settings, you can simply just sort of hype your sub-theme to do that thing rather than have an option to do it or not do it.

The few things that it does do is that it adds an easy way for you to turn on or off some of the responses and mobile-first theme that every single theme needs. Zen 5 comes with respond that DS as well as the HTML5 shift. Now, if you want to use Modernizr on site, which is a particularly great script, you have to of course build a custom Modernizr script so that you’re getting exactly the feature test that you want within Modernizr and then you can add that to your theme. When you do that of course you don’t want respond.js on there because Modernizr has its own version of that. You can simply go to your sub-theme and turn off respond.js, and it won’t have that and sort of conflict with the Modernizr.

Also, if you decide that you don’t want to build a responsive site you can simply turn off the meta tags that are necessary in order to get responsive designs to look right on mobile devices. That’s a really flexible way to toggle those separate features. There are just a handful of these things and settings. Go ahead and take a look at it and see a few interesting things there but not an overwhelming number of things.
DrupalCon Denver, I gave a presentation on Re-thinking Responsive Design Techniques. Actually if you go to denver2012.drupal.org, you can find the video for that, which is … It talks on probably some of the same subjects, but it also delves into my responsive building techniques, which we won’t be covering but instead we’re going to be talking about some of the really useful patterns and techniques and responsive design that are really essential to building responsive design in a smart and sensible way.

Of course, we’ll also be talking about Zen grids here. One of the first things that I think is useful is that of course media queries are part of the responsive design technology that you have to use, and finding the right breakpoints inside your design is really critical.
One of the problems that people have encountered is that they got stuck in the mindset of, “Okay, I’m supporting these desktop screens, 916 and 1,200.” When we went to mobile devices we started thinking about those device sizes in 320 and 768, and that was not really a wise decision on our part. Really you don’t ever want to use a breakpoint that is a well-known device size width because it doesn’t make a whole lot of sense.

What you’ll find is that some apps on mobile devices will actually add a little bit of chrome so it’ll actually cut off some of the pixels within the viewport. If you’re viewing a website within like a Twitter app you may actually see a completely different layout because you’ve set your breakpoint at the device size and yet the viewport is slightly smaller than the device size now.

The way you actually find breakpoints is basically you find pieces in the actual spot in your design where those breakpoints should be. And how do you do that? It’s actually pretty straightforward because the breakpoints basically are near the point in your design where your design breaks, right?
If we start with a mobile design and a small viewport and if we sort of increase the size gradually and make it wider and wider and wider until we get to a spot where like, “You know what, this design doesn’t look good anymore. I think I need to transition to a new design.” Right at that spot where you think it looks bad, sort of just shrink it a little bit until it looks good again and then take that as your breakpoint, because you wanted the breakpoint to be a transition from a good design to another good design. You want it to be relatively near a spot where the design breaks.
You just use this technique of gradually increasing, finding the spot where it looks, “Ah!” and then sort of backing up until it looks good. That’s how you progressively increase the size of your site until you build up a sort of natural set of breakpoints that make your site look really good at any single device size that’s possible.

One of the interesting things that you end up with as this blog post from Patrick Grady, designer at … posted is that you end up sort of inverting where your breakpoints are because instead of breakpoint being at like 320 where the iPhone is, you find that 320 is sort of right in the middle of the spectrum, so it’s sort of in between your natural breakpoints. Your natural breakpoints are the spots in between all of the device spots that we had been traditionally been thinking about. I think this is a really great approach, using natural breakpoints, and I really recommend using that approach as well.

The other thing I would like to talk about is percentage-based gutters. This is actually one of the boring slides, that bullet point. But fortunately I’ve actually only got one bullet point, which is that they suck. The reason why percentage-based gutters suck so much is because … Gutters of course are the space in between your grid columns. Using standard CSS technologies, you have to … Since we’re using a flexible grid we have to use percentages for our column widths. Using standards CSS, I think that usually means that we need to use percentages for our gutters, the margins between the columns.

What we discover when we do that is that if we want to have a consistent gutter size like let’s say of 2ems, 600 pixels of 5% gutter equals approximately 2ems or 30 cycles. If we still want to have 30 pixels at 900-pixel size, we actually have to shrink the gutter size to 3.33333%.
Basically, we end up having to create a whole bunch of breakpoints just to get consistent gutter sizes. Not only do we have to change the gutter size at those break points, we have to recalculate all of our column widths as well.

This is just a real pain in the butt, and fortunately there’s no good reason that we have to continue using that. That’s because there is a widely supported CSS property called box-sizing. With the setting box-sizing, we’ll change the CSS’ box model. Traditionally our – if you look at the graphic here – our CSS box model says that when you have a white dotted box here which has specific widths and you add paddings and borders, that padding and borders is outside the width. When you set box sizing equal to border box, suddenly the padding and the borders are internal to the width.

Of course this makes a lot more sense than the traditional CSS box model. If we have a box and we decide to add some padding to it, it makes no sense that the box would get bigger because of the added padding. Physical boxes don’t act that way and our CSS boxes really shouldn’t either. That’s why white box sizing border box, because you’re then able to set it better using padding. You don’t even have to use percentages anymore, you can use ems or pixs, and you have very consistent better width because you just use 2Ems. It’s always 2 ems no matter what media query, no matter what breakpoint span that your in.

Paul Irish talks about this box-sizing CSS property on his blog post. Now this is also Patrick Grady who pointed this out to me a couple of months before Paul Irish posted this blog post, and this pretty much changed my life because without it, the Zen Grid is impossible.

How do we go about building different layouts in Drupal? The obvious layout method is to use the region-based layouts and basically if you look at this diagram here on the right-hand side that’s sort of the traditional Drupal layout with left sidebar content and right sidebar. Doing your really based responses layouts means that as the viewport, which is the block box here, shrinks and finds the regions that sort of rearrange themselves, so the right sidebar drops down to be below the left side bar and the content of and then as it shrinks even more than the left sidebar, it drops down as well.

This is the way that starts in Drupal 8 will work. Incidentally, it’s a leads default layout file that’s given with the Zen 5 as well. That comes with the obvious method here of region-based layouts is that it’s kind of warned because everybody is … it is really obvious, everybody knew this layout method. It make sure responsive designed slightly cookie-cutterish and not very unique.
At Palantir we decided to try a completely different technique when we designed that at the palantir.net website. That was to use the old-based layouts. Basically, each field on a particular multi-content page becomes a grid item inside our possible grid. This is a screenshot or partial screenshot of one of our experienced content types, a Palantir classic experience, and this is a portfolio page. Basically it has a large image across the top and then it has a body text. Then it has a highlights text field and a team text field, which is I think it’s a user reference field or one of the new Drupal 7 reference manuals. Basically, each of the fields then become one of the things that you could actually position in place on your flexible grid.

I really like this method because it makes each of your content types, you can use a unique layout for each of them, one that works great for that content. The only reason why Zen 5 doesn’t come with a layout like this of course is because we don’t know what your content types are going to look like. I provide a default region-based layout file, but honestly you should throw it away and build your own. That’s what I’m showing you, how to build your own using Zen Grids.

Now, Zen Grids is actually a separate project from the Zen theme. That’s why we talk about the Zen theme and Zen Grids. The Zen theme has been around a long time. The Zen Grids project is pretty new. I wrote it over Christmas break and I started writing it over Christmas break, finished it up earlier this year and released it just before the release of Zen 5 this spring.

You can actually use each of these independently of each other. If you use Zen you don’t have to use Zen Grids, and if you want to use Zen Grids you don’t have to use the Zen theme. You don’t even have to use Drupal if you want to use Zen Grids. They really should be our separate independent projects but Zen theme comes with Zen Grids included with it.

You don’t have to separately download the Zen Grids, it’s inside with the download file of the Zen theme. It’s not a separate installation for that. Now, I didn’t mention that the Zen Grid is a Sass and Compass project. Zen Grids is a separate project and then zengrid.com is where you can find more information, everything about Zen Grids. There is a help page which documents all of the different … it’s an APA document, API documentation for all the different mixins and variables provided with Zen Grids.

Why did I create this separate project in Sass and Compass? I’m sure that most of you have heard about Sass. It’s a CSS preprocessor, which basically means you write your CSS using Sass and text and then it will … It’s a utility that will level convert that Sass file into a regular CSS file. Basically it would compile your Sass files into a regular CSS and then use Sass regularly within Drupal or any other kind of website.

Why did I think that it was necessary in order to start using Sass and Compass and draw this entirely separate Zen Grids project to do layouts when they … other themes within Drupal have decided to do layouts using other techniques. That’s because writing the raw layout CSS is really hard. If you looked at previous version of Zen, it uses the method called Zen Column which was really well a field tested but it is complex. You have to be really careful with your math when you’re editing the files. It’s easy to accidentally break the code because of the math is really sensitive to minor miscalculations.

Writing a single layout just using raw CSS, it’s hard. That’s why people developed the 960 grid system. That’s why we developed grid systems, because it provided an extraction layer, a way to simplify for getting layouts. But writing three to five separate layouts for a responsive design, because each media query basically means a different layout, that just becomes really, really hard using raw CSS.
I recognized that it no longer made any sense to try to use Zen Column on this CSS technique to build layout files. It just no longer made sense. It was way too difficult, even for me. Fortunately Sass makes this much easier. You don’t have to be afraid of Sass, because it’s just CSS syntax plus some extra stuff, some extra awesome sauce.

If you take a CSS file and rename it from .css to .scss you made a valid Sass file now. Because Sass just takes the CSS syntax and sort of extends it a little bit. I really believe that learning Sass will save you time immediately. We first tried out Sass within Palantir over a year ago. Basically I said to my fellow developers, “Let’s try this. We haven’t really studied it, we tried to learn it, let’s just try using it on this project because it just generates raw CSS. If we completely screw it up we can just throw away our Sass files and keep using the CSS files that it generates.”

We decided to go with that, and it really had saved us time immediately. I believe that there are certain Sass techniques that you can use that within a single project if you use those techniques, you’ll save all the time that you have to use to learn Sass within the same project. You will actually use less time developing all of your CSS if you learn Sass while you write it. Let’s do Sass in two minutes here, and then we can talk about Zen Grids.
Sass, it has seven domain features that two of these … each ones are variable. This was one of the things that I wanted in CSS ever, right? You can set a variable and then just use a very little name repeatedly throughout your Sass file. Here we have an example of setting the blue variable to this specific color here and then we’re using it multiple times in our Sass files, which is the first sequence here and then underneath the arrow basically, it gently takes out the Sass file and generates the CSS below. You can see that it is just … it inserted the actual raw sort of raw variable or raw value into all the spots where the variable was, very straightforward.

Mixins are a really, really useful thing. Here are the example of Mixins and basically what Mixins do is, it allows you to apply a group of CSS properties using a single line of Sass code instead of, a lot of, anywhere from zero in this example is two lines of CSS properties on to a certain infinite number of CSS properties onto any CSS selected that you want to put just using a single line.

It’s a great savings in writing your code and of course it’s a good code we use. If you’ve written a Mixin that just does left, provided a parameter of distance and basically what it will do is it will float that element to the left and move it away from that left edge by the distant CSS file. Here we’re going to apply it to the .pictureselector and we just call that Mixin using @includeleft and then the value that we want is 10 pixels.

I should say that that Mixin, that’s how you define your Mixin. You can create your own Mixin, we created this last Mixin and now we’re going to use this here with the @include left. Then when Sass generates the raw CSS you can see it just goes and adds float left and margin left to the picture selector. We’ve written one line of Sass and it’s generated all the lines of CSS. The way that we use Sass within a counter is we would write all of our files using Sass and then have a Sass utility to generate the CSS sort of on the fly as we write this and then deploy the CSS.

This sounds like its more steps but it actually is. All of the Sass you said will be used … will basically you will set them and say, “Hey, watch this folder of Sass files and as soon as you see me save a change to that Sass file it immediately generate a CSS file.” You save your Sass file and immediately you have to generate your CSS so you can deploy the CSS however you want. I like to work locally, some people use MAMP to work locally. You’re literally just editing your Sass files, saving, then going to the browser and reloading because the CSS are already ready for Drupal to pull that in, in the normal ways. You can learn more about Sass’ features at sass-lang.com.

I want to talk about Compass. When people talk about Sass they talk about Compass at the same time, and there’s a really good reason for that. Compass is basically, it’s a library of pre-defined Sass mixins. Basically the mixin idea is really powerful, but if you have a community of developers who are writing mixins and sharing them that’s even more a powerful idea. Compass is a library that includes a whole bunch of really this whole thing including CSS3 mixin. With CSS3 mixins you never have to mess with vendor prefixes ever again.

Your box shadow, you don’t have to remember which vendor prefix you have to use for the box shadow, which vendor prefix do I have to use for the animation and all that stuff. You just view it as a single line of Sass, which is called a Compass mixin, and it’ll write all of the vendor prefixes for you automatically. Super handy. That alone will save you tons of time because you no longer have to go and look up, “Can I use…” on HTML user groups or wherever you’re looking to find out about vendor prefixes.

You don’t have to do any more research, just use Compass and it’ll write the right vendor prefixes for you. It also provides a vertical rhythm help for Mixin which Zen 5 includes in order to do some nice vertical rhythms, since it can be tricky to do that using raw CSS. It also tried some standardized IE Legacy variables so you can turn on or off support of IE six, seven or eight with a single variable just like you said, legacy support for IE6, default or true or whatever.

That’s become really useful because we had a client that said, “Oh, by the way, didn’t we tell you our CEO uses IE7?” We were able to fix a lot of issues that we had with IE7 simply by turning Legacy support for IE7 back to tool. That fixed a lot of the issues that we had already and then there was a little bit of cleanup. It was a much easier job of adding in that support for IE7 so late in the project.

Also it includes some mixins for image price generation, which are really super timesavers. You don’t have to do all of your sprite generations in Photoshop or what have you, and do a whole bunch of calculations and measurements in order to find the right spot in order to add that to your CSS.

Because Compass is so great and has all those other stuff in it, Zen Grids requires Compass. What exactly is Zen Grids? Zen Grids is another library of pre-defined Sass and Mixins. It’s just like Compass, except that it’s only for doing layouts. It uses some of the Legacy IE variables, which is why it requires Compass. That’s why when people talk about Sass they say you should install Compass at the same time, because it’s just a great feature set.

One of the sort of bugaboos that people have about Sass is they think it requires Ruby. That’s simply not true. Sass and Compass are written in Ruby, but I don’t use … I’m not a Ruby builder. I don’t know anything about Ruby. I wrote Zen Grids using Sass’ syntax. I don’t know anything about Ruby. You don’t have to learn Ruby. The only thing is if you’re installing Sass or Compass from the extend line, that simply means that you have to have Ruby installed on your machine. That’s the only thing about Ruby.

The first thing about command-line junkies, installing Compass and Sass you can do that for free. Just go to the URL site that’s provided here along Sass-lang.com. The hardest part might be getting Ruby installed on your system if you’re a Windows user. Mac OSX, that’s already on there. Then you still have to go into the command line and install Compass. You just might not want to do that.

Instead, if you don’t like going to the command line there’s a $14.00 app, Fire app, which is great. It has Sass and Compass sort of bundled inside the app, so you just have to run the Fire app and you have Sass and Compass installed in your system. The other question that people have is, “Do I need to install Sass and Compass on my server?” The answer is absolutely not, because these are tools for developing CSS so they should be tools on your development systems like on your laptop. You install a Compass and Sass there, it generates your CSS and then you’re just copying the CSS files from your development environment up to your staging production, what have you.

I’m going to talk about Zen Grids. I’m going to try to share my desktop here and show you how Zen Grids actually works. Okay, that looks like it’s going well. Let’s go over to zengrids.com. This is where you can learn all about Zen Grid syntax and Mixins, and it is of course a responsive to site as well. It’d be pretty silly to have a system that allowed you to create responsive layout but wasn’t responsive itself.

The first part of it here is my sort of manifest on why I think you have to write responsive sites using Sass and Compass, but let’s jump straight into using Zen Grids. I’ve given some example markup, and this is a pretty basic markup where we just have a wrapper or a container view and then we have a bunch of HTML5 elements, articles in the size and stuff. We’re going to position each of these items inside our grid.

As you can see, there’s nothing special about this markup. That’s why I’m showing it to you. Zen Grids doesn’t require any special markup. I would say the only requirement is that you’d be able to have a sort of custom class of things that you want to position inside your layouts, which we have here.

When we’re writing our Sass files the first thing we’re going to do is add imports. Adding imports is similar to the CSS add imports. The difference here is that basically you’re telling Sass to import all of the mixins for Zen Grids using the using the add/import Zen. Then we’re just going to set a couple of variables here, set the number of columns in our flexible grid to seven and set the gutter width to 10 pixels.

I want to show you here, this is the layout that we’re actually going to be creating here. As you can see it’s a seven-column grid, and then we’re just going to position those five different grid items inside our grid.

There’s basically just four or five things that you have to learn for Zen Grid, and I’ve already taught you three of them. Those two variables in the add/import, the next one here is the Zen Grids container Mixin. This basically just adds some standardized CSS properties to the wrapper that contained all of your grid items. You can actually use the body element as your container. There’s no requirement that has to be a div. It can only be the body and the division, all of that is inside the body as grid items.

The Zen Grids item Mixin, this is how you’re going to actually apply and position each of your grid items. This first aside we’re going to position inside our grid using this pass include Zen Grid item two comma one.

What are those parameters in there, two comma one? It’s really quite basic. Here is the content. This is the content element, and we are going to position it inside our grid using @include zen-grid-item four, three and that four. That first parameter says, “Make this grid item span four columns,” so we want to be four columns wide. Then three, the second parameter here is, “Position this grid item in the third column.”

Literally it’s just sort of reading this, and it’s English. It’s making a Zen Grid item that’s four columns wide starting in the third column from the left. If we go down and look at our … See I’ll put here, you can see that that’s how the content is being positioned. It’s starting in the third column as we counted from left to right, and we’re making it span four items. It’s in the three, four, fifth, and the sixth columns, and we’re just doing the same thing here.

You can see that our second side which is the right sidebar, we’re positioning this grid item and we’re saying make it one column wide and positioned in the seventh column from the left. Include Zen Grid item one, seven, so one column wide, seven columns from the left.

Let’s look at this again here. We’ve taken our side one and put it, again, two columns wide starting in the first column. Our content div, which is four columns wide starting in the third column, and then our side two which is one column wide starting in the seventh column. This is all the Sass markup we need in order to create this layout.

We’re also going to take a look at one other thing here, how do you create new rows? The side one content and side two, that’s all in one row. But we’d like to put our footer, our two footer elements in the second row beneath the first row. The way we do that is pretty easy, since we’re using floats as the actual sort of layout technique underneath. We’re going to simply do a Zen Clear on our first footer and that will start a new row sort of appear below everything in the previous row.

For the ones, the first element in our HTML markup but because Zen Grid is very powerful, you can also rearrange things within that row. Our second footer, which is actually the second element in the HTML source after footer one I should say, is positioned to the left because we told it to be positioned in the first column. So footer one is positioned starting in the fifth column and footer two is positioned in the first column, so we’ve switched the visual ordering of this simply by using the proper or the placement parameter here, so which column do we want this grid item to be positioned in. That’s basically almost everything you have to learn for Zen Grids add/import, you set the variables for the column count and the column width and that this Zen Grids container for the single container that you need for all of your grid items and then just start positioning all of your grid items because the Zen Grids item, and then lastly Zen Clear starts a new row.

Let’s go and … Yeah, congratulations to you, you’ve learned all the basics of Zen Grids, which is true. It only took about 10 minutes to do that. Let’s go ahead and pop open an actual Zen theme sub-theme. This is something that I’ve created using Drush earlier this evening, about two hours ago. Then I downloaded some content, put some things in the right sidebar, left sidebar here. When you open up it … I called it Taipei. Taipei is actually the city where I live in Taiwan, it’s actually 9:00 at night here now.

If you take a look at your sub-theme that you’ve created you’ll see a whole bunch of different folders here. The config.rb file, it’s an interesting file which we’ll talk about in just a second. But the Sass were all the sort of Sass files and the layout file that Zen uses by default, which again I recommend you sort of run away in building your own, is a responsive sidebar. That’s this file right here.

The first thing that I’m doing here is setting the column count to be five, the gutter width to be 20 pixels. Let’s go down here, our writing the Zen Grid container here. These are the three wrappers that we’re using inside this particular layout, and let’s go over to our first media query. Our default media query should just be a … when I say default media query, these files that we use outside of media queries should be the mobile layout which is single column and basically no layout on any of our grid items because we want it to appear in the same order that it appears in the HTML source in a single column.

We’ll just put that sort of the … and I’ve not used the right breakpoints, definitely, 480 is sort of the size of the iPhone. Again, I don’t know anything about your content so I can’t pick the right breakpoints.

If we look at this, these are slightly larger than the phone because the 480 pixels through 960 or 959 actually. I’m going to set the Zen column count to three, so basically we want to create a layout that only have three grid columns in it. We can, our content item we want it to be two columns wide starting in the second column, so let me just …

Basically we just send in the second and third column from the layouts of the column, the middle of the column on the right. Then our first sidebar will be one column wide starting in the first column because of course, we’re going on the left. Then our right side bar we actually want it to be below our first sidebar and the content reaching, so we add that Zen Clear to create a new row.

We’re actually going to have it span the entire width of our grid, so three columns wide starting in the first column. The way that I get this CSS file is here to be generated into a CSS file, which is right here, is by using this little Fire app which is up here, which I installed a while ago. I’m going to tell it to watch the specific folder, watch our Taipei folder. Basically, I’m going to point this application at the root folder of my sub-theme, and in fact we’re going to go and read some integration information from this config.rb, and so it’ll know how I want it to generate the CSS. What do you know,

I’m getting an error. Ugh, live demos. (Laughs)

I’m going to go straight to my backup, which is using command lines. That normally works great, I’m not sure what’s going on there. We’ll go over to the command line. I’m going to type my Taipei root and then you can install it, Compass watch. We use the command line, the quarter length of the Fire app.

All I have to do is type this one utility and then it’s going to start watching the Sass sub folder here. Anytime it sees me make a change it’ll generate the CSS file. Let’s prove that. I’m going to go over here and make a very trivial change, just add a single line, hit save, and now let’s go back over to our terminal. You can see that it has already overwritten the CSS file and generated a new CSS file automatically.

Let’s take a look at that three-column layout that we wanted for the small sizes. Here you can see our left sidebars over here, our main content is this called two columns on the right. If we scroll down, our right sidebar is now in a new row down here, and all that CSF was generated on the file, here I can help you below the … Zen believe me if this is actually then create new CSS. There’s our second sidebar down at the bottom.

Let’s go ahead and do something slightly more drastic. You can see how easy this is. Let’s switch the positioning of this sidebar and this content. We’re going to stick with three counts line, but let’s move our main content from the second column to the left to the first column to the left, and then move our first sidebar from the first column over to the third column. I’m going to hit save, and jump over to the terminal just to make sure, yup, there it overwrote the CSS file. Let’s jump back over to here and hit reload. Live demos always make me sweat. Hey, it worked. (Laughs)

Our content is now on the left and our sidebar is on the right. Like I said, the actual layout, if you look at this main is basically the wrapper that we’re using, the container, and here is the source order. Our content comes first and then here’s the first sidebar, it comes after the content. We were able to rearrange things using Zen Grids, using really, really simple syntax. You can’t get much simpler than just changing the column number that you want it to go in.

There are more wonderful things that you can run … One thing I would say is that on each of your media queries you’ll be wanting to change the Zen column count inside each one of those media queries because you’re going to naturally want more columns available to use for doing layouts as the viewport is larger. Down here even the larger 960 and above media query, we’re setting it to five columns wide so then we’re now some things using five columns because we’re kind of, 1, 2, 3, 4, 5 from the left side. That is basically it.

There is a lot of really awesome things above Zen Grids that I haven’t talked about because simply don’t have enough time, but I want to thank you so much and I’d love to open up to the questions.

Speaker 1: Hi John, thank you very much for the presentation. We do have a couple of questions. The first one is from Derrick Alexander, “Is there any advice you can give to theme upgrading a theme from using a previous version of Zen as a base theme, so using Zen product as a base theme or is it best to treat this is a brand new theme?”

John: Yes, every time there’s a major update of Zen within that major version I try to only do bug fixes and small changes because I don’t want to break the site. When I do a knew major version, that’s when I need to improve the best practices and keep them up to date.

Upgrading from one major version to another major version is a big change, and I would say that there’s basically … There’s two sort of used cases. One, you have an existing site, they’re already on Drupal seven, say they’re using Zen 7.x -3.0 as their base theme. If you’re using that as you’re base theme, there’s really no reason why you need to upgrade to Zen 5. If your theme works great now, I would recommend not upgrading to Zen 5. Zen 3 will continue to be supported, just keep using Zen 3.

If on the other hand the theme that you’re wanting to upgrade, you need to re-write it to be a new responsive site, like wasn’t previously responsive, then yes, you’re basically already going to be doing a re-write so I would say you kind of have to tackle that as a re-write. There’s not an easy way to do that because making your site responsive requires a sort of a rewrite of your content strategy and thinking about your layouts and your design all over again anyway, and upgrading the Zen projects as part of that process.

Speaker 1: William Robinson asks, “Can I use this Zen on HTML 5 with Open Atrium?”

John: With Open Atrium, I haven’t been following Open Atrium. As long as Open Atrium has been upgraded to Drupal 7, then I don’t see why you can’t use Zen files with Open Atrium. The thing of course that I would point out is that Zen basically has, as you saw from when I was doing screen training, it has really no design of itself. It has the minimum CSS that you need for any site. No one says you have to go through and make … undo filing, just to add your own filing. It has all sorts of styles, so yes, you can create your own sub-theme for Open Atrium. I would recommend using Zen but raw the basing is all by itself with any side actually.

Speaker 1: Randy Fill asks if you are able to contrast the Zen and Omega theme.

John: Sure. Omega theme, they have decided to sort of fully embrace the theme settings that are available with Drupal 6 and Drupal 7. You can basically configure your layout and your breakpoints within the settings page. That makes building those layouts really easy.
The reason why Zen doesn’t build that way is because we feel like when you’re building layouts it’s really … your crafting it for your specific design. Zen Grids makes it really easy, just using Sass, to write some simple Sass lines using the Zen Grids to make and create really customized wonderful layouts. You’re getting your hands dirty a little more working within Sass and CSS, and really that’s going to provide the most optimized experience for your end-users because they’re not relying on PHP settings and conditionally doing certain things depending on PHP because you’ve written very specific CSS, very optimized CSS that this is loaded all the time, the media queries. I would say that’s the biggest difference.

I haven’t investigated Omega theme super thoroughly, so I don’t want to mischaracterize anything that I don’t quite understand about it. I’m going to remain silent, yes. I think there might be even some Java script to change class names, depending on the media width, but I’m not certain. Let me just say I’m not sure if Omega does this, but there are some people who use JS and are good chain selectors, CSS class names in order to alter the layout depending on the viewport width. I think using JS to do layout is a bad idea because CSS already does layout. Why are you adding a dependency on Java script in order to do layouts?

Speaker 1: Randy would also like to know, “Can we use Zen Grids with old Drupal themes?”

John: Yes, absolutely. Like I said, they’re completely separate projects. You can use Zen Grids … You don’t even have to use it within Drupal. The zengrids.com on site is just plain HTML. There’s no CMS on it at all. Then just using Zen Grids to generate the layout CSS, but you can … When you’re using Sass and Compass, there’s not even anything special you have to do within the theme. You just have to have the .info file load, the CSS files like normal. You’re under the development environment, your laptop whatever, you’re saving, you’re writing your Sass and it’s automatically generating the CSS. The Drupal theme only knows about the generated CSS because in the .info file you’re pointing at generating the CSS, so you can decide on anything.

I would say that definitely take a look at the config.rb file that comes with Zen’s starter kit, because there’s some really handy things in there. You can just sort of copy that one file and use them in whatever theme you want if it doesn’t have it on the config.rb file.

Speaker 1: Brent would like to know which Sass utility you use.

John: I’m sorry, which what do I use?

Speaker 1: Sass utility?

John: I have Compass watch, it’s a great utility for generating your Sass. Sass has its own utility use just like Sass-- watch and then it’s this really long command line and we have to type a set and the source/folder is where the destination pieces holder is. There’s a whole bunch of like options and plugs. I had the Sass utility, which really makes it a pain to use.

Compass watch is, meaning that’s the only thing that you have to type, Compass watch, that’s it. You just do it within the root of your sub-theme, and it’ll read all those flags and options from the config.rb file, so you’d basically have like a .info file but it’s for Sass options and sort of read all those configuration things inside the config.rb file. You only have set Compass watch after no one add those special command and it’ll generate CSS for using Sass.

I have been using Fire app for about a month now. I just set up with general site and I forgot to check Fire app using it. I know why, it has a long, yeah, I forgot write before I rename the directory where the demo was stored and I forgot the update Fire app to tell the new location outside there and it was time to look in the wrong spot completely. Then that was my fault because I’ve been using Fire app and that was great. You just have to start the app and then it becomes a utility inside your menu bar and in Mac OSX and Windows, Google or something and it works well, it works great.

Speaker 1: Okay, great. Matthew Olivera would like to know, “Do you add base .scss and that generates CSS files, do you actually report a check?”

John: Yes. Absolutely, using a source control like this is really essential for any sort of development work that you do. At the counter yes, we definitely add our .scss files to Git. Then we also add the generated CSS files to Git as well. We’re writing both of those files into Git and when we’re lucky enough to deploy on production sites using Git that’s really handy because of the CSS and then to Git and then it just deploys CSS and Google will happily think of the word with .scss files that are just sitting there.

Speaker 1: Paul would like to know, you said recommend to have the Sass translated on the development machine. Are there any security issues or is it just for keeping the services of the template as possible?

John: There’s really, especially if you’re using Git, there’s no reason why you need to have Sass and Compass and all that installed on your server. You want to make your server as simple as possible absolutely. I would recommend not running or running as few themes on your server as possible because that means you have more CPU cycles, available to touch you, or whatever you have from the web server.

Use MAMP or whatever to develop locally. I have like a copy of the database for your Drupal site and just work locally. It’s much faster development too because you’re not having to constantly … when I first started doing websites I would edit my CSS and then I would upload them to the server and then wait for it to finish transferring with either FTP and then reload them in my browser and that’s just a really painful process and very slow where I think we should develop locally, it’s much faster, so that’s why I like to use Sass and Compass locally.

Speaker 1: Paul would like to know, “What is your opinion on the Sass module and where do you think it would be best to use?”

John: The Sassy modules … I actually feel like there’s no reason at all why this module should exist. (laughs) Literally, if you’re using Sass as a development tool, Sass is already generating the CSS for you and you’re just pointing your theme at CSS files. Why do you have to have Drupal involved at all in Sass?

Some of these modules, I think there’s two or three of them. Some of them actually have a PHP version of Sass that generates the Sass and the CSS and there’s just no way to keep featured paired the app with the official version of Sass, which is written in Ruby.

I just think it’s not a good idea, both from an adding an unneeded burden to your Drupal site as well as you’re going to end up having a slightly out of date version of Sass. I don’t even know how Compass works with it because like I said it’s a library of pre-defined Mixins. I’m not sure how that integrates with those Sass modules as well. My personal opinion is don’t use them.

Speaker 1: Lars would like to know, “Is Zen compatible with Ubercart E-Commerce?”

John: Absolutely, yes. They reviewed from reports that I'v seen where they’re complaining about it not being compatible with other modules.

Speaker 1: Okay, sure. Marvin would like to know Omega seems like and … Sorry, let me repeat this question again. Brent would like to know, “We have had our Comp done, what is the roadmap for taking the Compass and incorporating Zen files and Zen Grids?”

John: I think I missed some other words, can you repeat the question?

Speaker 1 : What is the roadmap for taking the Comp and incorporating Zen files and Zen Grids?

John: As you have designed Compass you should take a look and see hopefully, they design it to a grid and then just turn in what the prompt count is inside the comp, figure out what the gutter would need to be and then just start writing the Sass, and the setting of the appropriate variables and then basically you need to take the comps and create many wireframes due to sort of to hand all and with your columns and the different blocks and start just taking them inside the grid, the flow of grid that you created.

I actually just about a week and a half ago created a worksheet which has a bunch of different column layout in it like there’s a one column layout on the left, or I should say one column grid on then like three columns and then five columns and seven columns, inside a single sheet and that’s like sketched out on this paper just like printing out a worksheet, and it’s getting hard when I arranged my blocks and then of course it has the numbers on the worksheet so then I can just starts plugging it eventually. Yes, that’s for the actual Sass files and the Zen Grids.

Speaker 1: Cory would like to know, “Does Zen Grids provide any tools to dealing with images responsibly other than sprite?”

John: Does Zen Grids provide any use of these for responsive images? No. Zen Grids is purely about creating layouts. You’ll notice that it actually doesn’t have any special things to deal with media queries either. When I created Zen Grids that I could tell that I felt like there is something in Sass that you can write to manage media queries and I couldn’t quite figure out what it was at the time, but it was also how the scope of what I wanted to do which was to go with the layouts so the Zen Grids was only dealing with layouts.

There’s a new Compass library created by this tech, people coding designer and it created a Sass library called “great ones” and that deals with managing your breaking frames and managing your media queries, and I like to look at that. I haven’t got the chance to use it yet.

One of the nice things about Compass is that you can fix the libraries that you want to use and mix it together for the best features set for you. However, getting back to images, the Zen themes does have CSS in there to deal with making sure that your image is resize to fit inside your flow of grid, there’s just a future lines of CSS that you need and that’s already included with the Zen.
If you want to handle physically resizing the images and voting different side files depending on the viewport there are modules which can deal with that and that I would recommend take a look at this with … there’s a few of them that are getting some of the best feature setting now.

That’s something that we simply can’t do within the email because it has to go with Drupal 7 image now. The answer is yes and no. Some of it is already with Zen and some of it, it can’t be.

Speaker 1: Okay, great. I think that’s all we’ve got time for intensive questions. If you have any separate questions that you think has to take you can get in contact with us. I’d like to thank John and Dana for presenting. Again, the slides that you pick is the slideshow and the recorded webinar will be based on acquia.com in the next 48 hours. Thank you for joining, we hope to see you next time, bye.

John: Thank you everybody, bye.

Build a Winning Conference Site with COD and Drupal [July 17, 2012]

Click to see video transcript

John: To kick it off, COD or the Conference Organizers Distribution is a group of distribution that’s maintained by Acquia and distribution can be loosely thought of as solutions in the proprietary world or as prepackaged sites that are out of the box.

There are full copies of Drupal that include Drupal Core along with additional software such as themes or modules, libraries, even installation profiles. There could be two main types of Drupal Distributions: one is a full-featured distribution that typically has a more of an all-inclusive product and are considered more complete solutions for specialized use cases and then other use distributions are considered more quick start tools or starting points for developers and site builders.

The full-feature distribution my COD, you can quickly and easily setup a site for specialized purpose. Obviously in this case, to deliver immersive trade show experiences for your customers.

As you know, Drupal is a comprehensive platform and it's really focused, in our perspective, on three main areas: you've got Drupal for delivering content at your sites, Drupal for creating communities, and Drupal for executing commerce and transaction. For content, you can think about it as a traditional WCM, Web Experience Management, Space Community, you can think of social business software, and Commerce as e-commerce. Now we’ll be focused today on the community aspects of Drupal as a platform.

There are a couple of distributions in the community space: the first one that’s been out over a year and very successful is called Drupal Common, also maintained by Acquia, and that’s for delivering robust developer, customer or partner external communities or also internal communities where you need to you do extensive knowledge sharing between team members and collaborations creating those internal social communities. If you want any additional information on Common, please see a lot of our assets and customer case studies and white papers on acquia.com around internal and external community for Common. But today we’ll be focusing on Conference Organizers Distribution or COD.

From our perspective, looking at sort of the landscape – premiere sets and products we wanted to tease out where we think COD has very unique differentiated features in the marketplace. So certainly, to be able to create your personalized, custom session scheduling is very easy in COD. There’s a smooth registration and checkout workflow and if you tried to do that from a custom perspective you know how difficult that can be. There's one quick conference administration menus for your top trade show priorities to keep in check. There’s effortless session moderation and speaker contact that you can change and update in real time as needed at the show. There's robust mobile application support and easy development environment. Configurable event scheduling, of course across multiple tracks as needed and if you need to execute automated sponsorships and build sponsorship pages, that’s pretty effortless in COD as well. The ability to schedule your birds with feather sessions quickly as new ones might emerge or change at the conference itself so we look across at all of the customers we track and support that are implementing COD today, this is sort of our top ten list of how they’re using it to really lower the cost of their trade show participation and really increase the engagement of it as well with creating the trade show community.

Couple of quick snapshots and some of the really key differentiated features we’re seeing in COD here is a couple of DrupalCon examples of customizable scheduling that we've done for our large DrupalCon Developer Events, two different ones here on the left and on the right. A customer can really own the design, the branding for the show and it's very easy to build up and use the scheduling tool. You really save a lot of time and effort in creating those schedules, especially for our DrupalCon events. Regarding registration workflow, so here we see an easy-to-use Contact Information page for attendees and it really is a very quick registration workflow process which might include things like tiered pricing, coupon, even group registration for the event. There’s another area where we hear customers talking about their challenges and their pain point around trying to get folks setup, get the pricing right, get discounts out there and even trying to register groups simply into the trade show so definitely a experience that we've heard good things about, COD in particular.

Here is a very quick, simple, one click conference administration tab for the trade show organizers. It helps to manage their top five or top ten key priority tasks and that’s customizable as well based on your particular needs. Here, it’s how do you check in your attendees, contact your speakers, do moderation for sessions and sponsors and even some help around the distribution itself.

Session moderation. A highly integrated session moderation can help reduce the cost and complexity associated with getting your sessions processed, getting them accepted, ultimately getting them posted final on your trade show sites, and really just reduces the amount of time it takes and your ability to have that marketing agility to adapt to sessions that change at the last minute, someone who is sick and wasn’t able to attend and the speaker make those updates in real-time get that information out to your attendees quickly without a lot of coding.

As I mentioned, every DrupalCon since 2011 has used COD as the distribution of choice to roll out these trade show experiences and most of fifteen plus DrupalCamps are also using it as well. So feel free to go check some of those individual sites and see what the booth people would do and some of the savings and ability to create more prioritized schedules and sessions.

One quick example is around Codestrong Conference. Codestrong was created by Appcelerator to give mobile application developers a place to learn about titanium development and lets cross platform mobile application or framework was able to host thousands of developers. This particular site offered a tiered pricing registration page with early bird passes, had quite a sleek design as well as you can see and ultimately they deployed COD to really focus their time, energy and investment on the customed theme and design here so very customizable and simple to roll out the branding and experience that they wanted to show. They also used typecast fonts to highly customize the design instead of spending the time building a customed conference application for themselves. So when they went through the options in the marketplace, they chose COD as the best one to fit their particular needs, as you see here.

Another good example is the European Organization of Research and Treatment of Cancer. Their event attracted about three hundred attendees. They had 23 presenters and five sessions and they also used COD to organize their program. They were able to include specific website links for their sponsors. They had a sponsor-specific Application Form that they were able to develop with an Integrated Webform Module for their mobile experience. Even their Hotels tab was performed in the COD distribution itself using the CCK Module and as you can here, integration with Gmap tools where we'll see location of specific hotels and the proximity to the conference itself. And then the home page you see is built with panels and the slideshow is built with a host of different views as well, again, very sophisticated event, highly successful enemy that use COD as well.

So with that one proper, brief overview of where we’re seeing some of our customers use COD and some of the key features of the distribution itself, I’d like to introduce once again Jeff Mann from Energy Action Coalition to ultimately take us through the Power Shift 2011 Conference and some of the results they saw from implementing and using COD. So, Jeff…

Jeff: Thanks John. I’m Jeff Mann, I worked on the Online Director at the Energy Action Coalition and to give you a little background about what we do, we are a coalition of close to 50, all youth-led, organization that their work on climate and energy issues.

We have a relatively small central staff that work with our partners and as well as the campus groups and community organizations. They reach to basically connect hundreds of thousands of young people most are primary college students and reach graduates to care about climate and energy and building the Clean Energy Movement in the United States.

The other thing that we're best known for is the Power Shift Conferences which we hold professionally every other year. In 2011, we held our third Power Shift Conference which was in Washington DC in April 2011 which in that conference brought together over ten thousand people in DC which was a large logistical and strategic undertaking and we were looking at you in run up to the Power Shift looking for a platform that we can use online to support all the different aspects of hosting a conference of this size.

Just before that, you see there, you can see and have the scale of how many people are at one of these events. That one on the right is some of the impact, that’s actually twelve of our teen leaders meeting with President Obama. Two are hard to see. So that’s some of the backstory.

For Power Shift 2007 and 2009 we had used a variety of different tools for different pieces of the conference. We’re using both of our CRM and RegOnline as event sign-up tools. We had other information collected in different Google Docs and other places where you know, it was just very difficult to get the right information to the people who needed it for actually organizing this conference.

Some other challenges we had with using those systems was, in particular, the Registration Workflow and Group Registration which we had particular needs for that kind of registration which I’ll talk to in a minute. We also needed a single place where we could capture things like volunteer sign ups and sessions sign ups so that they could all be accessed easily and we could flexibly determine where to put resource for the conference.

The last and probably the most significant challenge we had with previous systems was that, we were using these sites as kind of one-off conference site for the event. People would register but that was kind of where it ended. As a movement, the conference is not the end goal, our goal is to build a dynamic and powerful movement so we really wanted to create a space where that was functional for a conference and accounts what we needed for the conference but then also could continued to keep people engaged in the run up to the conference and after the conference to keep people coming back and actually be able to grow our movement beyond just this one-time event.

Some of the goals for powershift2011.org which we launched in February before the conference and worked with Adramatic as well as GBS on that site, so we needed custom Registration Workflow and we want to automate tasks like when people sign to volunteer, tell us what food restrictions they had and features like a housing board where people could find couches to stay on and ride share so people could figure out how to get to DC. And then also, like I was saying, building community features to keep people connected.

Just to give you a sense of what kind of is possible, when you use your system later, for our registration we work with a lot of student groups and due to the complexities of student organizing and school budget processes there's a lot of groups that there's a need for them to be able to register their group and pay for ten slots or however many but not necessarily know who exactly which students were attending at that point. So we ended up doing was creating a system where those groups could register as a group and receive a group code that they could then distributed to their members to register individually. We could still then capture individual attendees, names, and info which we needed for the conference but give that flexibility to the groups so that they could work with their schools to be able to pay for pay for the conference registration.

Another, kind of, interesting challenge we had was for room assignments. We had hundreds of sessions for the conference. The exact room assignments we had at the convention center weren't even determined until a week or two out. There was limited time for us to get that information to people and so when our paper programs had to get into print, we still didn't know all the room assignments at that point. Instead of giving you the correct information, what we did was print the note idea for the sessions, free sessions in the program so that people can use the mobile site, which I’ll show you in a second, or a text message to look up their room number.

This is a wireframes for our mobile site, we kept it pretty basic but it had the schedule, the macro schedule where everything was and then you can log into your account to use to your custom schedule that you are created ahead of time on the website. It would also try to promote our sponsors and give people more information about sessions.

The part that I’m most excited about and was really like the big motivator for us was, like what I’m saying, the ability to keep this website going after the conference. At Power Shift, we re-launched the Power Shift 2011 site, where everyone before the conference had been going to register and sign for sessions, things like that so everyone who registered, all ten thousand people, had a user account on the site already and at Power Shift, at the conference we re-launched it as WeArePowerShift.org and use the conference kind of as a springboard to kick off this online community for our conference attendees and the youth climate as well. It’s been really successful. Just a year or so, the third conference we’ve had, over nine hundred and sixty-two blog posts contributed by three hundred sixteen authors which is both really cool for us which we would never have seen that level of engagement in our online space and it wouldn’t have been possible with any of the other conference platforms that are out there.
That’s kind of our experience and happy to answer questions, if people have them, later.

Ezra: Can you hear me? Okay, great. This is a copy of the Power Shift site that we can use to poke around and see what the site looks like. As you can see, this is the site front page and if we take a look around you really get a sense of the strong community interaction that happen on this site. There’s a showcase video about the event and there’s a list of popular and recent posts, and here you can see some of those hundreds of blog posts that have been posted by other users on the site and share links and the twitter feed as well. So, really strong sense of community based website.

The first thing that would be good to show is the registration process that Jeff talked about. Suppose that I am registering for this event on behalf of a group of students and I want them to all be able to register by themselves at their leisure. You can go to this Group Registration page, answer how many people are coming, and add those registrations to my cart. You can see I’ve got the ten registrations at eighty dollars and my subtotal of eight hundred dollars. I can just go ahead and check out. Here you can see how the registration process has been slightly customized to meet the needs of Power Shift, in this case I can enter the organization that I’m associated with and, for example, the school that I’m associated with so let’s just choose Alabama that’s first in the alphabet and I can start typing here and you see that we've got a list of school names that auto complete here.

So let’s just go ahead and register and see how this Group Registration works. I’ll enter my information here and then I can just go ahead and I’ll use the tax credit card. In real life of course I couldn't just enter 1234 and now I’ll proceed to the review order screen where I can make sure that all my information is correct. I assume it is correct and I go ahead and submit the order. So now I’m in my email, I’ll get an email that tells me where to go on the site so that I can see my group registration and so I know where to go for that. You can figure that I've paid for ten registrations for power shift and that each attendee should use this coupon code. I can actually email that coupon code directly to people who are going to register for my party and I'll be able to see who reviewed that code and how many registrations are remaining as people sign up.

So let’s see what the process would look like from the point of view of a student or somebody using that coupon code. So I’ll just copy and paste the coupon code and switch to another browser window where I'm not logged into the site yet. So, I’m a different person here and I'll go to the Registration Page. So I just click Register Now, and you see I’m prompted for my email address so let’s just say that’s my email address. Now you’ll see that the site could reflect the information that is specific to this site. We’ll start with personal information, let’s use a different name and I‘ll just go Bill Smith and 234 … Now there’s also space for me to enter my twitter username or my website and I could also say I’m from Taubman College, for example. I can also enter new contact information so this might be ... and that way there's no tracking people down to wrangle them for their emergency contact information. Of course all of this is customizable so this was specific to this particular site but you could do the interface for COD, configure these fields, and so I can choose to volunteer to help to run the conference, I can sign the waiver all from this screen. So now I've got a similar check-out screen as I had before only this time, I’m asked to enter my ten dollar registration. Instead what I’ll do is enter the coupon code that we used before that we were given before, I’ll just paste that right in, click apply to order, and now you can see that my order has been discounted that coupon code right there and to pre-order so no payment is necessary, I can go to review screen, make sure that everything looks okay and submit the order.

So now I’ll be registered for the conference. I’ll as well get a confirmation email and that will include information from the login to the site and start participating and contributing content. If we switch back to the original user who made this purchase, let's refresh that group registration screen, see what happens. So you can see Bill Smith has registered, we could see Bill’s email here. I can see that I've used one registration for my party and that I have nine remaining. So I can keep track and make sure that the people that are part of my group of are registering. So I don't have to call and ask, ‘have you registered?’ things like that. It really makes that registration process easier. So that's one thing that's really great about out the Power Shift site. Let’s take a look at some of the community focused functionality that the site has.

So one thing that's really nice is the selected feature which is kind of like additional sessions that appear during the conference. I can filter here by the type of session, training or workshop or a panel. I can filter on things that are interesting to me and then I've got this handy add to my schedule link so I can click that and without even refreshing the page, I can add and remove sessions from my schedule and then when I am ready to look at my schedule, I can easily view that, I can see what I'm doing on every day. For this site, there’s a set of default sessions that are added to everyone's schedule so if you want to suggest to people, for example, everybody needs to check in and go to registration you can make sure that that’s added to the schedule. So that's another handy feature that makes things easier for the attendees and then also for the conference organizers and people know where they’re going.

There's also a housing board. A common need for conferences is for people to figure out where they’re going to stay. The housing board here allows things easy for people to see if they can share housing with other people. So I can post at housing work from the top of a screen and then I can also say I’ve got a couch or I need to find a couch and this could just as easily translate to sharing hotel rooms for example. So you can see that people have been at several pages of people using this tool to figure out where to stay. Similarly, there's also a ride share tool which features a handy map so I can see people who are driving to the conference and share a ride with them. So if I know that I'm leaving for example on Wednesday, I could just filter down to Wednesday and see which people are leaving on Wednesday and where they are and choose to contact them and see if I want to ride with them. I can also filter by zip codes so you could imagine that that would really help people figure out how to get to the event and foster a sense of community.

Another thing to note about this site is that this site houses multiple and usual conferences. One of the main benefits of being based on Drupal is that you can take advantage of the different Drupal modules and functionalities so in this case you’re using like the main app module so that there is the same Drupal installation you've got multiple, different, individual conferences. We were just looking at the main Power Shift conference but you can see there's also the New York Power Shift or the Midwest Power Shift website. You can easily browse to each of those sites and they have a similar look and feel although those could be different and they've also got their own community content going on within those sites. So those are some of the nice features about the Power Shift site.

I'd like to show some of the features that we have in COD for conference organizers so I’ll switch to a different site just so that we don't expose personal information from the Power Shift site that has some people’s email addresses in it. So I'm logging here to the Awesome UK Conference 2012 example site and you can see another example of this session schedule, this could be formatted vertically or in a grid format. The vertical format is nice because it translates both mobile and is also good for more complex schedules and more simultaneous sessions. I’ve got this wrench icon in the upper left-hand corner of the screen. I can click that and here's this conference administration menu that John described earlier. You can see that it’s an organizer, I can check-in attendees, contact speakers for the event and moderate content like sessions and sponsors all from this handy menu.

The nice thing about COD is that you don't have the grant permission for everyone at your organizers to access all these things. For example, if you have a set of volunteers who are working on the conference and only need to work on check-ins, you can make sure that they're not able to manage people orders for example. Let’s take a look at that sponsor moderation and contact speaker functionality so suppose I’ve got a list of speakers I've gone through and I’ve accepted their sessions through the website and I want to make sure that they know that they're attending the site. You can see here there's a list of speakers and I can directly from the website send this email to them saying here’s a specific session that’s been accepted, it’s happening at this date and time, please confirm that you can attend. And so then if we switch to the view of one of the presenters so I'll go back to this tab where I’m a different user, I’m logged in as Bob Smith on this site and you can see that Bob has had a session accepted and when Bob logs in, after Bob gets that email, Bob can see this is the session, here's when it's been accepted to happen and confirm I can present this session at listed day and time, I can click that link and you can see that I’ve confirmed. If I want to unconfirm then I've got to contact the organizers. This is a really handy tool to organize the conference with a number of presenters. Before it can be difficult to track down all those presenters and confirm that they are able to attend the event, that they can still make their session that they know that their session was accepted. So this is a tool that automates process. It really takes a lot of the organizing burden off of the organizers.

Similarly, there's a lot of other tools for organizers, as you would expect there’s an order tracking system, so you can see who bought what product and at what time and what they paid, how much they paid, and what their payment method was, kind of all the typical e-commerce functionality that you might expect with any e-commerce system. Of course you get all the benefits of Drupal’s e-commerce enhancement along with that.

So this is the session moderation view. In this site we've already scheduled a number of sessions but you could see here how sessions would start out you'd allow people to submit sessions and they’d appear on the unprocessed tab and as you go to the moderation process, the organizers could meet or just organize through the website and choose which sessions they want to accept and decline. Once those sessions are assigned to specific rooms and time slots then you can go ahead and send that contact message out that that we showed earlier.

Some of the useful features that are built into COD are things that like community directory so folks can appear once they've registered for the event. In this directory, and if you're looking for a particular person or somebody for a particular organization or with common interest that you'd like to meet at the conference, you can do that through the COD’s site. You can also browse for sessions and of course the types of sessions are completely customizable so you could change the extract and experience levels to anything that you would want, and has a nice way of filtering down to sessions that are relevant to the user and all that. It looks great out-of-the-box but it can also be customized for your site. As we saw, this looks very different from the Power Shift site which looks different from the Codestrong site. You can really brand and design this COD sites to your heart's content.

One last thing to show real quick here is this Sponsor Moderation system. If I take a look at the Sponsors page on this conference site, you can see that Acquia is a platinum sponsor and the way that Acquia became a sponsor and this is an example is that they bought their sponsorship directly through the website. You can actually sell sponsorships, allow sponsors to enter their branding information, their logo, their website, their blurbs, specify who from their organizations is attending. At the conference organizer you can moderate that that sponsorship through the site. For example, let’s go back to where Acquia was still in moderation, if you look at the Sponsors page and you refresh here, you’ll see that no sponsors have been announced but once Acquia has purchased this sponsorship, they will automatically appear in this unpublished sponsors area. As a reviewer, I can just go ahead and look at their sponsor information and with one click publish it if I approve it or I can edit it if I want to do that. And then, when we refresh that sponsor information will appear on this page. You can imagine how this would really simplify the sponsorship wrangling process between the sponsorship collection and confirming with attendees. COD offers a lot of functionality to make things easier for the event organizers as well as the community who had a lot of ability to interact as we saw with the Power Shift site.

So it seems to me like it would be a good time to take questions. I know we had questions and we should probably leave time for those.

John: Great, thanks a lot. We have some questions coming in. Looks like Ezra are you still on?

Ezra: Yup I'm still here.

John: Looks like a few of them you might be able to help provide some perspective on.

Ezra: Sure.

John: Let’s see… Is there a base theme being used for COD?

Ezra: Yes. There are two versions of COD: COD for Drupal 6 is still very well regarded fusion theme from top notch theme and in Drupal 7 it’s still found in the also well regarded adopted theme. And the benefit of that Drupal 7 adoptive theme is that it’s responsive out of the box so it makes it much easier for your site to work well out of the box and mobile devices. You can still go ahead and built that dedicated mobile apps that that work great but it provides an even higher level of out of the box mobile functionality that’s configurable so that you get configurable ability to choose how things stack for responsive mobile design which is really handy.

John: Seems like there’s a new version of COD beta three. Can you talk about any of the newer, most important features in that?

Ezra: Yes so we, we recently released a Drupal 6 version of COD beta three. COD beta three was a maintenance release so we updated contributed modules in Drupal core so that everything all that offers is up to date out of the box on the road map for COD related to stack of new releases is we're going to be adding the Acquia connecter as an optional installation choice when you install COD so that you try and take advantage of things like Apache Solar Search where Acquia has in-site tools to help you with your COD sites. You can get that without downloading any additional software. For the Drupal 7 version we’re actively working with a number of community contributors including folks like InShout, I don't want to try and name everybody because I'm sure I’ll miss some because there's so many contributors but we’re working to produce a Drupal 7 version.

John: Great. Are there any pre-build integrations at different CRMs like Salesforce, Net Squid or anyone else?

Ezra: Yeah so the benefit of again of COD being based on Drupal is that there is integration for Drupal that will work very well with COD that you can download and add to you COD site. There’s at least a couple or specific immigration tools like RegOnline so we certainly would hope that folks would want to register and do integration in their events site but occasionally people, they have been an organization that’s kind of has a lot of relationship with external providers and our so other update that we want to make sure COD works well with everyone so we’ve got registration integrations for those as well.

Jeff: We also use CRM with our Power Shift sites. Everyone who registered automatically it was added to a group in our sites as well so we could email them so they would receive our organization emails and things like that.

John: Okay, a couple more questions. Let’s see, COD seems to be good at handling one large event. Can it be used to handle a large number of smaller events in one installation or one domain?

Ezra: The answer there is yes and there's a number of ways of doing that. As we saw with the Power Shift site one way of achieving multiple COD sites is to add the domain access module and that allows you to really segment out content like sessions and blog posts to different domain so you want to have different domains on one Drupal inflation you can do that. But right out of the box, COD allows you to have multiple different events within a particular site so if you want to have your workshop and your main event and maybe some post-event parties, for example, you can very easily allow registration for all of those events within COD. There’s different approaches for example domain access organic roots if you wanted to have people submit sessions within one installation of COD that are specific to different conferences. There’s several different really great ways to handle that.
John: Does that include Uber cart or Drupal commerce for the shopping cart experience?

Ezra: Yes. In the Drupal 6 version of COD we use Drupal carts and in Drupal 7 we used the Drupal commerce distribution.

John: What’s the installation like for e-commerce for example?

Ezra: Credit card handling transaction et cetera. What’s the installation like well if you want to take credit cards directly within your site they are some things like getting a SSL certificate and those kinds of security that practices apply but the benefit of using Drupal Commerce or uber cart is that they have a number of different payment gateways so it’s easy to integrate with iron providers that have off-site payments or paypal or cybersource there’s kind of a long list of the providers where people check out on your site and then they click one step to go off-site into their credit card information and get sent back to your site. So if you want to take credit card information directly on your site you certainly can, and if you prefer that people pay off-site there's a lot of different integrations for providers that support that as well.

John: This question is for Jeff, how many development hours generally for the Power Shift conference?

Jeff: Let’s see, I don’t remember specifically, If I had to guess I’d say around four hundred or so although you might know there’s a lot involved in that beyond just the conference site so we were really building it to be a longer-term platform so there is more work going into that in customization and themes and we need a fair amount of custom functionality but I think it was around… but if I had to guess I’d say around four or five hundred hours total.

Ezra: To add to what Jeff was saying, that’s definitely larger than a typical COD implementation and the benefit there about extra work was getting all those multiple content sites with all that custom functionality and design that we showed.

John: Yes, definitely there is widely on this case. Obviously, we saw a great demo today but is there an online demo of a COD site online?

Ezra: Also if you go to useCOD.com, you can see a showcase of a bunch of different COD sites that are live sites and there’s not currently and actually if you can find out for Acquia’s dev cloud trial, there you can get one quick installation of COD, I’m trying to find the URL for that, if someone has the URL that handy I'm sure we can post that when we post the webinar so those are two ways to get a trial and then of course COD is free software so you can download it and try it anytime you like, in your leisure.

John: Okay any more questions? In session creations that have beginner, intermediate, advanced, you can customize fields like that correct?

Ezra: Absolutely. I bet that’s all customizable through the interface so you can have custom tracks and custom skill levels and you can add additional fields if you want to help organize.

John: Got it. And I think you answered this, can event managers manage their own subsites and events if they have a large number of regional events throughout the year managed by many different distributed people?

Ezra: Yes, I think that is the same answer as before but the different approaches for doing multiple events.

John: Question about difficulty or if you can comment on integrating COD into existing Drupal sites and we’ve talked about this Ezra where if someone already has commons or some other communities running and they want to extend it to COD, what that means.

Ezra: Right. Well the short answer that it depends on the site but often it's very easy to do, we've actually split out the COD feature modules separately from the main distribution download so if you've got an existing site, you can go to the URL here to blood.org/project/cod_support and you can download these feature modules and it's very easy to just add those to an existing site. The only time that’s a challenge is that maybe somebody has some very specific piece of functionality that conflicts but I would say that’s not super likely.

John: Great. So I think that those are great questions. So i think a lot we’ll wrap it up here today a little bit early I just want to thank both Jeff and Ezra for joining us today, and everybody on the phone, we didn't go through a lot about detail on the Acquia offering but just to say that if you are interested in a COD implementation certainly you can call Acquia and we obviously help you set up the free distribution, you can host it on our manage cloud offerings. We’ve also got depth cloud offerings for development in the cloud and we have Acquia network to provide full support and additional services around things like COD so that's really where we help provide a complete solution. We can also help make introductions to different Drupal implementation and even strategic partners in the community and social business arena so that's really where Acquia fits in so feel free to reach out if you have any additional questions whatsoever. So thanks everybody for joining us today and have a great week. Thank you.

Female: Thank you everyone again the recording will be posted on the Acquai.com website in the next forty eight hours and again that website was useCOD.com. Thanks.

Integrating Drupal and Native Applications The Story of the Elle Decor LookBook App [July 10, 2012]

Drupal without Borders: Achieving Your Internationalization Goals with Lingotek [July 10, 2012]

Pages