Home / Taxonomy term

Webinar

Kill the Shop Button: How to Inspire Customers with Content & Commerce Experiences [April 24, 2014]

Click to see video transcript


Sasha: During today’s webinar we’ll talk about “How to inspire customers with integrated content and commerce experiences.” I’m joined here in the Burlington office by Acquia’s Senior Director of E-Commerce, Kelly O’Neill, as well Senior Vice President of Commerce Ray Grady. Also joining us from the other side of the Atlantic in the UK are i-KOS’ Managing Director, Myles Davidson, and his colleague and Technical Director of i-KOS, Richard Jones.

Ray Grady: Welcome everyone to the webinar. As Sasha alluded to, we’re going to talk today around trends that we’re seeing in commerce. Specifically, how brands today about B2C and B2B are needing to engage with their consumers and customers in different ways. So what we’ll do, we’ll kick it off with a quick introduction of Acquia and what it is that we do and our value proposition in the space. I’ll then spend some time sharing with you our experiences and what we’re seeing in the digital marketing e-commerce industry, and some trends that we’re seeing both B2B and B2C. Then, I’ll hand it over to Myles. Myles will kind of step you through an interesting customer that he has worked with in the UK that’s doing innovative things digitally and how digital is allowing them to not only engage with their consumers in a unique way, but also get to market differently with new products. Then hopefully, we’ll have some time left in the hour to have a healthy Q & A with the group.

So as I said, I’ll kick it off with a quick introduction of Acquia. For those of you who don’t know Acquia, we’ve been around for almost seven years. The gentleman who invented the product Drupal, which is the largest open source content management solution on the planet, started Acquia in 2007. We’ve grown very rapidly as you can see. We’ve grown 250% over the three-year compound annual growth rate, lots of customers. We’re growing rapidly from employee-bases with offices not only here in the United States but also throughout the globe. We’ve gotten a tremendous amount of accolades over the last couple of years. A couple that was referenced is Deloitte’s Fast500. We’re the fastest growing privately held company on the planet last year as well as good accolades and strategic recommendations from Gartner and from Forester around not only where we are today but where we’re taking the organization into the future.

As I mentioned, the organization is founded on the backs of Drupal. So obviously, we have tremendous expertise in Drupal. We’re pretty bullish not only on Drupal but the overall C-change within technology around the adoption of open source across the enterprise. So we have just some quick stats here on our Drupal relationships. We contributed a lot back to the community. We feel like that’s very important. We have tremendous amount of modules and as I mentioned, Dries not only started and invented Drupal but also helped start this company. We’ve built the organization out very thoughtfully over the seven years, bringing in executives from all parts of industry whether it’s enterprise software, consulting services, the agency world, and you can see where some of these folks have come from in the experience section there.

As I mentioned, Drupal is the largest open source digital community and the largest overall open source community on the globe. Many, many sites as you can see are being powered by Drupal and these sites are doing – these can be internal sites, they can be commerce sites, they can be internet of things sites, as well as sort of brands site as well, but a huge depth and breadth. We feel like our customers in small, medium businesses as well as the enterprise, gain a lot from this massive adoption of Drupal because the more people that adopt it, which means the more people are developing and adding products to the community. We feel as though customers who standardized on these types of solutions can innovate faster than maybe some of our partners in the enterprise space.

So, I’d like to then kind of jump off to some things that we’re seeing within the industry. It’s a unique time to be in digital today. Commerce today is evolving rapidly as rapidly as I’ve seen things. I’ve been in digital for 20 plus years and we’re seeing lots of interesting trends happening out. When we started talking about e-commerce solutions, it was typically a departmental initiative whether it was a webmaster or someone on the technology side who was maybe trying to push a boulder up a hill around an e-commerce business. Today, we’re seeing board level edicts from Fortune50 down to enterprising digital-only customers who realize that digital is their growth channel and e-commerce is their growth channel and that sort of business level sponsorship is driving interesting investments in the space. With the amount of places where a consumer can engage with a brand today, whether it’s on a handheld device, be it a smart phone or a tablet, whether it’s on a social media channel or quite frankly, if it’s in an internet of things or an internet-enabled vehicle, brands need to step out and differentiate themselves. They can’t just take a catalogue and put it online and throw a couple bucks at Paid Search and feel as though they can be in the e-commerce business and in the digital business. So what we’re seeing is brands doing interesting things and we’ll speak to one of those brands today to kind of marry and really get the ethos of the brand into the overall shopping experience whether it’s on site or on third-party retailers as well. Finally, based off my first point, we’re seeing that organizations are having to evolve internally to support the demands and needs of digital today. I mean historically, maybe it was a marketing silo and maybe marketing didn’t interface really well with technology. This is truly a cross-functional group of merchants, digital expertise, technology that now need to come together. We’re seeing organizations having to transform their businesses and transform their companies to deliver on these promises.

As I mentioned, digital is truly changing how companies exist quite frankly. New market entries are entering into the space and are causing major disruption, traditional brick and mortar retail can be challenged if they don’t think through maybe a digital first or a true multichannel approach. So historically, it was very much a silo-based process that our customers would go through, right? They’d get the brand out there. They would merchandise the product which would lead to some level of retail acquisition. Now, we see there are multiple touch points and these things are much more integrated today. So the brand owned versus the brand influenced model has evolved.

Why is that happening? Well, we feel there are many irreversible trends that are happening in the marketplace today. This stat shows just massive adoption of smart phone and mobile phone. Obviously, that has direct ramifications to everyone on this call, on this webinar. Consumers now have the web wherever they go and they can engage with - and not only engage with your brand wherever they go, but they can speak positively or negatively about their experience with the brand wherever they are.

That’s not only on the tablet - I’m sorry. That’s not only on the smart phone, but it’s also on the tablet. So you may have heard sort of the lean in or the lean back approach to communicating, folks having a tablet as they’re watching television with their smart phone next to them. Brands today need to figure out how they can be relevant across all of these different devices in a seamless and cohesive way.

It’s our perspective that brands, as I mentioned, they need to provide an integrated digital experience. These things have to come together seamlessly and they’ve very complex. They’re complex because they’re in different silos within the organization. They’re complex because content can be spread across the organization. They’re complex because they may not own the end destination point of where the consumer is engaging with their brand. So customers today need to take a step back and figure out how they’re engaged across the entire digital life cycle for their customer.

As I mentioned, the folks in the business need to transform how they think through the customer, how they think through the brand, how they think through their product messaging if they’re product merchandising, how they think through listening to feedback from customers, how to handle customer support and customer complaints. We feel as though it needs to be done in a more integrated way as opposed to the silo way that is happening in some customers today, but unfortunately, most customers today that we talked to feel that they’re not ready for this. Obviously, this explosion in digital, the sort of retrenchment on retail based on the market collapse in 2008 and now this acceleration into digital have left organizations ill-prepared internally to really take advantage of the opportunity and really support the consumer in a way which he or she expects to be supported today from a brand engagement perspective.

This trend that we talk about is not specific to the consumer and is not specific to B2C. Business to business commerce is also evolving. At the end of the day, the person on the procurement side, someone in an MRO, someone at a manufacturing and distribution, they may be buying products internally in a B2B world but they are a consumer. Their expectations are being set by Google and by Amazon and by Apple. Oftentimes, the B2B experience falls far short and we’re seeing a tremendous amount of investment in this channel as well.

The smart B2B folks are ones who are applying B2C tactics, B2C digital marketing tactics appropriately in their B2B business. So the ones who we think really understand it are appreciating and embracing the fact that the B2B buyer is a consumer but were applying the right tactics to the right channel

At the end of the day, it’s a proven fact that the more channels a customer has and the more that they’d take a step back and understand the different touch points a brand could have with the consumer and deliver a cohesive experience, the more revenue that these brands can expect to see. As you can see, folks who we think do it and the analysts community doing it correctly, you can see a 44% increase in AOV which is, as you know, one of the most important business metrics in the e-commerce world today.

So that’s just a quick snapshot on what we’ve seen on some trends that are happening. I’d like to hand it over to Myles now to have him step you through a great customer example of someone that we’ve collectively worked with that has evolved the brand and now created what we think is the best in class experience, not only around their current products but have positioned themselves to enter into new markets based on the agility of their business model and their platform. So Myles, I’ll hand it over to you.

Myles Davidson: Ray, thank you very much. Yes, that’s great. It really helps, I think, set the scene and I get fascinated picking up some of those items because we just have the same observations. Hopefully, let me express those through a very relevant case. This little story right now is about lush.co.uk. We’re going to explain who Lush are very soon. A little bit, just to introduce me as well. So as it was said earlier, I’m Myles Davidson, the managing director of i-KOS. We’ve been into Drupal since 2007. Since 2007, we’ve been in to e-commerce but as we’ve seen, our business has transformed in 2014. We’re all about commerce, content, and community leverage in Drupal. We worked for some great brands and Lush is one that we’re extremely proud to have worked with.

So let’s go through some of the stories. By context and background for anyone who doesn’t know Lush because they have a different footprint globally, that they are a highly ethical business. Now, let’s just read everything but they’re all into natural handmade cosmetics. They are headquartered in the UK, which is why you’ve got someone from London on the phone, but there are 910 stores in 50 countries and they’ve got a pretty big turnover. This website, they see as being absolutely critical to their growth plans.

So what were the goals of the project when we started? Well, it sounds like a strange thing to say but more than a soap shop and that maybe slightly UK-centric. If anyone knows the retail stores, they have a really strong smell. You can normally smell it several stores away. You’d get that very overpowering shop in the retail work and that’s really distinctive. It’s a key part of their brand, but actually, what they really need to do and what became fascinating working really closely with the Lush digital team, was to understand that the level of story that sits behind so many of their brands and their ethical values. They just don’t treat ethical programs as a badge to just sign up to. These guys often, when they go and source products, they set up and they manage and they run schemes. Their whole philosophy is to improve everything in their value in their supply chain, which is just wonderful. So really, everything about their kind of goals so I’m going to just say was what they’re looking to do here is that they used the UK as a flagship site to actually create a digital push to improve its global brand presence. As we will see, they’re really doing this through content and deli-style cosmetics. Yes. So there are lots of things in there around about what we’re looking to do and even the soap box. They’re very well-aligned to campaigners and certain charities and they really want their website to also be a platform to talk about issues that are important to their business, issues such as climate change and human rights. They really want their website to engage with people, not just their customers but with people, who are aligned and believe in some of the things that they really believe in so strongly. As we’re hearing from Ray, the story partially of choosing Drupal and the story we found out was with those goals, they absolutely wanted this content-driven commerce experience. I think this is a huge philosophy. That the whole point was every fresh ingredient has got a story, how it’s sourced, what’s in it, and every product has got an inspiration. When their products are made, you see the little sticker on it. It tells you who made it and when it was made. It got these great stories they really want to tell. Community, they’ve got some lovely ideas that are coming up fairly soon. They’re going to be launching fan clubs and that going to be based for the loyalty, it’s not based on price but it’s going to be based on exclusivity. I think that’s really important. All these things are just really important. How, as a brand, they were looking to use digital to absolutely stand up and be clearly counted for what they believe in and really engage with people.

So a little bit about Drupal and perhaps why, where, and how Drupal was chosen and some of the really big criteria that when it came down to it where Drupal wins. I think there are some good points that you can see on there. Yes, a unified platform to manage content and commerce. Yes, what we’re doing in the UK has to pave the way for a global program. Yes, the powerful – in fact, I’m going to take the last two bullets points the other way around. What was really important, design was no way could that design could be inhibited by technology. So a quick shout out to Method. It was the design company who came up with a strong, wondrous design. They took a lot of discussion and lots of convincing to make sure, they wanted to know if in any way will the technology inhibit the design. We proved that it wouldn’t. The website stands great testament to that. Also, I think but what they want there, of course, what the business needed was a really powerful content curation and a really great experience, too. They wanted both sides of the coin. They wanted the fantastic customer experience which couldn’t be held up by the technology, but the business also needed to be able to support that, manage the content, add their new stories, and engage with their people. That’s really where Drupal has, without a doubt, absolutely won wonderfully.

I encourage everyone after this to have a real good look at the screen on whatever device you want to look for it, but just to explain this content and commerce. So what does that really mean to some people? Well, the homepage I think is a great example. Let me just give you a little roll call of what the homepage does and what it delivers.

So the homepage, it blends content and commerce. To give you this sort of content items that’s on there. We have hero products and we have products. We have hero products combined with their reviews and this all fits alongside ingredients and the ingredients that you used within certain products. We also have information about the key values to the business, and we have frequently asked questions, and we have collections. We also have features and featured articles. The really kind of mind-blowing and I think the wonderful part about all of this is all of those items fit beautifully within the design framework that just works on every device that we’ve tested it on and that’s putting it out there. The management of this, all of this information is just curated and is beautifully linked or to use a phrase that I love so much is it’s deeply intertwingled. So I just thought it’s worth labeled on this slide a little part to say what they’ve actually done is create a lovely editorial end product but it’s all link through its sort of taxonomy and classification, and it’s curated easily readily by the customer. I think that is just incredibly important. As Ray was saying earlier, this is a project and it brought together some great domain expertise. I-KOS got the joy of leading this project, developing this project, and providing solution architecture. As with the projects of this size, we absolutely looked for the main expertise brought in and worked alongside in a consulting capacity with Acquia, deployment, hosting. What’s great is that we’ve now got this Drupal project sitting on a platform that’s got the full 24/7 support.

I think it would be remiss not to mention a couple of other partners. We have Method, I mentioned, who did an amazing job of the design and I know we talked about how we worked with those guys and Commerce guys were brought in for some really great expertise around some of the module development on the site. So just kind of what made this project special and this was super hard because I was challenged with the idea of just to pick two things so that we could make sure this didn’t take too long. On the project that we were so proud of, I think we could have picked personalization, how this works with a returning customer, the experience that they get, but I’m just going to pick two parts that I think just showcase some uniqueness to the project. That’s what we call the live style-guide and the kitchen concept. That’s my section. Once we ran through this, I’m pretty much done. So let me dive into the live style-guide.

We retrospectively call this an absolute key to success. As I said earlier, we’re working alongside a design company and this was a very strong design, visually led project from the get-go with lots of ideas. Not only did they have to work across devices, when you look at the side, we’ve got things moving. The homepage moves in about four different directions based on swipe, touch interaction. This presented a lot of challenges for any technology so what we actually managed to do on this was we created what we called a live style-guide or which later became known as the front-end framework because what started off as a method approach typing in doing a proof of concept became the actual front-end code base that allowed us to look at a few points here. We could really test some of the interactive design in the browser. We worked alongside in an agile fashion with the designers, really got things moving fast. It was a really great way to test things out, not just test out the interaction because working with the design agency like Method, it’s not just about things moving, it’s the speed they move, and the feel, and the touch. It was wonderful to be able to deliver the level of tactile visual concepts using this front-end framework or this live style-guide, test it across browsers and device. We know this created a great ROI in the whole project. There’s no doubt about it. This helps.

We’re going to do some - if not podcasts, some blog posts about this in great depth and show a lot of detailed examples of how we kind of brought this whole project down, how we tested it in multiple different ways and how we think this has presented itself as a real beacon of a great way to work. I would say almost in any Drupal projects but it’s the only Drupal project that’s responsive. In case it wasn’t clear, I think there are six break points, seven resting states of this size at the site. Everything on it has been pretty much handpicked and customized.

One of the other things, so the second part, what makes this unique? Well, I think the kitchen, the deli style cosmetics. This is literally a physical kitchen. At the moment, there’s one and I think there’s going to be multiple. You’ve got a kitchen where they’re all making fresh for the day, one or two key products of the day. This is going to become really interactive. They’re going to have Google Hangout integrated. You’re going to be able to follow it on social media. They’re going to make products, they’re going to be able to literally make products live. You’re going to be able to interact with it and you can order that product. It presents some interesting e-commerce challenges as well because you’re talking about the rapid putting up of products, limited stock runs. If I just look at the next screen, yes. This is creating demand really fast and we think already we’re going to see cases where people are just ordering this stuff quicker than it can be made. That’s really exciting because that creates – that’s digital creating a real world problem that can be solved. I think one of their big challenges or one of their big aims here is that this kitchen is not only getting people excited in seeing things happening in real time, that you can order and get it delivered tomorrow, but they’re also testing out and trialing new formulations and new products. So it’s small batch productions. I think what we like building into this part of the interaction was a real sense of urgency. This is a little slide-out which feels very much like an app when you’re using it on a tablet. This just comes out from the right-hand side and we automatically know in this case, this happens to be a kitchen product. It’s a pre-released product and therefore, we’ve had this flag that says, “You have a time limit to your product in your basket. Make sure you check out soon.” That is definitely helping to create a sense of urgency of the experience and something that feels really unique. It’s permeating through the business in so many different ways. Social media is really picking up and they’re engaging with customers so it’s been a great part of the journey.

I think that helps keep things on time because, believe me, I think we could have picked another 10 great features. So we’re going to stay on with Richard who’s the technical director in case any questions get on a more technical note. Please link with us on social media because we want to keep this conversation going and we’re happy to answer questions as they come.

Ray Grady: Thanks Myles. This is Ray. So I think we wanted to make sure that we could give you a sense on the industry, specifically what we’re doing with this customer. We have other interesting customer examples that are leveraging the power of the partner ecosystem that Myles talked about as well as the technology to not only tell a better story and allow brands to become storytellers but also allow them to be very innovative as they think through new ways in which to not only develop products. Products that may be a digital first introduction or a product launch, but market those products - not in real time, but in a much more iterative and rapid fashion based on some of those solutions that we bring to bear. So with that end, I’ll hand it over to the group and we can maybe start the Q and A session.

Kelly O’Neill: Hi all. This is Kelly. I’ve got a question that’s come in around for you Myles just to talk a little bit about what’s next for Lush. So you mentioned this was a relatively recent go live. What plans do they have for the next round of featured functions and evolution of the areas like the curated products?

Myles Davidson: Yes. So there are a few things that are coming on-stream quite soon. Richard is here too so I’m going to prompt him as well. I know that we have an algorithm-based recommendation engine that’s going to come in that’s all based on site-wide user behavior and your personal user behavior. That’s really question of - that’s delivering very much the Amazon style, matching one product with another, but it’s all based on learning. It’s just product learning so that’s coming. That’s going to be coming on-stream. The kitchen which is the whole interaction make-up part, they really want to build that. They want to embed - They’ve met with Google and they’re looking at a really engaging way of using Google Hangouts so that you can literally see the product that you want to order being made and you can really feel like you’re a part of that whole experience. For a brand like Lush, they’ve got some really interesting things, it’s just that they never discount on their brand. They just don’t do it. They don’t do coupons. They don’t do sales, but what they absolutely want to do is they recognize that they’ve got some very, very passionate – they’ve got super consumers, really passionate people who love the brand so they want to absolutely, “We have to offer these guys exclusivity.” So we’re going to really see a ramp up of the small batch productions, the deli style cosmetics, and really providing exclusive, unique features to the people who love them and keep coming back to them. So a real nice rewards program and this is all what’s coming next.

Kelly O’Neill: Excellent. Thank you for sharing. For those of you on the line, if you have any questions, you can just enter them in the chat window as a reminder while we wait for others to come in.

Another question from the group was for you again, Myles. Can you talk a little bit about kind of the life cycle of the project? How long did this take? You shared the design side, but were there other learnings in terms of working with partners to bring this altogether given the number of partners that were involved?

Myles Davidson: Yes. The most significant size, the most stakeholder projects and multifaceted projects that we’ve been involved with, the full aspect of the project was almost a year. It initially started off with Lush who was looking for a totally different project. They were out looking for Lush TV and they found Method because Method had done the design for TEDTalks and done a lot of the – and they met and they started talking about this. This little side project started around Lush Digital and actually, we should be looking at more than just a TV stream, we should be looking at the main website. The first we became aware of this was around July 2013 and at that stage, there was already a sort of proof of concept, visuals, and then a non-coded but interactive design piece. After seeing it, it was like “Wow, how is that’s going to be built?”

There were incredible ideas [Laughter] that came about here. I mentioned that job before, so what really happened is we went into a discovery route, a six to eight-week discovery and definition phase working really closely with the designers, with Lush, and ourselves. We worked with Acquia as well, we did some workshops - in fact, a lot of workshops. I think that’s a key part of this project. Everything was workshopped out extremely well. Then we ran two sort of concurrent agile streams. So it’s the design stream running for two weeks and we had our front-end engineers join that and we’re building that style guide with the designers. Then we got to see the output from that design stream and we were involved in helping shaping it to make sure that some crazy ideas didn’t come up that couldn’t be delivered. It was kind of – you design it in two weeks, we build it in two weeks. So [Crosstalk] that’s an easy turnaround.

Richard Jones: I think Myles and I are on audio now. Hi. Yes, it’s Richard here. So yes, one of the most interesting things about this is the design process was carrying on all the way up to three months before launch because it was an agile process iterative between us and the designers. So we were working directly with them all the way through. So it wasn’t like your conventional designers who designs off then an agency comes in and builds it. It’s very much interaction between all of us, all the way through including the client. So I think that was the most interesting part, for me it’s that we had that back and forth and the ability to influence design decisions, where we can look at something and say, “You know what? If you just did it like this, it would take a week less to do,” and then being responsive to that kind of thing really, really helped this project. As I say, it meant that we were still iterating through the design using the style guide that Myles mentioned earlier all the way through to the end.

Kelly O’Neill: Okay, thank you for talking us through. I know that we really enjoyed the process as well and one of the areas that we particularly got involved in on, it was on the search side and working through some of the innovative ways you do a leveraging search to draw out category pages and things like that. So the team really enjoyed working in that iterative process. Another question from the field and the related topic was specific to the commerce guys and what their role was there. So if you could expand on that a little bit, that would be great.

Richard Jones: Yes. [Crosstalk] Can I jump in a little bit as well?

Myles Davidson: Definitely.

Richard Jones: Yes. We had the Commerce guys with us all the way through the project. So we had permanent members of Commerce guys within our spring team all the way through. So the idea was that they would be helping us directly with working on the commerce-specific modules that we were building. I’m just adding a little bit to my expertise in as well. So yes. All the way through, we had a couple members of commerce guys from the London commerce guys team with us directly all the way through the project.

Myles Davidson: Yes, that’s correct.

Kelly O’Neill: Excellent. One of the other things I wanted to drill in on is the plans around more of the social side. You mentioned about the ardent fans that the brand has. Are there plans specifically to further leverage that? Any thoughts around integrating more social information and content as the brand evolved?

Myles Davidson: Yes. In fact, let me start on that Richard. I’m sure you may have a slightly different one.

Richard Jones: Sure.

Myles Davidson: One of the things that I should have mentioned is already implemented and which we really love is all of the Lush stores in the UK, so when they go to the main shop, you don’t – I love it. You don’t have a shop button, which is what this webinar is all about, killing off the shop partner. You do have a shop button which is the physical retail stores. What we love about that is that there the store manager has access to the shop page so the opening and closing times and key information is all managed directly through Drupal for that particular shop. They also get to put that shop’s - all of their social feeds go into that. Their Facebook, their Twitter, their Instagram. They’re really big on some of this, especially things like Instagram, it’s a really big one for them. I think two of those three are now already in. So they can just add the local part and then that way, they’re also able to build up social engagement on a local level. That’s really important to them because some of the campaigns I talked about earlier could be really localized and they want to be able to have communication both on topic level or company-wide level, campaign level which there is a lot of their content and articles, but the reason you’ve got this micro-store level social engagement and you can do that. You can go to the stores, you need to look at it from a UK perspective so maybe just type in “London” and you can see a whole bunch of stores. Pick one of the shops in London like Waterloo and you’ll see the details and you’ll see the local social engagement which we think is – we just think that’s a really great use of engaging with people at just lots of different interesting levels.

Richard Jones: Yes. One other thing with this is that they tried to give a personality to the individual shops as well. Because you see, a personality is very much what this brand is about. So, yes. We’ve got a combined mainstream social media element to the site, which is on one of these pop-out sidebars and then each individual shop has their own feed which, as I said, strikes their own regional and local personalities all the way through.

Kelly O’Neill: That is a great example of driving multichannel, across channel, omni-channel, whatever buzzword [Laughter] you want to use, driving that consistent brand experience throughout all channels and leveraging the power of a really flexible digital platform to be able to do that. So those are the areas where I think we’re going to see incredible innovation moving forward. So it’s great to see that Lush is already moving down that path. So, thanks to Myles and Richard for telling us the Lush story and bringing that to the webinar today. Thanks to Ray for setting up the market trends and for all of you on the call, we’d love to continue the conversation so please by all means, reach out to us either email, phone, give us a call. Let us know how you’re evolving your digital experiences moving forward. We’d love to continue to help you innovate and move the market forward.

Ray Grady: Great. Thanks everyone.

Myles Davidson: Yes. Thank you so much. It was a pleasure to be a part of it.

Preparing for Acquia Certification [April 23, 2014]

Click to see video transcript

Hannah Corey: Training sessions on Preparing for Acquia Certification with Heather James, who’s the Manager of Learning Services here at Acquia and Prasad Shirgaonkar who’s the Curriculum Developer here at Acquia. We’re really excited to have both of them on the call today.

Heather James: …for the Acquia certification, and we’re going to be looking at probably if we’re taking the exam you probably want to know what it’s like and if that is the case, then this is definitely the right place for you. I want to talk with you first today about the goals of the exam, you know how we actually chose to focus on specific skills, better actually outlined in the exam blueprint that’s probably available. Then, I’m going to hand it over to my colleague Prasad. He’s going to talk with you about the kinds of questions you’ll actually encounter on the exam and how to find your weak areas and how to improve on them. Finally, we’re going to look at the resources available so you can actually improve on your skills. I’ve actually been – I’m Heather I should say. I’ve been using Drupal since about 2002, using the early 4.0 releases. I’ve actually been with Acquia since 2009 on the training team. So, this certification idea has been a long ongoing discussion within the community, and I’m really excited to see those plans result in a program that I’m really proud to talk with you about today because I’m just amazed to see it come together. How about yourself Prasad?

Prasad Shirgaonkar: Hi. I’m Prasad. I’m a Drupal since 2006, Drupal 4.7 dates. Prior to joining us here, I was running my own Drupal service shop where I look on where 200 Drupal projects for clients on almost 12 countries in four years. Since last year, I’ve started doing full-time Drupal training, and I have conducted numerous workshops for individuals and in the price clients. Currently, I work on developing and conducting training programs for Drupal and Acquia products. I was also a part of core team, which made the certification program. I’m very excited to share a few tips about preparing for the certification in this webinar.

Heather James: That’s true. I think that’s what’s really great about your experience, Prasad, because you have been a developer for a long time. You had your own business and then as well you’ve been able to see how it is when you actually start training people. We’re going to hear a little bit about the – how we prepared it and some of the folks that have been involved in the program.

Prasad Shirgaonkar: Absolutely.

Heather James: Yes, it’s definitely good. Let’s look at the program and how it’s structured and what to expect. We actually have two tracks planned, but one is available right now. Specialist tracks are planned for front and back-end development, but our first certification track is for the common skills that any Drupal developer needs. For this first exam, we spoke – we sort of focused on those the skills that were common to the specialist and really required for most key roles in Drupal development. Further details are available on our certification pages and I think you know – I think one of the great things actually about the program is that you can either take the exam at a test center in person or you can take it online as a proctored exam observed by a real person. During that time, either in either case, you’re going to get 60 questions that you can answer in 90 minutes, which should be ample time for you to complete the exam. It costs $250.00 and you can register online.

What I’d recommend is that you watch your previous webinar with our colleague Peter Manijak. Today, we’re really picking up where that webinar left off. In that recording, you can find out details of what it’s like to take the exam. Peter also gives practical tips and follow - answers questions about what the online versus in person exam is like. The links that are in the slides here are going to be sent in the follow up e-mail that Hannah is going to post, so you’ll be able to download the slides and get these links. Next, we’re going to – so the first step really on the process of preparing for the exam is to understand what’s the point? What’s the goal of the exam? Understanding this will help you understand how the exam can actually improve your job prospects and get new opportunities. On the other hand, if you’re actually hiring manager yourself, it will help you understand how certification will help you build the team you need for successful Drupal deployments.

The goal from the very start was to be something that was effective and that we could stand by. We started by actually researching and comparing actual job descriptions out there in the wild. Things that were posted by our partners and our clients, and this helped us see what roles are being filled. We then validated that by interviewing our clients, partners, and our colleagues to see what matched up. Then, we used a job task analysis survey and that detailed specific skills in use that actual hiring managers were seeking. The whole point of the exam is to be able to say that at this point of time, we validate that this person has these particular skills. We know that these skills are those that are required and in need. To that end, the exam touches really on all areas of Drupal core architecture and extending Drupal.

You’re probably wondering right now if this exam is right for you. As you’ll see in the exam blueprint following, the certification does cover quite a breadth of knowledge. Many of the situations described in the exam would be things that you probably encounter through your own experience rather than technical knowledge or I should say not technical, theoretical knowledge. This means exam really isn’t for novices. We are considering other assessments to help people in earlier stages of their careers, but you would need to get some more hands-on experience if you have say, less than six months experience to this point. However, if you do have more than six months experience on real life Drupal projects, you should definitely take the exam and be confident that this is right for you. Those who have more experience than that should be able to test out quite easily actually.

Let’s look now at the details of the exam blueprint. The blueprint explains the top level domains for the exam. As you can see here, you can see how each of these knowledge domains makes up a certain percentage of your total exam score. You can see the components are actually broken down further online. Look at this blueprint when you start to look at the details of it, you’ll see that it really is requiring a fairly good understanding of those three core Drupal demand cycling, front end and back-end development in order to be ready for the exam. Because the past rate is fairly low, I mean if you compare it to other certifications, it is 65%. We provided some leeway for specialists. What we want to see, our developers who really understand the other domains because we’ve discovered that’s quite essential for a successful Drupal development.

What knowledge is needed? As you can see by the way things are weighted, you can tell a really aiming for balance with this exam. So, if you have the name recycled in your role without any knowledge or understanding or experience of either front end or back-end development in Drupal, you will need to take timeout and systematically learn those domains. Take time, take formal training and we’ll look at some of the resources that are available. Some of our relay, if you’ve only been doing front end or back-end development, you’ll know maybe somehow on your – if you’ve got a larger team especially people find their skills are siloed because of the task they’re given to do. They should – those people should take time to understand Drupal site building as well. Of course if this knowledge is needed and required, you’re probably wondering how we actually test for it in the exam, how we actually look at the specific areas. I’m going to pass it over to Prasad now, and he’s going to talk to you about all the different kinds of questions you’ll encounter.

Prasad Shirgaonkar: Yes, thanks Heather. Now, we know the exam objectives and the exam blueprint, you might have got an idea that we are almost covering all the three major domains of Drupal. That’s the Drupal site building, Drupal front-end development that’s teaming and back-end development that’s more your development. We know what knowledge is tested in the exam. Now, let’s see how this knowledge is going to be tested. We can do that by understanding the nature of questions. Typically people think of questions, of multiple choice questions as something like you are say, expected to remember the syntax or you are expected to memorize a few things. Let’s have a look at the nature of question that we have in the exam.

Basically, we are asking the nature of questions. They are all scenario-based questions? There are three parts to each question. There is the scenario, a question, and the options. A scenario actually describes a situation with the used case or a client requirement or possibly even an issue on a Drupal site. Then, a question is asked about the scenario or the problem. There are four or more charges given for possible solutions from which the candidate needs to select a correct answer or possibly multiple correct answers.

Let’s, have a look at a sample question. The scenario says something like this but you are running a popular local news portal. A mobile app developer in your area approached you for permission to syndicate your content on their mobile app. Now, they are requesting the content to be made available as a feed rather than an HTML format. So this is a typical, practical scenario or practical situation which you might encounter as a Drupal developer. Then, the question that we ask is that how can you provide a list of latest articles in RSS format? Then, the answers - the choices are to create a view with feed display or create a view with page display enabling the RSS filter, create a view with page display by selecting the RSS feed as a display to style output or create a view with the page display and then modifying your template file to provide output in RSS.

Obviously, only one of the answers is the correct answer and there are previous factors, which are like meaningful or wrong answers actually. So, you have to select the correct answer, discarding on all the incorrect answers.

If you look at this sample question, you may realize that the questions rely on application of Drupal concepts and knowledge rather than purely memorizing the facts, code or syntax. Now, this essentially means that just reading through the long list of documentation or books would not be sufficient for answering most of the questions. You need to have the real experience or understanding of sufficient number of used cases, applications, common scenarios in a Drupal project. Possibly, even support request and issues that they are handled in the past. Once you have all these information, then only you will be able to answer the questions which are asked.

If the nature of the exam is off this time, then how do we prepare really? What we suggest is actually first day of preparation is to find out your own strengths and weaknesses in the area of Drupal. Actually, a truly experienced Drupaler will likely to know his or her weaknesses much, much more than their strength. Now, after looking at the domains of site building, front-end development and back-end development, you might have made a judgment about where your own skills stand while reading the full domains listed. Now, it’s quite natural for a person to be more experienced than more proficient - but not the domains than others. For example, if you might be a very proficient site builder, you might have the lots of sites building using the UI, but you might not have developed the module. You might be a very good themer or UI builder but you might not have a well – done a lot of site building configurations. Same is for about module development. You might be proficient PHP developer, developing a lot of module, but might not know anything about Drupal theming there.

It’s quite likely even within a particular domain, not to have enough experience of all the topics. What we have come up with is that you have developed a small self-assessment tool, which you can access at this URL that’s bit.ly/acquiasat. That‘s the self-assessment tool. This is how the tool looks. What we have then is we have taken the list of all the exam objectives, including all the sub-objectives like in-site building like demonstrating the ability to create content by its sign, everything that we are covering in the exam blueprint. Next to each, actually you can put your own score in the area of zero to 10. Zero for the – we absolutely don’t know anything about an objective, and 10 if you are like master in that particular area. If you do that for all the exam objectives, rank your own skill for the exam objectives, and then you will come to know that anything which like having 8+ score, which implies your absolute strengths, anything between five to seven that implies you require some preparation for those objectives. Anything which is like less than zero possibly will require a lot of preparation or guided instructions for that.

The first step for actually preparing for the exam is to do a self-assessment overall the different objectives and find out where exactly you stand, so that you can plan your own preparation.

Now, of course once you know your weak areas, the next step is to work on your own weak areas. Let’s assume we will share some tips about working on site building if that’s your weaker area or front-end development or back-end development, all the three top level domains. Of course if you have basic HTML, CSS, and PHP as your weak area then you have possibly a lot of resources online about HTML, CSS and PHP preparations. We have nothing to talk about that. We’ll be focusing on the Drupal. If anyone of these three domains is your weak areas. Lets’ talk about site building if that’s your weak area. Before that, basically once we start at the – once you decide to work on your weak areas, there are two challenges that you are likely to face. The first one is to find and study documentation and knowledge resources for the topics from your weak areas. The second one is to find enough number of practical case studies covering the topics. The first one will be solved when we are actually sharing a list of resources, which are mapped to each exam objective.

You can go to those resources. I will share the link at the end of this webinar. The second one is a real challenge, is to find enough number of practical case studies covering all the topics. Let’s talk if your site building is your weak area, what exactly you can do to prepare. We suggest a particular way out. Now, select any three to five Drupal projects which either you or your team has done over last a year or so. Collect all the teams, review all the configurations and settings. Review content types, fill settings, refill settings, vocabularies, blocks, menus and views used on all the sites. Possibly you can even make a list of all the configurations made across all the sites, and just ask questions about each type of configuration that why the configurations are the way they are? What can be changed or improved, possibly work issues or support request were raised by the clients for those projects, what changes were made into the initial configurations and why those changes were required? This can possibly give you enough overview of all the different types of issues that were faced by your team across various types of Drupal installations and Drupal configurations. Of course, if you rated that along with the resources list that we share, we can actually gain a lot of insight into site building activity of Drupal if that’s your weaker area. What if front-end development is your weak area? This is just a similar approach, you can actually collect custom themes developed by your team over the last year. If you don’t have enough custom or themes developed by your team, you can actually select a few contributed themes from drupal.org.

Analyze those themes. Find out the templates which are used, the TPL files which are used. Review the CSS and redo JavaScript, review any pre-process functions implemented by the teams, and then ask the questions that if possible even gather the source, designs or wireframes, which were the specifications for those themes. Then, ask questions whether the themes were implemented exactly as per the designs. If not, what changes are required and why. Review the theme regions. Just ask questions whether the regions are optimum, is there any redundancy, can you reduce any other regions, can you add any regions? How regions are exactly implemented on the themes. Are there any specific theme settings being used. How CSS and JavaScript files are being called in the themes, and are there any other pre-process functions being used, could they be replaced with something else or could any other output be replaced by pre-process functions. Also review the template files or find out whether there are any template suggestions or custom template files implemented and the reasons behind those. This can give you - again reading this along with the specific documentations, for theme settings, for theming profiles, for theme regions, and pre-process functions, can give you a good overview and understanding of front-end development domain.

However, when you go to back-end development, a similar approach for studying may not be useful because your team might have developed possibly a few custom modules over the last year, but for custom modules, they might have very complex functionality or might have a very used case specific functionality. What we expect in this exam is that you have an overall understanding of Drupal’s API, core hook system, and their applications. If you haven’t done module development at all in your life and still want to attend this exam, of course you can prepare for this. Preparing for module development is actually easier than preparing for site building or theming, which are like last areas. For module development, you can attend the module development course, possibly you can build a small module on your own and explore all the APIs given. Actually, there is a module called as Examples Module in Drupal. You can download that from drupal.org/projects/examples that provides a very documented list of all the APIs or lots of APIs and lots of functions, which you can implement in your own module. You can actually try out some code in action and explore various aspects of module development.

These are the three different ways in which you can prepare for three different domains for site building. Collect or just get information of three to five main projects done by your team over the last year, go through all the configurations, review configurations and ask a lot of the brainstorming questions and find your answers online. About theme, similar theme, collect three to five good themes developed by your team or good contributed themes. Analyze those themes and ask a lot of questions and try to find out answers online. For module development, if you haven’t done module development then actually develop a module, develop a small module or attend the module development course. So, that’s how you can prepare for this exam or any one of the domains, which you are not proficient in the exam.

Once you prepare, once you are ready to take the exams, we’d love to share some tips about taking the exam. Now, as Heather said in the beginning this exam can be taken either online in the proctor or at the exam center. If you are taking an exam at the exam center, make sure you find the right address when you register from Webassessor. You can actually select an exam center which is closer to your location. Of course, just find it on the Google Map, plan your travel properly. Make sure that you arrive at least 15 minutes before your scheduled time. You need to bring the copy of your registration e-mail, so that there is a call with that exam center operator needs to know to activate your exam order. You also need to carry a photo ID, like your passport or driving license or whatever photo ID is accepted in your region. If at all you need to reschedule, make sure that you reschedule it at least 24 hours prior to your designated time. This is what would be the required at the exam center. Also, make sure that exam centers may have strict rules about keeping your belongings or keeping out your mobile especially or taking breaks during the exam. Just make sure that you understand those rules by talking to the operator. Also, the operators at the exam center are neither Drupalers, they are not Acquians, so they won’t know anything about the exam or the certification. They won’t be able to help you if you have any technical questions regarding the exam over there.

If you are taking the exam online at online proctored exam, you need to install a specific software from webassessor.com. Check the system requirements by logging into webassessor.com. Make sure to install necessary software at least one day before the scheduled time. Currently, the software doesn’t work on Chrome on Mac because a Flash related issues. So, you need to get either on – if you are on Mac, you need to take it either on Safari or Firefox. You install that software one day in advance. At that time of taking the exam, you need to select a silent room or possibly a silent corner in your office where no one is – nothing is going to distract you for 90 minutes at a stretch because you can’t take a break in the exam once you start the exam, or you have to finish it within 90 minutes flat.

Keep a bottle of water handy. That’s very useful when you’re taking the exam. Switch off your mobile phone. Keep it far away from you, so that you are not tempted to take mobile. Last one is that don’t use two monitors. Just use your laptop or desktop’s primary monitor only. Don’t connect to another monitor. This is an online proctored exam in the sense that when you are taking the exam, some real person, somewhere sitting in the world is actually monitoring what you are doing. This is to make sure that there is integrity of the exam is maintained well and we are not doing following any form of, say taking help while taking the exam from others. That’s why the proctor needs to make sure that the person is completely enrolled in the exam that’s why mobile phones or using two monitors and things like that are not allowed in this exam. I think these are the simple tips to follow for taking online exam, which will save your time and you can do exam efficiently.

Once you are either at the test center or you are taking the exam online, what tips to do when you are actually taking the exam? The first one is that don’t rush. Now 90 minutes are more than enough to answer 60 questions even if English is not your first language, it’s your second language, or from our experience or from the experience of exam takers over the last one month. Every minute given to you is done so that even if English is their second language it’s more than enough to read all the questions, understand the responses and give proper responses. So, don’t rush. There is no need to rush at all. Attempt all the questions for which you are sure about the answers first. So, basically start with the question that you know. The system allows you to save questions for a review later. You can always review all the questions later before you submit the final response.

For any questions you are not sure of the answer right away, just save it for review later and revisit the question after you have attempted all the others. The third thing about for all the developers basically is that don’t over think. If you have that enough Drupal sites, Drupal projects in your career and if you need a scenario, most of the times the first answer which comes out of your gut will tend to be the right answer. Just move with your gut feeling and answer questions. One thing I would like to mention is that there are no trick questions in the exam. It’s not your language test. So, we are not trying to trick you or not trying to give very strange language per se. They are very straightforward questions. So, take all the questions and to face value. We got some feedback from a few guys saying that for a couple of questions, couple of answers you will use choices look exactly the same, but when this happens, when you feel like two answer choices are exactly the same, just go to them again, review those exact same things and you will find out the difference.

These are the tips which you can – which will be possibly helpful for – if you are taking the exam either online or at the exam center. About the resources, I’ll pass back to Heather who will talk about the resources now.

Heather James: Thank you very much, Prasad. That’s a really good point. I’m going to talk about the resources. I think what’s interesting actually probably to know is that actually at each point on the – what we are developing in the exam but each point of the exam objectives. We needed to validate and make sure that the facts that we’re actually going to test were supported by published documentation and books. Those resources are actually the ones that we’re referring to. We can’t tell you what page it was on, but we can tell you that the information is out there and available from you to learn from. The resources actually are going to be summarized in this upcoming E-book, that’ll actually be out next week. If you’re watching this as the recording, I’ll make sure to update the recording page with a link to download it. The E-book is actually organized - the sections on resources are organized by the type of resource. There are first freely available resources from drupal.org. There are also published books. Then, we have separate sections for Drupalize.Me and BuildAModule. Drupalize.Me and BuildAModule are services that are available to our network subscriptions either free or with a reduced discount. The great thing is that you probably already have access to some of these things, and maybe books already on your shelf and we’re just going to point you in the right direction to various sections, et cetera.

If you do find yourself needing structured training, I’d recommend you check out our training courses on training.acquia.com, and there we have very structured training around theming, module development, and site building. They are fun. We very much – we try to make it - we create interesting problems for you. We use cases and make it not just hands on, but also let you think and be creative in the events. So at this point, I wanted to ask if anyone has any questions. You may have some questions that’s about the exam itself or you may have questions about some of the topics that are covered.

Hannah Corey: I’ll go.

Heather James: Yes, cool. Sorry, Hannah, pardon?

Hannah Corey: Yes, I had some questions come in. The first question is for the self-assessment. What total score would you suggest the passing grade on the exam?

Prasad Shirgaonkar: Okay. Can I take that, Heather?

Heather James: Yes.

Prasad Shirgaonkar: Okay. I think it’s a fairly interesting question and possibly a difficult one to answer because the self-assessment is done by that person understanding on his own perception of his own skills about each objective. The exam questions are – may or may not have the reflection of his own understanding. What we would suggest is that the total score, or the passing rate for the exam is 65%. So, you need to clear – have 65% questions correct in order to pass the exam. If you take that logic to the self-assessment, you would see that at least in the 65% areas – in the exam objectives, if you have your scoring, your own grading more than eight, then possibly that will reflect a passing grade for the exam.

Heather James: That’s a good point.

Hannah Corey: All right. We have some other questions coming. What Drupal versions are likely to be covered on the exam?

Heather James: We are actually covering Drupal 7 in this exam, so it’s fully on Drupal 7.

Hannah Corey: Great. The next question is, is there a link for the exam centers? Where can you find that information?

Heather James: Definitely, go to acquia.com/certification. There you can find a link to the exam center and registration. I saw another question actually come through asking will this exam have some trivial questions like this question came through and it says, will we have trivial question such as, where and what menu can you change permissions? That’s actually what we avoided. The global certification lead, that’s Peter Manijak, has a lot of experience in this area and to what he’s discovered and what he’s been able to share with us is that scenario-based questions like the ones that Prasad has spoke to us about and showed in this presentation help you solve a problem and see how you solve a problem I should say. They pose a situation in a context and ask you what you would use to either create a feature or debug something. That is far more interesting to us than can you remember the pass to - you know click pass to get something done. The truth is, we, nowadays as developers, have access to resources and documentation at our fingertips. We wouldn’t expect you to be able to remember some of these procedures off the top of your head.

Another question, I often hear asked is about the language of the exam. It’s actually in English. As you can see, there are 60 questions in 90 minutes. What we’ve been able to confirm, which is what Peter expected was that someone who’s a native English speaker can get through that quite easily in 90 minutes. Whereas someone who’s using English as a second language, they do need or require the full-time, but they do complete the exams. So, that’s why it is the length it is. Hopefully, that relays some of your concerns if you have them. Are there any other questions?

Hannah Corey: Yes. We have someone asking about if you could do a prep session at DrupalCon?

Heather James: That’s actually a good question. We will be running certification actually at DrupalCon, but I might take that suggestion over to my colleagues and see if we’ll have time to do a prep session. We are in the middle of organizing a Drupal certification workshop that’s probably a little too early to talk about it now. It’s interesting because we want to make sure that you can be prepared if you are somebody who is experienced, and you want to know what to expect and maybe fill any knowledge gaps that you have. So, we’ll have more information about that in May.

Hannah Corey: Awesome. We had a little feedback as well. Just asking for some additional sample questions and maybe this is something we can take into our blog post or the e-book might solve this. Heather, do you have any suggestions for them?

Heather James: Yes, both hands I think that isn’t the first time someone does - some more sample questions. We kept all the good ones for the exams. We are [Laughter] - we will be able to share as we develop for further examinations, we’ll be able to share more sample questions that will give you a good idea of what they’re like. We’ve chosen this one because its representative of the type of question that’s asked. Though you know just where things laid out, it was one that was extra you could say.

Hannah Corey: All right. I think that’s it for questions. Thanks everyone for attending, and thank you Prasad and Heather for the wonderful presentation. You guys want to add with anything else?

Heather James: No. Absolutely I’m really just – like I said, I’m really excited that this is finally available. I hope people find it very useful, hope that it opens doors for them.

Prasad Shirgaonkar: Absolutely. About preparation actually, if you had been working on Drupal for six months or more actually, just reviewing your own work and studying it or making it more comprehensive in the light of resources that we share, it’s certainly going to make you prepare for the exam. So, just go for it.

Hannah Corey: Great. Thanks. We’ll send out the slides and recording within the next 24 hours. Have a great afternoon, everyone.

- End of Recording -

Training: Drupal 7 Search Configuration Preview [April 16, 2014]

Click to see video transcript


Heather James: This is the Drupal 7 Search Configuration Preview Webinar. This is a preview of our search online course. I’m also going to walk you through some demos and some exercises so you’ll learn about what the course is like and you can actually learn a little bit about search in Drupal 7.

My name is Heather James and you can find me @LearningDrupal on Twitter. I’m the manager of Learning Services.

This webinar is for people who obviously want to know more about Apache Solr Search Integration in Drupal 7 and if you’re curious about Acquia’s Search Service and how it works and how you can get the most of out of it, and of course if you’re curious about Acquia’s training program.

Learning online is a new service that we’re offering and this gives us some self-paced options that we can offer to our various clients. It’s a little bit different from our classroom training. I still really love classroom training. We have a very busy calendar of events. So, please do check that out, but even still, for certain topics, it’s very hard to get a big class full of people together. Of course, something like a search or something like project management, and some of the other courses you’ll see coming online soon it’s difficult to get say 20 people or 10 people in a classroom for a topic like that. Whereas, we can get that online very easily and offer that to more people. Of course, you want to increase access to training so it’s not possible for our partners to make it to all corners of the globe. So, hopefully we can increase the reach that way for Drupal training as well. I’d still – like I said I really believe and love classroom-based training. If you have access to it it’s a lot of fun. We do more than just sit at the computers all day. There’s a lot of group interaction and ways that you sort of deal with all this new information in different ways. So, please – I’ve actually just written a blog so you can check that out if you’re more curious.

Our online training program is a little bit different. You can go to our training site and see some of our new Acquia product courses that are available. Then you can look at the catalogue and you can purchase the courses there. Most of our courses right now are just product specific.

We do have partners that I really love their services like Drupalize.Me. They have a video instruction which I love to use and work through but we find that some people also want alternatives. Our video instruction also includes the text details of what’s happening. We have some other content as well. There is, for example, in the search course, an interview with Nick Veenhof who is the maintainer of the Apache Solr Search Module and all of the activities are written out step by step. The videos are shorter than they would be. So, we don’t video everything, we actually just video say an introduction and then you follow through the steps and you can kind of mark off where you are.

We also have challenge exercises so that the material lets you sort of deal with things at your level. If you found something you’re able to get through more quickly you can give yourself a challenge exercise and get a little bit more out of it, but we try to streamline the course to show you what’s the most important thing you need to do, we know people’s time is very precious. We also have some fun quizzes that are in there, mainly just to sort of test your comprehension and give you a sense of progress, to have a feeling that and understanding of what you’ve actually learned.

Before we look at the course I wanted to take a second and think about search because I want to sort of bring to mind why you probably want to take this course. You’re probably already going through some – having some experience of having a site with a lot of content and people need access to that content or they want to get more out of it.

So, some research that KISSmetrics offer is a result of a survey that they did about people’s perception of their own behavior. People say they prefer to drill down. They like to see their options and keep their options open. You may notice this even yourself you might like to start - if you don’t know much about an area, you might like to start with a very broad topic and see the options available, and click to filter out those results. Even the filters start to give you some information about the content. So, some examples might come to mind if you think of shopping and you may know that you want to get a sweater but you’re not sure if you want it to be a cardigan or a pull over or you don’t know what color, and you don’t know the length. You like to see a variety of options.

Once you know what you want, it gets a little bit easier to make a very specific search but initially you might like to be very broad and the same probably goes for cars or for maybe a law document or something very specific that you’re looking for. So, what we can say is that users love facets. That’s something everybody starts to expect or has started to expect.

There’s another good article here on Intercom’s blog and it’s about Seven Things I Wish Every Search Box Did. So, I’d recommend reading that article. There’s a link you’ll be able to follow when you download the slides. This article is talking about some of the best search pages out there. It’s even funny to see something like auto-complete topped the list here, because Google only recently introduced that feature, maybe two years ago. Now, we’ve come to expect it and we don’t just want to see it on Google, we want to see it in all of our websites, as well as searching across multiple fields. It’s something that seems so obvious. Of course as a user you don’t really care if content is in the body field or maybe an attribute field of some content type, or even if it’s in an attachment. You just want access to that content. So, people just expect this.

People also expect that the results are ranked in some meaningful way and as well you can see some of these options here as well from number five people expect meaningful filters. We’re going to talk about filters in a little – next but what I wanted to say is that people expect that the filters relate to the content and the ranking relates to how they perceive the content.

So, in the example of ranking results it may be very important that more users are commenting on certain contents. You may want that to be more important. Maybe that’s what’s most important. Even if it’s something that’s two years old if there’s more user activity it may have more importance in your realm. Whereas, you may have very time sensitive information and you want some of the content that’s been published more recently to come up to the top. So, people just expect that to work and when it doesn’t and it’s unexpected it’s a very poor search experience.

As well, people expect typo correction. The last point says, “Mobile first,” right? People are typing away with their thumbs. They’ve got a baby in one hand or a drink in another, and a train ticket in another, and they just want the search to be a little forgiving.

The Nielson Group also offers some data about search dead ends. People want to make sure that – I mean, if they’re not sure what to look for they want to be offered alternatives and suggestions. They don’t want to be mocked like with silly pictures of like, “Oops, there’s nothing here.” That’s going to be a frustrating experience and the humor is not probably helping. So, the whole search experience should be very smooth even to the point where search just happens automatically. Maybe you’re looking at an article and you start to see more like this, “Oh, you’re interested in this content? You might want to see that.” So, the search experience is really built in throughout site and it’s something just almost automatic.

So, let’s look now at what Apache Solr can do. Now, this is really a preview of the modules that we’ll actually use in the course and what solutions they provide. Apache Solr has intelligent options as we spoke about. So, Apache Solr Auto Complete will provide suggestions and spelling corrections, and even tell you the number of the results per query. It’s something quite amazing. I probably will say this again as we do this presentation but the complexity here is masked because we will literally be able to install and enable a module and it just works out of the box. The Apache Solr has a lot of sister modules you can enable – or sorry, download and enable to extend what Apache Solr does because the index itself is very powerful.

Another option we’ll look at is files and attachments. Like I said end users don’t really care where related information is whether it’s in that attachment or a body field. Later on of course you can offer them filters when they have a better idea of what’s available but this just gives them access to all of your content. So many organizations have a lot of very important data and really great content that’s locked away in documents and PDFs. If they’re especially moving over from other systems into Drupal, something like this is going to reveal all that great content and value that people want.

Of course, sorting and filtering. So, like we said, users like to start broadly looking for some content and then drill down after seeing what options are available. So, the filters themselves will start to provide people information about the content you have. For example, these facets here might show exactly how much content is related to a specific country and what is the greatest – maybe the greatest population in this case is going to be city content, what’s the city with the greatest population on your site or the least population. These are available to us through using Apache Solr Sort and the Facet API.

The Facet API is sort of a hub and spoke model like some of our other sort of ecosystem modules in Drupal. It will actually let you choose how you want to display. So, we’ve got here a list with check boxes. You can have multi-faceted search or this slider. It depends on how you want to display the data and Apache Solr will be able to understand and make that more useful to you. As well, we want to provide those improved results and boosting.

In the course, we’d look at core search boosting which you can – there are options definitely with the basic core search. There’s far more options available with Apache Solr. You can even extend that with this Apache Solr Term Proximity. It literally looks at the distance between two or more terms. Is it much closer? Then we’ll rank that up in relevance. The fact is with site searches you don’t have the information that large search engines like Google have available to them. Google knows all about the inbound links and it’s got a huge index of the entire web and billions of pages. What you may have on your site is just a product description. You may have very small amounts of content. In that sense, tweaking those biases and making those – sorry, boosting those results can actually have a very important impact on your content. So, a lot of the things we’ll do just come with Apache Solr out of the box with result biasing and field biasing for example, but the Term Proximity is very useful.

As well people expect the results to be easy to read. They want to see the data as it should be displayed. If I just displayed location results as lat and long or latitude and longitude, it wouldn’t be very useful to me because I can’t really remember where’s 52 degrees [laughter]. I’m like, “Huh?” We do expect that data to show up. For example, on a map you want images if the images are in the content you want images to show up as images. So, that’s a really important part of the search experience that we will be looking at.

When we get to the custom code part of the course we can look at making intelligent suggestions. So, if someone does search for a location or maybe they even spell it wrong or maybe there isn’t any content directly there we can see and start to suggest locations that are near to their results and that’s done with a custom code example. All of this amazing technology as we’ll be using it is like I said, “The complexity is masked,” because we’ll be doing everything mainly within the UI with the exemption of this example. A lot of that is all based on the work that is in Apache Solr and I just wanted to go through really quickly and explain what an index is. This is really what makes Apache Solr very fast. Why wouldn’t we just pull from the database? Like we could make - with Views for example we can make a list of all the countries or each of the countries and use contextual filter, and display the results for each of those countries. Or we could use taxonomy terms and we can combine those things together, and we can do joins and bring it various data together. That actually would be very slow and it’s known to be a very slow approach.

Apache Solr actually creates indexes of that content. So, these inverted indexes – if we just take these three example documents over here on the right you can see that maybe these are just like body – let’s say this is like the body field or snippets from the body field of three different notes as an example. So, if you look at the words or where the words occur in each of those phrases like, “Where are you visiting? Are you visiting museums? I enjoy history museums.” You look at the index that results from that analysis or how it’s organized we see the word “where” shows up in the first document in the first position. The word “history” shows up in the third document in the third position. This is what really makes it so much more or much quicker to look up. This is how Apache Solr is doing some analysis and trying to understanding what’s there.

I guess it’s just useful to think about this so you understand that when we start to talk about optimizing those searches that you understand – you’re actually optimizing the index so, you have control over this. We can just look really quickly at how Apache Solr – how the index actually works. We’re using Acquia’s search service so we have some content on our site and we have to send that content to get indexed. As it gets queued and it comes back we can actually see what’s happening in the search index results here. This would happen even if you had Apache Solr installed locally on your machine you would still have to send this information over to your Apache Solr search server.

So, here we have for example every single time the cron runs which is basically a task. It’s basically a list of tasks that the server will run. It will actually, “Queued 200 items,” send them, and process them at once. So, we have over 2,000 items have to get processed so it’s going to take some time and a couple of returns to get that processed. So, you could see what’s happened here is that we’ve – 200 items have been indexed. We have 200 sent but haven’t yet been processed. At this time we can see 14% of that content has actually been sent to the server. So, we’re waiting for this round trip search and we’ve just run cron successfully about three minutes ago. So, what we’ll do here is refresh the index and see what has changed. So, right now we can see those items have come back 400 things have been indexed and we have a bunch remaining.

So, what we’re going to do is actually just choose to index all queued content. This will take some time and you can come back when it’s finish. It’ll take a few minutes. So, if your curiosity is piqued and you want to see how to use some of those features I’d like to show you a quick peek at the actual course. You can see what it’s like.

[Pause] So, this is what it looks like when you log in and you can see that there are instructions and there are various sections on the course. It basically, brings you through all the steps of setting up and installing your site, installing Solr, connecting your site to Acquia hosting. Basically, understanding sort of those - how things work and then you start to configure your search. Then you optimize your search, configure your facets, and then generally improve the user experience.

So, what we’re going to do now is actually look at some of those exercises and those activities. I thought it would be good to give you a bit of a preview of how things work. If I just show you the search features - I’m going to show you the site as it’s finished after we’re – after you’ve developed it within the course. I just want to show you basically what’s available and how things work.

[Pause] So, this is my sample site as it’s installed on Acquia hosting. You can also use the Dev Desktop and so you can work on it locally if you like. If you do it with Acquia hosting it’s fully online. You don’t have to install anything to do the course. So, we can conduct a simple search on the site. Actually before I show you that, let me just show you what comes with the site. You get some sample content because it’s just a little bit easier – we just want you to get started as quickly as possible. So, we have all this content in there and we’ve got some articles, and some cities, and we have for example, content types. We’ve got a custom content type in there. The city content type and this gives you sort of an idea of the type of data that’s available on the site. So, let’s conduct a quick search on the site and see what we get.

You can see that the results are laid out in a meaningful way as we spoke about before in which you learned how to use the Display Suite Module to actually arrange how the search results show up. You can see how the maps are appearing and we’ll look at using a couple of different modules. Let me actually show you what modules we’ll be using in fact.

So, I’m going to go back into the course here and show you the modules that are used. Of course, here are all of the Apache Solr search modules that you’ll be looking at and the display modules like Display Suite and we’ve also compared that to Rich Snippets which kind of makes like a Google looking type search just out of the box. Of course the Facet API and these excellent widgets that we saw like the slider or the check boxes, et cetera, and the location modules. So, we look at location and how we collect that data, and then how we display that data with Gmap.

So, let’s look at these search results here. We can see that they’re listed in order. Somehow they’re ranked. We don’t know yet. We’re going to look at how these are – the biases that are set but you can also see we have as well active still the core search results and you can just compare what those look like. Pretty straightforward with the core search results and you can compare what those advanced search options look like. You’ll notice when we did the search we set the Apache Solr Search as the default.

So, one thing we’re going to do right now is we’re going to make it – well, actually I just want to show you what it looks like with spell correction. If I search for “nurban” we’ll be getting a suggestion, “Did you mean, urban?” You can actually search for those results that way. We can also improve these results.

Now, what I’m going to do is I’m going to show you the Auto Complete Module. The Auto Complete Module will give people instant results. It will also make a suggestion if it maybe thinks it sees a typo and it will say, “Did you mean this?” It will show us – it will be that intelligent search experience like I said people just want now. The facility for this is kind of so easy. We’re just going to go to Modules Listing. I’m going to select autocomplete and enable it.

[Pause] I want to go back and I attempt to do a different search. You could see I was starting to get some suggestions, the word pops up, and we start to see how many times that phrase occurs in the various search results. So, this again completely hides all of the work that has gone into this but for you it’s literally making the choice that you want the feature, installing the module, enabling it and it just – it does what you want it to do.

So, let’s look at something that might be complex and difficult with other systems, Custom Search Pages. So, take for example you may want to specify a preset filter on all of your content. Set a scope for search. You may want to have a search for a specific country. That relates to our content but you may be able to bring to mind some examples from your own site where you know that people just want to search your book of content or they just want to search your product’s content. Or they want to see your articles, something like that - some way that you’re actually filtering on something.

You can even specify a taxonomy term and that’s what we’re going to do in this case. We’re actually going to make a search based on a particular field, taxonomy field. So, in order for us to do that we have to assemble the custom filter that we’re going to create and search for what filters – we’re going to look at what filters are available and then we’re going to show you how to actually assemble this. So, first thing we’re going to look at are the custom filter options available. One of them is the country field because that’s what is on our content type or the tags field that’s for example available in the article’s content type. We can look at the unique term ID as well. So, we’ll actually find out what is the unique term for a specific country. So, I’m going to do a quick demo making that search page, locating the field ID, and writing the custom filter, and creating it.

So, let’s look back on our search page again. We’re going to see that – right now we have a tab with the content tab and the site search tab. The content tab is of course the core search we’re keeping around. Now, we’re going to add our own search page. So, I’m going to call this my Country Specific Page, just for that example. The search environment is Acquia Search and we’ll call this the Ireland Search tab. The Custom Field is what we’ll actually be looking at and let’s fill out the tab. I’d like it to be something like search/Ireland and we’ll select a custom filter. This is sort of where you stop because you need to know what that custom filter is going to be. There’s no way you would know this off the top of your head. I certainly couldn’t remember it.

So, I’m going to go to my Administration List, Reports, and look at my Apache Solr search index. This will actually give you some insight into how Apache Solr is looking at your content and what’s available to actually filter on. The thing we’re looking for here is this country field. This right here, field_country, is actually the name of the field. I’m going to show you the content type just so you can see is actually the name of the field on the city content type that is my country taxonomy term field or term reference, I should say.

So, this is the filter we’re going to use. Now, what’s missing in this case is the ID. The way we find that out is by going back to look – I’m going to go back to structure and look at my taxonomy terms, and the list of terms that are available. There are quite a lot of countries here. It turns out that Ireland’s on the next page. We’ll get the term ID. You can click edit. You can see the term ID or up in your browser you’ll see. It’s 107 in this case. So, that will be the custom filter we’ll be working with. So, I’m going to save that. I would expect now if I click on this link that I’ll get my Ireland search.

So, what’s happening now is that I’ll start to get a limit of filters available. I’m going to search for houses for example in Ireland. Now, instead of getting all of the other countries you can see I’m only getting results within this one country. Although this is amusing it looks like this may be mismarked, maybe the latitude and longitude is wrong here. There you go. These are just some examples. Okay. That is basically how you make a custom search page. You probably have some ideas now that you’ve been watching it and how you might be able to use that in your own examples.

Next, let’s look at optimizing search. Improving bias is probably one of the most important things you’re going to be doing on your site. You know what you have to think about I suppose is how people are searching your content and what’s the most important thing about your content. For example, if you want more recent time sensitive content to show up to the top that’s a bias you’d want to improve. The only way you really can be able to do this is through actually starting to analyze your search logs once you get them so it’s not like build it, set it, and let it go. You probably want to build it, see how people are responding to it and constantly tweaking and improving your search, and taking in customer feedback, and watching their behaviors.

One thing I’ll say and we’ll talk about this when I do the demo is just to be very careful about how you tweak these boost settings. Don’t always put everything to the highest setting because then everything is just flat. What you want to do is really through testing and learning you’ll get an idea of how those results are improved. So, the factors are multiplying the relevance. So, 8.0 would be eight times boosted over the regular value. So, start very low and test as you go.

As we’re playing around you may want to just do something very exaggerated just so you can see your result but it’s not necessary on a live site. So, we’re going to first conduct a test search. We’re going to keep that page open just so you can see the direct change and we’re going to change the bias, and we’ll look at the index again, and see what changes are going to be made.

So, let’s start here under – yes, sorry. We’ll do a search actually that’s what I mean to say and we’ll search for [pause] flowers. We can see these two cities popping up. What we’re going to do is improve the search so that more recent content shows up. So, I’m going to keep this open and one thing I’m going to change is the date of this. [Pause] I’m going to edit that and change this to one year ahead. [Pause] Okay. At this time they’re exactly the same time I suppose so it won’t actually make any difference. We’ll just refresh there. You can see that Glovertown is up top and Ura is just underneath that.

So, let’s improve these search results. [Pause] Go back to configuration, search meta data, Apache Solr search, and under Acquia Search we can work on the bias. Here we’re going to set the result biasing. So, if something is more recently created we’re going to boost it by two. So, we’re going to double it and save it. So, we’re changing the settings and it also means we have to re-index because now one item hasn’t been sent to the server. So, we’ve actually changed the value of that item. So, we’ve changed the date of that item. So, it’s something new in the index and plus we’re changing the settings. So, we’re going to [pause] index the [QH] content which goes off to the server as you know. One thing you can do is actually go over to administration [pause], configuration, and cron, and you can run cron. So, that will take a few minutes and we’ll go back to configuration again. Search and look at the status of the index. So, one item has been sent and not processed. This is going to take a minute. So, when the cron job is complete and it has run around you can see finally zero items remaining and that means that updated content has been searched.

So, let’s go back and look at the results again. It was Glovertown versus Ura. I changed the date and changed the bias. So, we’ll do that same search again for flowers. You can see Ura which is more recent content is now coming up to the top. Actually all of the results now are rearranged based on how recent something was. So, that is just a little peek at bias.

There are so many options so there is the result biasing as we looked at. You can see how you can improve things again by how many comments, maybe more recent comments. Whether something is promoted to the front page and then you can even have specific field biases. So, there’s already some that are set by default. Some things - a header one or heading two in your body text. That’s going to get more boost and seen as more important. As well you can make certain types of content get improved as well. That’s just what Apache Solr is offering us out of the box which is quite brilliant.

So next, we’ll look at facets. Facets are the way that people can filter through their search. We can get a peek at the some of these facets, for example, on the site. [Pause] So, let’s look now at facets. Again, we’re talking about how people search and how people look for content on your site. Like I said, “You’ll have to listen to your users.” There’s a good article here from Smashing Magazine a couple of years ago still very effective and important is about looking at your query logs to define what those facets are going to be. Using what’s already going on in your industry, that’s obvious, right? You want to see what people expect and what’s done already. You want to choose something that’s very important to your users and important to you. So, how are people influenced to find certain content? Maybe you want to encourage certain content or behaviors and to get active in their community or to purchase something. It depends on what you’re working with. So, we can keep that in mind when we look at the city content type you can see there’s some information available. Location data or information about the population, et cetera.

Facet API offers you some options you can see here on the left. For example, you can have a list of links. You can have links with check boxes, and get that multi-faceted search. Or you can add additional modules like the Facet API Tag Cloud or the Facet API slider which will let you give people some options based on the kind of data they have. So, if it’s more important or more – if a term is showing up more in the Tag Cloud, it gets bigger. With Facet sliders it bases it on, for example, numerical information.

You can also do things to improve the user experience. As we’ll see, you can decide where you want those Facet blocks to appear. You can simply rearrange them in your layout. So, in our case we’ll put the Facet API slider up across the top so we have a nice long slider to use and you can put things in the sidebar for example. So, this is what we’ll be doing.

In the course you’ll actually set these in an exercise and then you’re given other challenge exercises to explore some of the other ones. This is again an example of we’re going to teach you something that is most expedient and quick, and efficient for you to learn. Then we’re going to give you a bit more if you have some more time. If you want to dig in a little bit deeper, we’ll give you some advice and some hints about where to go next.

I’m going to show you that really quick. Under Structure, Blocks. This is again with all the modules that need to be enabled and downloaded as we looked at in some of the course material. That’s assuming that you’ve simply installed and enabled the modules and they become available in this disabled list here.

So, I’m going to take the population slider and put that into the content list up here and make sure it’s at the top of the content list, and save it, and go back to our search page and refresh and see what changes we’ve made. Again, this is on the same search and you can see the sliders available, and I can limit to cities of a specific size or population like that. Again, this is something that just works out of the box. There are just so many different options and once you start getting familiar with it you start to master it.

The great thing is that because all this technical complexity is sort of pushed into the background you can focus on the stuff that’s important for your site, and the user experience, and how that search experience works. You don’t have to spend time writing custom code and doing complicated things. It basically is this easy.

So, what’s next? I’d recommend if you want to check out a webinar that my colleague did in August, you can watch to get some tips on how to configure Solr search for your site. Of course, you can take this course online. You can check out our Acquia Product Courses on our site and go through these step by step in much more detail. So, if you are new to Drupal and you’ve watched this webinar, you probably zoomed through a lot of things very quickly, you probably have a lot of questions. That’s basically what the course is all about. It’s taking you through these things. Self paced in a way that you can go at your own pace but hopefully in enough detail to get a lot out of it.

Thank you. I hope to see you online.

Drupal Step-by-Step: How We Built Our Training Site, Part 2 [April 9, 2014]

Click to see video transcript


Hannah: Today’s webinar is Drupal Step-by-Step, How We Build Our Training Site Part 2 – last week we had Part 1 and this is the second of the series – with speaker Dave Myburgh, who’s a Senior Engineer here at Acquia, and we also have Heather James on the line who’s the Manager of Learning Services here at Acquia.

David Myburgh: So today is Part 2. Last week we just spoke about how we built our training sites, some of the backend stuff that we did. Today, I’m going to talk about the frontend, theming and how we used Bootstrap to make it look all pretty. I’m a Senior Engineer in Acquia. I’ve been there for two-and-a-half years or so. I’m the lead developer on Acquia.com and a couple of other small sites, including the training site, obviously.

So what are we going to look at today? We’re going to see what is this thing called “Twitter Bootstrap” or just “Bootstrap”? We’re going to look at some of the modules that we used for helping us to style things on the frontend a little bit better, make things look nice; and look a bit more in-depth at how Bootstrap and Views can work together. We’ll look at the grid system that Bootstrap uses and we’ll look also at working with responsive layouts. Finally, we’ll look at some of the components that Bootstrap offers us.

So themers and site builders will benefit the most from this, I guess. If you have some experience in Drupal, well, it’s useful. If you're new to Drupal, you're definitely still going to pick up some new and fun things.

So this is what we started with. This is our old training site in Drupal 6, kind of old-looking. It’s not very modern look and difficult to work with and tweak stuff and modify things. So we ended up with this, much easier to work with for managers, keeps Heather happy, keeps me happy because it’s less coaching stuff that I have to do as well.

So to get the new design, what do we need? We want to just obviously update the old one, make it look more modern. Get a more consistent look across the site. Obviously, make sure it’s cross-browser. And most importantly, any new stuff that the training folks decided what to put on the site to make it easier for them to add new things, but still keep a consistent look and not have me do constant code pushes all the time to update stuff within. From my point of view, I would like to use SASS and Compass for the backend development work. It just makes working with the CSS and the styling side of things a lot easier and simpler for me. It’s something that I’ve been using and improved relatively, short period of time in the last year or two, but definitely it’s very useful stuff and very helpful.

So just a quick look at some of the benefits you can get from using the new system. This is one of our old pages and old aesthetic lining page. We’ve got a bunch of blocks on the right-hand side and those are physical Drupal blocks. So if you want to add a new block there, you’ve got to go add it on the “Add one block” page, edit it, position it correctly, all that kind of stuff.

On the new site, we basically converted that page into a single page with no actual blocks. Everything you see in front of you is all part and parcel of the node itself and it’s simply styled using classes that are provided to us pretty much by CSS. Obviously, you would need the full HTML text format. So it is one thing to consider when you're allowing other people, you may not be privileged to use this to add content to your site.

So what is this thing called “Twitter Bootstrap”? When I first read about it, I was like, “Okay.” People were talking about it all the time. It was kind of an abstract thing to me, but once I’ve been using it, I figured out it basically is a theme. That’s what you’ve – you’ve got to think of it as – you can look at getbootstrap.com for this is where all the information is stored, and it can be used on anything. This Bootstrap itself is not Drupal-specific. It can be used in any project. If you're writing straight HTML, you can just use it straight off. No problem. It was made by Twitter, hence the name “Twitter Bootstrap.” They use it internally, and I mentioned they released it as open source for the rest of the world to enjoy.

Some of its features, well, Bootstrap 3 now is mobile-first and also responsive. It’s cross-browser compatible and works well with IE8 and up. Nobody should be working with IE6 and IE7 anymore, we heard. Bootstrap 3 has a SASS and a LESS version. If you're using preprocessors, you don’t have to use those. You can just use a precompiled code for CSS as well. It comes with lots of very useful CSS and JS – JavaScript - components. It also has excellent documentation and a very big community. A lot of people have been using this framework as a theme. So there’s a lot of information out there on other sites that you can find useful tips and information. Just as a quick overview or a quick look at one little thing that they give you, a simple unordered list, if you just add two classes to the UL name and you have polls you automatically get inline navigation with the most run, a bucket on the active class as this is simply adding a class to existing HTML. So it really makes life for the themer a lot easier.

So how do we get Bootstrap into Drupal? So this wonderful chap Artoym who is here today, created a module or a theme – a base theme for us and we just enabled it on your sites and you are then able to use Bootstrap 3 in one of your sites. You do need to make a sub-theme, and we’ll talk about that in a little bit. There’s also a bunch of companion modules - or modules rather that work with Bootstrap in Drupal that can enhance its functionality, make it easier to use some of the Bootstrap components on your site as well.

So Drupal theme - it requires 1.7. Drupal core is Drupal 7 core. At the moment, I believe, is 1.4. So you do need to install the jQuery update module, or if you want to do it manually, which I don’t recommend, you can install jQuery 1.7 yourself. The problem recently was that Views UI used to break with 1.7. That has been fixed with more recent C tools updates. So that’s working fine now. But if you switched your jQuery to 1.8 or higher, Views UI will again break. So we usually use 1.7 as your jQuery option. JQuery update module allows you to choose different jQuery Views. I believe in version 2.5, which is not out yet, which is the next version, they will have a fix with this in that you can choose what jQuery version to use on your admin site. So your frontend could be 1.8, 1.9. 1.10, but then you just leave the default Drupal jQuery 01.5, whichever version you want as your admin, and that’s the way of Views you want to get. So hopefully, that’ll come out with 2.5. So your CSS preprocessor, the sub-theme of the Bootstrap Drupal theme currently uses LESS by default. I’m not familiar with LESS myself. I learned SASS, so I modified the sub-theme so that it uses SASS.

So what is SASS? LESS is also to kind of explain by this. They’re preprocessors, so you can write fancy CSS and have them compiled into regular CSS. SASS stands for Syntactically Awesome Style Sheets. You don’t want to say that too often too fast. It’s basically CSS with super powers is the way they like to think of themselves. It gives you extra functionality when you're writing CSS and your file is not called “.CSS” anymore; it’s called “.SCSS” or “SASS ECSS.” So one of the bigger things that I find for myself is variables. So like you're writing PHP, you can have a variable and you can assign it something, then you can reuse it later in your code. So the way it works with SASS is - the most obvious example that I can think of is, say, you have your theme based in color, so for us on Acquia, we have this nice blue color, and we can create a variable and we can say “Acquia dollar Acquia blue equals” and our hex code for that color. Then throughout out our SASS file, we’ll use dollar Acquia blue instead of the actual hex code. So then six months down the line, we have all our CSS working nicely. Six months down the line, marketing comes in and say, “Okay, we don’t want this blue anymore. We’re changing our colors to green,” or something. All you have to do is go back to your SASS file, change that one place where you set your variable to the blue hex code. You now set it to the green hex code, recompile your CSS, and everything changes to green, and marketing is happy. And you're happy because you only have to change one line of code. Another useful feature is nested rules. So a nested rule is basically when you have – a good example would be if you're trying to style a linked and an unordered list. You can have the rule on the UL. You can have the rule on the LI, and you can have a style, a rule on the A elements. So a normal CSS when you write it, you want to style your UL, you’d have UL open braces and your style. You’d have another line for ULLI open braces your style, and you’d have a third rule for ULLI A and whatever style you want on that. So it’s three lines; three separate sort of declarations. In SASS, what you can do is you can write just the UL open curly braces your style, and then before you close the braces, you indent, you type in LI, open the curly braces, write the style for that one, and then within that – within those braces, you put the “A,” also indent it. So you get this nice indented look. It makes it a lot easier to read and a lot easier to manage later on. So it’s just those kind of things that understands that, and then when it outputs your CSS in the end, it’ll limit actually automatically output those three individual styles that you’re used to seeing in regular CSS. The other thing that SASS brings to the table is mixins. It took me a while to figure out and understand what mixins were, but basically they’re just functions or scripts, if you want to think of it that way. So for example, if you want to do the rounded backends that you saw on that poll button, that is just a border radius declaration in CSS. But if you're – you may know that each browser has its own prefixer browser prefixed on the border radius. Let’s say, you can have moz-border-radius or webkit-border-radius; so it’s depending on the batch type of things out all the time. You need for – to have one border radius, you need to write four lines of codes. So basically a mixin would be you would have a function, you’d say, at the fourth – or add include border radius and then the number of your border radius and pixels, and then you would just mix them, that would then output the four lines of code that you need for each browser and the final border radius; very useful, very powerful. You can do some crazy stuff with that as one of our frontend guys does some pretty astounding things with this. So SASS needs to be installed locally on your machine where you're developing, let’s say, Ruby gem, just a little module for Ruby, and that gives you access to be able to use SASS and try to understand those kind of things for compilation later on. And it is compiled into a regular CSS file. So from a .SCSS file and with all the kind of codes stuff that you have in there, you’re basically just going to output a regular CSS file. You don’t have to do anything. You just run the compiler and it does it for you.

So let’s have a look at how we set up our sub-theme. So when you come with the base theme, you don’t really want to modify the base theme, because if you need to update it later on, then you're just going to wipe out all the changes you did or you're going to have difficulty implementing your changes back in the theme again. So Bootstrap Drupal theme gives you the option of creating a sub-theme. The default tutorial comes with LESS, which is fine. If you want to use LESS, follow the tutorial. No problem. So the basic concept is you need to download Bootstrap files and in your sub-theme, you create a Bootstrap folder. You add in the JavaScript – you have a folder for JavaScript, a folder for fonts, and a folder for CSS as well. Now, the JavaScript can be – well, let me start from the beginning where there’s the JavaScript thing. Bootstrap offers you six to eight different JavaScript to do functions or components, and you can include one or any of them in your sub-theme, or you can include them all in one already minified, compiled JS file, which is only 29 KB. On our site, we just use the full JS file, because we’re not sure like maybe later on, Heather’s going to decide she wants some new Avanti functionality. If she wanted that and it wasn’t already in there, I’d have to go push some codes to make it happen. So just install the whole thing. It’s only 29 KB. It’s not a huge deal. The fonts are the icon fonts that come with Bootstrap and the CSS file is just one big CSS file for all the Bootstrap CSS – all the styles that you already have available as the components.

So to make it SASS-friendly, we have to import. We use @import bootstrap in our main SCSS file that gives us all the mixins and those kind of things from Bootstrap. If you're going to be using Compass to do the compiling for you, you're going to have those config.rb; it’s a Ruby config file. You need to require Bootstrap SASS in that file as well. If you don’t understand this, don’t worry about it. When you start developing with SASS, you can come back, look at these slides, and you’ll get the hang of it. Each of the Bootstrap JS files, either the full JS file or each one needs to be added to your .info file, so they’d get loaded. The icon fonts are loaded using @font-face in your SCSS files. You can pick one, whichever one you want to use.

So this is kind of the layout that we have for our sub-theme. So we have the Bootstrap folder with the fonts, JS, and CSS folders. We have a separate CSS folder where our compiled CSS ends up into a single file. We have a SASS folder and in the LESS version of this sub-theme SASS, which is your replacement list, we have a folder called “Components,” and in there we create separate SCSS files for whatever kind of setup you want. So for us, we created a separate SCSS file for each sort of content type. So we have one for events, one for courses, one for general stuff, one for the home page, things like that. We will also have a styles.scss file in it and all that file does is import each component, and each component file in the components folder has an underscore in front of it that allows it to be imported only and not used in creating a new separate CSS file for each of those components. All those get compiled into styles SCSS, and then that gets compiled into styles.CSS later on. We have a templates folder for all our template overrides; node TPLs, page TPLs, those kind of things. We have a theme folder for some includes; preprocess include, theme include. We have our regular info file, our Ruby config file, and then also template.php, favicon, logo, screenshot; so those kind of things. So that’s what our sub-theme looks like and it’s more or less the recommended layout. Depending on how you work, you may want to change it a little bit.

So some of the modules we used, just to make things look better on the frontend, not everybody’s Bootstrap-related here. This is just general modules for doing stuff. Field Group - great little module, can be used to group fields on your node form as well as on the node display. Most useful thing in field group for node display is it provides you some elements that are HTML5 elements. So you could add like an aside or section element. Another module, Field Formatter Class, very useful, especially if you want to add specific classes to fields for output, and when you're using Bootstrap, it’s kind of useful to be able to do that, because then you can make your fields automatically have whatever styling you need just by adding that single clause without you having to override fields in the template file or something. Block Class does the same thing. It allows you to add a specific class to a block so it’s customizable. Font Awesome was something we used just to throw in a couple of icons here and there. It’s just – naturally, it’s another icon font and you just add a class to whatever thing you want and you get a nice icon on that. DraggableViews is more an admin useful module. It allows Heather to reorder the courses as she needs them reordered, whether it – most likely it’s not going to be alphabetical, so the view that outputs the thing is not going to be – you can’t just sort on random sorts. It will allow her to play around with that. We use Gmap for our main event page map and on each event node, the maps. Finally, we have Views Bootstrap, which is Bootstrap-specific, obviously, and allows – it gives you new view styles, then output your view in a Bootstrap friendly way using Bootstrap structure and classes.

So just a quick look at Field Formatter Class and Block Class. I’ll talk more about Views Bootstrap in a little bit. So Field Formatter Class on your managed display tab for your content type, you're going to see down at the bottom where it says “Class: pull-right, margin-let, margin-bottom.” Those are classes that we have in our theme and you can just assign to the actual field. For Block Class, when you configure the block, you’ll see another input field there, CSS classes, and you can add whatever classes you need in there. The col-md-6 is a grid class from Bootstrap, and Bootstrap is a 12-column grid, so by using the number six, we are saying this block is off the width of the page. I’ll talk more about the grid in a little bit as well.

So let me just show you live what those things are. So this is our display for events, and you can see your class here. So when you click on figure for the field, you simply just get a single input field and you can put your classes in, in a line separated by spaces. Then that works the same way for blocks. So here’s our nice map. So we’re just looking at what Gmap can output. Each of these little markers is a node and we use the location module to geo-locate an address, and then Gmap reads in the latitude and longitude of each little marker on the page for you; and each of our nodes has the same thing; it has a little map. Gmap is really useful. You can change the style depending on – you can output the size and all that kind of stuff.

So just a quick look at some of those things we do with those frontend things. Let’s go back in here. So some other Bootstrap modules that exist out there, we didn’t use them. Bootstrap Field Group, it allows you to do navigation, and navigation’s kind of set up on the frontend. It creates – the way you need it set up is you need to have a bootstrap field group, which has a class of nav or you choose - it’s a field type, a navigation group icon – item, and then you would have a second field group inside that for each navigation item, and within each of those field groups, you can have your fields. So it kind of duplicates what the Quick Tabs module does and then you can just click each tab and you would then see the content for the fields that were underneath each of those tabs; very useful. We didn’t use it on this particular site. I have used it on other sites; it’s quite nice. Display Suite if you like to use display suite for doing your frontend display. There’s a module that provides you Bootstrap compatible layouts using the Bootstrap grid. Also very useful; I have used it on other projects. There’s, of course, Bootstrap layouts, styles, and tabs for panels module. That’s pretty much the major sort of ones that you're going to be looking at. There’s a bunch more and as usual, searching for stuff on drupal.org is always – always it’s something interesting that’s going to come up.

So let’s look a little bit more in detail at Bootstrap and Views, seeing as most people are going to be using Views on your sites. On this page, this is a track node and each track has a bunch of courses associated with that particular track. So we’re showing - on the right-hand side of the track node, we show an accordion display and that is using the Views Bootstrap module. So you just click on the title and it’ll collapse it and open it as you go along.

So at the moment, we’re using the 3.x-dev version of the Views Bootstrap module. There was some issue with the current stable release. It didn’t work particularly well with the new Bootstrap 3 as far as I recall. There is a newer dev release out and as soon as there’s a proper release past January 31, 2014, it’ll be fine to use that stable release. So what does Views Bootstrap give you? It gives you a bunch of new styles that will basically be Bootstrap components. So Accordion which - just the open and closing of information. The Carousel slide show, kind of what Views slide show does. The Grid, same as the regular Views grid, except it uses Bootstrap classes. Media Object, it’s not video or audio. It’s actually a blog display. So if you have a small icon on the left, then your text for the blog teaser on the right - so a blog listing page or Twitter tweets listing page, that kind of thing. It has special formatting using Bootstrap classes for that. You can now put tabs, tables as well. Bootstrap has a bunch of different designs for tables and it also can do thumbnail layout. These are all Bootstrap-specific layouts. So if you're looking at a View, under format you will see these options listed. Choose the one you need. You can always check on Bootstrap documentation and see what is actually going to output. We’ll go through these in a little bit as well.

So let me just show you the track page. So here’s our track page of content management, and these are the courses - two of the courses in that particular track. So this is what an accordion is. You just open and close this button that’s basically using this one, this view which is Bootstrap accordion. It doesn’t have a lot of settings. The only setting it really has is what’s in the title field, and the title field is whatever is displayed here is the thing that you're going to click on to open and close your accordion. The one thing to note is that title field, make sure you're excluding it from the display. If you don’t, what’s going to happen is when you open this thing, you're going to see the title listed again right here. So you’ll probably know how much you want. What else? So the View – okay. Home page, this is our carousel or Bootstrap provides you. You can see here when you move to the right, you can scroll left or right, and that’s all straight Bootstrap. In fact, this particular carousel on our home page, we did it manually. So it’s actually embedded inside the node rather than using a view. We didn’t want to create a new content type just for a couple of slides. It’s not something that we’re going to be changing that much. All right. So that’s the other advantage is you don’t necessarily have to use Views or anything. You can manually type in all the code that you need and relatively easy to do as well. Okay.

So let’s look at the grids and a bit more about the responsive stuff. Bootstrap grid is a 12-column grid and it provides you with a couple of extra options that I’ve not seen before in other grid systems. On Acquia.com, we actually use Omega 3 and the only thing it has is a grid class with a number. So it’s basically grid 5, we’ll use a five-column display for whatever element, but Bootstrap gives you a few more options where you can specify at what breakpoints you want the element to use that amount of columns or when you want the element to actually be the full width or horizontal field types. So it’s a little confusing at first, but basically if you looked at, for example, col-md, which is for medium devices, we have an example on outside where we have col-md3. So by using three, it’s a quarter of 12, so that means you're going to get four blocks across the page. That’s using a quarter of the page and we actually have a display, we’re going to have four blocks. Then we move down below 992 pixels, it actually drops it down to two, and then obviously on the front, it will become one. So you really – for this kind of getting the grid options correctly sorted out, play around with them a little bit just to see exactly what they’re going to do. It took a little while for me to understand how this concept works, but very handy that you can actually specify the different breakpoints of when things are going to happen. You don’t have to do any coding for this. It’s all done for you by Bootstrap.

Some of the other responsive elements that Bootstrap gives you, responsive tables, very useful. Most tables, when you look at them without doing anything on the font, they kind of stick out to the right, break your display a little bit. Bootstrap gives you a table responsive class that you add to a third wrapper around your table, and essentially what it does is it makes your table scroll within the width of the font. So it doesn’t stick out anymore. You're just able to scroll left and right. It’s quite a nice option. I kind of liked that. A couple of other people have solved responsive tables in other ways. Some people collapse them down into lists. Other divs manages to keep the table in a table look, which I think is probably – for me, I find that the nicest solution. All right. And a bunch of other responsive helper classes. So if you want certain things to appear on bigger screens, but not on the font you get these classes for hidden or visible, and depending on what way you want things to show up or be hidden, you just choose the right class, and then Bootstrap handles the rest; very useful. We use this kind of stuff on Acquia.com. We actually do some stuff, but we had to write our own class, it seems, on Bootstrap. Yes, very useful. The other thing Bootstrap gives you is an image responsive class, which you just add directly onto the image tag, and that will make the image then responsive and resize down when you shrink your screen. Quite often, people will just basically blanket all image tags, all image elements with this kind of class in their own CSS. Their work generally may not use image responsive, but if you want specific image – if you're not doing that and you want specific images to be responsive, this is the class to use.

So a couple of other components that are available – there’s a lot of them. I’m going to go through a few. So some of the CSS stuff, just a bunch of classes that you can add on things. There’s this cool thing called “.lead.” It makes your font a little bit bigger. So it’s like an introduction for the text. Bootstrap does some cool stuff with lists. You can have inline classes to make the thing automatically inline. There’s some stuff for code formatting, headers, those kind of things. Forms are really nicely handled. You have a nice inline option, so that you can get input fields together on the same line. Quite often you want to do that with like first name, last name, those kind of things. Bootstrap makes all that kind of stuff easier to read. It’s really useful for keeping your forms standardized across various browsers. Buttons, super cool stuff, we use a fair but you have options for different colors and you can override those colors in variables in your SASS files. There’s different option - different classes with different sizes of buttons, different states of buttons; so like if it’s active or that kind of stuff. You can also group buttons together, so that if you have three or four buttons grouped together, you just get a vertical divider between the buttons and only the first and last one get the rounded corner. So it looks like a nice button bar. I’m going to demo – oh, I’ll show you what these things look like in a minute. Glyphicons, obviously, is your icon font. Jumbotron is a big announcement kind of block. It’s a particular format of HTML that you need for this to work, along with the class; very nice on the front page if you want to have product announcement, those kind of things. It has panels of the Drupal module, just – it’s like a highlighted header with some text load wrapped with a nice border. We use some of those on our sites as well.

So let’s have a look – so I’m just going to quickly show you panels. This is what I mean by panels. These four blocks are a panel – each of them is a panel, and these are the ones that I was talking about that have the grid class where they use a three-column – we’ll be using up three columns each. So when you shrink down your screen, texts get a little bit narrower as you go down. But when you get down below 991 pixels, it becomes a two-column option. Then eventually when you get down to mobile, it becomes full width.

Let’s have a look at some of the other CSS components. So typography, go over the headings. So it makes the font less big. Tables - you have different options for tables. You can just have plain tables of the vertical lines. You can have striped, bordered. Hover means when you move the mouse over, it gives you a highlight for the entire row, kind of nice if your tables are kind of big and you want to be able to see stuff easily. Forms, very useful, very standardized. This looks really pretty. Buttons, these are the different – the main nav and it’s just a different class depending on what you want to show. Sizes. And then states – so active state, you can – just by adding the class, it changes the format for you. A bunch of helper classes, so you can have backgrounds, those kind of things. All right. There’s a lot of information here. Whenever I’m working with the Bootstrap theme, I pretty much have this page open all the time, just to look at stuff, see what classes I can find, what classes I’m going to use, because usually quite often I’m finding new things like, “Oh, that’s an interesting way of doing something,” or I can also search, Google it, and other people have come up with some pretty interesting ideas about how Bootstrap altogether. So that’s basically the main CSS stuff.

So let’s have a look at some of the JavaScript things that they offer. You’ve already seen the accordion and the carousel. They have the modals option, so that you can pull out content that’s already on your page in a modal. So you click over button, maybe you hit in that content before. You click a button and pops it up nicely for you. It can also pull in the remote URL. It has tooltips which is essentially the same as when you hover over an element that has a title attribute and a choice it takes as in title. Tooltips does a similar thing. It’s a bit more customized. It looks a little nicer. It’s also fast. I find that the regular default tooltips, you’ve got to hover for like a second or two, and then it pops up. The Bootstrap tooltips pop up instantly, which is really nice. Popovers are basically like a callout. You click a button and the little thing pops out the side with a bit more information on what you want, on whatever you’ve clicked on; very useful if you're into those kind of things. Affix is the other one and that gives you like a sticky sidebar nav. I’ll show you those now.

Let’s look at the components. Oh! Yes, this is the button groups thing. Let me show you. So these are three separate buttons, and then when they’re grouped together, it makes it look like a nice button bar. Okay. So some of the JavaScript stuff, so modals, you have a little animations in these buttons. You click it. You get a nice modal. You can have buttons in the modal. You can do all sorts of cool stuff in there. You can see there’s a bunch of other ones: dropdown, tab, all those things. Tooltips, let me show you – where is it? Yes, so like on our event page, your service sticky sidebar, but each of these icons has a tooltip. It’s this little black or dark gray popup. It explains what the icon is. This button has one as well. This gives you a bit more information; very nice, very simple to do as well. Popovers – okay. So that wasn’t very clear on the way I explained it. This is what it looks like. Basically, it’s open and close on click, rather than a hover, gives you a nice formatted title and a bit of some text here. Then affix is a sticky sidebar which I’ve used it. You can see this manual on the right here, it doesn’t change position at all. Affix has a whole bunch of different options and I haven’t used it myself. Our actual sticky sidebar is done differently, but that’s – it’s got some fairly interesting options. So that’s pretty much how - a look at Bootstrap and how we used it. Our entire site is responsive obviously, we try to use the classes as much as possible. That avoids any inline styling. We have no inline styling on this site – on the training site. Heather can then – as I’ve mentioned, she can come in, add some stuff. She did – I can show you the private page again. That’s the old one and the new one. All of this is basically within the node itself and she made this all just by looking at the various classes and seeing what they can do. So it’s a bunch of panels with grid classes. Let me show you here. Let’s see, it’s a little bit slow to look at it. So we’ve got a col-sn-6. So it’ll - and you can collapse down on small on the font. You’ve got your panel headings, panel title; and you do have to follow some HTML structure to get these things to work correctly, but I think it’s a pretty small price to pay to have the nice functionality that Bootstrap offers us. And it really does make my life a lot easier. I haven’t done any CSS pushes since we launched, and Heather’s been able to manage the site all by herself. No problems. So that’s pretty much it. If there’s any questions, I’ll be happy to take them. Thanks for listening.

Heather James: Thank you so much. I’ve sensed other people are probably thinking of questions, Dave. [Laughter] I know I’d add some. I thought it was interesting that after I did a little blog post about this live tutorial you’d be doing, that we had a little controversy internally, and I thought it’d be interesting to talk about that because people may be wondering when it’s appropriate to apply this and when it’s not. [Laughter] So just to give people some context, one of our colleagues sort of didn’t – he’s sort of like, “Oh, no. This is a dangerous technique, because it means people will say, ‘Oh, we can just have unfiltered full HTML in all of our body fields and do all of our layout within our body fields.’” The stories from my experience from the old site, I had only a handful of one-off full pages like that private training page, and I would only be using those blocks on that page. So I was actually putting a lot of overhead on the site, having to go create a blog and then control it’s visibility to get it displayed the way I wanted it to look. So it wasn’t really the right use of that tool either. So when I saw this solution, I thought, “Oh, this is going to save me a lot of time.” So Dave, I wonder if you wanted to sort of say what your response was about when this is not an appropriate technique and not an appropriate theme.

David Myburgh: Definitely. So yes, like I did mention, for some of the elements that you want, some of the components that you want to display, you do need to have the ability to answer full HTML. Those H3’s with a bunch of classes, by default, the Drupal filter system that takes formats filtered HTML would just strip all that stuff out in one word. So you do need full HTML and of course, with full HTML allow – users can then also post in stuff like scripts and do all sorts of crazy stuff. So you’ve got to be very careful about who you're allowing to edit, take things/stuff on your site. If it’s only your admin users that are going to be editing stuff, fine. Give them full HTML; that’s okay as long as they know what they’re doing. If it’s open to regular authenticated users, you're probably looking for a bit of trouble there. It’s not recommended. So allowing the general public to use Bootstrap elements for display is probably not a brilliant idea. This is more for the backend, so admin people and possibly trusted editors, those kind of things. Really, what I would like is – sorry. What I would like to see is – I just thought of this today, actually, when this discussion started - is some way that we could allow classes to be added into filtered HTML. I haven’t looked to see if there’s a module. There probably is a module that does that already. But yes, that would be an ideal solution. So if you can add a class without having to add – without the ability to add full HTML, which would include scripts and unpleasant things like that.
Heather James: Yes, definitely. I think that one of the – I sort of had a further conversation with another colleague about this and we discussed the particular client situations we see – unfortunately seen a few times where on the content type, they’d have multiple body fields and they’d have one body field that would allow their site builders to do something like you’ve shown, that they could have multiple columns and unfortunately, using things like table base layouts where they’re migrating old HTML content over, and then they’d add a second body field for their mobile site. So they’d actually be using a mobile redirect and they would have to select and show a different body field that would be mobile friendly. So this solution is quite different, because when I set in those panels, I can also specify not only that it’s – how many, I suppose…
David Myburgh: Columns? Columns, yes.
Heather James: …columns, yes, in the grid. Excuse me. [Laughter] But I can also specify how it should behave when the page gets resized, because it is responsive out of the box. So it’s quite different from even what some of our problematic client situations are. So I hope with that, people got their curiosity piqued to try this out. I wonder if there are any questions, Hannah, from the audience?
Hannah: Yes, the first question is “Where can I find documentation defining the classes available?”
David Myburgh: Okay. So that’s all on getbootstrap.com. Let me show you. So this site – yes, let’s go to the top here; pretty long. So if you go to getbootstrap.com, you're going to find everything there. They’ve got the CSS stuff, the component stuff, and the JavaScript stuff. So it’s all here. Like I said, every time I’m working with Bootstrap, I pretty much always have this open. It’s a great reference tool; documentation is very good.
Hannah: Okay, if anybody has any additional questions, please ask them now. [Pause] All right. That’s it for questions. Dave, thank you so much for the great presentation, and thank you so much…
David Myburgh: Welcome.
Hannah: …Heather, for joining us as well. Again, Crosstalk recording will be posted to our website in the next 24 hours. Dave and Heather, would you like to end with anything?
Heather James: No, I just wanted to add that we have a couple of webinars coming up. If you are interested, there’s actually one specifically on mapping and that’s with some Drupal like me folks. So if you saw the map that we have on our site, you may be curious about how to integrate maps in yours and that might be useful for people.
David Myburgh: Yes.
Hannah: Okay. Great. Thanks so much, everyone. Have a great afternoon.
David Myburgh: Yes. Thanks.
Heather James: Bye
David Myburgh: Bye.
- End of Recording –

Customers: You Asked, We Answered: Introducing Highly Anticipated Features and Capabilities [April 3, 2014]

Drupal Step-by-Step: How We Built Our Training Site, Part 1 [April 2, 2014]

Click to see video transcript

Moderator: Today's webinar is Drupal Step-By-Step, How We Built Our Training Site Part One with Dave Myburgh, who is the senior engineer here at Acquia. We're excited to have Dave on the call. Heather James will also be on the call, who's the Manager of Learning Services here at Acquia.

Dave Myburgh: Today, I'm just going to go through some of the site architecture and construction of how we moved our old training.acquia.com site from Drupal 6 to Drupal 7. A little bit about me, I'm a senior engineer at Acquia. I've been here for about two and a half years now. I'm the lead engineer on acquia.com I also have a bunch of other small sites that I look after, including now training.acquia.com.

The things we're going to cover today is a little bit about the site architecture, some of the modules that we used in building the new site. How we put together some of our content types. We'll talk a little bit about the data migration from Drupal 6 to Drupal 7. I'll show you some interesting views where we throw in a couple of arguments on contextual focus. Then in the last two little bits we're going to talk about how performance got improved a little bit and how we made maintenance easier for all of us involved in the site.

Who will benefit from this talk? Developers and site builders mostly. If you have some experience in Drupal, that will definitely help you out a little bit, but if you're new to Drupal as well, you'll definitely pick a couple of interesting and useful tips.

Just a preview of where we were and what we ended up with. On the left is our old training sites kind of 90’s style looking and I think we did a fairly good job upgrading it to a more modern look. Definitely a lot easier to use now as well.

Some of the requirements for this project; we wanted to keep the basic site architecture the same. The landing pages, content types more or less the same. We did drop some content and we did add one or two new things, but for the most part the main architecture is more or less the same. What we wanted to improve was a better editing experience for us as admins as well as for the partners, who are actually creating the events on the site for us. We wanted to better handle the Events Status, because sometimes we had issues where an event got cancelled and it was a complicated process on how to manage cancelled events. Publishing Workflow, we wanted to help make that a little bit better and if I need to use the management for the partners on how to deal with the bunch of stuff on the site for them to make their life a lot easier.

Some of the building blocks. Right. I'm streaming to a demo. I will show you a little bit of the site looks like right now. Here's our front page. I'm just using a local copy of the site just so that we don’t have any issues, technical difficulties. The site focused on events. We're going to look at the upcoming events. We have a nice map and at the top, we show online events and then we show our various in-person events. I'm just going to pick one of these guys. There's one group of module development.

This is the Event Page. We have all the various important information on the right side. We show some information about the course that the event is going to be doing. Click through unto the course that's related to this event. It'll tell you all the details; the level, the track that the course is in. So several courses can form a part of a certain track. You'll see the upcoming events for a particular course. I'll click you through to the track. So this is for developers and these other courses that you can find for this particular track. So we have three content types here that we're look at now. We're having an event node which has a node reference to a course which itself is a node reference to track. All right. So that's basically an overview of the most important part of the site.

All right. So next. So our main site architecture; events, courses and tracks. We have a couple of static landing pages for general information. I think resources, private training, that kind of thing.

Let's look a bit more in depth at some of the content types that we have. Event Nodes. The Event Nodes have the location, the date, the cost. That's the actual thing that you're going to be attending to learn about a particular subject. The Course Nodes, which are a node reference from the event have the learning objective, the pre-requisite, that kind of information. Finally, the Track Nodes are simply a grouping of courses. Like a category but we're using node reference to link all of those together.

Event Nodes. These are created by our partners. They have, like I have mentioned already, a node reference to a Course Node and by the node reference we actually displayed the course information or a brief part of that information at the top of each event node as you saw. The address for the actual event is handled with the Location Module. In fact, our Drupal 6 site and our Drupal 7 site both used Location Modules. That actually made our migration, which I'll talk about later, a little bit easier. Events can be in-person where you go to a place to actually physically attend it or they can be online. That designation will affect the display of the map. If it's online, obviously, there's no physical location so there's no need for a map.

Then we have Events Status Options. So when the partner is actually creating the nodes, they can set the status of the event. We have a Draft Event which is not visible to anybody. We have Cancelled Events which are, as well, not visible. Then we Tentative Events which are events that are probably going to happen. Finally, we have Confirmed Events. I don't know if you'll be able to see those two, but I'll show you a bit more in depth later. Some of the content type changes are quite nice, especially moving to Drupal 7. We have vertical tabs which make organization of the various fields a lot nicer visually. It's easier to follow the track of the node from where things are. It just makes it easier for everybody to handle.

All right. A little bit more detail on the Events Status thing because this is one of the more important features that we added to the new site to help everybody. As you can see, the field is a list field using radio buttons. So you can only select one thing at a time, obviously, and depending on which option you select, different things will happen to the node. You'll see a different badge or button displayed on the actual node itself. As I mentioned, draft and cancelled events are unpublished so people don’t get to see them - the point is if it's not happening.

Tentative has the orange button. Confirmed is green. We actually use pre-processed field function to install the button. Adding a class to the icon and the pop-up text. When you hover over something, you'll see some interesting texts. Particularly the Tentative Events, we link to another page which explains what the event is. Those buttons then get displayed on each Event Node right next to the event detail.

Let's have a like at the node form. I'll show you how the Event Node has put together. So I'm just going to use this same event that we looked at a little bit earlier. We edited it, we got the title, the usual kind of thing. We have our node reference link to the Course Nodes. So we just simply list the various course nodes to choose the one that the event is going to be on. Our Events Status is positioned just at the top right. That's pretty important so we did some special formatting just to have it nicely positioned. The regular body - just so in case you're wondering, I'm using [BU] editor as the default editor. I don’t personally like [BU Editor], they do weird things. Hopefully in Drupal 8 that will be much nicer.

A couple of other things. Text Formatting Help. I just took that out of the way. Here's a signup link. Each department will have their place that we actually go do the signups. We've grouped some of the details together in a vertical tab. So dates, costs, delivery, and the language. Location is the Location Module. You enter in your various address details, you got a little nice map that automatically geo-codes the latitude and the longitude which we'll then use later on the main Events Page. All the Event Nodes get shown here. Then Provided is just a bunch of things that will get provided at the event.

That's what the node form looks like. This is what the partners and the administrators are going to see. Let's have a look at how this was put together. Content types, and then managed fields. Using Field Group Module allows us to group stuff really nicely. Status for the Event Status section. That is a couple of external things we can add. Different types of fields, not just regular field bits or in case the details of the vertical tab. This one is using a HTML 5 site field type. It's just a way to differentiate. That allow us then to target the status field group and stick it over to the right. The rest of the stuff is just the main body. Group things together nicely. You can add classes and stuff to do whatever special styling, kind of things you need.

On the display sites of managed fields, this is what the form is going to look like when people edit the node. Display is obviously what gets shown up on the front end. We have Event Details. We have basically status, body and location. That's the only thing that gets shown through the node display settings. But if you remember, we have all the actual event details on the right hand side and that's done with the View and I'll show you that in a little bit later as well.

That's just the basic idea of how we put together at least the Event Nodes type. You can see here we use the module as field formatting class so that we can actually add specific classes to the fields for output. Sometimes, the default classes that Drupal has are not what we want or they're too generic. It’s always nice just to throw in your own classes. It allows you to do fancy things like have generic classes like adding a margin to the left and to the bottom if you want rather than having to style and add a specific CSS thing in your custom style sheet. You can just add in existing classes.

Let's carry on here. Some of the modules we used for that field formatting class like I mentioned, it's the custom class on a field for display. GMap actually outputs the map on the node themselves and uses the location information. Then obviously, Location is for adding the address. It does the actual geo-coding on the back-end for us.

Data Migration. Initially, when we said okay, we're upgrading from Drupal 6 to Drupal 7, the initial thought is usually, “Okay. You just run a regular update.” But with any site that has more than like one or two content sites, usually you're going to run into some kind of weird problems and you end up spending a lot of time trying to fix stuff. My Preference, and I don't think I've actually ever done a regular Drupal 6 to Drupal 7 update, is to actually migrate data.

There's a couple of advantages to this. One is that you can exclude data that you don’t actually want anymore. You can also finesse the data, or tweak it a little bit if you need to change some stuff. Sometimes, an old site might have the date in a weird format and you want to use the UNIX timestamp in the new site. During migration, you can actually do things like you can actually change the way the data is. To migrate the data in this example in the site, I used the Migrate Module.

Now, in other modules that I used that works with Migrate is called Migrate D2D. This is a Drupal to Drupal Migration Module. It's build specifically to migrate Drupal 5 to Drupal 6 to Drupal 7. In fact, this is more or less I think what's pretty much going into Drupal 8's core setup, which is kind of nice. The nice thing with the D2D Module is it gives you a user interface, but the one caveat at the moment is that you need to use these two specific versions of the module; the RC1 of Migrate and the 2.1 B21 of Migrate D2D. Without those versions, you don’t get the user interface. So just be aware of that.

The way we did the migration is we initially first migrated our user across. What that does is it allows the old user IDs to be matched to new user IDs. Then when we import our content, say, Joe Shmoe created a page or also an event or something, his new user ID which is probably going to be different in the new site will then get correctly assigned to the node so you don’t lose your authors for the various bits of content.

The other thing you better watch out for when you're migrating content is that you migrate content in the right order. So users usually come first. If you have files to migrate, you want to migrate those pretty much next. In our situation, we have Tracks, Course and Event Nodes which are all nodes referencing each other. We want Tracks first because Courses need them, and then we want Courses before Events because Events need a node reference to Courses. You've got to migrate that content in the right order. During each migration of each type of content, a map is created by the Migrate Module and the map says, “Okay. This is the old node ID. This is the new node ID.” When I'm migrating the Event Nodes and I'm linking to Course which had an old node ID of, say, 25. The new node ID is what, 300 or whatever, it will map correctly and you'll get data linking to the right stuff.

The only custom work I had to do in this migration was for Event Nodes, which is one of the major benefits of Migrate D2D. That's the link for the module. It gives you a very nice user interface where you can click what the source and what your destination fields are going to be. You can manually set some fields, and basically you have to write a whole lot less custom codes. I don't think if you can see this too clearly, but basically on the left-hand side you're going to get your destination fields.

This is all running on the Drupal 7 site. You already have your content types created with a field that you want. So they're all listed on the left-hand side. The source field, which is the next column, you get a dropdown for all the fields from the content type that you're importing from and you can map them to whatever fields need to be. You can set a default value, which is the third column there.

Then in the last column is called the Source Migration. Once you've migrated anything like your users, you can what they call a Source Migration. That Source Migration is the mapping of the old user ID to the new user ID. If we were importing Event Nodes here, you would a Source Migration for your Course Node reference field so it would then map the correct course node IDs to the new nodes.

The custom module that we did for the events, I had to do that. There was no avoiding it because Migrate doesn't know how to handle the location field at all. I think it was called CCK Location in Drupal 6, and it doesn't have any migrate settings for that, so I have to do it manually. The location is obviously on the Event Node. We also didn't want to import all the very old events. We just want to basically the most recent and anything obviously that's going to be still coming up.

Let's have a quick look at the code that I did. This is very, very simple. If you didn't use Migrate D2D, you would then have to create the same custom module but you would then physically have to write in here all your mappings for each field. What your source field is, what is the destination field is, all that kinds of stuff. You'd have to basically write a whole lot of codes to do that. In this case, the most important thing that I needed to do was make each location field - so address, address to, cities, state, country, that kind of thing - available as options in the Migrate D2D UI. Then I can just simply map it to the new fields. What we do is, in your migration class, you create a new migration class and you basically pull in the main query, the database query that Migrate is going to be doing. You join in the tables that the old Location Module in Drupal 6 used.

The last line in the field, basically you say which fields you want to map. So if for whatever reason you didn't want to map the latitude and the longitude field, you could just exclude them. You don’t list them there and then they don’t show up in the UI. I pretty much just took every single column and if I didn't want to use it, I simply don’t map it in the UI. I just leave it blank. By doing this, I would then have all the location bits of data. A separate field that I could then map to the new location field in Drupal 7.

The other thing we wanted to do was exclude the old events content. So in the function prepare road, you do this kind of stuff. This allows you to modify your incoming data if you wanted to. Like I mentioned before, if your data was in a weird format and you wanted to change it to a different format, you could do it here. The other thing you do is you return “false” or something and that basically makes sure it does not get imported. What I did is I checked the event dates which is using value “2” which would be the end time of an event, making sure that that has passed. I check what the current time is right now, what the time I'm doing this migration. If “now” is greater than the event date; in other words, has the event passed? I return “false” which means, “Just ignore it. Don’t bother with this road. Leave it alone.” Then afterwards, you just need to return “true” and so if now it lists an event date; i.e. the event in the future, it's going to return “true” and it will continuing doing with whatever it needs to do to migrate the data in.

That's literally all that I needed to do and write custom code for the migration anyway. A lot easier than having to write hundreds of lines of code to do mappings and that sorts of other things.

I want to do some interesting views. Most of the content is normally accessible. We don’t really to do anything fancy. Except for if you want to have content displayed in a nice way in certain cases like the events having all the details on the right-hand side in a little block. The simplest way to do a lot of our stuff is using Views. Views is great because it has caching. You can do pretty much anything you want with it and it's the most used module, so everything works most of the time pretty well. We have used Views in various places to show things like upcoming events, the courses in this track as you can see here. These are all using contextual focus and, in some cases, relationships to actually pull in the data from other nodes that are linking to your current page or actually in the case of the event sidebar, showing content from the Event Node itself in a block. We do it on Event Node, Course Node and Tracks and I have a couple of administration views for some advance content management where I can search titles and that kind of stuff. The default Drupal content admin is lacking a little bit in some cases.

Like I said, Event Detail. This is actually a block created by Views and the View actually just pulls in the fields from the node that it's actually on at the moment and throws them into a block. Let's have a look at how that View is built.

This is the Event Detail Block. Basically, we're just creating an unformatted list. We have the field that we want to show in that block; signup, costs, state, all that kind of stuff. Obviously, always by default have it published and content type is for events.

Now, how does Views know what node it's on and what field to actually use? If you just did it like this and you can see it shows you just basically get the fields every single event node on the site, which is probably not what you want. We use a thing called Contextual Filters. Now, we use the node ID as a contextual filter. Let me show you how that's configured. By default, it says display all results from the specified field when both the values are not available. But what we do is we select provide a default value and the default value - you could specified a fixed value but we use the content ID from the URL.

If you look at an event node on our site, the URL is events/something and the name, the title. So it's using URLs. But in reality, the actual node URL is always going to be node/a number. In fact, the node ID. So Views knows this and it can always find that ID. It pulls in the I'd, it loads it up and it looks for the use fields and then generate a block for us. This is the node ID of that same node that you saw a little bit earlier, the Event Node. If you don’t have anything here, by default the query shows you nothing. There's no node ID.

Update the preview and you see all the fields. This is just the fields and they're pretty much they're in a raw state. We'll do some pre-processing on the View field to make them look all pretty. You can see it provided for you is just a straight text in-person, but when you actually look at the display here, it looks a lot nicer. Basically, what we're looking at is a simple contextual folder we're were pulling the node ID from the current URL of the node. So it knows, “Pull the information from this node, not any other nodes.”

Now, if we look at our Course Nodes, on our Course Nodes we show a block of upcoming events. These are events that have a node reference to the node you're actually looking at. So I call this a reverse node reference or a view using the reverse node reference. It's a little bit more complicated. Here's the View. In that table, we want to be creating a table, obviously. We want to show the title, date, cities, province, various information. Then we throw in a link to actually go to the Event Node itself. We have some folders. We have the exposed dates folder and country as well as an exposed folder. The magic happens in contextual focus again, using a node ID, as well as in this case, you need to use a relationship.

Because right now, if you used a straight node ID and you'll see it's being to be using the same setup where it uses content ID from URL. If you do that, you're looking at the Course Node because that's the node you're on at the moment but you want the Event Node that actually reference this Course Node. So we need to use a thing called a Relationship. Basically the only relationship that you can use are node reference fields. So we're using the relationship of field course, which is the field name that we use in the Event Node.

We just simply add it in and then we make sure that our contextual folder, content node ID, is actually using this relationship. By default it does not use the relationship, but like I said then you'll only be looking at the Course Node you're on and obviously you won't find the event fields. We use the relationship, it can then go through the reverse node reference and find event nodes that are referencing the node you're on and then show the relevant data.

Don’t worry if this stuff sounds a bit confusing, because it is. I struggle through it about how to set up these things. Once I've done it, I write down my instructions on what to do so, “Okay. User relationships, use the relationship on the contextual folders for the node ID.” That kind of stuff. Then if I don’t use it for a couple of weeks or a couple of months, I always forget. I just go back to my list of useful tips and find out how to do it. These are somewhat complicated things. They're not very intuitive. That's probably one of the more complicated kind of setups that we have for Views. We do this kind of View in various places. You can see it on the Track Nodes which list the courses that is using the same setup.

A little bit on improving performance. The biggest performance gain that we really got was just using Drupal 7 over Drupal 6. It has been caching of modules we use as much as possible. We have very little custom code. We only used custom code when it was absolutely needed. We try as much as possible to do everything with Views like you saw. I mean, you could write custom code to generate the blocks yourself but why do that when you Views. It does it all very well and has great caching. We actually only have eight blocks on the entire site and seven of them are actually created by Views. We have one custom block that creates the login link and it will use a profile dropdown when you're actually logged in.

Then performance-wise, for myself as the admin as the developer on the site, we were initially on SPN which is horribly slow. We managed to switch over to get the new site and it just makes my life a lot easier.

Maintenance. This one of the things where us as the admins, we're struggling a bit with handling a lot of the data and the content, dealing with certain events not happening or cancellation as I mentioned. So we created the Event Status setup, which depending on what radio button is checked, the Event Node will then automatically be published or unpublished. We do it using the Rules Module. So it will enter the value of that field and do stuff accordingly whenever the node is saved.

We gave our partners a lot more power to manage their own events. The screen show on the right is what a partner would see when they log in. They can see all their events. They can filter automatically by Confirmed and Unconfirmed which is Tentative and Cancelled events. The partners are the only ones who can see Cancelled Events because they're unpublished. We gave them bulk operations on each of these lists so they could then select the whole bunch of events and say, “Okay. All of these are cancelled.” Or, “All of these are confirmed.” As we go. We gave them also the option to override some of the stuff that's published and unpublished.

On the admin side, we use a theme called Shiny. It gives you nice big buttons. The text is a little bit bigger. It handles a lot of contract modules, like Views. It has scheming already for that just to make our life a bit easier. We could use 7, which is built in Drupal 1, but there are a few things I didn't like about it too much. Shiny just looks a lot nicer and fitted more with the front end view. The front end theme is Bootstrap. It looks a little bit like it. We can't actually use for the Bootstrap as the backend because Views does not work with it. Bootstrap requires jQuery 1.7 and the Views UI tends to break horribly if you do that with jQuery. We run jQuery update on the frontend but not for the backend.

Custom Site Module. Pretty much every site I've ever built is at least something that you want to write custom. You want to modify a couple of things, maybe tweaks to the user interface. On the admin side, override some theme functions. Field processing, that kind of stuff. You can also do some of those things in the theme layer as well, but sometimes you also just want to do in the modules so it's always ineffective regardless of the theme. So in Our Custom Site Module, we have things like collapsing the text format information. Below text areas, usually on the Drupal site, you can have a bunch of information about the text format using full HTML, those kind of things. Most of the time, people don’t really need to see that stuff as it takes up space.

I basically did essentially like a full alter and wrapped that whole little thing in a collapsed field set. Just using regular Drupal collapsible field sets. So it does it all by itself. I don’t have to write any JS or anything for that. I also added a documentation link just below that that information, so it's below the text area. That allows people who are editing the nodes if they want to add in some classes, to get some kind of an effect. Maybe to make a button or a panel or something like that. They get a link straight to Bootstrap information. They can see what classes they need to use, how they need to set up an HTML if they want to do that. That link was added in as well just to make life easier for everybody.

Then the Custom Side Module is also going to include some custom actions, which is what you saw with the partner/admin Cancelled, Confirmed, Unconfirmed events. Those actions we created and they're all in the module. Lastly, we use the module for the exportable. So Views, Rules, whatever else you want to export. All right.

That's pretty much it. If there are any questions, feel free to ask them now. I'm just going to the next slide. I'm just going to show you is, some of the modules we use that I may have not mentioned earlier. One was draggable Views. That allows our admin side people to reorder stuff in tables on our course listing views. You want to be able to reorder the courses randomly. It's easy to drag. You just look at page and drag it around. The Google Analytics EP Module allows you to add custom Google Analytics events on things. You just write a little bit of code. It's very simple AVI. You write some code and basically, you can say, “Okay. On this track, every button clicks to this button or for that link.” It will do it and automatically feed into your Google Analytics account. You'll be able to see events there of how many times people have clicked on Google and those things.

The other one, Menu Position, is for bread crumbs so you can say, “Okay. All Event Nodes should fall under the Upcoming Events menu item.” Then they get the right breadcrumbs. Just simple things like that's pretty much the main module to use for the site and use both operations obviously. That's pretty much it. Custom Modules, the Migration Module and the Toolkit Module. That's it. Any questions?

Heather James: Yes, I have a question, Dave. [Laughter]

Dave Myburgh: Sure, go for it.

Heather James: Yes. I don't know if I ever asked you. I'm curious, why did you use Views? I'm talking about the event display and the detailed information from the event, you put it over into a visual sidebar but it's obviously all the same node. Why did you use that instead of Display Suite in this case?

Dave Myburgh: Yes, a good question. I have used Display Suite on other sites and I do like it. We're only really doing something fancy on Event Nodes, so I don’t really see the need for slapping in the whole mess of things that Display Suite to do something fairly simple. If we had more content types and we needed to do more fancy stuff, yes, we could definitely switch to Display Suite to do that. Literally, this is the only content site where we were doing something like this. I did add some little JS to make this thing sticky. That was the other reason I wanted it in a sidebars so that when people are scrolling down, they'll don’t use the signup link as well.

Heather James: Right. Oh, very good. Well, another thing I wanted to know then about this issue, this choice that you're going to use, is obviously someone might hear this and think, “Oh, boy. There's like a map every time an event is loaded.” But you've obviously done some caching because it's a very speedy site.

Dave Myburgh: Yes.

Heather James: Could you show us how the caching configuration on that View?

Dave Myburgh: Literally, you don’t have to do anything. You just run it. You set up your View and it's automatically cached for you. The other thing is we use Varnish as a frontend cache. That also helps. I literally have not selected any specific caching. The default uses caching. It works fine with this setup.

Heather James: All right. Creative, cool.

Dave Myburgh: It's pretty straightforward. There's no craziness that you have to do with using Views. It's built-in cache is pretty much sufficient for everything.

Heather James: Cool. I was going to ask questions about like the use of Twitter Bootstrap and Views and then I realized; oh, we're going to actually talk about that next week. I'm really excited about that. It's made my life so much easier as well.

Dave Myburgh: Right. Yes. So yes, next week as Heather mentioned, we're going to talk about the frontend side of the site. How we used Twitter Bootstrap; how Views and Twitter Bootstrap can work together quite nicely. Grid system, responsive layout and all that kind of stuff. One of the cool things with the site and in fact, I didn’t mention it earlier is that the whole thing is pretty responsive and works really nicely on the mobile phone as well. It all works out-of-the-box for Twitter Bootstrap. You don’t have to do anything. You have to tweak a few things here and there obviously, but for the most part, it just works straight out of the box which is great saving me a little pain and something.

Heather James: Yes, and it all comes free. There's so much stuff that comes free with the Twitter Bootstrap. It's kind of shocking.

Dave Myburgh: Yes. I mean, all these buttons are just bootstrap classes. This little popup that you see in the black, that's just a bootstrap thing. There's a lot less coding and customization that you have to do with Bootstrap.

Heather James: Brilliant. Oh, gosh. I'm actually amazed. Hanna, are there any other questions from the audience?

Moderator: Yes. The first question that came in is; in pushing from SPM, did you just start with a new “get repository” or is there a tool to bring over all the history that is in SPM?

Dave Myburgh: I believe there is a way to bring SPM history across, but because the site is in Drupal 6 we didn't really bother. We didn't have a huge amount of history anyway. I literally I got the SPAM checked out and then just made that into a rule to delete the SPAM folder. It was pretty simple and then did the Drupal 7 Bootstrap on top of that to override the whole thing.

Moderator: Great. If anybody has any additional questions, can you please ask them now? Okay, I think that's it for questions. Heather and Dave, do you want to end with anything?

Heather James: Well, I just wanted to say I'm so glad that you could come in and do this presentation, Dave. The whole site is just so simple and really elegant. It's kind of funny when you're showing some of these tricks, it's like, oh, it means I didn't have to do a lot of work. I love your version of lazy [Laughter] and doing things in an easy way.

Dave Myburgh: I figure if I do things simple like that, it's actually going to save me a lot of time and you guys didn't have to come back and say, “Oh, wait. We need this fixing. We need to do this.” It's pretty much all done automatically.

Heather James: Yes, thanks. I'm looking forward to next week, too.

Moderator: Great.

Dave Myburgh: Yes, thanks everyone for listening.

Moderator: Yes. Thank you everyone for attending and thank you, Dave and Heather. Dave especially for the wonderful presentation. We can't wait until next week. The slides and the recording of the webinar will be posted on the website in the next 24 hours and we'll also email you a copy. Thanks so much everyone.

Dave Myburgh: Thanks, bye.

Heather James: Okay, bye.

Get Certified: Acquia Certification Program [March 26, 2014]

Click to see video transcript


Moderator: …seminar is Get Certified: Acquia Certification Program with speakers Peter Manijak who is the Certified Program Lead for this program, Ben Ortega who is the Director of Learning Services here at Acquia and Heather James, who is the Manager of Learning Services here at Acquia. We’re really excited to have all three of them on the call today so thanks very much for taking time out of your day. Peter, you’re all set to start.

Peter Manijak: Okay, thank you very much. We are going to start off with introductions and actually, at this point in time, I was hoping that Ben would introduce himself first, and then Heather, and then myself.

Ben Ortega: Alright. Hello everybody, my name is Ben Ortega. I’m the Director of Learning Services here at Acquia. When I’m at play in the office, Heather, Peter, and Prasad, who you’ll learn about a little bit later this afternoon, we helped create learning programs for Acquia’s clients, our partners, as well as the community to help teams develop and deploy rich user experiences using Drupal as their web development platform. So I’m looking forward to this conversation and I’m looking forward to your questions.

Heather James: Cool. Well, I’ll introduce myself. I’m Heather James. I’m the Manager of Learning Services and I’ve been using Drupal for a while. I’ve been with Acquia for a while and so I’m really excited because I’ve been talking about certification within the community for a long time and this really is a dream come true and a plan that’s been long in the making so I’m really excited to talk to you guys about it today.

Peter Manijak: Okay. Thanks, Ben and Heather. So this is Peter Manijak and I’m thrilled to be here. I’ve been part of the team since November. Ben brought me on board to build the certification program and we announced it very recently and we’ll go through essentially the whos, whys, whats about the program. I do have some experience doing this sort of thing. I’ve got about 14 years experience launching major certification programs and I’ll tell you, this program here is one of the most exciting efforts I’ve been part of. So with that, we’re going to spend some time talking about the program, why we built it, the benefits, how we built it, exam details, what the exam is like, a sample question, and also some helpful hints along the way towards the end on how you can best succeed in taking the exam.

So moving forward, why did we build this? Essentially, we looked at the industry and the industry had a gap. Essentially a certification program was something that’s been missing for quite some time and that the timing seemed to be right or it is right now to create such a high stakes certification program. One of the things that we also want to do is we want to create creative awareness and use of Drupal and we believe that this program will do this. At the same time the certification program will provide paths for skill development. You’ll be able to figure out what you need to know along the way. When you actually are taking an exam, you’re being measured. What we want to do is we want to measure objectives, skills and knowledge that matters. That’s one of the key goals during this whole process and through any exam and that at the end of the day, this exam will matter and be of value to you. So the benefits we believe that it will absolutely establish your credibility. It will make you more visible within the marketplace. You’ll gain a formal certification in a dynamic field. We don’t have a registry just yet. We’re working on a registry so when people do obtain their certifications, they’ll be able to validate that they’ve earned them, send other people to validate their credentials as well. So we’ll make sure that this is going to be available in the near future.

So how we built it, one of the key things that we looked at, we wanted to determine the goals of the program, what is it that we wanted to do from Acquia’s standpoint, what was good for the industry, how we can - for instance, how we can raise the profile of Drupal is one of the key goals. We then conducted an audience analysis: who’s out there, how many people are out there, what would be of value if we determined the framework of the program and the roadmap? We’ll get into the roadmap that we have in place today a little bit later. Then one of the key activities is we conducted job task analysis around the key roles that we discovered were in the marketplace. Once we were able to do that, we created the exam blueprint which is available for everybody to see. So it lays out the skills, tasks and knowledge that we expect people to have to be a certified exam developer. Then we lay out also the objectives so you can see what is being tested. Of course, one of the key elements is we brought in subject matter experts from Acquia in a workshop to develop and write scenario-based questions that will measure and validate your skills and knowledge to be an Acquia-certified developer.

So with that, we have a high-stakes proctored exam in place today. It’s available on-site globally through 750 Kryterion test centers. Those are the brick and mortar test centers. We also have this test available as an online proctored test which will really expand the reach of the exam itself. We’re going to go a little bit more into detail of what that actually means so you can have some expectations if you were to take an online proctored test. It’s available at the address I’ve posted here.

So for the roadmap, right now, we have the Acquia certified developer exam. In place today, available, people are testing as we speak. The next two exams that we’re looking at, the front-end specialist and the back-end specialist, we’re looking at over the next three to six months working on those exams and having those available. There might be some opportunity for the front-end specialist exam of having the community participate in the development and we’ll be sending out more information on that. There are also other areas that we are looking at. We are looking at performance-based testing as well. So for the immediate future, we have an exam in place today announced on the press release March 20. The other two exams will be coming out. We’ll be announcing schedules as we have a better idea of when they’ll be available.

So for exam details, the exam is $250.00. It’s 60 multiple choice, multiple answer questions. You get 90 minutes and the pass/fail mark is 65%. Again there’s more information on the exam blueprint, the exam objectives. They give you just more information about the exam, how to prepare, what you’ll need to know. For instance, there’s information that tells you which domains the test is actually covering. You can see web concepts, site building, front end, back end. It gives you the percentages of how much is covered within each exam. One of the things that we look at in terms of the developer that we feel that they should know all these areas. This will enhance their skill sets and their ability to work within teams. So that was one of the key driving points when we created and conceptualized this exam. Put together a sample question just so you have an idea of what to expect. The test itself is primarily scenario-based questions. Literally almost all questions are scenario-based. So there are no memorization type questions. We’re asking you to be able to understand a scenario and use your real world knowledge in order to answer these questions. Then you’ll have a choice of options to answer from. Sometimes you’ll be asked to select two out of four or three out of five as well as the one out of four scenarios. The whole idea we wanted to show you was the type of question that you could expect within the exam.

The exam is available today. There is a follow up webinar and I think we’ll have more information on that. What I also want to do is give you some helpful hints. If you are going to register, which we hope you will be doing in Kryterion, do not use Chrome. That could cause you some problems. Use a browser such as IE, Firefox, and Safari. Also, don’t use a second monitor if you’re going to be taking the online proctored test. They don’t like having that in place and they’ll stop your test. There’s also Sentinel software that you’ll need to install when you take the online proctored exam. It’s not a problem to take it off once you’ve completed your exam but it does take a few minutes to set up. You’ll need 24 hours in advance to set up your exam whether or not you take it at a facility or you take it online. We highly recommend you find a quiet place to take the exam. Also, please be aware, you are being monitored. So if something does happen, a proctor will pop in and I know that can be disconcerting but the key is be prepared, use the restroom before you go and sit down to take your exam if you’re taking an online exam. Make sure you are hydrated as well. Be ready to use that full 90 minutes to take the exam.

Some other hints. Just that when you’re taking an exam is that we would highly recommend that you trust your first answer. It’s usually the right one. The one thing that we’ve also seen is that people who are very knowledgeable tend to overthink the question. These are not trick questions. We aim to be fair all the time. We want you to take the questions at face value. If you think it’s the right answer, don’t overthink it. It usually is. The other thing, too, is that you may want to save the longer questions to the end. That’s just a good practice for test-taking just to push it off. That way, you can focus on the answers that take less time. Then, let’s see what we have here next. We have a great webinar with Prasad to help you prepare even better for the exam. I know that I went very fast so I’m guessing there might be a lot of questions and also an opportunity for Heather and Ben to add what they like.

Moderator: Okay, we can open it up for questions and Heather, do you have anything that you want to add in before we did that?

Heather James: One thing I was amazed about just through the process of watching this get pulled together and all the subject matter experts being pulled in is just the amount of – I mean, just how difficult it was actually to come up with these scenarios. I appreciate it now so much more. You’re seeing people coming in with a feedback. They see that, “Oh, yes, you can’t actually just cram for this.” How did you know that this was going to work, Peter? I know you’ve got many years experience in this but why do scenario-based questions work over rote memorization questions?

Peter Manijak: Well, the key part that when you have all the experts together and you have an opportunity for them to hash through what are the pain points and the like. What we do in a very systematic manner is once we’ve established the objectives, we make sure that the questions themselves are congruent, they’re technically accurate, they’re relevant. Those are the three key things that we look at. Does the question matter? If someone could answer it, then that’s great. I guess the question we ask is so what? So what if someone knows this? So we go through this process, “Does this matter?” So it all comes down to “Does this matter for someone doing this job?” So we’re asking people to be able to put two and two together and some [Audio Gap] two and four together to be able to think through the answer. Much different than just memorizing if something is red or green or blue or how many pins or a number that they’d have to remember. What we want them to be able to do is think through the problem with the question at hand and come up with the answer. So it really starts with the subject matter experts being able to identify what really matters and tie it to the objectives. At the end of the day, if you have 60 of those questions, we feel very good that we validated your skills and knowledge as a developer.

Heather James: Definitely. It sounds – sorry. Go ahead.

Peter Manijak: [Crosstalk] okay for it?

Heather James: What’s that?

Peter Manijak: Did that answer your question?

Heather James: Yes, definitely. I feel like I just have so much respect now for your experience and the process. It’s been amazing to see it get put together. I think that if people hear that and understand that that’s what the exam is like, I think they’ll be attracted to take it because developers are problem-solvers and there are 60 interesting problems that are truly challenging. I think people will find it – I know it’s probably strange to say this but fun in a fun, challenging sort of way. So I hope that people take that attitude about it rather than being so scared about it, I suppose. So I wonder, Hannah, are there any questions coming in?

Moderator: Yes. We had quite a few questions come in. The first is is the base ACD a precursor to the specialist exams? So is the Acquia Certified Developer a precursor to the specialist exam?

Heather James: I think they’re a requirement. Oh, yes, you go ahead, Peter. You know that.

Peter Manijak: Yes. We are definitely looking at it to be a prerequisite for the specialist exams. However, when we start delving in into more details around the exam, the exam objectives, and what the goals will be, we may not require it but I think at this point in time, we’re leaning heavily for it to be a prerequisite at this time but the official announcement won’t come out for a couple of months but I would anticipate that it probably would end up being a prerequisite. It may not be a prerequisite for all the exams further down the road but for these two, we feel at this point in time, it’s probably going to be most appropriate to be a prerequisite.

Moderator: Okay. The next question is will you have training classes to prepare for the exam?

Peter Manijak: Yes, absolutely. There’s also material that we list and post on the exam blueprint of the training that they can take but we are in the process of putting together supporting training for this particular exam. So you’ll be looking out for announcements on that as well, I hope.

Moderator: Awesome. The next question is, “I’m a site builder exclusively so I’m strong on Domain 1 and 2 but only sporadically touched Domain 3 and 4. What should I do?”

Peter Manijak: Well, what we try to do is we try to hit the sweet spot for all roles that we feel that you should know a fair amount within each of these sections. We put the pass/fail rate at 65% so what we would like you to see is to increase your knowledge in the areas where you’re weak in and we can help you boost your skills and knowledge level up. I believe that you’ll be able to pass it with some additional training to leverage the deep experience you have in your area of specialty. Then the other thing too is we are – and by the way, this is unofficial but we are looking at a site builder specialist certification as well but that’s not in the office roadmap just yet.

Heather James: Yes, definitely. I’m very excited about that one because there’s so many specialists within the Drupal community and have in-depth knowledge that even say, a front-end specialist wouldn’t know and these site builder specialists will know so much about major ecosystem modules and the contributed modules which we couldn’t really include in this exam and I think that a site builder exam would be very interesting to dig into because you’re talking about when is it appropriate to use various ecosystem modules and what’s the right layout tool or those types of things. So it would be very exciting to put that together. I’m very, very hopeful.

Peter Manijak: Yes, and keep in mind that we set the pass/fail mark at 65%. So we’re not asking people to score a 95 or 100. So we are expecting them to miss certain areas and certain sections. We expect people to be stronger in one area than the other. So hopefully, with a little bit of instruction and a little bit more stick time, you will be able to pass the exam without a problem.

Moderator: Great. We had a couple other questions come in. How long will the certification be valid?

Peter Manijak: Well, what we did is we date-stamped your certification. So you’ll get a logo that says “2014.” So it will always be your credential. It’s just that 10 years from now, if you’re still saying you have the 2014 credential, that may or may not be a good thing. Essentially, we probably would expect within the partner programs to have to recertify every two years. Again, this is part of the partner rules and partner requirements and the channel programs that will be coming out. As with anything, if you are up to date and want to recertify and get your credential in 2015 or 2016, it will be date-stamped as well. The marketplace should be able to recognize it.

Moderator: Okay. The next question is how many times are you allowed to take the exam? Say you don’t pass it the first time, are you allowed to take it again?

Peter Manijak: Well, we didn’t put any restrictions on it but we do flag it if someone has failed three times, that we’ll probably reach out to them. That’s for a variety of reasons but what we do have in place today is if you do not pass the exam on your first attempt, we put a cooling off period of 14 days before you can attempt it again. The only other exception that we would do is if we do an event where we’re hosting the event and we’re having the exams taken at the event and we spent some time with you and spent some time maybe chalk talking and doing some coaching with you. If we feel that you’re ready to retake the test, we as a program office will waive the 14-day period. We really tend to want people to have a cooling off period. I’ve seen people at events where they take the exam and then they go back two hours later. They think they’re ready and they do worse. Then I’ve also seen it where we spend time with people and we chalk talk them and go through the points that they just need to get over the hump and they go back there and they make it. But we’d like to be in person with them before we waive any sort of 14-day waiting period.

Moderator: Great. The next question is what other exams are you considering besides the back-end and front-end specialist?

Peter Manijak: We are indeed looking at site builders very, very hard. We feel that that is a credential that could be very well in demand. The other one that we’re looking at is the architect exam. Now, we’re looking at that being a potential performance based test where we’re going to ask you to do a certain amount of activities. We’ll give you some problems to work on and basically we’re going to ask you to execute and perform. One of the things that we’re looking at is automated scoring so we’ll be able to scale up that program. So instead of people having to come in to Burlington or whatever sites that we’re going to have for in-person performance-based testing, we’re looking at creating an environment where we can do some automated scoring from remote testing. So that’s the exciting thing that we’re definitely looking at. So the architect exam, that’s a little further down the road. The site builder one, I think, could be sooner than we think right now. Right now, it’s not immediately on the roadmap but that’s something we’re looking at. We’re also looking at some lower level qualification type exams, not high stakes, more foundational, people just entering into that marketplace just something to get them going but for now…

Heather James: I think that’s what’s interesting is it would be for people in non-technical roles. So this may be people in project management roles, people in the technical sales role maybe who are just new to Drupal and that sort of foundation qualification role. Just make sure they’ve established that they understand Drupal, the community, how the software works, et cetera.

Moderator: Great.

Peter Manijak: Right. The thing is when we picked this particular exam, we thought this was the sweet spot for the technical audiences to get started with. I hope that answered your question.

Moderator: Yes. Going on to the next question, “Is every exam the same or is there a pool of questions and dynamically changing the test?”

Peter Manijak: This will evolve on a per test basis but the exams will be changing, will be updating. There will be multiple forms as time rolls out. So depending on how each exam gets rolled out, some might come out what are called “Multiple forms.” Some might be a single form for the first month or two and then updated and added in other forms so it’s a fairly dynamic process.

Moderator: Okay. The next question is, “Does one maintain credential by retesting or participating in other activities?”

Peter Manijak: Well, that’s part of what we want to look at in terms of recertification but for right now, we’re looking at a retest. I know that we can look into – we’re essentially gaining credits by attending or participating in other events and so we can look at that but it usually comes down to retesting.

Moderator: Great. The next question is, “Is this certified for a certain Drupal version? If so, do we need to take every time a new version comes out, for example, Drupal 7, Drupal 8 and et cetera?

Peter Manijak: Yes, that’s a great question. This particular one focused on Core Drupal 7 and depending on what your role is, you might be set with staying with Drupal 7. For instance, if you’re in a support role that’s supporting Drupal 7, the Drupal 7 customers, and so you may not have a need to go to Drupal 8 or maybe not right away. As we look at the program, long-term, we certainly see some exams going from Drupal 7-centric or focus to Drupal 8. There are other exams where simply because of the type and nature of exam, it may not be necessary for you or for us to develop an exam per version. That could essentially lend itself to the architect exam where we feel that if you are an architect and you’re able to execute and perform on the exam, that you essentially validated your skills and knowledge as an architect and - but we probably then would just be recommending training to take for new products or new versions but at this point in time, we’d have to work out a case by case basis with the channel or partner programs for requirements. Does that make sense with everybody I hope?

Heather James: Yes.

Moderator: Okay. The next question is, “Have Dries and Angela passed these tests?” [Laughter]

Ben Ortega: I’m happy to take that one. So Angie Byron, you can go to her web blog at webchick.net and she had just posted her results and she has successfully passed the exam. Her blog post actually gives a lot of really great information around how to prepare and what she went through. It would be a great reference point for anyone online who’s considering taking the exam. I would certainly recommend you go there and view that page and see what she went through as she describes her experience of taking the exam. She has certainly successfully passed and Dries, as you know, is our founder and Chief Technology Officer who’s all over the world doing all kinds of crazy things for the community and for Acquia. He has not had the opportunity yet to sit down for the two hours that we grant – or the 90 minutes that we grant for him to take the exams. I can tell you that there is an internal pool going right now for when he’ll take it and what his score will be. So we’re all very anxious to get him to sit down and do that. When he does, I’m sure he’ll blog about it and everyone in the community will be able to see it.

Moderator: Great. We have a lot more questions coming in. Will you only be testing on Core Drupal or also on contributed modules?

Peter Manijak: For this particular exam, we focused on Core Drupal. That may change but right now, we’re trying to stay with Core Drupal.

Moderator: Great. The next question is how do other people verify a certification?

Ben Ortega: Yes, so I’ll answer that one. Our plans are to build a directory that anyone can visit on Acquia.com to verify whether someone is certified or not. The plan is to give those that have been credentialed with the Acquia certification an opportunity to post their profile. We’ll initially build it so that way, it’s validated through the program office that they have successfully passed the exam. Once that’s been built, then they’ll have an opportunity to build out their profile a little bit more. We have some early thoughts about allowing those that are certified to build out some sort of like a portfolio so they can show some of their previous work and help them as they make use of earnings that is gives them credential as a certified developer. That’s in our plans and that’s certainly something that will be coming.

Moderator: Great. How long between taking the test and the notification of the status if you passed?

Peter Manijak: Well, you do get an email if you take it online immediately. It gives you your section report and your overall score and if you go to a test center, you get a printout as well. So you do know immediately.

Moderator: Great. We pass…

Peter Manijak: It will take you two to three weeks to get your credential via email and the logo that you’ll be able to use and display. The logo is for an individual. It’s not for a company use. It’s for an individual to use. However, a company can declare that they have multiple Acquia-certified developers. Does that make sense?

Moderator: Yes. Alright, we’ve had a lot of questions on sample questions and training and I think, Heather, this is a great time for you to talk about the next webinar coming up with Prasad.

Heather James: Oh, yes, that’s actually going to be fantastic because Prasad’s actually taken it so many times [Laughter]. He’s actually obviously involved in preparing the blueprints and as part of the workshops that we did to write the questions, but he also took the exam at a test center. He took it proctored. He knows what it’s like to take the exams and he is going to talk about preparing for the exam. He’s a curriculum developer with us and he’s also involved in training so he really has a great insight into how to help people and we’ve really came to hear about your question and what you're wondering. That’s going to be on April 23 and that’ll be at 11:00 Eastern time and I’m not sure what time in Europe, actually because of the time zone difference but - [Laughter] excuse me, because of the time change. That should be very useful and especially if you have any questions about this, about the exam.

Moderator: Great. So I think that’s it for questions. Does anybody else want to end with anything, Ben or Heather or Peter?

Heather James: Well, actually, I had a question come through. It was interesting. It didn’t come through the Q&A. I think it came through the chat. Some asked, “How do you distinguish between a themer, site builder and developers?” So actually, the way we went about this is we started last year doing research, talking to our partners and our clients actually and tried to understand how teams were built – what are the typical teams and what are the size of the teams and what’s the makeup of these teams, who’s actually building the websites? So we saw some common patterns in small and large teams. We saw things that surprised me. I learned that a themer is like a pink elephant. [Laughter] It doesn’t seem to exist. It actually turns out there are different job titles and they don’t necessarily match up to the rules that people have on the team. So someone could be acting as a themer and be the front-end developer or it could be the junior developer or it could be the senior architect and they are maybe acting as a themer on any role or sorry, on any team at any time. So what this helped us do was to make a determination about the types of skills that were required. We couldn’t tightly tie the exams to specific job titles and descriptions. What we tried to do with this first one, was look at what was the absolute required skill set if you had even a small team. If you had someone like this on your team, you could be successful. So you can actually look at that research prepared and published at the end of last year on how to build a great triple team and it’s there – you can download it as an e-book, read them as blog posts and it should give you a really good idea of the pathways to building this. When I did the research, one of the final topics I was looking at was evaluation, and how do you evaluate candidates. It really impressed upon me from two sides. First of all, that there is a huge struggle for people who are evaluating candidates that didn’t know if they weren’t familiar with the software, if they weren’t familiar with the community. We could bring them to someone’s community profile and talk to them about how to look at a Drupal data profile and they have even a tutorial online how to do that. Yet there are so many people, it turns out, as individuals, they don’t have the time, the luxury of time as it turns out to be able to commit. I know we all want people to be committing but it actually – what I learned is that there are a lot of people for whom making a public profile is impossible through their job or circumstance and that actually is very limiting. I really felt quite passionate about the idea that we could provide people with a chance especially with this first certification if someone is a junior developer to get a leg up and to demonstrate their skills and knowledge. I think that we don’t really know the effect right not but I’m very excited about it. So yes, we answered the question about distinguishing between those different roles but they are, like I said, there are things that we validated out in the wild. If you want to know how we did that, that’s available online.

There was another – oh sorry. Go on. Oh, I think there was another question but it was about taking the exam again without paying but I think you do have to pay. So I don’t know if we’ve missed anything else.

Moderator: No, I think that’s it.

Ben Ortega: No. Yes. I just want to let everyone know that we’re really, really excited about the program and the exam. We’ve received some really great feedback and it’s something that we’re very committed about going forward and I think you can hear that in some of our comments here about the plans moving forward for additional exams around different areas within Drupal, moving into performance-based and all we’re trying to do is just create a program that allows those that use Drupal, those that hire Drupalists to really find the talent that they need to be successful when they build out their web experiences. I believe that Acquia and the certification program are doing that. We’re looking forward to working with everybody as well as the community in furthering the program. So if you guys have any questions about the program that you weren’t able to get answers here, or you want to take off-line with us, by all means, you can reach us at certification@acquia.com and I will get back to you as soon as we can.

Moderator: Great. Thanks everyone for attending and thanks, Ben, Peter, and Heather for the great presentation. Again, slides and recording will be posted to our website in the next 24 hours and we’ll also email you out a copy so you’ll have that. Thanks, everyone. Have a good afternoon.

Ben Ortega: Thank you.

Peter Manijak: Thank you.

Announcing Acquia Lift: Faster Delivery of Hyper-Personal Digital Experiences [March 20, 2014]

Pages