Webinar

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.

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.

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 Michael Cooper. Today’s webinar is three powerful tools for improving the performance of your Drupal site. With Michael Cooper from Acquia, Michael Smith from Blitz.io, and Bjorn Freeman-Benson from New Relic. For more information you can always visit Acquia.com or email us at sales@acquia.com or call us at any time. Now I’m going to pass it over to Michael Cooper.

Michael C. I want to talk to you a little bit about the Acquia network and one of our main purposes Insight that can be used to help you get better performance with your Drupal website. I’m going to give an overview of how our tools can make sure all of your bases are covered, everything’s functioning properly and then from there Blitz.io will talk about how you then low test your site. Obviously it doesn’t make sense to low test your site until you know everything is set up properly. Then following that, New Relic is a great tool for showing you how to dig into the reasons why your site might have either a) failed low testing or b) insure that new things don’t get introduced into your site that affect performance afterwards and make sure that your up-time and your scalability stay in place.

Our main goal at the Acquia network is simply just to make it easier to fully develop and maintain Drupal websites. All aspects of a Drupal website from beginning to end are the things that we want to make sure that we help you empower you to do better with. Sort of our slogan as a of software and services to help maintain killer web experiences built on Drupal. I think the last part, even though it’s not bold is the part I feel most strongly about as a geek because I want stuff to be awesome and to rock and run amazingly. I believe quite firmly that Drupal is a platform for doing that.

We have three main offerings as part of the Acquia network. We had a library which has a lot of answers. This is a knowledge-based written by Drupalists and maintained and carried by Drupalists. It gives you a lot of answers for edge cases, for weird scenarios, or even to best practices like how you do reverse proxy cashing and which one to use or to use them together; a lot of things like that that can be very useful to someone wanting to get really into the nuts and bolts of how to improve people, or just if you need to understand some of the basics.

And of course we have our Acquia support team which has your back and the cloud services which has all the tools that you can use, be that our internal tools or third party services like New Relic and Blitz that will help you make your site better. The answers I need as far as the libraries; we have 800 articles (probably a lot more than that; probably over 900 articles now), thousands of facts FAQs actually at this point, and lots of podcasts, webinars, and videos and a lot more things coming in that are going to be improving even further.

For example, Drupalize.Me you sign up for an Acquia Network subscription, you actually get a free account on Drupalize.Me and I believe they also have hundreds of additional videos on how to perform tasks with Drupal, how to improve your experience with Drupal and to just get a better overall experience. Then of course our support team which is not really a great way to think of it because these guys are actual Drupalists. These guys are all developers and site builders. Their system admins and what not who have had years of experience in the field and now operate as our customer service team that will help you with any problem you have in Drupal, be it integration with a third party service or even your own custom code. They’re of course round the clock support as well. We have people all around the globe doing this; we’re always there.

Then of course something to be focusing on today is the tools that you can use for extending and managing your site and improving your entire experience for yourself and for your customers. The three main tools that we have are Acquia Insight, Acquia Search, and SEO Grader; things that we’ll be focusing on the most today because it provides real time analyses and proactive alerts about your Drupal site and it’s configurations and a little bit about your stack in so far as how it pertains to Drupal. It’s great stuff. It lets you know how your sites configured, if you have poor configuration issues, if there’s a lot of obvious things that we look at and say, “Wow you should never have these two modules working together because they’re going to conflict and you’re going to have performance issues,” or we say, “In production you should never be running this modular here because it’s going to hammer your database the whole time.” We make sure that we give you a lot of these basic recommendations. We make sure that all of the settings for your site are in place and proper as your baseline. Then from there you can then insure that using other tools as sort of a custom code and other scenarios and things like create new views or what not are not also not causing problems. This is an essential baseline.

It’s kind of shocking. You’ll see a little bit more when I get into it. Some of the things we check for here will strike you as very obvious but the thing is when you have a big website and you have a lot of people working on it or even a lot of websites; it’s easy sometimes to miss some of the basic things; that’s where insight really comes in to make sure that all that stuff is covered.

The SEO Grader, I’m not going to get into it today but it’s an additional tool that we have that helps you configure your Drupal website to be optimal for SEO which is a pretty useful thing.

Acquia Search is all about essentially offloading all of the search overhead from your site. Search is really important but it’s also one of those things that you don’t want to think about too much. What we like to do is use our Acquia Search service to offload all of the search resource load and indexing and everything to our servers. All your Drupal website probably does is just sends off information to our servers because we use Apachi solar, we’re using 3.5 so we have all of the latest and greatest features in there and it’s just something you don’t have to worry about anymore which is a great thing and also a little boost of performance too.

Something that’s now available too is what we call site portfolio management and that’s if you have a lot of Drupal websites running you can actually at a glance see if any of those Drupal websites have problems, if you have modules that are out of date on a particular website, if you flagged a bunch of performance issues, or security issues on the website, and gives you sort of a one-stop shop for a report card to tell if you need to do anything with your sites and what you need to do. Then from there you can create all of your to-dos off of that list.

The insight overview page is the main page you get to when you come into insight. What we do is we give you a score based on about 150 different tests that we run on your site. Not all sites have all 150 tests applied to them it really depends on what modules you’re running, what versions of Drupal you’re running and what not. There’s a big slot that can get applied. We score your website based on how well we think you have it configured. This particular website here is a test website and it has an 83%. We have a better score but a number of important tests have failed. On this particular scenario, they’re multi-security tests. Maybe some of them are minor ones so we have them flagged and the things that are important.

The number of tests that pass or fail does not always directly correlate to the actual percentage of scores because some things of course are much minor. Then down at the bottom you can see that we give historical graphs too. You can look at this and say, “Wow we did see a decrease in leads or web traffic or maybe we saw an increase in web traffic,” and you can correlate that to the score and use that to determine why historical events might have occurred. Also you noticed at the top here; we flagged an important alert that one or more modules on this website has a security update that’s necessary. There’s a number of different alerts that are considered to be super critical that will actually service all throughout our UI to be going to the UI and this alert will there to bother you all the time saying, “You have page cashing turned off or you have modules that are out of date and security updates or you have things like the unauthenticated users can use the PHP filter,” stuff like that is what will show up and constantly bother you at the top of the site.

When you have an alert there’s a healthy fix it link and this is an example of what you could get. This particular one shows a database logging module enabled. They explain why you don’t want to have a database logging module enabled and we provide options as far as what other systems we think can give you the same thing and in this case, Systlog is the one you should run. There might be some scenarios we understand where maybe it’s a development environment or maybe you’ve said, “You know what this is a really small website, I’m not that concerned about database logging,” and you can choose to ignore certain alerts. That way you can say, “I understand why Acquia is offering this recommendation but I have my own work around I put in place and I feel alright,” and you can ignore that alert and it will no longer than count towards your score.

If you remember back to the very first page, the screen I showed you with insight, one of the things was that there was a security update for a module. What I have here is a page inside that shows all of the modules for the site that need updates and you can get to that page simply by clicking this code tab. It shows me a bunch of modules in here that need to be updates. All of these ones either have bug fixes that are the reason for the update or they’re security updates. I know that this is basically a to-do list for myself or for one of the developers that needs to take care of this; so we’ll go and perform these updates. If I click on one say like “panels,” I’ll actually see that I am running version 3.9 and that was November 1st last year and there’s a new version out, 3.10 and it has security updates and bug fixes; we get the download length as well as the project page so if you wanted to get a little bit more info you can get into that.

One of things that…let me go back two slides and just point this out. You’ll see looking down here, the header distance but there’s a couple of things view diff over on the right. What that means is that these modules have been modified which is always the bane of anyone trying to maintain something like Drupal. You don’t know…either maybe you took over a site from somebody else or you outsourced the site and you’re not positive if any modules have been modified. What this allows you to do is to actually, at a glance see if any of the modules been modified and know from there what you have to do. We know we have to update these two modules and we know they’re modified so we know we actually have to go in and do something about that; we can’t just willy nilly update these modules because we might actually break functionality on the site.

If I look at this one module’s typekit I can see in here that the developer’s have made a change where they’ve altered from loading the typekit JS files from off of the typekit website to loading a local version of it. Obviously that probably would have been done for performance which is a good thing. We’ve actually flagged what was changed the module, we provided diff and we also highlighted the fact that this typekit.js file is not in the module you get off of drupal.org so that if you were to go and update this module, you’re going to need to either a) see if the new version has this functionality or b) modify the new version of modules as well to have this functionality.

Another thing and this is actually kind of interesting. This is something that I spotted just using the tool while I was preparing these slides a little while back that the token module needs to be updated. I looked at it and thought that’s kind of odd because it’s one of those modules you would just almost never have a reason to change. When I looked at the actual module I saw here that inside of this folder there’s a second copy of the token module and it says neither of these files are in the distro, yes because I look at this and I see token, token then token.module and what not. What that means is someone has accidentally instead of just updating the module at some point in the past, they put a second copy of the token module inside the token module. If you’ve ever looked at how Drupal sort of understands what module to load; you almost have no idea which of those two code bases are actually being used as token modules. Updating this module might not actually do anything because Drupal might read this other erroneous version of the module. This is sort of an eagle thing; it’s something you may not spot on a regular basis but because insight is highlighting modules that don’t look the way they’re supposed to, you can quite easily pick out things like that.

Once you’ve got all of your modules up to date and you’ve got all of your security stuff in place, you know that you’re in a good place and now you’ll start looking at performance. We can see that this particular website is pretty good from a performance standpoint; 16 out of 19 issues are passed. We have a lot of different check, if you didn’t get in the slide, they’re gone off the page. We check for things like the page cashing turned on, do you have the ability to reverse proxy cashing, are you sending out the right cashable headers to browsers, are you using ADCs m-cash, all that sort of things are things that get checked. A couple of things have been flagged here; is that the views UI module isn't enabled, that’s not a huge performance hit so it doesn’t actually have a very big impact on the score but it is there. The database log in module can be a huge impact on performance because if you have your site set to log notices you could be writing hundreds of things into the watchdog database table on every single page load so that could be a huge performance impact. And the devel module can do a lot of extra logging and what not that could also impact performance so we recommend of course turning them all off. As you click the healthy it explains what the actual impact is or some information about that and give the link to turn it off and all that sort of thing as well.

Beyond that, everything now is good to test so what you could then do is, you could say, “You know what? I have only two issues that are currently aggravating this website, they’re under security, I don’t think they’re a big deal, I think I’m ready now to go and actually start doing some low testing on my site. At this point we’ll hand it off to Mike Smith Blitz.io and make sure your site’s performing as well as you want it to.

Mike S. Hi, thanks everyone. Give me one second and I’m going to screen share and then I’ll walk through a demo of using Blitz and using it to tune the performance of your site. I’ll just give it one minute to load. While it’s loading…I’ll give a little background to Blitz. Blitz is a cloud based load testing service. It’s a pay as you go service with a premium payment model. What we do is we offer a free spine up to any users. What you do when you sign up, you’re able to get our basic plan which allows you to test with up to 250 concurrent users running against your site. From there you can scale up. We started scaling all the way up to 50,000 users if you’re really ambitious and want to cut your site; it handles that amount of traffic. The pricing models are very flexible. You pay for the time you want to use and for how much testing you actually need.

What I’m going to walk through is an example that I’ve created which is using a very plain default Drupal install which I set up on a server. It has a single page. It actually is a single static page. What I’m going to demonstrate is actually the thing, one of the things that you just heard about which is the impact of turning on and off page cashing on your site, and show you how you can use Blitz io2, actually demonstrate the real world impact that is a real impact that it has on end users.

Let me go back to Blitz. Here we have our initial finance screen. I’m going to go ahead, log in. For this purpose I’m just logging in directly to the Blitz site. We also have partnerships with Acquia so that if you’re using the Acquia dashboard, or via the Acquia tools you can actually add Blitz as an add-in and sign in directly to Blitz from there. The benefit of that is that 1) you don’t have to sign in, create a second account and Blitz will do a single sign in for you. It’s just a little bit more convenient and also as an additional thank you we are offering a free one week trial for… we’ll bump your user capacity up to 1,000 up from the normal 250. It’s a good way of trying out the service that’s a little bit more demanding, low test.

What we have here is the first page you see when you log into Blitz. We have what we call the Blitz bar. We’re going to start out by doing what we call a sprint which is really just a single request against your website. I’m going to take my URL from my example site here and I’m just going to paste that in to the Blitz bar and I’m just going to start my sprint. What’s happening, or what’s happened already, is there’s actually a Blitz engine that’s actually running in a data sprinter that is in Virginia and it performs a request against my site and told me what it got back. It told me that it responded in 125 milliseconds which is actually a pretty decent response time for a plain vanilla app. It’s also giving me some additional information about the request. It tells me what the response headers were, what the request headers were. When we did the request we identified ourselves as coming from Blitz so that if you’re a site admin and you see traffic coming to your site it’s a little easier to know where it’s coming from. You can use it if you’re interested in seeing some little technical details about how your site might be configured or how Blitz is seeing your site.

One thing you might notice here is the cash control header is actually configured to do no cash which no means there’s no cashing happening whatsoever. Every page load that your user will trigger is actually dynamically generating the page which is definitely a big red flag in terms of performance. Let’s take the next step which is actually running a load test and seeing how the performance changes when you go from just one user to a dozen. Let’s say we’re going to ramp up from starting with one user, we’re going to ramp up to 50 users over a period of 30 seconds. This will kind of give us a gradual ramp and we can see how the performance changes over time.

The load test starts running immediately we’re seeing the results as its running. We’re basically showing you both a response time and those statistics on the number of hits that your site is seeing. If we go down here we see that it initially it starts off with a response time with around 200 milliseconds. Pretty quickly we get to the point where we have about 20 users and the response time has jumped up to 1 second. Every user, it’s taking them a whole page, a whole second to load the page. By default we have a time out of one second configured. At that point we actually start counting these requests as time outs. Potentially a user came to your site, it was loading for one second, they got bored and they decided to go pick out something else. That’s essentially what you’re seeing here. Really, when you initially look at the site with the sprint, with a single request the performance was decent but you can immediately see that once you start getting a number of concurrent users, the performance really goes down hill quickly.

If you were running this site one of the very first things you would probably want to do and one of the things which is recommended to you to do is actually turn on…configure your Druple site to enable full page cashing. I am by no means a Druple expert but I did manage to figure out that you are able to do that very easily through the configuration. What I’m going to do is turn on page cashing for anonymous users. Pretty much just a one click operation here; configuration options saved, website still up. What I’m going to do is go back to Blitz and I’m just going to run this exact same load test now. If you remember before we got to about 20 users before the performance really dropped off. Let’s see how things are doing now when you have page cashing enabled. You can immediately see the response time is actually already much lower; it’s less than 100 milliseconds so in this case, the page is actually being served from being pre-generated and served from the cash. It’s not being dynamically generated on every hit. You can see that the performance is great. Most of the users coming to your site are immediately getting a response and your server is happily handling all the way up to 50 users. That’s great news. Of course you can scale this up more. I’ll go up to 250 users and we’ll probably start hitting some more issues with that. From this point, you can see that Blitz is a useful tool to use when you’re configuring your site, when you’re trying to figure out what both your peak performance but you also might use Blitz to determine over time has the performance of your site changed. Maybe you made a configuration change, you deployed it on some different servers; something like that you want to know what the impact of that was.

Going back to our results here, what we saw was that the performance with 250 users definitely slowed down quite a bit so after a point we started getting back to more like the one second response time which is probably not ideal. We also got a number of time outs because we went over one second. From this point you might start investigating other things like doing some more database tuning, you might try pushing into more capable hardware. You might try something like deploying a load balancer running your sites. A lot of these things are something that actually do well to help you identify some of the internal bottleneck for your application.

One thing that I want to demonstrate quickly is that we actually try to integrate with the tools that our users are comfortable using. We want Blitz to be something that you can use without having to learn a bunch of new things. We want to work with what you already have. An example of that is…we have these analytics plug ins. One of the ones that we support, one of the first ones we added actually was the new LX Analytic. If you have a New Relic account, you can actually configure your Blitz account to connect to New Relic and get some internal metric on your machine such as how much memory is being used or how much BPU time is being taken and you actually have those results overlaid into your Blitz chart. It will be a good way to kind of get started in performance. Of course, from there you could actually go into the full New Relic user interface and from there you get a lot more details which log in but this was just a demonstration of how the two tools can integrate together.

One other thing that I really wanted to find out is that we actually provide an ATI so that you can run Blitz without…in an automated fashion if you some sort of internal tools that you want to integrate with; we provide ATI for ATI clients for a variety of different languages. We put into ATIT is one of our newer ones. There’s really a lot of flexibility. There are a lot of capabilities…of course we don’t have time to cover today but I definitely would encourage everyone to check it out. Preferably if you are a member the Acquia Network and you can take advantage of the one week offer than that would be great. I think that’s about my time. I think at this point I can go ahead and hand it off to New Relic. And they'll gave you a little bit more of the more introductions as to how you can use New Relic to further tune the performance of your site.

Speaker 2: Well let’s see. Hopefully the slide will switch to my slides and people can hear me. Maybe someone will speak up if they can’t. That was great from Mike looking at Blitz. That’s pretty interesting stuff. I’m going to tell you about New Relic monitors, the web applications, and how you can use it maybe with the Acquia Insight or with Blitz or just stand alone. Just a brief background; New Relic is an application performance monitoring tool that runs on your site in production. We deliver software to service just like Acquia does; monthly subscription. We track both the application performance and actually the real user performance which is a typical job description so we can see how long each browser it takes and we have server monitoring as well.

Mike showed how Blitz takes some of that data and shows it with their stuff as well; that’s pretty cool how they integrate there. The idea behind New Relic is that it’s a production monitoring system. In addition to be able to using it in testing environments you want to do it live all the time because we’ve found that users tend to find much more interesting problems in your site than anyone can ever imagine than in a testing environment. I’m not saying you don’t want to do low testing but you definitely also want to monitor production.

I thought I’d show a few things that you find sort of common Drupal performance problems. One of the most common Drupal performance problems is slow database queries. You can find those with New Relic. Let’s look at a couple examples. Here’s a screen shot from when I was browsing Dries site, Dries being a Drupal site, you can look at some of this information and you see here that threes site has a certain amount of time every minute that goes to PHP and a certain amount of time goes database time and so on. We can drill down into that a bit further and say well why are we spending so much time in database time there? We drill down and we can drill down in a couple of different ways. We can either drill down in database time where we look at it specifically filtered a different way to look at which of the sequel statements that are being executed are the slowest ones on the site. Let’s drill down a little bit further and here’s a general view (again a screen shot of a general view of database queries) that happened on Dries' site and you’ll see that the number one database query that’s consuming the most amount of time is a select statement on the access log. I don’t know exactly what module Dries’ got running on his site there or how the code’s written but I’m getting that we’re looking there at whether the user is currently logged in or whether they’ve logged in recently and we’re accessing that table a lot. There’s a few other things that are taking up some time. We could drill in a little further and look at say URL alias table and find out where that table happens to be referenced in the code. If we look down at time consumption by collar we see that, the no page default will take up most of the time and then there’s a techton and turn page that looks at the URL alias and so on down the line. We can drill down further and we can go even further than that and drill down and see what are the actual sequel statements that are being executed that take a lot of time.

This is a screen shot not from Dries' site but from our site that couldn’t find a good example from previous sites. Here we have the actual sequel statements. Here’s where we have one that took 350 milliseconds or like 4 minutes which is ridiculous. You can drill down even further and….one of the things about New Relic is that you see the general view. If you’re using Blitz to drive your load and you see that as Mike was demonstrating at a slow point, you drill down into that and you just keep drilling down until you find the solution or find the problem.

Here’s a screen shot of where we’ve drilled down all the way to find the slow sequel statement and we’ve done a query analysis, i.e. an explain plan; New Relic sort of does that on the fly for you and it also shows you the exact saturates of the code where it’s being executed. You can see all of this and then you go, “Oh look, here’s where I need to improve that particular performance.”

We can look at this from another way as well. That was looking at what are the slow sequel statements but we might also look at from the point of view of what are the slow web transactions or web requests that take more time and that are caused by sequel statements. We can drill down in through transaction traces and here we see a particular piece of code called Find and Aggregate; it says a lot of sequel calls. We can then do things sort of drilling down and finding out oh when people come in with this web request, it’s causing a particular set of sequel calls which are slow. This is a way you can find out what’s going on there.

Now one of the things that you might be interested in is what sort of overhead we’re you using in external HTTP calls. A lot of people are building sites today (we’re building sites today) that make a lot of external calls and Dries’s site is a perfect example of this. If we look again at this screen shot of Dries’s site we see that the web external time, that dark green color has the certain amount of the overhead is allocated to that so what’s going on there? Let’s drill down as to why the site is making these external calls that are then slow when we’re packaging together services like that. If we drill down to what’s going on in the inside we find out that it’s calling this particular IP address and if you look further into that IP address, you discover that what it is, is a comment spam checking service. When people post comments on Dries’s blog, it called to this spam checking service which has this variable response rate.

Here’s a similar shot again from our site. We have various systems that we call like Horoku, API and campfire and so on. You can see multiple services if you call multiple services. Here’s another view of the same thing for Dries’s site. Here we’re showing that Dries's site calls out to database a lot of the time and external comment service some of the time and the database is very quick, the external service tends to be a bit slower. If you have a lot more services you see a much wider range of these things. You can see what the range of calls are, how fast those things are and so on. You can look at how those services are responding historically. Again, much like Mike shows you with Blitz, if you want to look at what’s going on, not just today, but what has been going on in the past. Where the characteristic changes are in your performance and in this case we’re looking at external performance not just…external services you’re using not just the services that I’ve written. You can compare them historically or you can drill down into particular time frames. If we look at this particular time frame, we see that briefly that the external used for comments filtering took a bit more time than it had before during a particular time period so we could look into spikes and find out why they’re slow.

A third reason your site might have performance problems is you’re just kept getting a lot of traffic. If you were using, again, Blitz and you generate a lot of traffic you might know why it had a lot of traffic but what if you had a lot of traffic just in general in your production site? Well you can go look at the grass and you can see what your output is. Dries's doesn’t get a lot of traffic or it didn’t when I was taking these snapshots; 20 to 30-page hits per minute. But if you had more than that you could drive and look at what was going on production wise.

This is one of my favorite charts in New Relic partly because it’s just pretty with lots of colors but also because it’s very useful for looking at what the scaling issues are as your site undergoes more and more load. We have been running this chart with that example that Mike was showing with Blitz; we would see a different curvage. Here we’re seeing a very horizontal line which is showing that the site scales very well with load. In that second example that Mike showed where when he started having 250 users his site started to suffer under the load. You would see much more of a hockey stick in this particular shape. Again, here’s Drie's site; here’s one with more data points. This is the one from our particular site. Notice that we’re running somewhere between 4,000 and 6,000 requests a minute through our site and New Relic is collecting all of that information and showing that we’re getting pretty much a linear response time there.

You can also see by the coloring that we tend to get a lot more of our hits in the day; fewer of the hits during the night; sort of classic North American performance curve there.

Another thing that might cause your Drupal site to be slow and you would want to check within what’s in the load tester. It’s just using too much TPU time. One of the things that New Relic has is that again I said we monitor not only application but also the underlying server and user browser as well. Here we’re clicking into the server’s tab, looking at all the servers that are running and we see a page that shows various things that servers; unbelievably boring which of course as an ops person everything you want to see is unbelievably boring; nice level graphs of low averages and so on. There could be cases where it’s not unbelievably boring when things are taking a long time.

Here’s a case where we had some of our code which was taking a long time and if you look at those response times for particular individual functions they were taking a long time for certain pages for certain customers and so we could drill down into those particular transactions and find out what’s taking all the CPU time. In this particular example we see that this function called find and aggregate is taking most of the time followed by this multi app data which taking another chunk of the time. We can continue drilling down into that to find out why exactly are those things taking all of the time and we’ll see that in this case I can just tell you because I know what the code did, find and aggregate was doing in our scripting language what we should have been doing in sequel. So instead of using the powerful sequel engine to doing and purging the data, we were doing it by grabbing the data and then aggregating in our code base and so it was a lot slower in terms of CPU time then it would have been if we had done it in sequel; which we then changed the code to doing it in sequel. You find the same sort of thing when you write custom codes in your Drupal module that you’re not taking advantage of right place to do that computation, you’ll find slow transactions and you can drill down and see what’s going on there.

As Mike pointed out in his click demo, one of the best things you can do to improve your Drupal site is to cash in. How do you detect cashing from them when you’re looking at New Relic? Again, it’s looking at that overview page. You look at the historical performance or the performance of pre-site there. Well, are there in cashing problems. It turns out Dries site is very well structured so it’s kind of hard to find problems in demoing Dries site but if we were to find such a thing, here’s an example where we had a cashing problem in one of our applications and you’ll see that the ruby code (because our application’s written in ruby not HP but you get the same thing when you look at Drupal) the ruby code was taking up a lot of the time; the database time, the garbage collection time but the ruby code was taking up a lot of time. The problem was that we weren’t cashing page fragments just like it turned on there for his Blitz demo. That deployment line showing up on the chart is when we then deployed a new version of the code that had cashing of page fragments. You’ll notice that very quickly the application time went down, as the cashing kicked in and we started cashing more and more of those fragments and our total computation time went down.

When you see a historical chart which is sort of the reverse of this where it used to be at a particular rate and then it went up dramatically, that’s typically a case where you’ve accidentally turned off cashing in your application and you can go and configure it one way or another to turn cashing back on again. You can also find this by just looking at again the transaction traces where the web requests come in to see which ones are taking a lot time. If there’s certain one’s that are taking a lot of time that on average don’t take a lot of time, you go look at cashing. In this particular case we’re going to drill in and we’re going to find that once again it wasn’t cashing, not once again but in this case it wasn’t cashing but it’s this external service that Dries created to do comment spam filtering that was taking up the time. It’s not a cashing problem in this case but you might have assumed it was by looking at the performance there but again by drilling down you can go oh in this case it wasn’t a cashing problem and you could look at it in more detail.

That’s a quick overview of New Relic and some of the things you can do with it for looking at performance problems inside Drupal. I think it goes really well with Acquia and with Blitz because we’re looking at the three different areas that you can within your over all website build in. The Acquia insight is a fabulous tool for deciding whether you built your Acquia, your Drupal system well and you use Blitz to run some low tests against it and then once you’re in production, you can use New Relic to make sure that your customers are still using your site the way you predicted they were going to use them. Acquia customers think that New Relic automatically provisioned by clicking a few buttons and with that I’m going to hand it back over to I think it’s Michael.

Michael: Thanks for wrapping it up. That’s exactly how I feel about these services too and how well they complement one another. I think that Hannah’s going to read off some Q & A questions.

Hannah: Yes, please ask any questions you may have in the Q & A section of the Webex UI. Our first question is how much performance overhead does New Relic typically have?

Speaker 3: That’s an excellent question and of course you always want to know that before you put anything into your production site. We’ve measured the performance. We have an internal goal of having less than 5% overhead for doing continuous monitoring and we’ve measured our overhead to be around 2-3% on your typical application. It’s always possible as an engineer I have to tell you, it’s always possible to write a diabolical application where the overhead will be more than our measured 3-4% but we’ve discovered across Drupal sites of all of our customers, we’re looking at about 3-4%.

Hannah: Okay, that’s it for questions. Could people please ask any questions they may have in the web XTY section? Alright that’s it. Thank you everyone for joining and thank you for the great presentations. Again, the slides will be posted at slide share and the recorded webinar will be posted to Acquia.com in the next 48 hours. Thank you.

Pages