Accomplishing Your Marketing Goals with Drupal 8 [May 6, 2014]
Accomplishing Your Marketing Goals with Drupal 8 [May 6, 2014]
Want to learn more about Acquia’s products, services, and happenings in the Drupal Community? Visit our site: http://bit.ly/yLaHO5.
While the trend of accessing information through different devices is still rising, 70% of surveyed enterprises believe providing the optimal experience across all devices is still a major challenge.
Drupal 8 is designed from the ground up with this new mobile trend in mind. It allows marketers to easily create content that can be built with responsive designs to optimize the experience for mobile devices. Ultimately, Drupal 8 helps to increase your marketing ROI by allowing you to accomplish more with less time.
In this webinar you will learn:
• Quick overview of the challenges and opportunities in Mobile
• How you can benefit from the new Mobile experience
• Why your marketers and administrators will love the new Content Authoring (editing posts is faster than ever)
Hannah Corey: Today’s webinar is Accomplishing Your Marketing Goals with Drupal 8. We’re really excited for this webinar, and we want to thank Appnovation for co-hosting it with us. The presenters today are Jonathan Whang who’s the Lead Developer at Appnovation and Kris Vanderwater who’s a Developer Evangelist here at Acquia. We’re really excited for both of them to take time out of their day today.
Jonathan Whang: Okay. Hi everybody. My name is Jonathan Whang, and I’m a Lead Developer with Appnovation Technologies. Appnovation is one of the world’s leading open source development shops with over 150 clients and having delivered nearly 400 projects since our inception. We have six offices in total and each location and the headquarters are in Vancouver BC, with our US operations run out of Atlanta and our EMEA operations run from London, UK. Through these offices, we have been able to serve companies around the world. Some of the technologies we use and solutions we provide include Drupal, Alfresco, SproutCore, HTML5, Mobile Apps, MuleSoft, Jaspersoft, MongoDB, Hadoop, and various e-commerce solutions. Some of our more notable clients include the NBC Universal, Intel, Pfizer, the NBA, Google, Fox News, American Express, Reebok, Samsung and also the US Department of Defense. We have a very strong partner relationship, and Appnovation is the only company in the world that is both an Enterprise Select Acquia partner, MuleSoft partner and a Platinum Alfresco partner. Just to give you guys an outline of what we will be discussing today, we will be talking about how Drupal 8 is different from Drupal 7, and how these will help achieve your marketing goals. So, the three main points we are going to discuss today are Web Services in Core, and What You See Is What You Get Editor in Core, and some New Functionality. With that I’m going to pass you over to Kris, and he’s going to talk about the Web Services in Core.
Kris Vanderwater: Thanks. Very quickly, I’ll just tell you a little bit about myself so you know who’s talking to you. I’m Kris Vanderwater. I am Acquia’s new Developer Evangelist. I was actually one of the initiative owners for Drupal 8 and have worked very heavily in blocks and lay ups and a number of other areas in Drupal 8. Just to help push things forward there, you can’t do much in Drupal Core without putting your hands dirty everywhere. I’ve done quite a bit of web services work during my time at various other companies that I’ve worked for and with that I’m just going to take you through some of the things that you’re likely to see from a web services perspective in Drupal 8.
First, I just wanted to talk for a minute about some of the problems that Drupal 8 is trying to address. During his Keynote at DrupalCon Portland, Dries presented a slide that indicated that 70% of respondents in a large survey told that providing an optimal experience across all screen sizes and devices was a source of major, major difficulty. Of those survey, only 11% of their organization had actually embraced a “mobile first” solution, and 33% of those wants the “responsive design” features in their CMS immediately. This is of course very relevant to marketing. A large number of devices and screen sizes means that catering to your site to everyone is harder than ever and your message could be lost simply because of the device only shows with you and your site. Now, a good responsive design solution that embrace the version include the differences in devices and allow you to communicate more clearly based upon the device that someone’s using. Drupal 8 is actually taking great strides toward this goal. It’s prioritized the need for the Drupal browsing in a number of different way, including a dedication to a mobile first browsing solution. Today we’ll be giving you a peek into how the solution that reference these issues beyond just its mobile first focus, and so that would be booked into web services. Web services is normally a dry topic, but I’m going to quickly give you upfront foundations about what we’re going to talk about here. Out of the Drupal 7, web services have been available to us for quite some time. This is especially helpful when we consider any interaction with a third-party system, such as another website or a native mobile application. Leveraging web services is really the go-to solution for this problem space. Scripturally in Drupal 7, there were a number of problems with this. Primarily the most major problem was the Drupal 7’s route handling wasn’t built with this in mind. This is a technical way to say that D8 modules have to spend an awful lot of time and effort hacking around what Drupal was trying to provide by people. So, they created a number of different solutions that would basically work but the best practice is that the world at large is following weren’t necessarily being followed in Drupal 7. To this end, most common solution in Drupal 7 was actually to leverage the services module, and now Services is really great module but it has a couple of drawbacks, and primarily in a [audio gap] developers needed to create any sort of custom, what we call entities or data storage mechanism. They would have to create an awful lot of additional codes just to do any communication with a third-party app or another website. This of course meant more work for your developers over a longer period of time and likely would result in ongoing troubleshooting as well. In an effort to remedy this, many attempts were made in Drupal 7 to do entity generic services. This ultimately emerged as a really powerful pattern, but it took a long time for Drupal 7’s cycle to probably establish this pattern.
Now moving forward to Drupal 8, it’s embraced this approach that was ultimately achieved in Drupal 7 since day one. Another two different types of speed and we’re only going to really talk about one of them here. It’s what we referred to generically as consent entities. Is there anything that you can add a field to? If you’ve ever actually worked with Drupal 8 and seen nodes you can add additional fields to, you have an idea of what it is that I’m talking about here. This could be things like nodes or users, comments. If you’ve ever worked with Drupal Commerce, maybe products, line items, orders, all those sorts of things that you really are the very powerful Core of Drupal. These entities come out of the box. can be activated per entity and for those of you who are not familiar with this approach, this is really just a general way for you to communicate externally about this data. Very, very powerful, again, for any sort of third-party application and useful for maybe the iPhone or an Android phone, something along those lines.
To this end, Drupal’s invested very heavily in various types of data serialization. Now, this is a really technical topic, and I’m not going to talk about it. Suffices to say that your developers will really appreciate the effort that got into this because it means that your data can be passed around and the format that will work per situation. What we like to call “CRUD” within the industry, which stands for Create, Read, Update or Delete is also a basic part of the entity services that have gone into Drupal 8. This will give your developers a really robust framework from which to begin working. That’s going to dramatically reduce the amount of troubleshooting that they’re probably going to need to do for custom entity types and allow them to really focus in on building an API that works for your specific use case. When we begin talking about building a third-party solution in a native application, focusing in on what the API should really look like is really where your developers should be spending their time, and it’s ultimately what’s trying to give your application the best foot forward and be able to communicate with your target market more quickly, more accurately and more relevant. So with that, we’re going to be talking a little bit about – I guess I actually covered this slide. [Laughter] In short, it’s just going to make your life a whole lot easier in terms of really getting your product out there and communicating with your audience. With that, I’m actually going to hand it back over to Jonathan.
Jonathan Whang: All right. Thanks, Kris. Now, what I’m going to talk about is the functionality which we refer to as “WYSIWYG” or What You See Is What You Get and how that is now packaged in Drupal 8 Core. Just in case we’re trying to stay away from being too technical on this webinar. The What You See Is What You Get is just the editor for large text areas that allow content administrators or site users who have access to create content. They have the ability to upload images and post hyperlinks and big snippets of text and do formatting with the text area to have it show up the way they would prefer it to show up when they’re looking at HTML. That’s why the term “What You See Is What You Get” was coined. What we are used to within the Drupal 7 world is after the latter stages of Drupal 7, there has been a consolidated WYSIWYG contributed module that was developed. The module itself served as the backbone for WYSIWYG implementation, and it could support all the other plugins that allow users to select from different flavors of the actual editor and some of these plugins are CKEditor, FCKeditor, jWYSIWYG, NicEdit, TinyMCE, YUI Editor and if this doesn’t really sound familiar to you, then it’s likely because some of these plugins aren’t very popular because they don’t work very well. Actually, CKEditor had gone on and produced their own standalone module that some sites would use where they don’t like the flexibility of the actual global WYSIWYG module. Some of the benefits of this is - it is highly configurable. So, each editor can have its own settings and you can choose what buttons would show up. If you refer to the slide and the area that is encased in the red border is the sample of what the tool bar would like customized. So, you could pick what kind of button shows up there. Think of it as like a Microsoft Word toolbar, which gives you things like bullet points and lists. Also, each text format that you would create – so text formats are customizable within Drupal. If you create that, then they can have their own editor. So, different fields would look different based on configurations of a site. This is what it is in Drupal 7 and if you guys have used Drupal 7 sites, then you would know how it works.
Some small issues with the current implementation: downloading the module, getting the editor plugin library setup with all the correct files and the latest versions and configuring all of the settings that each plugin needs takes time. Each plugin also has settings along with - the text format also has settings. A drawback to being super configurable is it also takes time to actually get up and running because once you put in the plugin and the module, it comes with bare-boned settings. It assumes that it starts off empty and you’ll have to configure it with the things that you want. Another problem we found is throughout usage of the WSYIWYG module for all the sites that we’ve been delivering is certain pieces of the WYSIWYG are inconsistent. Of course, it comes out looking like a paragraph with line breaks and bullet points and bold here and there when you’re configuring it within the text editor, but the moment you save the node and look at it on the node view page, it starts looking funny. Most of the time, it’s because the WYSIWYG was misconfigured but again, some of it also attributes to the incompatibility between the plugin and the actual core module.
Also, image upload has been inconsistent. At the beginning of Drupal 7 from what I remember was that not all of the plugins would support very clean image uploading. I believe now the CKEditor does it, but doesn’t really do it very well and you don’t have much control over where the image goes and if it’s right aligned, it doesn’t show up as right aligned after the node is saved. These are some of the issues that we would run into, especially if you are a builder of Drupal sites. With Drupal 8, now they decided that the page – because pretty much every site has a page node and we’d like to ship the WYSIWYG within the core distribution. So, they decided because I believe CKEditor was the one that was more flushed out and stable that they decided to put the CKEditor plugin directly into Core. So, it is pre-configured with four text formats, and the way that it’s set up is actually easier to understand than in Drupal 7. They have updated the interface for configuring the editor toolbar. It looks really slick and image upload support has been basically finalized, and it’s really stable even at this stage of Drupal 8. That is the WYSIWYG and Core. That’s the change that they made.
What does this mean for marketers really? The number one users for the WYSIWYG portion of a site end up being the end client, and so non-technical staff will find it easier to use with the current WYSIWYG implementation in Drupal 8. You’ll get less calls to the IT department saying, “How come this paragraph doesn’t look the way I want it to?” It does save time on site development and having site builders have to choose between different WYSIWYGs providers and they might not have experience with other plugins, but if the client sees that and they prefer that then the site developer might have a hard time with configuring the preference of the client. The unified WYSIWYG interface would mean that everyone basically is forced to use the standard. It does work right out of the box so there really isn’t much reason to switch to other plugins, which is still yet to be seen if other plugins will adopt a Drupal 8 support. If it’s consistent output for right when the site gets set up like you could set up Drupal 8 and right out of the box just have a plain page node and start like a simple blog site, then the WYSIWYG configuration works right out of the box without having to configure anything. We will have a demo at the tail end of this presentation to show you how the current WYSIWYG editor works.
Onto the new functionality that we chose to discuss for this webinar that we feel applies most to the marketing side of things. The new functionality for Drupal 8 is the in-line field editing. What this does is it gives users the ability to edit nodes directly on the view page. What that means is when you’re looking at an article and if you have permissions to make edits to content and also, you can configure this in the back end of Drupal. You can actually go in and without having to go to the edit form, you would be able to in-line edit the text and the field values right from the node view page. It has the access restriction configuration out of the box, so if you guys have dealt with configuring that huge permissions screen or form, there is already setting there to allow you to setup which roles have access to do the in-line editing. The interface is super clean and really slick and again, you’ll get to see this in the demo. It works for all content types. If you create a custom content type – so it’s not restricted to just the page node. If you create custom content types like a Wiki, or things like that, this in-line editing functionality will be available to your content type as long as it uses the field API.
So, why is that important? Well, it allows for easier access to modify content and it does reduce the clutter of the previous Drupal 7 administrative interface, so certain people will be less onto the form site or the administrative theming of Drupal. You will really just modify the content right when you’re looking at it. It also allows for ease of use on mobile, and so that ties in with like the mobile initiative of Drupal 8.
With that being said, I think we’ll move on to the demo portion where I can show you the WYSIWYG in action and the in-line editing in action. I’ll have to share my screen. In my screen, I have a Sandbox Drupal 8 installation on my machine, and this is an example of a page node that I’ve created and I just named it “First test page” and it’s full of lorem texts. So, I’m going to show you the WYSIWYG in action. If I go into edit this page node – I’m sorry. I should first take you to the configuration that it looks like out of the box. Under the administrative form, you’ll notice that this is already pre-configured for you the moment you turn on Drupal 8. Like you installed Drupal 8 and this is what it’ll look like. There’s nothing else to be done here. You don’t have to configure anything, and the roles are standard. It means basic HTML versus restricted HTML, so this is the more open text format versus where you’re allowed to restrict HTML and this one is every HTML possible and then there’s just plain text which has security issues but that’s a different discussion. All of this configuration is out of the box and you don’t have to do anything to it the moment you install Drupal which is great for site builders. So, this is what the WYSIWYG looks like without being configured to add any buttons in it, and you’ll notice it’s identical to the screenshot on the slide that I did show earlier. I’m going to take you through – I’ll increase this. So, what I have is an example, I’m going to add some text here. Right. It’s easy enough to say this is basically – the idea is it’s supposed to be easy for you to create content this way and you would copy and paste directly from Word into this. This indent here is an example of blocked quote and I’ve just made this bold, so I’m going to go down here and just go save. So the WYSIWYG, it looks exactly the way you’ve typed it in, which is how it should be working in the first place. This is an example of having the list items and a link to an external site. The configuration for the WYSIWYG, I’m going to take you through that for basic HTML. Now, you’ll notice the interface for this is much cleaner and if your clients – you’ve been given access to modify this directly by your site builders, then you’ll know that the previous way was this huge form with a whole bunch of check boxes that you would need to check. You’d have to know what they all meant in order to be able to configure the toolbar. Wherein in this case, you have the items right here and they tried to make it look like a Microsoft Word toolbar. So if you wanted to put things in like cut, then you would just drag this into, let’s say one of the groups. Let’s put that there and that’s what the interface looks like for configuring the toolbar. It’s a lot cleaner and it’s easier to use for non-technical users. I love it too even being a developer because it’s just really slick. So, that’s the WYSIWYG editor in Core and again, this is everything you get the moment you install Drupal 8. There is no need to re-configure this at all and it just works.
I’m going to take you back to my sample page node, and I’m going to demo the in-line editing. You’ll notice when you hover over the body text of the page, there’s going to be this little pencil, it looks like right at the top right-hand corner. Mind you, I am logged in as an administrator who has permissions to do this. That won’t always show up. Right now with the black toolbar, you can notice I am an administrator with privileges. This will show up, and I will just click Quick Edit. Now, you notice there’s this fancy little pop-up that shows up, which outlines which field I’m on. If I click into the field, then notice how the WYSIWYG also pops up. I’m going to, let’s say delete all of this text that I put in because that’s just cluttered, and I’m going to let’s say, make this a italicized, and I’m going to click save. So voila. No need to go into that administrative form, the WYSIWYG does show up in the in-line editor. You could still make use of that even from this site, and it’s a lot quicker to do text edits when you’re browsing through a site. Imagine the usability of this when you’re trying to comb through a whole bunch of forums or a listing of blog posts. You wouldn’t have to go in to each blog post edit form and make your changes if all you’re doing is just checking copy and checking spelling or fixing formatting. This also works for a custom field. Notice I have a different field down here, sample text field. If I click the Quick Edit, and I go in and notice how it says, “Sample text field” as my field now instead of the body. I’m going to say, “Hello again, everyone” and save. It does update that field. So it’s really slick. This allows users to basically have an easier time curating their content and no need for technical and again, all of this stuff works right out of the box. I believe I did miss the image, uploading an image. This is the image uploading for the WYSIWYG. Notice how a lot of this configuration comes out of the box. [Pause] You can add the alternative text in-line. Say, this is the demo. Specify your image height to 200 by 200 and say it’s left-aligned. That’s what it’ll look like and if you notice how it pushes all the text over - because it’s left-aligned. It pushed all the texts over and it’s left-aligned and the image is right there to where you decided to put it. So, it looks just like really when you upload, and it lets you do changes to it. I think that’s going to be it.
I guess in conclusion, this webinar was supposed to introduce people to the benefits of using Drupal 8 and how it applies to – some of the functionality of Drupal 8 would apply to having marketing initiatives. It will allow you to access a wider market because it makes things easier to curate for non-technical users. It does lower the cost to configure certain sites because a lot of the functionality that we find that are common to projects that clients come to us with are already being rolled into just the Core Drupal installation. Also, they have made an emphasis on cleaning up the administration side of Drupal because they wanted to make it as friendly as possible for people to be able to manage their site without having to always call their developer or their IT people, because right now, all the rage is mobile. We tried to ensure that Drupal 8 does accommodate for having mobile as the number one priority in terms of some of the clients’ requirements. I’m going to pass it back to Hannah.
Hannah Corey: Sure. If anybody has any questions could you please ask them now. I know a couple of comments. We can jump right into those. The first question is, can you talk about performance? I’ve heard the services module had some pain scaling.
Jonathan Whang: [Pause] Did I speak to that?
Hannah Corey: Kris, maybe you could take a stab at that one.
Kris Vanderwater: Yes, I was talking but I think I was muted.
Hannah Corey: Oh. [Laughter]
Kris Vanderwater: Yes. One of the things about Drupal 7 and I made some allusions to this earlier, Drupal 7’s notion of what a URL looks like. It’s very different than what Drupal 8’s notion of that and how it’s handled underneath the hood. There are definitely some potential performance implications there because in terms of what it is that you’re actually serving out, you have to do Bootstrap Drupal each time and well that then used to be true in Drupal 8 as well. A lot of effort has gone into streamlining that process where possible. Now, don’t get me wrong. Drupal 8’s not faster than Drupal 7 yet, and there’s going to be a lot of effort that’s going to go into it from a performance perspective. But, I think the more important takeaway here is just that Drupal 8’s notion of what a response should look like is just very, very different. Hopefully, we can begin to leverage some better caption strategies on top of it that we could have in Drupal 7. Just speak very specifically to the issue Services might have had. I’m not going to attempt to do that because I think probably very specific to whatever the used case was at the time. Obviously, if you use a system that’s getting hundreds of thousands of requests coming across it like you might have let’s say, a third-party app that gets very popular, that’s going to be a very different situation than if you have an external API that gets to - used via handful of other services out there. So, it’s hard to really nail down exactly what that might be without knowing specifically what it was that you had heard about. But, I think the takeaway should probably just be that a lot of thought and effort has gone into what this should look like for Drupal 8. Hopefully, a lot of these situations be either remedied or have a remedy close or end by virtue of the architecture.
Hannah Corey: Great. Thanks, Kris. The next question is, can you insert images from the in-line editor?
Jonathan Whang: Yes. Whatever was on the WYSIWYG – this is Jon. Sorry. Whatever was on the WYSIWYG on the full form, shows up within the in-line editor as well. So, you can use that. When I did try and play with it, it would do the insert, but I did find some funny behavior like if you tried to right-align it, it wouldn’t go all the way to the right or sometimes push certain things to the left. Again, that’s basically a by-product of it being still within latter stages with Alpha pre-beta. So, I’m sure they’ll work out the kinks for that. But yes, you can use the in-line editor to also upload images via the WYSIWYG within the in-line editor.
Hannah Corey: Awesome. Thank you. The next question is, when you use the view source on the editor, does it keep the indentation you set or does it recognize and validate the code in some other way?
Kris Vanderwater: If you’ve used the source for – depending on the text format that you have selected obviously, it’s going to validate based on that. So, if you’re using a restricted text format – let’s say the site has you configured as the blogger user role, and they only allow you to put in p tags and span tags. You can’t go in there because you only have access to that text format, even if you do view source and try to add in image tags when you don’t have access to that or dupe tags or script tags and you don’t have access to that, then the validator will take care of it. I think that’s also a security issue that they made sure they didn’t allow any holes with that. I think they also outline within the configuration section of the Drupal 8 text formats that giving access to unrestricted HTML to certain users is a security issue. It’s not a bypass by any means but if you do know how to write code, it’ll let you put in the tags that you’re initially allowed even without writing the tags manually. But, it’ll stick to the same formatting. I believe the alignment and the margins and the padding are all a by-product of the current theme you have using. So, if it formats Ps while using the – I can’t remember off the top of my head what this theme is. The Bartik theme. Sorry. If the Ps are formatted with the Bartik theme to have margin up and down then if you put Ps in there, it’s going to use the same CSS as the theme we’re using.
Hannah Corey: Great. The next question is, I like the built-in editor. Is there a function within Drupal that identifies the user customer, example by IP address in order to serve up customized content? I think Kris, you can talk to Acquia Lift about that.
Kris Vanderwater: Yes, so just to address that really directly for a second, as part of the initiative that I was an owner of the Blocks and Layout Initiative, we went to a lot of effort to begin doing that stuff. I just can tell you that as of today, those sorts of features are not in Drupal 8. Our objective was to make adding those things a bit here. However, Acquia does have a solution for some of this stuff in Drupal 7 called Acquia Lift. I believe we have an upcoming webinar on that. Don’t we, Hannah?
Hannah Corey: Yes, we do. I can send that in the chat section if you guys want to check it out. Thank you. [Pause] Awesome. Thanks, Kris. The last question [Laughter] that everyone is thinking, when is Drupal 8 launching? I know we don’t have a direct date, but maybe you guys could speak to timeframe for everyone out there that’s not that familiar with Drupal.
Kris Vanderwater: Well, the age old answer to that question is when it’s ready. That has been the status quo since I’ve been involved in Drupal, which has been about nine years now. I know that that’s not a very satisfying answer. Let’s just speak realistically for the moment. I think we are in the late stages of an alpha, and part of what we’re trying to do at any given time is to really reduce the number of outstanding issues, our tests are all always passing and that we have all the – we know that we need. This is in an effort to make the beta and the release phases of Drupal 8 as short as possible. However, there are still a handful of features that are being polished or being added to Drupal 8. I would be very surprised to see a beta in the near term future. I think that there’s probably some desire to push that out just a little bit further. If we do see a beta in the near term future, then the objective will be to really limit the scope of any new features that are being added to Drupal 8. To that end, I think there is going to be a lot of communication about what our minimum, viable product is for any given set of features that are in Drupal 8. I know the entities with them can somewhat be – some of the rest works that we discussed here today is still a little bit in flux, and there’s a real desire to make sure that those things go out as feature complete capable as possible. I wouldn’t get too fired up about being a Drupal 8 beta in the next month or two. I’m just thinking it is going to be a bit longer than that before we see a beta, but that’s just my own personal opinion, and I am completely guessing.
Hannah Corey: Great. All right. Thanks Kris. I know a lot of people are wondering that. I think that’s it for questions. Jonathan, would you like to end with anything else?
Jonathan Whang: No. I guess, thanks everyone for coming and…
Hannah Corey: Yes, thanks everyone for coming and we’ll send you the slides and the recording in the next 24 hours, and a big thank you to Kris and Jon for the wonderful presentation. Have a great afternoon, everyone.