Sep 13 2018
Sep 13

The marketing landscape is vastly different than it was when Drupal 7 was released in 2011. Since then, there has been a shift, placing the marketing team in the driver’s seat more often and almost always involved in the CMS decision. In this post, we’ll outline some of the ways you can up your SEO game with Drupal 8.

Traditional SEO is dead.

No longer will well-placed keywords alone get you to the top of the SERP ranks. Content is still King in the world of marketing and it’s what helps you improve your SEO.

Every algorithm change Google has made has one thing in common: it aims to provide the best content based on what it "thinks" the user is trying to find. In other words, - what is the users intent. If you want your rankings to stick past the next update, don't try to cheat the system. Attract your prospects with informative, entertaining pieces that they can use to take action. And avoid no value posts that are keyword stuffed with your industry and the word "best" 100 times. Google can see through it and so can all of your users.

That said, there are a few other factors that are critical to keeping your rankings high that can’t be ignored including quick load times and mobile-friendliness. Drupal 8 is built with several of these factors in mind to help us make needed improvements quickly and effectively.

Mobile First Mentality

Drupal 8 is created with responsive design capabilities built in, so you can begin to address any problems immediately. That’s not to say all of your responsive problems will be solved. Content editors will still need to think through their content and imagery, themers will still need to do configuration to establish things like breakpoints, etc. but Drupal 8 will set you on the right path, giving you and your team many of the tools you need.

You’ll also have the option to choose different images and content for desktop and mobile versions right from the WYSIWYG editor, making it easier to see the differences for every piece of content when you add it and before you publish. This means a solid visual of both versions in real-time for faster publishing and peace of mind knowing exactly what your users experience on any device. 

The Need for Speed

Another big factor that could affect your rankings is speed on both desktop and mobile. Google places such high importance that they’ve given you a PageSpeed Insights test to show where and how your website is slowing visitors down. Drupal 8 is “smart” in that it caches all entities and doesn’t load JavaScript unless it has to. This means the same content won’t be reloaded over and over and instead can be loaded quickly from the cache.

Drupal 8 also uses industry-leading caching technology to allow updated content to be served fresh to a client, while preserving the cache on content that hasn’t changed. So, after your visitors come to your website once, they won’t have to wait for all content to load each time, making load times much faster.
Another way Drupal 8 improves speed is through feature velocity. Because so much new functionality is built into Drupal 8 core, creating and publishing new dynamic content experiences is significantly faster than in Drupal 7. A blog post that features dynamically updated data, relevant to and powered by your content can be built in the UI in Drupal 8, something that in Drupal 7 would have taken custom development and several modules.

Responsive design is a must-have in today’s digital landscape and speeding up your website on both desktop and mobile is a surprisingly effective way to contribute to your SEO efforts. In short, if you’re marketing team is focused (as you should be) on top rankings, Drupal 8 provides many of the tools to make that happen. 

Accessibility = Key for Search

The release of D8 marked a big push toward improving web accessibility, including: 

  • Overall community commitment to accessibility 
  • Technical features for improved accessibility like controlled tab order and aural alerts 
  • All features conform with the World Wide Web Consortium (W3C) guidelines

This is important because, as we know, the relationship between web accessibility and SEO is closely intertwined.

Drupal 8 SEO Modules

Here are some top Drupal 8 SEO Modules to use when optimizing your site. 

  1. Pathauto - helps save you time from manually having to create URL path/aliases.
  2. Metatag - allows you to automatically provide structured metadata, aka "meta tags", about a website.
  3. Sitemap - provides a site map that gives visitors an overview of your site. It can also display the RSS feeds for all blogs and categories.
  4. Redirect - Almost every new site needs to incorporate 301 redirects for old page URLs. This gives site admins an easy interface for creating those redirects in Drupal.
  5. Google Analytics - This simple module allows site admins the ability to easily configure Google Analytics in Drupal.
  6. Easy Breadcrumbs - uses the current URL (path alias) and the current page's title to automatically extract the breadcrumb's segments and its respective links. 
  7. SEO Checklist - uses best practices to check your website for proper search engine optimization. It eliminates guesswork by creating a functional to-do list of modules and tasks that remain. 

Conclusion

Drupal’s content management system is perfectly structured for search optimization and its core features support many of the critical SEO elements. But, SEO is only part of the story. In the next post, we’ll explore some of the do’s and don’ts and things to keep in mind once you’re on Drupal 8. 

Sep 13 2018
Sep 13

Choosing a platform on which to build your website can be a daunting task. There is an ever-growing list of content management systems (CMS) from advanced platforms like Drupal and WordPress to all-inclusive DIY website builders like Wix and Squarespace. The right choice depends on factors such as desired functionality, flexibility, available budget, and your ability to manage the site after launch.

Where you fall on the spectrum between mom-and-pop shops and enterprise businesses will also heavily influence your decision.

  Mom-and-Pop <—————————> Enterprise

Questions to consider before choosing your CMS

  • How often do you want to post or update content?
  • How many content editors will be adding to the site?  
  • Do your editors need varying degrees of access and permissions?
  • Will your site have a heavy reliance on search, interactivity, or 3rd-party integrations?
  • Do you have specific design needs that require multiple custom layouts?
  • Will you be able to support the site without developer support?
  • What is your project budget?  
  • What is your post-launch support budget?

Scalability vs Simplicity 

WordPress and Drupal have many things in common. Both are open source and freely available, are supported by their developer communities who contribute code to the projects including regular security updates, and offer extensive add-on functionality to the CMS core through plugins and modules.

Site builders or content managers who have used both systems often have a bias for WordPress over Drupal, considering WordPress the more user-friendly of the two. Before one can accurately make such an assessment, I believe the comparison must be apples to apples between comparably sized sites with similar functionality or complexity. If one compares how user-friendly WordPress is for creating and managing a personal blog or small business website that requires no customizations and has static content versus the complexities of using Drupal to build a site for the enterprise with dynamic relationships between various data points, that is not a reasonable comparison.  It is true that Drupal has a higher learning curve than WordPress largely due to the amount of available customization that is built into its core. WordPress is simple to use, especially for blogs or small sites, but not necessarily scalable or suited for larger more complex sites. If pushed to the enterprise end of the spectrum above, would WordPress still maintain its user-friendliness and be able to scale? Conversely, Drupal is best suited for enterprise level sites with custom requirements and would add unnecessary development overhead if chosen for a small site or blog.

If WordPress and Drupal were Lego types...

I’ve often thought of Wordpress and Drupal in terms of Lego whereas:

Lego Duplo set, simple with large building blocks like Wordpress

Source: Lego.com

WordPress is like Lego Duplo where you can build things easily with preformed shapes as long as those preformed shapes match your specific needs. These preformed shapes equate to plugins to add functionality and pre-designed theme templates that determine the styles and layout of your site. Duplo blocks are appropriate for ages 1-5 or, in other words, personal projects or small to medium businesses with simpler requirements. 

 

Lego Technic race car is complex like Drupal

Source: Lego.com

Drupal is like Lego Technic where you can build whatever you can imagine with little to nothing preformed. Like Technic pieces, Drupal has highly configurable plugins that provide granular control over the functionality of your site and do not impose pre-selected designs to your theme. They are appropriate for ages 7-16 or, in other words, medium to large businesses or organizations with complex requirements. 

With that analogy in mind, let's explore some of the advantages of each platform.

Advantages of WordPress

Confession: I love WordPress. It’s true! As a non-developer with several personal projects outside of work, whether it was for my consultant friend who needed a five-page site with a contact form, a guitarist wanting to promote his music, or managing several blogs, WordPress meets those needs perfectly. Below are the features that stand out in my experience from which people draw the conclusion that WordPress is so user-friendly. 

Dashboard

Upon logging into WordPress you are presented a user-friendly and intuitive admin interface from which you can figure out almost instinctively how to manage your website. You can quickly navigate to various types of content or site functionality from the left rail admin toolbar. The admin toolbar has appropriately named menu items. Hovering over each one triggers a slide out sub navigation making it easy to find the action or setting for which you are looking.

Screenshot of Wordpress user-friendly dashboard

Media Library

Adding images to your content or as a featured image above a post or page is quite simple. With a click of a button, you can add images, audio or video files, documents, and PDFs. Images are automatically given responsive image styles so that they adapt appropriately to the width of one’s browser window or mobile device.

Though not specifically part of the media library, inserting YouTube or Vimeo videos into a post is as simple as pasting the URL. WordPress will render the video as embedded on the page (also works with Twitter and Instagram posts).

Adding Content

As noted above, the Dashboard provides quick access in a few different ways to add new content. The Add New Post (or another type of content) edit page has a visual WYSIWYG editor for formatting your content with links to add media, categories, tags, and visibility of your new post. You can easily view revisions after content has been published and revised with functionality that is provided out of the box.

Screenshot of Wordpress admin interface for adding a new blog

Plugins and Themes

I’m grouping these two together because here is where we begin to add to WordPress core and its out of the box functionality. I’ve used 3rd-party plugins to add custom forms, simple e-commerce capabilities, invoicing and client management features, automated backups, and SEO enhancements to WordPress sites. The WordPress Plugin Directory boasts 56,182 available plugins to add functionality that is not included or as customizable within WordPress core. Many plugins are completely free or offer freemium versions with more advanced premium features available for a one-time charge or subscription fee.

Wordpress.org ecommerce plugins

Likewise, the WordPress Theme Directory offers many free or commercial templates searchable by layout options, features, or subject (topic matter of your site). Themes typically have some customization built-in to control layout options, widgets, background images, and the like.

Screenshot of Wordpress themes and layout options

Updates

WordPress Core, installed plugins and themes can be updated with the click of a button through the Dashboard. 

screenshot of Wordpress plugin updates

*Plugins are a double-edged sword in that they add flexibility from a non-developer standpoint while simultaneously introducing more risk from a security standpoint. The more 3rd-party plugins you use, the more dependence you will have on those 3rd-parties keeping their code secure by providing timely updates. Security issues with WordPress are introduced most often through vulnerabilities exploited in plugins.

Lower development costs 

This isn’t a feature of WordPress, but it’s worth mentioning that if the “out of the box” solutions meet your needs and you are able to build a site without the assistance of a developer, it will cost you less. If you fall on the mom-and-pop end of the spectrum, have a lower development budget, and are not picky about every detail of design or functionality, WordPress is likely a great option for you.

Advantages of Drupal

Custom content types and views 

Whereas WordPress comes with two content types (posts and pages), Drupal also comes with two content types out of the box (article and basic page). However, it not only allows you to edit the fields for those content types but also create new content types and views without custom code that meet your specific requirements. If your site needs a blog, you can create a content type for blog posts and a view that displays them the way you want. If you need a staff directory, you can create a content type for staff that has fields for name, title, profile picture, bio, etc., and then create a view to display the staff in a list, a grid, or to whatever your specs require.

This is one way in which Drupal and WordPress differ. Drupal is an application framework that allows you to build what you need the way you need it. WordPress core starts as a blog that makes you add to core in order to manipulate its built-in behavior. For example, in order to disable blogging in WordPress, you have to install a 3rd-party plugin such as Disable Blogging in WordPress.

If you compare WordPress core and Drupal core, Drupal is far more robust than WordPress.

Access control and user permissions 

Out of the box Drupal core allows you to create and define your own user roles and associated permissions for each. If your site requirements call for multiple levels of user permissions with varying degrees of access, Drupal lets you create new roles and assign them with custom permissions. And, unlike WordPress, Drupal allows granting more than one role to your users. This gives you fine-grained control over what they are allowed to do. Building on the previous example of a staff directory, you could create a role for Staff and only give that role permissions to edit one’s bio page. All of these customizations for roles and permissions can be done in the admin without adding any custom code.

Screenshot of managing roles in Drupal CMS

screenshot of permissions in Drupal

adding a new user in Drupal CMS

Taxonomy 

Whereas the tagging system in WordPress is flat, in Drupal you can have multiple types of categorization and determine how much information you want to track on each one. Drupal allows you to create more complex and custom data relationships across various types of content.

screenshot of taxonomy terms in Drupal CMS

Internationalization 

Want the Drupal admin to display in the native language of your officemate overseas? No problem! Native language handling is now built into Drupal 8’s core APIs which improve the ease of globalization management. Building a multilingual site no longer requires installing multiple contributed modules. 

Drupal 8 multilingual configuration

Security 

Drupal is known for having a volunteer security team and a standardized set of policies and procedures for dealing with security issues. Security advisories are routinely posted on https://www.drupal.org/security for Drupal core as well as contributed projects. For enterprise clients with specific security needs, the Drupal distribution Guardr is available with a combination of modules and settings to enhance the Drupal application’s security.   

Drupal.org security advisory

Customization

As a web application framework, Drupal can be adapted to meet very specific requirements. For example, the Drupal entity system allows tracking specific data points and values that are needed when building applications. At times, Content Types aren’t the best choice for these data elements, and more custom entities allow for improved performance and fit the requirements best.

If this has you scratching your head, you’re not the only one. I’m purposely skirting around the complexity of the section because it is beyond the scope of what I’m trying to speak to here. The important difference here is that Drupal allows tracking points of data without cluttering up the editorial experience. Sometimes the data needs to be seen but not heard. Drupal lets you do that. And site editors may never even realize it’s happening.

Conclusion

As a site builder who has built dozens of sites in HTML, Joomla, and WordPress and worked for five years as a project manager at Mediacurrent (almost exclusively with Drupal), I realize that the Lego analogy may be helpful but at the same time not completely accurate. After all, WordPress boasts such enterprise level sites such as Techcrunch, Sony Music, and Time, Inc. But my experience reinforces the perception that WordPress is amazing at simple sites or blogs while Drupal is the go-to for more complex sites. 

I’ve found that clients will like a template design exactly the way it comes except for “insert numerous design changes” or the plugin functionality as-is “if you change this one behavior that isn’t built into the plugin.” And at that point, the gains of using out of the box functionality and design offered by WordPress (either via core WordPress or plugins and themes) are lost to customizations and a custom Drupal implementation is preferred. If you fall on the enterprise end of the spectrum and have deeply refined technical requirements, Drupal is likely a great option for you.

It comes down to the level of complexity for which you need to plan. If you are building a large site that is essentially brochureware (static pages), WordPress will work for you. If your site requirements call for a dynamic application with a heavy reliance on custom search results, interactivity, or 3rd-party integrations, or if you have specific design needs that require multiple custom layouts, your best bet is to use Drupal 8.

Aug 22 2018
Aug 22

At Mediacurrent, we hear a lot of questions — from the open source community and from our customers — about website accessibility. What are the must-have tools, resources, and modules? How often should I test? To address those and other top FAQs, we hosted a webinar with front end developers Ben Robertson and Tobias Williams, back end developer Mark Casias, and UX designer Becky Cierpich.

The question that drives all others is this: Why should one care about web accessibility? To kick-off the webinar, Ben gave a compelling answer. He covered many of the topics you’ve read about on the Mediacurrent blog: introducing WCAG Web Content Accessibility Guidelines, some the benefits of website accessibility (including improved usability and SEO) and the threats of non-compliance.

[embedded content]

Adam Kirby: Hi everybody, this is Adam Kirby. I'm the Director of Marketing here at Mediacurrent. Thanks everyone for joining us. Today we're going to go over website accessibility frequently asked questions. 

Our first question is: 

Are there automated tools I can use to ensure my site is accessible and what are the best free tools? 

Becky Cierpich: Yes! Automated tools that I like to use —and these are actually all free tools— are WEBAIM’s WAVE tool, you can use that as a browser extension. There's also Chrome Accessibility Developer Tools and Khan Academy has a Chrome Plugin called Tota11y. So with these things, you can get a report of all the errors and warnings on a page. Automated testing catches about 30 percent of errors, but it takes a human to sort through and intellectually interpret the results and then determine the most inclusive user experience. 

What's the difference between human and automated testing? 

Becky Cierpich: Well, as I said, the automated tools can catch 30 percent of errors and we need a human on the back end of that to interpret. And then we use the manual tools, things like Chrome Vox or VoiceOver for Mac, those are some things you can turn on if you want to simulate a user experience from the auditory side, you can do keyboard only navigation to simulate that experience. Those things will really help you to kind of drive behind the wheel of what another user's experiencing and catch any errors in the flow that may have come from, you know, the code not being up to up to spec. 

Then we also have color contrast checkers. WEBAIM has a good one for that and all these are free tools and they can allow you to test one color against another. You can verify areas that have too little contrast and test adjustments that'll fix the contrast. 

What do the terms WCAG, W3C, WAI, Section 508, and ADA Title III mean? 

Mark Casias: I'll take that one - everybody loves a good acronym. WCAG, these are Web Content Accessibility Guidelines. This is the actual document that gives you the ideas of what you need to change or what you want to a base your site on. W3C stands for World Wide Web Consortium - these are the people who control the web standardization. WAI is the Web Accessibility Initiative and refers to the section of the W3C that focuses on accessibility. 

Finally, Section 508 is part of the Rehabilitation Act of 1973, well it was added to that act in 1998, to require Federal agencies to make their electronic and IT  accessible to people with disabilities. ADA Title III is part of the Americans with Disabilities Act which focuses on private businesses, it mandates that they need to be fully accessible to individuals with disabilities. 

 What are the different levels of compliance? 

Tobias Williams: Briefly, the WCAG Web Content Accessibility Guidelines tell us that there are three levels - A, AA, and AAA, with AAA being the highest level of compliance. These are internationally agreed to, voluntary standards. Level A has the minimum requirements for the page to be accessible. Level AA builds on the accessibility of level A, examples include consideration of navigation placement and contrast of colors. Level AAA again builds on the previous level - certain videos have sign language translation and improved color contrast. 

To meet the standard of each level there are 5 requirements that are detailed on the WCAG site. Every every actionable part of the site has to be 100% compliant. WCAG doesn't require that a claim to a standard be made, and these grades are not specified by the ADA but are often referenced when assessing how accessible the site is.

Should we always aim for AAA standards?

Ben Robertson: How we approach it is we think you should aim for AA compliance. That's going to make sure that you're covering all the bases. You have to do an internal audit of who are your users and what are your priorities and who you're trying to reach. And then see out of those, where do the AAA guidelines come in and where can you get the biggest bang for your buck? I think that the smart way to do it is to prioritize. Because when you get to the AAA level, it can be a very intense process, like captioning every single video on your site. So you have to prioritize. 

What Drupal modules can help with accessibility?

Mark Casias: Drupal.org has a great page that lists a good portion of these modules for accessibility.  One that they don't have on there is the AddtoAny module that allows you to share your content. We investigated this for our work on the Grey Muzzle site and found this was the most accessible option. Here are some other modules you can try:

  • Automatic Alternative Text -The module uses the Microsoft Azure Cognitive Services API to generate an Alternative Text for images when no Alternative Text has been provided by user.
  • Block ARIA Landmark Roles -Inspired by Block Class, this module adds additional elements to the block configuration forms that allow users to assign a ARIA landmark role to a block.
  • CKEditor Abbreviation - Adds a button to CKEditor for inserting and editing abbreviations. If an existing abbr tag is selected, the context menu also contains a link to edit the abbreviation.
  • CKEditor Accessibility Checker - The CKEditor Accessibility Checker module enables the Accessibility Checker plugin from CKEditor.com in your WYSIWYG.
  • High contrast - Provides a quick solution to allow the user to switch between the active theme and a high contrast version of it. (Still in beta)
  • htmLawed  - The htmLawed module uses the htmLawed PHP library to restrict and purify HTML for compliance with site administrator policy and standards and for security. Use of the htmLawed library allows for highly customizable control of HTML markup.
  • Siteimprove - The Siteimprove plugin bridges the gap between Drupal and the Siteimprove Intelligence Platform.
  • Style Switcher - The module takes the fuss out of creating themes or building sites with alternate stylesheets.
  • Text Resize - The Text Resize module provides your end-users with a block that can be used to quickly change the font size of text on your Drupal site.

At what point in a project or website development should I think about accessibility? 

Becky Cierpich: I got this one! Well, the short answer is always and forever. Always think about accessibility. I work a lot at the front end of a project doing strategy and design. So what we try to do is bake it in from the very beginning. We'll take analytics data and then wecan get to know the audience that way. That's how you can kind of plan and prioritize your features. If you want to do AAA features, you can figure out who your users are before you go ahead and plan that out. Another thing we do is look at personas. You can create personas that have limitations and that way when you go in and design. You can be sure to capture those people who might be challenged by even things like a temporary disability, slow Internet connection or colorblind - things that people don't necessarily even think of this as a disability.

I would also say don't worry if you already have a site and you know, it's definitely not compliant or you're not sure because Mediacurrent can come in and audit, using the testing tools to interpret and prioritize and slowly you can get up speed over time. It's not something that you have to necessarily do overnight. 

How often should I check for accessibility compliance? 

Tobias Williams: I’ll take this one - I also work on the front end, implementing Becky’s designs. When you're building anything new for a site, you should be accessibility testing. test work, During cross-browser testing, we should also be checking that our code meets the accessibility standards we are maintaining.

Now that's easy to do on a new cycle because you're in the process of building a product that currently exists. I would say anytime you make any kind of change or you're focused on any kind of barrier of the fight, I would run a quick accessibility check. And then even if you don't address the changes straight away or at least you're aware of that, you can document them and work on them later. As far as an in-production site where you have a lot of content creators, or where independent groups work on features it is also a good idea to run quarterly spot checks. 

I've seen these on a few sites, but what is an accessibility statement and do I need one?

Becky Cierpich: An accessibility statement is similar to something like a privacy agreement. It's a legal document and there are templates to do it. It basically states clearly what level of accessibility the website is targeting. If you have any areas that still need improvement, you can acknowledge those and outline your plan to achieve those goals and when you're targeting to have that done. It can add a measure of legal protection while you're implementing any fixes. And if your site is up to code, it's a powerful statement to the public that your organization is recognizing the importance of an inclusive approach to your web presence. 

What are the legal ramifications of not having an accessible website? 

Ben Robertson: I'll jump in here, but I just want to make a disclaimer that I'm not a lawyer. Take what I say with several grains of salt! This whole space is pretty new in terms of legal requirements. The landmark case was  Winn-Dixie, the grocery store chain — it was filed under title III of ADA Act and they lost. It was brought up by a blind customer who could not use their website. The court order is available online and it's an interesting read but basically, there were no damages sought in the case. The court ordered that

they had to have an accessibility statement that said that they would follow WCAG 2.0. That's a great refresh for site editors to make sure that they're following best practices. They also mandated quarterly automated accessibility testing. 

I really think if you have these things in place already, you're really gonna mitigate pretty much all your risk. You can get out in front of it if you have a plan. 

If I have an SEO expert, do I need an accessibility expert as well? 

Tobias Williams: I'll explain what we do at Mediacurrent. We don't have one person who is an expert. We have a group of people. We have several developers, designers and other people on the team who are just interested in the subject and we meet once a week, we have a Slack channel where you just talk about accessibility. There are people who are most familiar with different aspects of it and that allows us to be better rounded as a group. 

I can see somebody being hired to be an accessibility expert but I think that the dialogue within a company about this issue is most important. The more people who are aware of it, the better. You can prevent problems before they occur. So, if I'm aware of the accessibility requirements of an item building, I'm going to build it the right way as opposed to having to be reviewed by the expert and then making changes. The more people who are talking about it and were involved in it and I'm the general level of knowledge, it goes a long way. We don't need to have experts as much as we need to have interested people. 

As a content editor, what's my role in website accessibility?

Mark Casias: Your role is very important in website accessibility. All the planning and site building that I do [as a developer] won't mean a thing if you don't attach an image alt tag to your images or you use a bunch of H1 title tags because you want the font size to be bigger and things like that. Content editors need to be aware of what they're doing and its impact on accessibility. They need to know the requirements and they need to make sure that their information is. keeping the website rolling in the right direction. Check out Mediacurrent’s Go-To-Guide for Website Accessibility for more on how to do this. 

Some of the technical requirements for accessibility seem costly and complex. What are the options for an organization?

Ben Robertson: Yeah, I totally agree. Sometimes you will get an accessibility audit back and you just see a long list of things that are red and wrong. It can seem overwhelming. I think there's really a couple of things to keep in mind here is that one, you don't have to do everything all at once. You can create an accessibility statement and you can create a plan and start working through that plan. Two, it really helps to have someone with experience or an experienced team to help you go through this process. There can be things that are a very high priority that are very easy to fix and there can be things that may be a low priority.

You can also think about it this way: if you got a report from a contractor that something you're building was not up to code, you would want to fix that. And so this is kind of a similar thing. People aren't going to be injured from using your website if it's inaccessible but it's the right thing to do. It's how websites are supposed to be built if you're following the guidelines, and it's really good to help your business overall. 

How much does it cost to have and maintain an accessible site? Should I set aside budget just for this? 

Adam Kirby: You will want to set aside a budget to create an accessible site. It is an expense. You're going to have to do a little bit more for your website in order to make sure it's successful. You're going to have to make changes. How much does it cost? That will vary and depend on where you are with your site build; if it’s an existing site, if you're launching a new site, the amount of content on your site and the variability of content types. So, unfortunately, the answer is it just depends. 

If you need help with an accessibility audit, resolving some known issues on your site, or convincing your leadership to take action on website accessibility, we’re here for you.  

Webinar Slides and Additional Resources 

Aug 15 2018
Aug 15

As marketers, we understand the importance of having a system that promotes ease and efficiency when it comes to implementing marketing processes. You want to create content once and use it over and over in different ways to create contextual user experiences. 

Drupal provides you with a variety of powerful, integrated tools to not only help you understand who your visitors are and what they want to accomplish, but to also dig deeper into their interactions, engagements, and habits with your site. 

Here are just a few reasons why enterprise marketers adopt Drupal. 

1. Enormously scalable - you can’t outgrow Drupal!

Some of the biggest, most visible, and highest-trafficked sites in the world run on Drupal, including, The NBA, Johnson & Johnson, and The Weather Channel. Drupal has proven itself on enterprise websites with over 1M pages and over 20,000 requests per second. In short, you can’t “outgrow” Drupal but can continually add new content and features to your enterprise website.

2. Easily execute your content marketing strategy

A big part of a marketing strategy is content creation, so it is important that marketers are easily able to add new pieces to their website. Drupal allows marketers to quickly add blog posts, videos, and landing pages to their website by filling out a “form” with all of the relevant information and then publishing it. For example, if I want to add a post to the Mediacurrent blog, I can be in and out in less than 7 clicks. In-page editing with Drupal 8 makes the publishing process even faster.  

3. Integrate with Marketing Automation 

Every major marketing automation platform has a custom module created for easy integration into a Drupal website. How do I know? Mediacurrent developed most of them - including the Hubspot, Pardot & Silverpop module!

4. Establish an efficient workflow

A planned workflow is the underpinning of every efficient business process. Whether a business is processing leads, updating a web page, evaluating a capital purchase, or approving new hires, certain actions must take place in order for the function to be completed. Workflow involves the passing of content between people in a chain that abide by a predefined set of rules.  Drupal allows you to easily create a workflow that is customized to your company's processes and team.

5. Create dynamic digital experiences….easily

Drupal fully integrates content, community, and commerce in a single platform. If you’re staying competitive, you’ve likely made a significant investment in creating a dynamic website that really tells the story of your brand and what you have to offer. With Drupal as the backbone for your digital strategy, the options for creating personalized web experiences are endless. Drupal’s architecture makes it the ideal platform for creating and delivering segmented content. 

6. Don’t waste your marketing budget on licensing fees

As open source software, the Drupal package has no license fees, it’s free for you to download, modify, etc. Which means your marketing budget goes towards the things that make your site unique, not towards fees for a large software company.

7. Bridge the gap between IT And marketing

When building a Drupal site, the amount of coding required to maintain or build the site is up to you. A full-featured site can be built fulfilling many business requirements with point and click ease. For us “non-coding” marketers, Drupal allows us to go into each page and easily edit the content while still maintaining the consistency of our branding—without the need to know HTML or CSS.   

8. Benefit from the thriving development community

When a business chooses Drupal, a vast community of support becomes available. Whether it be Drupal’s extensive project issue queues, thousands of nationwide meet-ups and Drupalcamps, or IRC channels, the chances are the problem encountered has been faced before, documented, and has a community willing to help you solve it.

9. You’ll have search engine optimization nirvana 

Drupal gives you control over everything you need to optimize your website for search engines. That includes custom page titles, meta descriptions, URLs, copy, and it plays well with Google Analytics.

10. Security - it’s good enough for over 1 MILLION websites

When deciding on a software solution for your company's digital needs, security is often one of the top concerns. Open source software, like Drupal, has the added bonus of having thousands of talented individuals work on a particular problem. With entire teams and methodology devoted to ensuring its steadfast reputation as a secure CMS. Drupal also have an official “SWAT team” that is well-versed in online software best practices and serves as a resource for all custom module maintainers and code contributors to utilize when submitting custom projects. What passes today as secure code may not stay the same tomorrow when new vulnerabilities surface. There's peace of mind in knowing not only is your online software secure, but that it's also in an active state of safeguarding against security attacks, both past and present.

Because Drupal is not tied to a proprietary vendor’s roadmap, it’s advancing based on the work of thousands of developers around the world. Drupal organically evolves at the speed of the web, offers the cost savings and agility of the open source model, and gives you the ability to integrate content across a range of channels and campaigns.  

In the next blog of the series - we’ll hear from the Chief Marketing Officer at Acquia, about how she is leveraging Drupal 8 to achieve her business goals. 

Aug 08 2018
Aug 08

Alan Onnen is the Associate Director of Marketing for the Shirley Ryan AbilityLab. Recognized as #1 in rehabilitation for 27 years in a row. AbilityLab introduces its revolutionary care through 5 Innovation Centers - state-of-the-art hospital facilities and equipment for exceptional patient care provided by the best medical and nursing support.

With 15 years of experience in the marketing industry, the past 5 being with SRA and being a part of the team that helped adopt Drupal, Onnen has seen firsthand how Drupal 8 powers digital strategy. 

Mediacurrent Interview with Alan Onnen 

Mediacurrent: What does “digital transformation” mean for you? 

Alan Onnen: Digital transformation means a constant evolution. There’s no single transformation; it’s a constant state of change, staying on top of trends at once. As a digital marketer, you need to know a little bit about everything, UI, UX, nerdy stuff, best practices, changes in the digital environment, what people expect from websites in your vertical, etc. Some people think transformation is a binary term - something new - but it's not.

Mediacurrent: How does open source fit into the equation?

AO: Open source is something that’s not new but it’s getting so mainstream its part of that digital transformation. It’s about adjusting to the new worlds where open source doesn't mean unsecure - it means that it’s open and honest. We had to get buy-in from stakeholders. They dismissed it at the beginning of the RFP bc they thought you needed a Sitecore or an AEM. It took a long time and a lot of agency people to show how safe it is to help make them believe that open source isn’t a dirty word.

Mediacurrent: What current challenges are you trying to solve for?

AO: It is a constant struggle to keep up with Google - making sure our content is optimized for search algorithms. Our overall challenge is to keep our content fresh, navigating innovative best practices for our website while keeping up with legal and social constructs.

Mediacurrent: How are you using Drupal 8 to solve those problems? 

AO: One of the big reasons we chose Drupal was because of its customization ability. Our knowledge base is spread across so many people so Drupal’s ability to customize the backend experience and offer the fields and plain English way we need to talk about things is really important. Even just the simple need for content creators to be able to edit things and be able to customize that experience.

Another big reason was the fact that its open source and the community surrounding Drupal. If you have an idea you can find someone who has half baked or full-baked into that particular module or idea to help give your devs a headstart solution. With Drupal, you don’t have to start from scratch when you need something new to move the website forward. Chances are, someone has had a similar idea you can pull from.

Mediacurrent: Has this been your first experience with Drupal or have you worked with previous versions of Drupal in the past? What did Drupal 8 give you from a marketers/content editors perspective?

AO: I came to SRA on a proprietary healthcare based CMS. It was designed to serve mid to small hospital systems and we didn’t have access to the backend part of the site before. SRA put out an RFP for a replatforming and redesign of our website . We talked to different agencies, and Drupal kept coming up - there were no licensing fees with open source. The spin up on Drupal is more robust than most paid CMS experiences. The cost point of view is having it be free and open was very appetizing and Drupal had other features that appealed to us. 

Mediacurrent: Since launching on Drupal 8 have you noticed an increase in website conversions?  What would you attribute to that success (or lack of success)? By use of marketing automation strategies? Bc of easy integration?

AO: Drupal can be leveraged any which way you want it to be. We take advantage of the extensive list of modules. We have seen nice conversions off the YAML module & the webform module. It’s true of the module philosophy to be able to build how you want them too. 

With Drupal, our web traffic has been up. We have 3 very different facets of our site - rehab measures database, research educational platform, home site - and Drupal can support them all very well. It’s a testament to Drupal - with a flexible CMS, reporting, user interfaces, and a back end that can be robust enough to bring things together in an organic and seamless way. 

Mediacurrent: What are 3 factors you look at when evaluating an agency? Cost? Reputation? Their own web design? Logos they've sold? 

AO: With our RFP out, we began evaluating the superficial - books, examples, case studies, white papers, if their leadership had given talks and what they had talked about, the look and feel for brand consciousness, - exploring that space of ability. We didn’t want someone who was making cookie cutter websites and we didn’t want to stay looking just in the healthcare vertical. Our list was narrowed down to those whose work we respected and admired. 

In the RFP, the CMS wasn’t a consideration. We didn’t tell people which platform you needed to be on. We asked for the cost, their preferred CMS and why, and we never cared about where the agency was located. It’s important to know the the people are the agency - communication is critical. For instance, in their responses to those RFP’s are there timelines? Are they realistic? Do they make sense? It’s easy to see how much effort they did.

No one else did research like you guys [Mediacurrent] did before they got there for a face to face meeting. Your team said “oh, well we’ve already talked to discharge managers, nurses, planners.” They went through example personas, guessing on journeys, patients - and they were smart with how they handled it and took the initiative that early in the process. That showed us a lot about them. It wasn’t a giant new business budget and they didn’t ask for money up front. 

In all, the RFP process was about 4 months.

Mediacurrent: As a marketer using Drupal, what are some of the hot topics you'd like to know more about today? Personalization, marketing automation, etc.

AO: I’d like to know more about:

  • Integrations with personalization
  • Integrating with Google Analytics, tracking to AEM, adwords, & api that moves page data to backend sites
  • Marketing Automation capabilities

Mediacurrent: What advice would you give other CMO’s/VP’s/Director’s who are hesitant to move to Drupal 8?

AO: I would say it depends on what their hesitation is. You have to be committed to the build of your site. You need to be able to really understand your content creators, the users of your CMS, the scope of what they want to be doing, and understand what they could be doing on the front end. It’s important to know the ingredients - you can muck up Drupal and waste dev hours if you don’t know how the workflows to go and to know your taxonomy and pathing modules. 

Drupal requires a Digital Marketer to have a vision for what they want it to be before they start developing - or else they risk having to go back and retrofit into their CMS environment that they could have efficiently put in the first time.

The journey of CMS and Drupal needs to be a thoughtful one.

______________________________________________________

We want to extend a big THANK YOU to Alan for participating in this interview. In the next part of the blog series, we will dig into the top reasons for Drupal 8 and why enterprise marketers choose Drupal.

Aug 08 2018
Aug 08

Security maintenance — and the ability to apply security updates quickly — is part and parcel to open source project success. 

Updating is typically done as part of the normal software release cycle, however, there are times when a security advisory needs to be released ASAP. A strong incident response plan builds a first defense line to mitigate and patch vulnerabilities. 

But what does a successful security response look like in action?

On the heels of a recent Drupal security update on August 1, 2018, Mediacurrent’s Senior Project Manager Christine Flynn had the same question. To find out, she interviewed our Open Source Security Lead, Mark “shrop” Shropshire, to get a layperson’s perspective on the security team’s approach.

Christine and Shrop on a call

 

“An off-cycle Drupal security advisory dropped on August 1, 2018. What does that mean for folks who aren’t developers?”

Flynn: I was watching the Slack channel as our team fixed sites, and I got some idea of what was happening. I’m not going to jiggle anybody’s elbows while they’re applying a security update, but I’m really curious now that the fixes are all in. 

Shrop: The official Drupal Security Advisory came out late in the day, after Symphony published their announcement in the morning. There was also one from Zend.

Flynn: I read all of those links while the team was applying the security update, but I feel like I didn’t totally understand the implications. I’d love to get a better picture from you of what they mean.

Shrop: You bet! I hope you can hear me, I’m at a coffee shop right now.

Flynn: Are you on their unsecured WiFi?

Shrop: Nope! I’m on a hotspot and on VPN. It’s funny, the more you know about security, the more it changes what you do. Other people think you’re paranoid. But you’re not! You just understand the realities. 

Flynn: Ha! Why am I not surprised? All right, let’s dig in.

“What was the security update for?”

Shrop: Drupal Core was updated because there were some security releases for Symfony. We call those “upstream” in the biz, which means that Drupal depends on them, and they are actively worked on outside of Drupal. I understand the Symfony project worked closely with the Drupal Security Team to make sure Symfony and Drupal were both updated and ready to be announced publicly at the same time. Drupal version 8.5.6 pulls in the Symfony updates as part of the Drupal update process. 

Flynn: Was that the only update?

Shrop: No, at the same time, there was also an update to Zend Framework, but that was only an issue for users who were making use of modules or sites that used Zend Feed or Daictoros. There is a core issue to update the related Zend libraries for those who require or need the updates. 

“If not updated, what could a malicious user do to a site?”

Shrop: This is a hard one to answer this soon after the release of the security advisory. I’m going to do some checking to see if I can get more information on this for academic purposes, but the Drupal Security Team is not going to make any statements that could help someone attack a site. It is up to security teams and researchers to dig into the code and determine more about the risks involved.

Based on the Symfony project’s blog post, it appears that a specially crafted request could allow a user access to a URL they do not have access to, bypassing access control provided by web servers and caching mechanisms. That’s a fancy-pants way of saying that a website visitor could gain access to pages you don’t want them to see.

“When will we know more?”

Shrop: Within days - sometimes hours - we might start to see exploit methods posted on the Internet. Taking security seriously and responding quickly once a drupal.org security advisory is announced is a way to stay ahead of these concerns.

Mediacurrent doesn’t want to fearmonger, but it is better to be safe than sorry. That’s why I always push to update as soon as possible while weighing in on mitigating factors that may lessen the severity of the issue for a particular application. But I will keep digging. I’m curious! 

“If you had to tell a CEO or CFO the value that implementing this security update swiftly provided, what would you say? Let’s say this CEO does not have a strong background in technology or security.”

Flynn: I could see an executive with a strong public safety or physical security background being pretty understanding of why you want to apply a security update for a potential vulnerability quickly, but what if it’s someone who doesn’t have that experience, and isn’t a technologist?

Shrop: Check out this link from Acquia about the security update. This helped me so much. They published this shortly after the PSA came out, and although they’ve updated the text since then, they said at the time, “It is advised that customers set aside time for a core upgrade immediately following.” When I read, “immediately,” I knew that we had to get the update out within hours. If I was asked to get on a call with the executives from any company, at that point, I am confident. If Acquia is saying it, we need to do it. That’s enough to stand on with anybody. I’m not saying that the Acquia team has more information, but they have a very robust security team. They always dig in quickly. They have to, to know if they can mitigate the issue by adding web application firewall rules.

Flynn: Firewall rules? How does that work? 

Shrop: The last few core updates, Pantheon and Acquia put mitigations into their WAF - that’s Web Application Firewall. Pantheon confirmed the night of the security advisory release that they were blocking attempts on their platform, and Acquia did the same thing. So if someone tried to exploit a site that was hosted there before Drupal was updated, they were there, helping to prevent that site from being attacked successfully. It’s a great extra layer of protection. Now, me and Acquia and Pantheon will always still want to update Core on each site, because WAF-level mitigation might not catch everything. But I am super happy when I see it because there’s a good chance that it will catch anything that happens while a team is still implementing a security update.

Security is all risk assessment and mitigation. You want to layer defenses. And something like this, we are going to make sure we deal with this problem. That’s why Acquia, Pantheon, Platform.sh, and others in the community immediately add those extra mitigations to their firewalls. It’s to buy time so that people can get their updates in. That’s not where mitigation ends, but it helps. 

“What type of sites were affected by this? Does everyone use Symfony?”

Flynn: When I first read about the upcoming security advisory, I saw that it affected “third party libraries.” That made me think that some of our clients might not be affected because it would only affect certain modules. Can you tell me what types of sites were affected?

Shrop: Got a link for you, but basically, anything on Drupal 8 was affected. Drupal 8 uses components from the Symfony project. The Drupal community made the decision to use Symfony so that we didn’t have to maintain everything ourselves. So this is a great example of the power of open source, with the Symfony and Drupal security teams working together to release this fix. We all end up benefiting from having a larger community to fix issues. There’s no way an internal team working by themselves can write as secure applications on their own compared to open source software, in my opinion. It has nothing to do with how good you are, it’s the nature of development. With open source, you have a greater team with Drupal and then again, with Symfony, an even greater team to lean on. With each community that is included you are expanding your team and your ability to detect and prevent threats. 

“How was the security vulnerability discovered?”

Shrop: That’s generally never disclosed because you never want to tell malicious users how you found an opening. 

But we do have a few people to thank: Michael Cullum and @chaosversum were thanked by Symfony for separately reporting the two issues addressed in Symfony security releases. They also thanked Nicolas Grekas for implementing the fix. I would also give a huge thanks to Symfony and the Drupal Security Team for coming together to implement the fix and for coordinating the announcements. It’s hard work, and it shows the community at its best.

“So when we have an off-cycle security release, first the PSA comes out. Can you tell me a bit about what Mediacurrent does from the time the PSA comes out to just before the security advisory drops?”

Flynn: As someone on the team at Mediacurrent, I can see some of the things you do. But I’m wondering what else happens behind the scenes? 

Shrop: The first thing that happens is that I’m notified about the PSA coming out. I’m signed up for updates via email, Twitter, and RSS feeds from https://www.drupal.org/security, and so are a lot of other folks at Mediacurrent. Internally, we have some processes that we have standardized over time for how to deal with security updates that we follow across the company. We centralize information we have on the security PSA/advisory, recommend client communications, and talk about how to prepare as a team. We have multiple communication threads internally, as well, so no one can miss it. I send an email to the staff and I post in our Slack in a few places to get us ready.

Flynn: I know that we often clear time in advance for the team to implement the security updates.

Shrop: Yep. All of us share more information as a team as official information is released or as our own investigations reveal information. For example, early on the day the security advisory was released, our DevOps Lead, Joe Stewart, noticed that Symfony had put out a notice that they were also going to be releasing a security update that day, so that gave us a heads up that it might be related. We couldn’t know for sure until the security advisory actually came out, though. No one can do it by themselves, which is why we have a whole team working on it - it’s the only way to handle these things. ​​​​​​

Christine and Shrop on another call

“So then the security advisory drops. How did we go about fixing the issue?” 

Shrop: First, we reviewed the advisory to assess risk and for any mitigations that help determine how quickly we need to perform updates. With this advisory, it was needed pretty much immediately, so we started to update Drupal core for our clients and pushed to test environments. Our QA team performed regression testing related to the update. Once QA approved each update for each client, we worked with folks to approve the updates and release them to the live environments. 

The important points are to line everyone and everything up in advance, have the talent in-house who can work on clients of all shapes and sizes and needs, and then to work as a team to resolve the issue on every client site as quickly as possible. 

“Were there any sites that were trickier to update? Why?”

Shrop: Clients that were on older versions of Drupal Core, who had delayed upgrading, were harder to update. Every site was updated within a short time, regardless, but even though they started at the same time, those clients did not finish first, because there was more development and testing needed on each site.

Flynn: What was different about the process to update those sites? 

Shrop: If a client wasn’t on version 8.5.x, the lead technologist on the project had to work on an alternative update to secure the site or application, since there wasn’t a security update released for it. Figuring out an alternative process on the fly always introduces risk. It’s part of the value that we bring, that we have team members that have the expertise to evaluate that sort of thing. For example, we had one new client that was on an older version of Drupal 8 core. So one of our Senior Drupal Developers, Ryan Gibson, had to go in and determine what to do. He ended up updating Symfony itself to mitigate the risk. 

Flynn: I’m guessing that we are going to recommend to that client that we update Drupal core for them very soon?

Shrop: Yes. The big takeaway is you’re lowering your risk of problems by staying on the most recent, up-to-date minor version of Drupal 8. Version 8.5.x is current and stable right now, so you should be on that.

Flynn: Why would a client not update?

Shrop: There are always dynamics. I hear lots of good excuses, and I’m not exaggerating, they are good, real reasons! The client is busy, the client has multiple workstreams, it’s hard - but it is getting to a point where I want to recommend even more strongly to clients that it is more expensive to not upgrade. It is going to cost them more when there is an update because we have these additional evaluation and update tasks. The whole point of Drupal 8’s release cycle is to spread the maintenance cost over years rather than getting hit all at once. 

Flynn: And it introduces greater risk. A security breach is an order of magnitude more expensive than extra mitigation steps.

Shrop: Definitely.

“When is the next version of Drupal Core coming out?”

Shrop: Version 8.6.0 will be released in September. Our teams are already starting to test the early versions of this release on some of our projects. If a security update comes out in September, we want all of our clients to be prepared by being on the currently supported version of Drupal core. That way, they will receive security updates.

Flynn: One of the nice things about the Drupal development community is that they provide the betas of the next version of Drupal core so you can get ahead of the next release, right?

Shrop: Yes. When the community starts releasing betas or release candidates, especially release candidates, you want to start testing ahead of time. If you have a Drupal site, you can get your developers to test. If you find a problem, it may not be with your site, it might be an issue with Drupal core and this is a great opportunity to contribute your findings back to drupal.org and help the greater community. There might be a security release weeks after a version comes out and you want to be prepared to implement it.

Flynn: It goes back to risk mitigation.

Shrop: If you are on, say, an 8.2 site right now, you’re on the higher risk side, unfortunately. We advise our clients that it is in their best interest to be on the current, stable version. It costs our clients more in the long run if they don’t update on a steady basis.

Flynn: So if you’re on an older version of Drupal Core, you might not get an easy-to-implement security update when a vulnerability is discovered?

Shrop: The quotes from the Drupal Security team I really want to emphasize are, “Previous minor releases will become unsupported when a new minor release is published,” and, “Any additional security updates for officially unsupported branches are at the sole discretion of the security team.” This is important to understand. For the SA Core 2018-002 fix earlier this year they provided release updates for older versions of Drupal… but they didn’t have to. In the case of the fix last week, they did not.

“What was the best gif exchange of the Drupal core security update process?”

Flynn: I nominate this one, from mid-afternoon:

Slack Gif Example

Shrop: Definitely! 

“What story didn’t we tell yet?”

Shrop: I think we covered most of it. The last thing I’d put out there is for the technical folks reading this. You need to read the security advisories, join Drupal Slack, read what Acquia, Pantheon, and others are saying about each announcement. Then, you take all of that in and make your assessment of what actions you are going to recommend your organization take. This should lead your organization to a documented security plan that you follow. But, you know… 

Flynn: “Update all the things”?

Shrop: Exactly!

Other Resources
7 Ways to Evaluate the Security and Stability of Drupal Contrib Modules | Mediacurrent Pantheon Guest Blog 
Security by Design: An Introduction to Drupal Security | Mediacurrent Webinar

Aug 03 2018
Aug 03

We all have heard the debate about Open Source Software and Closed or Proprietary; but what is the real difference?

Simply: 

Open source software is available for the general public to use and modify from its original design free of charge. 

versus

Closed source where the source code is not shared with the public for anyone to look at or change. 

One of the main advantages of open source software is the cost; however, when applied to OSS, the term "free" has less to do with overall cost and more to do with freedom from restrictions. 

90% 
According to Forrester Research 90% the code in a typical application is Open Source.  

For a Closed Source CMS, depending on the choice of software, the cost can vary between a few thousand to a few hundred thousand dollars, which includes a base fee for software, integration and services, and annual licensing/support fees. 

Open Source Software vs Proprietary Graphic

In a 2017 report by Black Duck Software by Synopsys, nearly 60% of respondents said their organizations’ use of open source increased in the last year citing: 

  • cost savings, easy access, and no vendor lock-in (84%)
  • ability to customize code and fix defects directly (67%)
  • better features and technical capabilities (55%)
  • the rate of open source evolution and innovation (55%).

1M+ 

Websites across every industry vertical —from Georgia.gov to Harvard— trust Drupal as a secure open source CMS platform. 

Open Source Software has a long-term viability and is always on the cutting edge of technology.  Selecting technologies means committing to solutions that will support an active, growing business over the long term, so it requires careful consideration and foresight.  Here are some of the benefits of open-source to consider:

1. Value for cost 
       Worried about your marketing budget when looking at changing your CMS? Open source software has no licensing fees! It’s free, which means room to spend your $ on other initiatives.
2. Added Security
       Open source - means community. The more people (developers) looking at the source code, the more fixes and regular updates will be available. What can sometimes takes weeks or months to resolve with proprietary software takes just hours or days with open source. This will help give your marketing team a piece of mind knowing that if you don’t have time to look at the code of your site - or you don’t know how - then there are developers all over the world continuously checking for bugs & fixes.
3. Customizability
       Have a really customized idea for your site that you’ve never seen elsewhere? Open Source can help. By customizing the code to fit your needs, it provides a competitive advantage for your business.
4. Flexibility
       Open-source technology naturally provides flexibility to solve business problems. Your team and organization can be more innovative, and it gives you the ability to stay on the cutting edge of latest trends & designs.
5. Integrations
       With open source, especially Drupal, you can Integrate the best-of-breed marketing technology. It is architected for easy integration with your tools - Marketing automation, email service providers, CRM, etc… Drupal 8 gives you the foundation for your digital experience ecosystem.
6. Speed
       This isn’t just about site speed, but the ability to get your site up and running - with full marketing capabilities - on time & within budget. Open source allows you to deliver value right away.
7. Scalability 
       Drupal and other open source platforms give you the advantage of being able to scale your digital presence for the future. You're not confined to stick with what you already have. You can continue to evolve and build long-term with open source.

The Benefits of Open Source can go on for pages but it’s important when evaluating your options to think about your business and its goals. Once consistent need we see is having access to a CMS that is easy for you and your team to manage on a day-to-day basis.

In the next blog of the series - we’ll hear from the Associate Director of Digital Marketing at Shirley Ryan Abilitylab, about how he is leveraging open source - particularly Drupal - to achieve his business goals. 

Aug 02 2018
Aug 02

One of the most popular components on any website I've worked on is the card component.  Depending on the website, the card component is used to group various pieces of content into a container which can be used throughout your website.  Here’s an example of a card component in one of our projects.

In some instances, a card can be a user profile, content teaser/excerpt, latest news or events.  Today we will build a card component which will contain the information for the latest events.  This card can be used in the /events page to list all the latest events taking place.  The card can also be used in other pages and it may need to be displayed slightly different than the original card, this transformation is called "variations" and is usually achieved by passing a modifier CSS class to the original component which we can use to write different styles for the card.  More on this later.

Let's get started

First, let's take a look at what we are building so we have a visual of the code we will be writing.

Component Example 1

As you can see from the images above, our card takes different shapes but the information in it remains the same or similar.  This is a common practice to modify components based on where and how they are being displayed.

Let's build the card

Identify component's fields

Before starting to write any code, let's take a close look at the card images to identify the fields or data elements the card needs.  From the images above we can see the following fields will be needed:

  • Image
  • Title
  • Subtitle
  • Excerpt
  • Label or category
  • Label for comments
  • Label for time posted

Typically, components are built following the Atomic Design approach which basically means breaking things down into small pieces (atoms) and then combining those pieces to build more elaborate components.

In the interest of time, we are going to skip building each piece as its separate component and instead we will build the card as a whole.  I recently wrote a blog post on building flexible headings which demonstrate the approach I usually take when building components.

Architecting the component fields

We know the fields we need but it is helpful to determine what type of fields they are and what they will be called.  The table below gives us a good visual of our fields architecture.

List of Example Component Fields

Writing the code

1. In your components or patterns directory in your project, create a new folder called `card`

2. Inside the Card folder create two new files
          -  card.html
          -  card.css (we're using CSS to keep things simple.  Feel free to use Sass if you'd like).

3. In your card.html we'll start with the basic structure of the card

<article class="card">...</article>

So we've created an article tag as the card's container.  Why <article>  and not <div>?  Well, since the card is intended to contain an event's info, if we place a bunch of cards together it makes sense that each card is an individual event article.

4. Next we are going to create wrappers for the two types of data the card will hold.  The two types of data as we have seen from the table above are: Image/media and text or content.  Let's modify our code so it looks like this:

<article class="card">
 <div class="card__media">...</div>
 <div class="card__content">...</div>
</article>

The reason for splitting the image and the rest of the content is that this allows us to move things around independently of each other to create different variations of the card.  More on this later.

Let's pause to review how content will be laid out

If we look at the card images above, we see that some of the fields are either on the image side and others are grouped together separate from the image.  Although we could potentially place fields in the image or content wrappers, it makes sense to place them in the wrapper where they visually appear.

For example, the date and label fields (Photos), look like they belong in the same group as the image.  The rest of the fields will go in the Content wrapper.

5. Let's start with the image wrapper:

<article class="card">
 <div class="card__media">
   <img src="http://placehold.it/300x300" alt="Card image" />
   <div class="card__date">
     <span class="date--day">27</span>
     <span class="date--month">Mar</span>
   </div>
   <span class="card__category">Photos</span>
 </div>

 <div class="card__content">...</div>
</article>

So let's focus in the fields inside card__media. We see we have our image, which in this case is rendering a placeholder image.  Then we have a wrapper to hold the date fields (day and month).  Again, wrapping these two together makes it easy to manipulate them as a single item rather than two separate fields.  Lastly, we have the category for this content (Photos).  Since all these fields seem to belong together, it makes sense to place them the way we have.  Later on, we will use CSS to place each of the fields in their right position.

6. Now let's place the remaining fields inside the .card__content wrapper.  We will temporarily hide the fields in the .card__media wrapper to focus on the other fields.  Modify your markup to look like this:

<article class="card">
 <div class="card__media">...</div>

 <div class="card__content">
   <header class="card__header">
     <h2 class="card__title">City Lights in New York</h2>
     <div class="card__subtitle">The city that never sleeps</div>
   </header>
   <p class="card__excerpt">New York, the largest city in the U.S., is an architectural marvel with plenty of historic monuments, magnificent buildings and countless dazzling skyscrapers.</p>

   <footer class="card__meta" role="contentinfo">
     <span class="card__post-date">6 min ago</span>
     <span class="card__comments">39 comments</span>
   </footer>
 </div>
</article>

So the first thing we did was add a `<header>` tag to wrap the title and subtitle fields.  The header tag is a great way to indicate the role content plays in our component.  In addition, using semantically correct markup makes this component SEO friendly as well as accessible.  Next we have the teaser content wrapped in a <p> tag and finally, we add another semantic tag which is `footer` to wrap the publish date and comments fields.

Why this markup?

I'd like to bring up a couple of things to your attention regarding how I arrived at the markup above.  First, we are using BEM for naming CSS classes (card__title, card__comments, etc.).  BEM is great for creating associations on your component fields.  By looking at the markup you know where each field belongs.  This makes it easier to identify where you would find the styles or other assets for the component within your project when you have tons and tons of components.  The class card and all the other field classes are unique not only to this component but in the entire project.  This gives us the peace of mind that our styles will not inadvertently affect other areas of the website.

Notice I created two containers within the card (`card__media` and `card__content`). This allows me to split the card content into groups I can manipulate individually and independently of each other.  This will come in handy when we need to create a long or wide card.  In addition, by grouping multiple fields into a single container it is easier to manipulate the fields with CSS as a group rather than individually.

Atomic Design

If you are familiar with Atomic Design, you know the recommended way for building components is to break things down into the smallest pieces possible.  For example, in the card structure above, each of the fields that make up the card can actually be its own individual component.  Then we would combine them all into a whole new component (card).  In the interest of time/work, I am not breaking the card component into atoms. However, if I were building the card for a project I would definitely do that as this allows for components to be reused and save time/work in the long road.

Putting the entire card together

Now that we have built each piece of the card, your **card.thml** file should look like this:

<article class="card">
 <div class="card__media">
   <img src="http://placehold.it/300x300" alt="Card image" />
   <div class="card__date">
     <span class="date--day">27</span>
     <span class="date--month">Mar</span>
   </div>
   <span class="card__category">Photos</span>
 </div>

 <div class="card__content">
   <header class="card__header">
     <h2 class="card__title">City Lights in New York</h2>
     <div class="card__subtitle">The city that never sleeps</div>
   </header>
   <p class="card__excerpt">New York, the largest city in the U.S., is an architectural marvel with plenty of historic monuments, magnificent buildings and countless dazzling skyscrapers.</p>

   <footer class="card__meta" role="contentinfo">
     <span class="card__post-date">6 min ago</span>
     <span class="card__comments">39 comments</span>
   </footer>
 </div>
</article>

Card Styles

Now that we have the markup ready for the card component, we can begin writing our Sass/CSS to style it.  I am not going to go into detail about the styles as I have commented the parts that may need some explanation and should be easy to understand.  The main take away from writing styles for components with unique names is that there is little to no CSS nesting.  This makes overriding styles an easy task if there is ever a need to do so.  In addition, styles written for a component like this, don't run into the risk of leaking into other areas of the website.

That's a lot of CSS but it's all necessary to achieve the look and feel of the card.  It is important to know that your markup file (card.html), needs to reference your styles file (card.css) for things to work.  This may be obvious but if you are following along that's an extra step that needs to be done.
Creating a card variation

If  you would like to see the card displayed wide or horizontally, modify your card wrapper to look like this:

<article class="card card--wide">...</article>
 

Component Example 2

Notice that by passing the CSS class of `card--wide` to the original card component we are able to change the orientation of the card from long to wide giving us an alternative variation to use without having to rebuild the card from scratch.  These variations are pretty powerful and present many advantages.

If you look at the styles, you will notice there is a block of CSS in which the card--wide is changed to move the card's content to the right of the image.  This is a great way to provide alternative views of a component without having to recreate the markup or styles for a component.

In closing

Building components is one of my favorite things to do as a developer and there are many advantages to this style of theming.  It's important to think through how components will be used so you can plan ahead how to best build a component that can be reused.  Rushing through building components without having a full understanding of where and how a component may be used can lead to duplicating code or redoing your work to accommodate new project requirements.

Jul 18 2018
Jul 18

Selecting a CMS for a university can be a challenging decision. There are so many needs and nuances to consider - costs of implementation and maintenance, a wide-range of technical ability among site administrators, developers and content editors, a variety of end users looking for different information and the list goes on and on. While your answer likely isn’t as easy as, “let’s just do what everyone else is doing,” by better understanding why other universities made the choice they did can shed light into your decision-making process. 

Drupal is far and above the most used CMS in higher education - 26% of all .edu domain sites are in Drupal, including 71 of the top 100 universities. 

So why are universities like MIT, Georgia Tech, Louisiana State University, Butler, Stanford, Harvard and the rest of the Ivy League universities choosing Drupal? 

Simply put, Drupal makes good business sense, especially with the added benefits of Drupal 8. At Mediacurrent, we believe your website is your greatest digital asset and can be leveraged to accomplish organizational-wide goals. Drupal makes that possible. Here’s how:  

Communicate With All Students - Prospective, Current, and Alumni 

If you want to reach your full recruiting and fundraising potential, you need to communicate with your entire audience. There are a variety of Drupal features that ease the stress of common communication challenges. 

Language:  Not only are their multiple languages spoken within the U.S., but our country hosts over a million international students. Drupal makes creating a multilingual digital experience simpler. Native language handling is built directly into Drupal 8’s core APIs, giving you over 100 languages to choose from. With that functionality it is easier than ever to engage with prospective students across the globe in a meaningful way.

Accessibility: The CDC estimates that 20% of U.S. adults identify as having a disability. These disabilities often hinder people’s ability to interact with the average website. Drupal is an inclusive community and has committed to ensuring that all features of Drupal conform with w3C and WCAG 2.0. Pair that with a strong higher-education focused accessibility strategy and your potential audience could grow by 20%. 

Technology: According to the 2017 College Explorer Market Research Study, the average college student owns 5.6 devices and spends 137+ hours on them! This may seem like common sense now, but if you want to engage with students, you need to account for a variety of screen sizes. Thankfully, Drupal 8 is designed with a mobile-first mentality and includes out-of-the-box responsive functionality. 

Personalization: Universities face added complexity when it comes to digital strategy due to the broad audiences they appeal to. With so many unique people coming to the same pages, content strategy, conversion path mapping and optimization, and defining strong call to actions can be a struggle. By incorporating personalization into your content strategy, whether that is personalized based on user authentication or by integrating tools like Acquia Lift or Salesforce Marketing Cloud, you can speak to the masses but make them feel like you’re speaking specifically to them. 

Reduce Overhead Costs + Increase Operational Efficiencies with Drupal

Drupal can have a dramatic impact on reducing overhead costs and increasing operational efficiency. Universities have a big need for multiple websites: departments, colleges, libraries, and student organizations all want their own website. The direct cost of supporting this many sites along with resourcing the training and support is expensive and encourages unnecessary technology sprawl. As an open source technology (no licensing fees!) along with the multisite feature, creating sites for these different groups is exponentially easier, more cost effective, and ensures brand consistency. 

You can also increase efficiency, ensure content consistency and improve the user experience by creating a “source of truth”.

Write content once and publish it anywhere it’s relevant.

Having to update content such as curriculum or an academic calendar on multiple pages is inefficient and unnecessary. Write once, publish everywhere, save time. 

Improve Brand Equity + Amplify Digital Strategy

As a university, your brand is a powerful asset. You spend significant energy and resources on building loyalty to bolster several organizational goals from recruiting efforts, engaging current students on campus and fundraising among alumni.

With your website being the hub of your marketing strategy, it is critical for your CMS of choice to play nice with your marketing efforts.

Drupal happens to be very SEO friendly out of the box, but there are also advanced configuration options available to support a more sophisticated SEO strategy. You can amplify your digital strategy by integrating your marketing tools and communication platforms directly with Drupal. And the 26% percent of other .edu sites using Drupal make integrating your university-specific tools to your website easier. 

Reduce Risk

I’d be remiss without mentioning security and GDPR compliance. As a university, you hold sensitive information about the students who have attended your school and they are trusting you to keep that secure.

The Drupal community is passionate about security and has an industry leading global security team to ensure your site is protected.

Additionally, as the landscape of privacy rights changes around the world (most recently, GDPR), it’s in your best interest to stay on top of it and reduce the risk of being penalized for data collection practices. 

Have questions about how Drupal can benefit your university? Let us know. We’d be happy to chat. 

Jul 03 2018
Jul 03

What’s the greatest entrepreneurship lesson that Mediacurrent partner Dave Terry has learned?

In a recent guest spot on the Good People, Good Marketing podcast, Dave weighs in on the evolution of open source technology and shares his path to building a leading Drupal-based agency.

Interview Sound Bites 

Technology should be shared and free. 

Giving back to the Drupal community is embedded in Mediacurrent’s DNA. Dave explains why that’s so important.

Culture is about people and who we hire. I know a lot of companies say that, but it’s really about putting the processes behind how you identify the right people within the company.

A successful company culture attracts great talent while also managing accountability with a distributed team. Here, Dave shares the three tenets of culture at Mediacurrent.

Tune in

Listen to the complete podcast, Episode 47: Interview with Dave Terry, on the Sideways8 blog.

Related Content 
Why Should Companies Support Drupal? | Blog
Drupal Contrib: Why it's Important | Video
Creating a Culture of Giving in Your Organization | Blog
 

Jul 02 2018
Jul 02

Recorded June 21st, 2018

This episode we welcome Jess Snyder who is on the planning committee for GovCon, coming up real soon in August, to talk about… GovCon.. Which is coming up real soon in August. We’ll cover some Drupal News, it looks like Bob has the Pro Project Pick this episode and Ryan will bring it to a close with The Final Bell.

Episode 38 Audio Download Link

Updates:

Jess Snyder from WETA, DC talking about Govcon

  • What do you do at WETA?

  • What got you into Drupal

  • What got you involved in GovCon

  • Any notable keynotes / sessions you’re looking at?

  • ** Random questions **

Drupal News:

Pro Project Pick:

Events: (https://www.drupical.com/?type=drupalcon,regional)

The Final Bell: (Ryan)

Jun 26 2018
Jun 26

There were a lot of amazing sessions at DrupalCon Nashville 2018, but one of the few sessions that sparked my interest was “PDFs in Drupal” presented by Dan Hansen. In this session, Dan goes through the importance of PDFs, gave a short introduction to some of the more popular PDF rendering libraries, and gave a demo on some tips and tricks that I found very useful for my future projects.

Most, if not all of us, have opened a PDF recently. PDFs are popular because they are universal as a document format and can easily be sent to others without having to worry about whether their machine can open them. Despite this, Dan notes that it feels like PDFs are behind in support, and it would be nice to have better PDF handling in Drupal core - similar to images in media libraries.

PDF Rendering Libraries

This session introduced a handful of popular PDF rendering libraries:

  • Print-to-PDF
  • jsPDF
  • FPDF
  • mPDF
  • TCPDF
  • FPDI
  • DOMPDF
  • Wkhtmltopdf
  • PDFtk

PDFs in Drupal

In Drupal 7, the most popular module for generating PDFs is the Print module - but does not support Drupal 8. Fortunately, there are options available for Drupal 8:

  • Printable - based on the Print module to allow generation of PDFs. It relies on the PDF API, which is currently not stable.
  • Entity Print (recommended) - allows for printing any Drupal entity or View (D8 only) to PDF. This module provides flexibility with PDF rendering libraries and is more lightweight compared to the Print module and has a stable release for both D7 and D8.
  • FillPDF - allows for filling PDF with values. This module can be used with the PDFtk library or a paid third-party service, and can help in reducing overhead of rendering PDFs.
     

Tips and Tricks

I found Dan’s demos to be the most interesting - as he showed some code examples of various (and seemingly common tasks) related to PDFs. The following examples from Dan’s session shows how simple and straightforward it is to work with PDFs:

Making a PDF from HTML

A custom controller can simply return the following output:

$dompdf = new Dompdf();
// Pass the HTML markup.
$dompdf->loadHtml($markup);
// Render the HTML as PDF.
$dompdf->render();
// Stream the generated PDF back to user via browser.
$dompdf->stream();

Combining 2 PDFs

Using the PDFtk library:

$pdf = new Pdf([ 
  'A' => '/path/file1.pdf', // A is alias for file1.pdf 
  'B' => ['/path/file2.pdf','pass**word'], // B is alias for file2.pdf ]);
$pdf->send();

Notice that you can specify a password for the PDF file (if there is one). You can also extract specific pages from the PDF files as well:

$pdf->cat(1, 5, 'A') // pages 1-5 from A 
  ->cat(3, null, 'B') // page 3 from B 
  ->cat(7, 'end', 'B', null, 'east') // pages 7-end from B, rotated East 
  ->cat('end', 3,'A','even') // even pages 3-end in reverse order from A ->cat([2,3,7], 'C') // pages 2,3 and 7 from C    
  ->saveAs('/path/new.pdf');

More of these examples can be found at https://packagist.org/packages/mikehaertl/php-pdftk.

Fill in a PDF Template

Using the FillPDF module:

$pdf = new Pdf([‘PATH_TO_PDF’]);
$pdf->fillForm([
  ‘name_of_text_field’ => ‘Some value’
])
->needAppearances()
->send(‘filled.pdf’);

I really enjoyed and learned a lot of useful tips from Dan’s session, and I encourage anyone who is looking to work with PDFs in Drupal to check out the session.

Related Content:
Accessibility: Let's Talk PDFs | Blog
Top Drupal 8 Modules | Blog
Mediacurrent Top Drupal 8 Modules: Drupalcon 2018 Edition | Blog

Jun 22 2018
Jun 22

Happy Friday everyone! In this episode Front End Developer, Grayson Hicks, joins the show to answer some questions about Gatsby.js, an up and coming static site generator that you can use with Drupal or any other data source. Video and full transcription below. 

[embedded content]

May 25 2018
May 25

Mediacurrent team members will be heading to the mountains in North Carolina for a two day Drupal-filled event for all levels of Drupal skills. Asheville Drupal User Group is a small but dedicated community of Drupalers who will host their 8th annual Asheville Drupal Camp on July 13-15th at UNC Asheville. Mediacurrent will be sponsoring the event and will have 9 team members presenting 6 sessions. We even have Mediacurrent Lead Drupal Architect, April Sides as one of the organizers of the event. From technical Drupal developing to making friends in a remote work place, check out what Mediacurrent has in store for Asheville Drupal Camp 2018:  

Speakers: Mark Shropshire, Open Source Security Lead at Mediacurrent and Bayo Fodeke, Senior Drupal Developer at Mediacurrent

Contenta is an open source API-first Drupal distribution that makes out of the box decoupled Drupal accessible. This session will demonstrate installing Contenta, working with included features, using demo content and consumers, and working with the Contenta community.

Takeaways:

  • Install Contenta
  • Know how to contribute back to Contenta
  • Know how to connect a frontend application to a Contenta backend

Speakers: Brian Manning, Project Manager at Mediacurrent and Kelly Dassing, Senior Project Manager at Mediacurrent

Pivots come in a variety of shapes and sizes. They can be a minor change that’s quickly integrated into scope, or a major departure that alters the entire course of the project. When you encounter these shifts, it’s vital you strategize, communicate, and continue to capture the vision of the client so the final product is a solid foundation for your client’s goals and KPIs—not a point of resentment.

Key points:

  • Kicking off the project with an organized team and plan of attack
  • Communicating with your whole team and the client
  • Being ready to PIVOT
  • Keeping your team grounded in the delivery
  • Conducting a retrospective and additional planning—not a postmortem

Speaker: Grayson Hicks, Front End Developer at Mediacurrent

GatsbyJS is an exciting way of thinking about building sites for the modern web. Is it a framework? Is it a static site generator? This session will cover the benefits of using GatsbyJS and will include the best and not so best use cases.

Key points:

  • What Gatsby's GraphQL data layer is and how and why to embrace it
  • Gatsby's internal API for building a Gatsby starter to fit your team
  • Looking at Gatsby's plugin/source/transformer system for taking Gatsby from a a blog-generator to a site-generator

Speaker: Ben Robertson, Front End Developer at Mediacurrent

Accessible web design really boils down to a few basic principles and when you have these as your first principles when starting a project, you can save your self, your team, and your clients hours of headaches around accessibility testing. 

This presentation will describe a few basic principles to keep in mind when building accessible web experiences, provide explanations and examples of these principles in code, and identify common accessibility pitfalls and how to avoid them.

Topics covered:

  • Simple JavaScript techniques for ensuring accessible components
  • CSS properties that affect accessibility
  • How to use modern CSS (flexbox, grid) without compromising accessibility

Speaker: Zack Hawkins, Director of Front End Development at Mediacurrent

Gone are the days of having one massive JavaScript or CSS file. his session will explore the use of libraries to conditionally load assets and resolve dependencies.

Key topics:

  • Introduction to libraries in Drupal 8.
  • Library options and configuration.
  • What a component based workflow looks like with libraries.
  • Code splitting with Webpack and libraries.
  • Library gotchas and things to be aware of.

Speaker: Kelly Dassing, Senior Project Manager at Mediacurrent, Chris Manning, Director of QA at Mediacurrent, and Sam Seide, Drupal Developer at Mediacurrent

Hear the story of the real-life friendship that blossomed between these three Mediacurrent team members from different departments and how it helps them in their day-to-day work.

This session will be best appreciated by anyone who is a remote worker, whether employed by a small company or larger corporation.
 

Additional Resources

"Shrop" Talk at Drupal Camp Asheville 2016
Drupal Camp Asheville 2016
Mediacurrent to Present 7 Sessions at Drupalcon Nashville

May 08 2018
May 08

Jay Calicott DrupalCon Session

Welcome to the latest edition of the top modules for Drupal 8! Below I recap my newest list that I presented at Drupalcon, Nashville along with updated descriptions. I have also included labels to indicate which modules are best suited for intermediate users versus modules that are universally easy to install and configure.

As an added bonus I now have all of these modules and dependencies available through Github/Packagist for easy setup. 

Just run “composer create-project mediacurrent/mc_top_modules” to get started in minutes, enjoy!

ESSENTIALS LIST

  1. Admin Toolbar (Beginner) - The admin toolbar. It’s a module that you might think would just be in core. We use this on every project because navigating through menus in Drupal is a real pain without rollover menus.
  2. Component Libraries (Intermediate) - If you are doing any Twig theming this module is going to help you with your Twig file includes.
  3. Devel (Intermediate) - Devel can help you debug problems in Twig templates. Another feature that is handy is the ability to generate dummy content.
  4. Entity Browser / Media Entity Browser (Beginner) - The Media Entity Browser module gives you the ability to use a nice little library pop-up to upload, browse and search for different types of media.
  5. Field Group (Beginner) - This is a helpful module for cleaning up your content types. You can organize fields into tabs, accordions, etc. to give your content editors a better experience.
  6. Google Analytics (Beginner) - Google Analytics is a simple module that allows site admins the ability to easily add basic tracking.
  7. Linkit (Beginner) - This module gives you an autocomplete popup inside of Wysiwyg for adding links.
  8. Metatag (Beginner) - Maintained by Mediacurrent’s very own Damien McKenna, this module lets you configure all of your meta tags for SEO purpose.
  9. Panels / CTools / Page Manager (Intermediate) - Panels is a great site building tool for creating custom layouts with a drag and drop interface.
  10. Paragraphs / Entity Reference Revisions (Intermediate) - The paragraphs module is a Mediacurrent favorite for a couple of reasons. Paragraphs are like mini-content types that can handle a variety of use cases.
  11. Pathauto / Token (Beginner) - The pathauto module lets you set up clean alias patterns for all of your content. If you want all of your blogs to have the path /blog/[title of the blog with hyphens instead of spaces] - this will be the module that you use.
  12. Redirect (Beginner) - Almost every new site needs to incorporate 301 redirects for old page URLs. The redirect module gives site admins an easy interface for creating those redirects in Drupal.
  13. Search API (Intermediate) - The Search API suite of modules is a fantastic way to configure your site searches. By default this Search API DB is enabled but you can easily swap out for Apache Solr. The Search API Pages module is also handy for getting a site search up and running quickly.
  14. Simple Sitemap (Intermediate) - A pretty easy to configure module for creating XML sitemaps for search engines.
  15. Stage file proxy (Beginner) - A great module for downloading images to your local environment auto-magically rather than having to continually migrate those images manually.
  16. Webform (Beginner) - This module is awesome because it makes it easy to make any and all kinds of forms on your site. This is a must-have module if you plan on managing forms within Drupal.

NOTABLE MENTIONS

Below are a list of notable mentions that didn’t make the essentials list but are still worth checking out.

  1. CKEditor Media Embed (Beginner) - A lot of content out there on the web includes social media callouts. This module makes it a lot to easier to include that content inside of your Wysiwyg.
  2. Colorbox (Beginner) - The Colorbox module integrates is a popular lightbox library of the same name with Drupal Views and fields. You will need to download the Colorbox library to your libraries folder, otherwise this module is very easy to set up.
  3. Commerce (Intermediate) - If you have done any e-Commerce you have probably heard about the Commerce suite of modules for Drupal. This allows you to add products to your site and checkouts, payment options and more.
  4. DropzoneJS (Intermediate) - Pretty much everywhere you go on the web you see a drag and drop upload option. So why not have that in your Drupal project? This module makes it relatively easy to do so but there is some configuration required along with the need to download the DropzoneJS library.
  5. Entity embed / Embed (Intermediate) - This module lets you embed any Drupal entity anywhere. The most common use case for this is embedding media within Wysiwyg. When paired with the Media Entity Browser, for example this gives editors a powerful tool for embedding media from a library. Both the Lightning & Thunder distributions have good examples of this implementation.
  6. External Links (Beginner) - Over the years we have seen that most clients want the option to force external links to open up in a new window or tab. This module makes that feature request very easy. All you do is check one checkbox and essentially you are done.
  7. Focal point / Crop (Intermediate) - The problem we are trying to solve with these modules is supporting different kinds of crops from the same source image. This solution is probably the easiest I’ve found both on the developer and the content editor. This module tries to crop around the focus of the image rather than just arbitrarily cropping from the center.
  8. Geolocation (Beginner) - I like that the Geolocation module makes it simple to add a point on a map and have that map render in a field. Easy to input and easy to format, with plenty of options for configuration.
  9. Honeypot (Beginner) - Do you ever get spam? While there are a lot of options for anti-spam measures (including captches) this solution has an algorithm that does not burden the end user and is pretty effective.
  10. Lightning Install Profile (Beginner) - Lightning is a general purpose Drupal distribution that focuses on the media and editorial enhancements. Not only is it a good started distribution for Drupal development, it is also a good learning tool. It often is easier to learn how to configure and use a module by examining how it’s implemented on a pre-configured distribution like Lightning.
  11. Scheduler (Beginner) - The scheduler module lets you schedule the publishing and unpublishing of your content. Note that it is going to use cron to make this happen so you need to verify that your cron is configured correctly.
  12. Slick / Slick views / Slick media (Intermediate) - The Slick suite of modules adds functionality to allow site builders to create slideshows and carousels. There are several related modules that integrate with every aspect of Drupal. The hardest part is the initial setup of library dependencies. Once that is done these modules are very easy to configure within the Drupal admin.
  13. Taxonomy Access Fix (Beginner) - This project addresses the fact that core doesn’t have granular enough permissions. The Taxonomy Access Fix module therefore adds in additional permissions to fill in the gaps.
  14. Viewsreference (Beginner) - Last but not least the Viewsreference module gives editors the ability to select a View from a field. At Mediacurrent we combine this field with a Paragraph type to give editors an easy, flexible interface for embedding Views onto a page.

Did I miss any modules you think should have made this list? Let me know on Twitter at @drupalninja!

Additional Resources
Top Drupal 7 Modules: Final Edition | Blog
Top Drupal Marketing Automation Modules | Blog
Top Reasons to Choose Drupal | Blog

Apr 27 2018
Apr 27

Happy Friday everyone. This episode we are joined by Anthony Fournier to talk about his experience in taking the data from Drupal and making it available for component based themes.

Apr 16 2018
Apr 16

Drupalcon 2018 is officially done! Mediacurrent was well represented with 37 teammates converging to Nashville for learning, networking, camaraderie, and professional growth. 

Mediacurrent Team Picture

In the coming weeks, we will be providing a cross-section of feedback from people who perform different roles. Our goal is to give you some insight around "what you missed." 

Drupalcon Nashville 2018 (by the numbers):

  • Approximately 3000 attendees from around the globe and 150 sessions.
  • Hundreds of informal birds of feather (BoFs) meetings where like minded peers gathered, custom training sessions, Summits, and code sprints were held in conjunction with the conference.
  • Over 20,000 Drupal 8 sites are now being launched per month.
  • 81% more of Drupal 8's modules are now considered fully stable compared to this time last year.
  • Some of the biggest logos in the world that have adopted Drupal were well represented in Nashville.

Drupal Logos

The Surgence of Marketing & Strategy: 

There was a common theme throughout the conference around how Drupal can provide a more holistic digital experience. Lauren Vaccarello, VP of Marketing at Box captured many of these points.  While there are a myriad of marketing tools and campaign options available, executives must not lose sight of the obvious - your company's web presence is the singular most important digital asset in your organization. Marketers and editors are demanding more though. They want a content management platform and a best of class partner to:

1.  Really lean in and understand their role and where Drupal solves problems for them.
2.  Take the time to learn about goals, success factors, KPIs and the vision of not just the project or department, but company as a whole.
3.  Show a simpler and easier editorial experience workflow.
4.  Leverage data analytics to make more informed decisions.
5.  Execute at a consistent, predicable level, but also provide insight and exposure to how other organizations are utilizing Drupal in creative ways.

These items are resonating. Megan Saniki, Executive Director of the Drupal Association (DA), talked about how the DA will be working hard to serve the needs of everyone involved in a company's digital experience, especially those who would consider themselves "non-technical."  For example, there will now be a new content and editorial track at Drupalcon, more case studies, and a newly redesigned home page was announced for drupal.org.

Vision of Drupal:

Dries Buytaert, the founder of Drupal, gave a powerful keynote presentation. He mentioned what an exciting time and huge opportunity there is "to grab" for everyone who has been involved with Drupal the past 17 years. After listening to a cross-section of stakeholders, Dries articulated what Drupal's 4 most critical priorities will be to drive the community forward. They include:

1. Improving the evaluation process to help increase adoption - this includes the number of clicks and steps to download Drupal.
2. Improving the content creator experience (people want Drupal to act more like social media tools they already use on a daily basis).
3. Improving the site builder experience - this could include making the version update path easier (note: 8.5 is the newest release of Drupal).
4. Promote Drupal to non-technical decision makers.  In general, this should entail more collaboration for those who have a vested interest in marketing Drupal. This includes a "Promote Drupal Fund" drive that was announced to collect $100,000 to among other things hire an extra, full-time employee for the Drupal Association. 

Recommended Sessions:

Top Drupal 8 Modules: A tour through the best of Drupal in 2018
Advanced topics in Decoupled Drupal
Think Your Website GDPR Compliant? Think Again!

Next Steps:

If you have any questions about Drupalcon Nashville or your next digital project please do not hesitate to reach out to chat.  What did you think of Drupalcon 2018? Send your feedback here.

Apr 03 2018
Apr 03

While everyone has a busy week attending Drupalcon sessions and events (be sure to check out Mediacurrent’s afterparty) , if you find some extra time, Nashville has an eclectic mix of activities and places to go. Whether you're looking for great music in none-other than "Music City" or you're looking for a nice place to relax and grab a bite to eat, take advice from a Nashville native and check out my list of Nashville's must-see spots. When you're ready to take a break from drupalin', check out these suggestions and engulf yourself in the Nashville culture. 

Music

Downtown Nashville

Image source: Wikipedia 

Whether you enjoy country music or prefer other genres, Nashville offers something for every taste.  Some nights you might need to venture outside downtown for more rock and roll. If music is at the top of your Nashville bucket list, here are nine spots you won’t want to miss:  

Food 

Nashville Chicken

Source: Monell’s

There has been a huge number of new restaurants opening but here are a couple of classics and a newish one:

  • Rotier’s Restaurant, the original Cheeseburger in Paradise? A Nashville classic and award winner, just be sure to get the burger on French bread.
  • Family style southern food at Monell's.  Dinner and breakfast are served to the table and passed around like a family holiday.
  • Hip Pinewood Social attracts visitors any time of day, breakfast and Crema coffee, co-working spot during the day, and bowling on antique lanes in the evening.
  • Need Barbecue? Martin’s, Peg Leg Porker,  Edleys, or G’z BBQ are all good choices.
  • Restaurants of award winning chefs include Sean Brock's Husk from Charleston, Tandy Wilson's City House, and the Catbird Seat. This year's James Beard semifinalists include Henrietta Red, Bastion, Josephine, and longtime East Nashville restaurant Margot Café & Bar.
  • Nashville Hot Chicken is very popular with heat level choices for anyone. But pay heed if they warn you when ordering.

Don't forget about the famous Nashville Hot Chicken. A few favorites among many great spots:

  • Princes Hot Chicken Shack. The original.
  • The Tenders Royale from Pepperfire is a nice introduction along with a couple of local drafts on tap, and blues music in the background.
  • Tenn Sixteen Great East Nashville Five Points restaurant.  The hot chicken comes in one heat level, kind of a "Nashville medium".  That is, it's usually pretty hot, unlike other restaurants that don’t specialize in hot chicken.
  • Fannie Mae's, which conveniently just opened up a new restaurant location near the convention center.
  • Another list hot chicken can be found here


Museums

George Jones Museum

Source: George Jones Museum (Also known as the home of the Mediacurrent Afterparty!)

Nashville is rich with history and musical history is at no shortage. Most of these museums are an easy walk or bus ride downtown:

  • The Frist Center -  This art deco building was originally the post office. The current exhibition is the exclusive North American venue of Rome: City and Empire from the British Museum.
  • Country Music Hall of Fame and Museum - Across the street from the convention center, you can also check out Hatch Show Prints or tacos from Bajo Sexto.
  • Musicians Hall of Fame and Museum - This museum “honors the talented musicians who actually played on the greatest recordings of all time.” Additionally The Rolling Stones first ever major exhibition, Exhibitionism, is making its last U.S stop, taking on Music City at the Musicians Hall Of Fame and Museum.
  • Lane Motor Museum - An amazing variety of the largest European collection of cars in the U.S. located a few miles from the convention center.

Exercise

Warner Park

Source: Expedia

Jogging/Walking

  • The downtown Cumberland River Greenway connects to Bicentennial mall - This route can be varied for any distance. 
  • Another popular area for walking and jogging is to cross the Shelby Street Pedestrian Bridge to Cumberland Park and Nissan stadium. 

Hiking/Trail Running 

  • Warner Parks - Large wooded parks on the western boundary of Nashville has hills with a view of the city.
  • B Cycle has bikes for rent by the hour with many locations to pick up or leave a bicycle.   


Family and Kids Activities


Miscellaneous

  • There is a free bus downtown to the Gulch or Farmer's Market and Germantown that has stops around the convention center.  Look for the Green Circuit.  This would be a good way to get to the AAA Nashville Sounds Baseball game in the evening.  
  • A couple of hints on street pronunciations beyond just a southern accent might help too:

       Demonbreun Street - Pronounced da-mun’-bree-un.
       Lafayette Street - Pronounced luh-fay’-ett. ( I know, I know) 


Hopefully everyone has a great experience in Nashville and comes back for a more leisurely visit. 

Mar 16 2018
Mar 16

In our first post that announced the new Mediacurrent redesign, we looked at the evolution of Mediacurrent.com over the years and talked through the over goals of the relaunch. Now let’s take a look under the hood to see some of the cool stuff we did and discuss what our development team learned along the way.

Let’s talk architecture

Now for the fun part, the technical architecture of the new website. First, the backend was upgraded from Drupal 7 to Drupal 8 - that will probably not be a huge shock to anyone. The more interesting aspect of this build is that we have now implemented a fully decoupled frontend. We accomplished this using a static generator called Jekyll which has been integrated with the Drupal backend. More on that in a bit. First let’s answer the question, “Why decoupled?â€

Why decoupled?

A decoupled architecture provides flexibility for constant evolution, opening the door to a variety of potential programming languages and design philosophies to accomplish your website goals. There are any number of articles that discuss the benefits of moving to a decoupled approach. For this post, I want to focus specifically on the points that were deciding factors for our team.

Security

While we do have full confidence in the security features that Drupal offers, we have to acknowledge that a static public site does offer some advantages that make securing the application easier. First of all, we have the option to make the backend CMS completely walled off from the public site. It’s not a hard requirement that the Drupal admin is made publicly accessible. Second, there are simply fewer vulnerabilities that a static frontend will be susceptible to in comparison to a full PHP application. For example, it’s harder to DDOS a site serving only HTML/CSS/JS and there is no server side code running that could be hijacked by an SQL injection attack.

Performance

Decoupled sites often have a performance boost over a fully Drupal-rendered site because the frontend is more custom and lightweight. This is certainly true in our case. The static frontend requires no processing at the time of request so the page is served up immediately with no server-side execution required.

Hosting

One of the things we liked about this particular solution was that it made the hosting architecture pretty simple and inexpensive. With only editors logging into the CMS and the static site being served by Gitlab, we were able to have a fast, reliable stack up and running relatively easily. Up-time is great in that you aren’t as vulnerable to a production error or traffic spike bringing the site down. That being said, all platforms are subject to downtime each year.

Eating our own dog food

As many other agencies will attest to, when you work on your own website it’s a good chance to try something different! We looked at what some competitors had done and we wanted to try an approach that would be a good fit for our needs without overcomplicating the end solution. This endeavor was a way to take some risks and learn along the way.

Dividing the work

The great thing about decoupling is that you break apart the work that needs to get done. The frontend team can focus on the frontend stuff without being tied too much to the backend work (although there will always be some overlap). Our agency spends a lot of our day delivering solutions to our clients so being able to break apart some of the work streams was an advantage. We like that in the future we don’t necessarily need to do a big redesign and Drupal upgrade at the same time. With a decoupled approach, we have the flexibility to tackle each separately.

Technical Overview

Now that you have seen the “Why†behind this approach, let’s look at the “How.†We have kept our Drupal CMS in Bitbucket, which gets deployed to a Pantheon server. That piece is still the same as its been for many years. The new wrinkle is that the public frontend is served on GitLab Pages. If you haven’t heard of Github Pages (which run on Jekyll), Github, GitLab and many other services allow you host Jekyll source files which they can auto-compile into HTML pages and host for you for free or cheap. Pretty neat huh? We ended up going with GitLab Pages because GitLab allows you to add more build customizations than Github. We have also looked at potentially using Netlify in the future as the host for our Jekyll files.

The question you might be asking is how does Drupal content make its way to GitLab? Put simply, we translate node content to markdown and push to the GitLab API on every node save. For user files, we actually still use Drupal uploads and reference the path within Markdown files. If you are familiar with Markdown files, these are the “content†files that Jekyll compiles into pages. The diagram below illustrates the basic flow.

Illustration of how Drupal content makes its way to GitLab

The concept is pretty simple: have Drupal manage your content, write to Jekyll markdown files and deploy those files to a static host.

Why not [Insert favorite Node framework here]?

You might be saying, that's all well and good but why go with a static generator over a server-rendered JavaScript framework like Next.js or Nuxt.js?

The short answer is that we reviewed several options and concluded there wasn’t a framework we felt was a fit at the time we were planning development (around mid-late 2016). Going with a JavaScript-only framework was ruled out for SEO reasons and the options for Isomorphic (server + client side js) frameworks weren’t as stable as we would have liked. Jekyll was the most popular static framework (and still is) with a variety of plugins we could utilize. After doing some POC’s we opted for Jekyll in order to keep the page rendering lean, simple and speedy. The overall complexity of the integration was also a deciding factor in choosing Jekyll over other options.

Trade-offs

One of the fun challenges with a static only site is that you need to learn how to get around the lack of server side rendering. The files are of course static, thus if you want anything dynamic looking you are limited to mostly JavaScript-based solutions. A couple quick examples are forms and the site search. For forms, we were already using Pardot hosted forms for marketing automation, so that wasn’t a big tradeoff. For site search, we went with a pretty cool solution that leverages https://lunrjs.com/ to handle searching the site. Essentially we have Drupal push an index file that Lunr.js can search against using only Javascript in the browser. For RSS, we still generate the RSS feed from Drupal and push to GitLab.

Lessons learned and looking forward

Now that we have the shiny new website up and running, it’s time to look ahead. Would we recommend taking this exact approach in 2018? I would say not exactly. While we are still intrigued by the power of static generators serving as a front end we think something like Gatsby.js (Node/React-based) might have more upside than Jekyll. Further, we aren’t sold on this type of static-only being able to scale in comparison to Node-hosted solutions. The options for server-rendered JavaScript frameworks increase by the day and many have matured over the last few years. Mediacurrent.com will continue to be our place to try new approaches and share with you everything we’ve learned along the way. Thanks for joining us in this journey and enjoy the new site!

Additional Resources
The 3 C’s and 1 D of Drupal: Why Decoupled Matters | Mediacurrent Blog
Relearning Accessibility for a Decoupled Front End | Mediacurrent Blog
4 Benefits of Decoupled Architecture for Enterprise Marketers | Mediacurrent Blog

Mar 15 2018
Mar 15

Since joining Mediacurrent in 2009, I've seen firsthand how our company has grown and evolved, and how our website has mirrored those changes. Today, I am thrilled to announce the launch of our newly redesigned website, mediacurrent.com.

We’ve come a long way since 2007!

screenshots of the Mediacurrent.com homepage from 2007 to present

2017 marked the 10 year anniversary of Mediacurrent. It’s been an amazing journey from Drupal firm to a full-service digital agency. Along with this journey, we’ve expanded and redefined our services to meet the changing needs of our clients.

Explore the site to learn more about Mediacurrent’s development, design, and strategy services.

Built on Drupal 8 with a decoupled approach, the new site reflects a clear vision of our core focus:

Open source development, design, and strategy that grows your digital ROI

Celebrating Our Success

I am incredibly proud of the Mediacurrent team for the persistence and hard work that went into building our new website. It’s this teamwork that has fueled award-winning sites for weather.com, travelport.com, careaction.org, and many others. See how we do it.

group shot of the Mediacurrent team

Some of the MC team at a recent code sprint retreat in Los Angeles

Sharing Our Resources

In our very first company blog post circa 2009, we shared an ambitious goal — we hope the Mediacurrent staff can share pertinent content, and become a trusted advisor when it comes to your web related issues —and we got there! From blog posts and tutorials to videos and podcasts, our new site makes it easier to navigate a great depth of thought leadership content by the Mediacurrent team.

Expressing Our Culture

Mediacurrent is in an exciting period of growth, and we're evolving our team to keep pace with all of the work that lies ahead.

Our culture is at the core of everything we do and one of the biggest drivers behind our redesign was to tell that story. There are lots of ways to do this on the new Mediacurrent.com: meet our team, see how we give back to the Drupal community, and explore career opportunities

Enjoy the new Mediacurrent.com site, and we welcome your feedback!

Mar 14 2018
Mar 14

DrupalCon Nashville is coming up and that means another chance to create deeper connections with the Drupal community by attending or facilitating Birds of a Feather sessions (BOFs). The DrupalCon team has summarized what a BOF is on the DrupalCon website:

Birds of a Feather sessions (or BOFs) are informal gatherings of like-minded individuals who wish to discuss a certain topic without a pre-planned agenda. BOFs allow groups to meet and discuss issues and talk out ways to move the project forward. Have fun and learn! BOFs exist to provide attendees with an inclusive, informal environment in which to share ideas freely. BOFs can be serious, and a great way to gather the people you’ve been working remotely with on a project in a space to deep dive on a topic, but they can also be fun as well. Knitting BOF? Why not?!

At this point, you might think BOFs sound interesting, but why would you consider attending a BOF at DrupalCon?

Since regular DrupalCon sessions are recorded and BOFs are not, consider attending BOFs you find interesting in preference to a session - you can always watch the recording later! BOFs are great subjects for blog posts, so take notes and write about them.

  1. BOFs are not presented lecture style and allow for a high-level of interactivity between the facilitators and other participants. The facilitator generally kicks off the topic and framework for the discussion, allowing everyone to discuss the ideas.
     
  2. Due to the interactivity, there is a chance to meet and get to know others in a way that you might not be able to do in a DrupalCon session.
     
  3. Some BOFs are focused on discussions around and determining best practices. These are great ways to look into your processes and know what you are doing well and what you can do to improve. Organizations looking for the value in sending you to DrupalCon can’t ask for more than the opportunity for immediate process improvements post-DrupalCon.
     

Let’s shift gears to BOF planning and facilitation. Why would you want to host a BOF? One reason is that you may have been one of the 900+ session proposal submitters that were not selected - turn your lecture style idea into a BOF discussion! Another reason to host is that you can ensure that a topic you have a passion about has DrupalCon representation, drawing in participants with similar interests. A BOF is also a great way to practice public speaking and prepare for a future DrupalCon session opportunity!

If you are interested in facilitating a BOF, here are some tips to make sure you get the most out of it and ensure that participants have the opportunity for a positive experience.

  1. As a first step, check out the DrupalCon suggestions: How to Run a Successful BOF
     
  2. Plan your BOF with a clear and concise abstract on what you want to discuss. You are marketing your session against others sessions happening at the same time so make sure to attract participants.
     
  3. Submit your idea as soon as possible! The BOF schedule fills up quickly! There is nothing wrong with pulling together an informal BOF in a hallway or lunch table if spaces fill up.
     
  4. When the BOF begins, introduce yourself and clearly state the topic and format for the BOF so participants know how it will work.
     
  5. Have a brief topic discussion to kick off the BOF. This can be an example of your personal experience around the topic, including successes and challenges. This helps make participants comfortable and gives them time to think about questions and ideas to contribute. Keep it brief so you have time for others to participate.
     
  6. After the short introduction discussion, start by asking an icebreaker question to get participant involvement going. It is a good idea to have a list of related questions and discussion items ready in case you need to keep the conversation moving. Many times, the BOF will take off organically and there will be no need to rely on those techniques.
     
  7. Remember, you are the facilitator. It is your job to help give everyone a chance to be involved and to guide the BOF back to the topic if it gets off track a bit.
     
  8. End the BOF by thanking everyone for coming and consider offering some resources or related research to continue the conversation.
     

If you are interested in submitting a BOF idea at DrupalCon Nashville, BOF scheduling opens on March 14th, 2018. Visit https://events.drupal.org/nashville2018/birds-feather for submission details. Remember that the Code of Conduct is in effect at BOFs and throughout DrupalCon events. We hope to see you at a BOF at DrupalCon Nashville!

Additional Resources
Mediacurrent to Present 7 Sessions at Drupalcon Nashville | Mediacurrent Blog
Drupalcon: Not Just for Developers | Mediacurrent Blog 

Mar 13 2018
Mar 13

DrupalCon Nashville is coming up and that means another chance to create deeper connections with the Drupal community by attending or facilitating Birds of a Feather sessions (BOFs). The DrupalCon team has summarized what a BOF is on the DrupalCon website:
 

Birds of a Feather sessions (or BOFs) are informal gatherings of like-minded individuals who wish to discuss a certain topic without a pre-planned agenda. BOFs allow groups to meet and discuss issues and talk out ways to move the project forward.

Have fun and learn! BOFs exist to provide attendees with an inclusive, informal environment in which to share ideas freely. BOFs can be serious, and a great way to gather the people you’ve been working remotely with on a project in a space to deep dive on a topic, but they can also be fun as well. Knitting BOF? Why not?!

-Definition of a BOF 

At this point, you might think BOFs sound interesting, but why would you consider attending a BOF at DrupalCon?

Since regular DrupalCon sessions are recorded and BOFs are not, consider attending BOFs you find interesting in preference to a session - you can always watch the recording later! BOFs are great subjects for blog posts, so take notes and write about them.

  1. BOFs are not presented lecture style and allow for a high-level of interactivity between the facilitators and other participants. The facilitator generally kicks off the topic and framework for the discussion, allowing everyone to discuss the ideas.
  2. Due to the interactivity, there is a chance to meet and get to know others in a way that you might not be able to do in a DrupalCon session.
  3. Some BOFs are focused on discussions around and determining best practices. These are great ways to look into your processes and know what you are doing well and what you can do to improve. Organizations looking for the value in sending you to DrupalCon can’t ask for more than the opportunity for immediate process improvements post-DrupalCon.

Let’s shift gears to BOF planning and facilitation. Why would you want to host a BOF? One reason is that you may have been one of the 900+ session proposal submitters that were not selected - turn your lecture style idea into a BOF discussion! Another reason to host is that you can ensure that a topic you have a passion about has DrupalCon representation, drawing in participants with similar interests. A BOF is also a great way to practice public speaking and prepare for a future DrupalCon session opportunity!

If you are interested in facilitating a BOF, here are some tips to make sure you get the most out of it and ensure that participants have the opportunity for a positive experience.

  1. As a first step, check out the DrupalCon suggestions: How to Run a Successful BOF
  2. Plan your BOF with a clear and concise abstract on what you want to discuss. You are marketing your session against others sessions happening at the same time so make sure to attract participants.
  3. Submit your idea as soon as possible! The BOF schedule fills up quickly! There is nothing wrong with pulling together an informal BOF in a hallway or lunch table if spaces fill up.
  4. When the BOF begins, introduce yourself and clearly state the topic and format for the BOF so participants know how it will work.
  5. Have a brief topic discussion to kick off the BOF. This can be an example of your personal experience around the topic, including successes and challenges. This helps make participants comfortable and gives them time to think about questions and ideas to contribute. Keep it brief so you have time for others to participate.
  6. After the short introduction discussion, start by asking an icebreaker question to get participant involvement going. It is a good idea to have a list of related questions and discussion items ready in case you need to keep the conversation moving. Many times, the BOF will take off organically and there will be no need to rely on those techniques.
  7. Remember, you are the facilitator. It is your job to help give everyone a chance to be involved and to guide the BOF back to the topic if it gets off track a bit.
  8. End the BOF by thanking everyone for coming and consider offering some resources or related research to continue the conversation.

If you are interested in submitting a BOF idea at DrupalCon Nashville, BOF scheduling opens on March 14th, 2018. Keep an eye out at https://events.drupal.org/nashville2018 for submission details. Remember that the Code of Conduct is in effect at BOFs and throughout DrupalCon events. We hope to see you at a BOF at DrupalCon Nashville!

Additional Resources
Mediacurrent to Present 7 Sessions at Drupalcon Nashville|Mediacurrent Blog
Drupalcon: Not Just for Developers|Mediacurrent Blog 

Mar 02 2018
Mar 02

Happy Friday Everyone! On the eve of the Drupal Drive-in, happening tomorrow in Charlotte North Carolina, we welcome Mark Shropshire to the show to talk about his favorite topic, Drupal Security!

Feb 21 2018
Feb 21

Selected sessions for Drupalcon Nashville have just been announced! Mediacurrrent will be presenting five sessions and hosting a training workshop. 

From exploring new horizons in decoupled Drupal to fresh perspectives on improving editorial UX and achieving GDPR compliance, check out what the Mediacurrent team has in store for Drupalcon 2018:
 

Speakers: Matt Davis, Director of Emerging Technology at Mediacurrent and Jeremy Dickens, Senior Drupal Developer at The Weather Company / IBM
Session Track: Horizons

During the course of an ongoing decoupling project for weather.com, the team found that the lack of page configurability was a distinct pain point for site administrators and product owners. To meet this challenge, the weather.com team built Project Moonracer, a Drupal 8-based solution that allowed for the direct modification of page configuration on a completely decoupled front-end by developing a unique set of data models to move page configuration back into the hands of the site owners.  

Takeaways:

  • Gain a greater understanding of the decoupled UI problem space as a whole
  • See specific API and UI considerations and lessons learned from our experience
  • Catch a glimpse into some possible futures of editorial interfaces in an increasingly decoupled world

Speaker: Bob Kepford, Lead Drupal Architect at Mediacurrent
Session Track: Back End Development 

Wouldn’t it be nice if you could type one command that booted your vagrant box, started displaying watchdog logs, set up the correct Drush alias, and provided easy access to your remote servers? Or maybe you use tools like Grunt, Gulp, or Sass. What if you could launch all of your tools for a project with one command? In this session, attendees will see how to use the terminal every day to get work done efficiently and effectively

You’ll learn:

  • How to use free command line applications to get work done.
  • How to better use the command line tools you already know.
  • How to customize your command line to behave the way you want it to. I guarantee attendees will walk away with at least one new tip, trick, or tool.

Speaker: Jay Callicott, VP of Technical Operations at Mediacurrent 
Session Track: Site Building 

If you have ever googled to find “top Drupal modules” you probably have read Mediacurrent’s popular, long-running blog series on the top modules for Drupal, authored by our own Jay Callicott. In this session, follow him on a leisurely stroll through the best modules that Drupal 8 has to offer as Jay presents an updated list of his top picks. Like a guided tour of the Italian countryside, you can sit back and enjoy as your guide discusses the benefits of each module. By the end of this session, you will have been introduced to at least a few modules that will challenge the boundaries of your next project.

Speakers: Mediacurrent's Dawn Aly, VP of Digital Strategy and Mark Shropshire, Open Source Security Lead
Session Track: Business

Data security legislation like the GDPR (enforcement begins May 28th, 2018) allows users to control how and if their personal data is used by companies. This shift in control fundamentally changes how companies can collect, store, and use information about prospects and customers. While understanding and implementing privacy related regulation in web projects is a necessity, related knowledge and skill sets become a real business differentiator and a key part of a user’s privacy experience (PX).

Key Topics:

  • Practical interpretation of the GDPR 
  • How to determine if you are at risk for compliance 
  • Repeatable process for assessing security risks in Drupal websites 
  • Security by design
  • Impact to data, analytics, and personalization strategies 

Speakers: Kevin Basarab, Director of Development at Mediacurrent and Mike Priscella, Engineering Manager at Thrillist/ Group Nine Media. 
Session Track: Ambitious Digital Experiences 

In this session, we'll dive into how Group Nine Media (parent company of Thrillist.com, TheDodo.com, and others) are evolving the Drupal 8 editorial user experience and contributing that back to the community. We'll not only look into their use case but also explore what modules and options are out there for improving editorial UX without custom development work.

  • How is design/UX reversing to focus on the editorial experience?
  • What contrib modules currently enhance the editorial experience?
  • How can a better editorial experience be beneficial to your client? 

Training Presenters: Mediacurrent Senior Front End Developers Mario Hernandez and Eric Huffman

With the component-based approach becoming the standard for Drupal 8 theming, we’re beginning to see some slick front end environments show up in Drupal themes. The promise that talented front enders with little Drupal knowledge can jump right in is much closer to reality.  However, before diving into this new front end bliss there are still some gotchas, plus lots of baked in goodies Drupal provides that one will need to have a handle on before getting started.

This training will focus on the UI_Patterns module, which although still in Release Candidate state, it already solves many problems originated from the Drupal integration process.

Additional Resources
Drupalcon Baltimore 2017 - SEO, I18N, and I18N SEO| Blog 
Drupalcon: Not Just for Developers| Blog 
The Real Value of Drupalcon | Blog 

Feb 21 2018
Feb 21

Selected sessions for Drupalcon Nashville have just been announced! Mediacurrrent will be presenting seven sessions and hosting a training workshop. 

From exploring new horizons in decoupled Drupal to fresh perspectives on improving editorial UX and achieving GDPR compliance, check out what the Mediacurrent team has in store for Drupalcon 2018:
 

Speakers: Matt Davis, Director of Emerging Technology at Mediacurrent and Jeremy Dickens, Senior Drupal Developer at The Weather Company / IBM
Session Track: Horizons

During the course of an ongoing decoupling project for weather.com, the team found that the lack of page configurability was a distinct pain point for site administrators and product owners. To meet this challenge, the weather.com team built Project Moonracer, a Drupal 8-based solution that allowed for the direct modification of page configuration on a completely decoupled front-end by developing a unique set of data models to move page configuration back into the hands of the site owners.  

Takeaways:

  • Gain a greater understanding of the decoupled UI problem space as a whole
  • See specific API and UI considerations and lessons learned from our experience
  • Catch a glimpse into some possible futures of editorial interfaces in an increasingly decoupled world

Speaker: Bob Kepford, Lead Drupal Architect at Mediacurrent
Session Track: Back End Development 

Wouldn’t it be nice if you could type one command that booted your vagrant box, started displaying watchdog logs, set up the correct Drush alias, and provided easy access to your remote servers? Or maybe you use tools like Grunt, Gulp, or Sass. What if you could launch all of your tools for a project with one command? In this session, attendees will see how to use the terminal every day to get work done efficiently and effectively

You’ll learn:

  • How to use free command line applications to get work done.
  • How to better use the command line tools you already know.
  • How to customize your command line to behave the way you want it to. I guarantee attendees will walk away with at least one new tip, trick, or tool.

Speaker: Jay Callicott, VP of Technical Operations at Mediacurrent 
Session Track: Site Building 

If you have ever googled to find “top Drupal modules” you probably have read Mediacurrent’s popular, long-running blog series on the top modules for Drupal, authored by our own Jay Callicott. In this session, follow him on a leisurely stroll through the best modules that Drupal 8 has to offer as Jay presents an updated list of his top picks. Like a guided tour of the Italian countryside, you can sit back and enjoy as your guide discusses the benefits of each module. By the end of this session, you will have been introduced to at least a few modules that will challenge the boundaries of your next project.

Speakers: Mediacurrent's Dawn Aly, VP of Digital Strategy and Mark Shropshire, Open Source Security Lead
Session Track: Business

Data security legislation like the GDPR (enforcement begins May 28th, 2018) allows users to control how and if their personal data is used by companies. This shift in control fundamentally changes how companies can collect, store, and use information about prospects and customers. While understanding and implementing privacy related regulation in web projects is a necessity, related knowledge and skill sets become a real business differentiator and a key part of a user’s privacy experience (PX).

Key Topics:

  • Practical interpretation of the GDPR 
  • How to determine if you are at risk for compliance 
  • Repeatable process for assessing security risks in Drupal websites 
  • Security by design
  • Impact to data, analytics, and personalization strategies 

Speakers: Kevin Basarab, Director of Development at Mediacurrent and Mike Priscella, Engineering Manager at Thrillist/ Group Nine Media. 
Session Track: Ambitious Digital Experiences 

In this session, we'll dive into how Group Nine Media (parent company of Thrillist.com, TheDodo.com, and others) are evolving the Drupal 8 editorial user experience and contributing that back to the community. We'll not only look into their use case but also explore what modules and options are out there for improving editorial UX without custom development work.

  • How is design/UX reversing to focus on the editorial experience?
  • What contrib modules currently enhance the editorial experience?
  • How can a better editorial experience be beneficial to your client? 

Speakers: Mediacurrent Senior Front End Developer Mario Hernandez; Cristina Chumillas, Designer and Frontend Developer at Ymbra; Lauri Eskola, Drupal Developer at Druid Oy
Session Track: Core Conversations 

The Out-of-the-Box initiative team is working on improving the first-time user experience of Drupal. The team is creating a new installation profile with the main goal of demonstrating how powerful Drupal is for creating beautiful websites for real life use cases.

The alpha version for The Out of the Box initiative has been committed to Drupal 8.6.x. But, what is it and what will it bring to core?
 

Speakers: A panel of community organizers, including Mediacurrent Senior Developer April Sides 
Session Track: Building Community

This conversation is a space for camp organizers (and attendees) to discuss all things event planning, from venue selection and budgeting to session programming and swag. 

Training Presenters: Mediacurrent Senior Front End Developers Mario Hernandez and Eric Huffman

With the component-based approach becoming the standard for Drupal 8 theming, we’re beginning to see some slick front end environments show up in Drupal themes. The promise that talented front enders with little Drupal knowledge can jump right in is much closer to reality.  However, before diving into this new front end bliss there are still some gotchas, plus lots of baked in goodies Drupal provides that one will need to have a handle on before getting started.

This training will focus on the UI_Patterns module, which although still in Release Candidate state, it already solves many problems originated from the Drupal integration process.

Additional Resources
Drupalcon Baltimore 2017 - SEO, I18N, and I18N SEO| Blog 
Drupalcon: Not Just for Developers| Blog 
The Real Value of Drupalcon | Blog 

Feb 15 2018
Feb 15

Last fall at BADCamp it was exciting to see that a component-driven approach to building Drupal 8 themes is becoming the standard. Many people are doing great things to advance this approach, including reducing duplication and simplifying data structures. In the day-long front end summit, and in many sessions and BOFs during BADCamp, great tips were shared for making the most of helper modules, such as the UI Patterns module, as well as techniques that make the most of Pattern Lab, KSS, and other front end systems.

While Drupalers are rejoicing at these exciting advances allowing newfound front end freedoms, there are still a few hoops to be aware of in order to make the most of Drupal, especially for a newcomer who might be eager to shove aside a lot of what Drupal provides. Some of these things, like contextual links, are nice-to-haves that can make life easier for content administrators. However, other things that are easily dismissed in a component-driven approach, like letting Drupal fully render fields, can cause headaches further on if they’re ignored, and make life difficult when it comes to keeping your front end forward-compatible with Drupal.
 

A Quick Recap of the Component-Driven Approach

At its basic level, the component-driven approach to Drupal theming means:

  1. Breaking your site’s interface down into independent components.
  2. Organizing those components into a system of reusable parts (i.e., the Atomic Design philosophy).
  3. Build out those parts however you see fit in a standalone presentation platform that supports twig (i.e., a KSS, or Pattern Lab style guide), with the pieces of those components that can change set up as variables in the twig files.

These component twig files that you use to build your system of reusable parts essentially serve as replacements for the templates in your Drupal theme (field.html.twig, block.html.twig, node.html.twig, etc.) You’ll still need the Drupal templates -- for now, see the UI Patterns module note at the end -- but they only serve as the “presenter” that helps map values from Drupal to the appropriate variables in your component template. The biggest payoffs with this approach are:

  1. Build things how you like them! You’re in control of the markup, and don’t necessarily have to be a seasoned Drupal developer to dive in.
  2. Back end setup, and front end build out can happen at the same time.
  3. A more organized, and structured presentation layer that’s not strictly tied to Drupal, and could potentially be repurposed for other platforms.

For a deeper dive into the components-driven approach, be sure to check out Mario Hernandez’s blog post series on integrating components into Drupal: Part 1, Part 2, and Part 3.

So if you’re not following a component-driven approach already, I’m sure you can see why it’s becoming popular. However, before diving in, here are a few things to consider to help you keep your approach forward-compatible with Drupal, and hopefully avoid headaches.
 

When It Comes To Fields, Let Drupal Do Its Thing

As we know, the default field markup in Drupal 8 is abstracted to account for field labels, and multiple values. This means that by default in Drupal even a simple, single value text field is going to render with multiple layers of <div>s wrapping the value of the field. However, let’s say you have a callout component in your style guide that includes an optional subtitle field. You’d probably mark that up with just a single, semantic element, like this:
 

{% if subtitle %}
 <h3 class=”callout__subtitle”>{{ subtitle }}</h3>
{% endif %}


And let’s say on the Drupal side of things you’re going use a custom block type for adding callout components to your site. Therefore, in the block--callout.html.twig template that serves as the “presenter” for mapping Drupal values to the component template, you’d have something like this:
 

{% include ‘@custom_theme/callout/callout.twig’ with {
  ...
  ‘subtitle’: content.field_subtitle
  ...
} %}


Since we’re letting Drupal render the subtitle field in our block template, we’d end up with all the default field markup inside our <h3>, which isn’t what we want at all.

While the quickest solution may be to pull out the value of the subtitle field from the render array for the field, and pass that to the component template...
 

‘subtitle’: content.field_subtitle.0['#context].value 


...this can come back to bite you later because of the way Drupal 8 handles caching. One option that’s more cache-friendly is to use the Twig Field Value module. This module gives you custom filters that help you safely pluck the value you need from the render array for the field:
 

‘subtitle’: content.field_subtitle|field_value


This is better, but we’re still shoving aside how Drupal adds attributes to the field markup. We’d only have our custom class on the <h3> for the subtitle, with no way for modules in the Drupal ecosystem to inject their classes or other attributes. As some of the “Outside-In” initiatives in Drupal start to mature this will become increasingly important if you want to take advantage of them. What follows are some options for how you can make your components more “loyally” accommodate Drupal.
 

Follow Drupal’s Lead For Field Markup

First, you could markup your component templates with additional wrappers that include only your classes, which would apply styling to the semantic element included in the variable output of your component template. Understandably, this could lead to a bit more bloated styling and markup, plus require you to include markup in the sample data that your style guide uses. Example:

Component markup:

{% if subtitle %}
  <div class=”callout__subtitle-wrapper”>
    {{ subtitle }}
  </div>
{% endif %}

Component placeholder data in the style guide:

{
  “subtitle”: “<h3 class=\”callout__subtitle\”>Subtitle Text</h3>”
}

In this case, when the component is implemented on the Drupal side of things, you would create a custom field template for the subtitle field, where you would change the markup to use only a single <h3>, plus add the “callout__subtitle” class via the Drupal addClass() function.

Drupal field template for the subtitle field in our “callout” custom block type:
 

<h3{{ attributes.addClass(‘callout__subtitle’) }}>
  {%- for item in items -%}
    {{ item.content }}
  {%- endfor -%}
</h3>

But Wait, I Want Control Of My Markup!

The previous option somewhat defeats the purpose of the markup freedom you get with a component driven approach, so you may want to instead consider leaving the component markup nice and lean, and just use a <span> tag for the subtitle field where the Drupal-specific attributes can be applied.

Component markup:

{% if subtitle %}
  <h3 class=”callout__subtitle”>
    {{ subtitle }}
  </h3>
{% endif %}

Component placeholder data in the style guide:

{
  “subtitle”: “Subtitle Text”
}

Drupal field template for the subtitle field in our “callout” custom block type:

<span{{ attributes }}>
  {%- for item in items -%}
    {{ item.content }}
  {%- endfor -%}
</span>

This works pretty nicely, but you may find that those Drupal attributes really need to be output where they were intended: the main wrapper for the field.
 

Twig Embed To The Rescue

A good middle ground for keeping your markup lean, but still loyally accommodating Drupal attributes, is to use twig embed blocks in your component template. This means you could put whatever you want inside the embed block declaration for the subtitle field in the component template, and on the Drupal side when the callout component is integrated via a twig embed, we simply swap that subtitle block with something else. Example:

Component markup:

{% block callout_subtitle %}
{% if subtitle %}
  <h3 class=”callout__subtitle”>
    {{ subtitle }}
  </h3>
{% endif %}
{% endblock %}

Component placeholder data in the style guide:

{
  “subtitle”: “Subtitle Text”
}

Drupal block template for integrating a callout component:

{% embed ‘@custom_theme/callout/callout.twig’ with {
  ...
  ‘subtitle’: content.field_subtitle
  ...
} %}
  {% block callout_subtitle %}
    {{ subtitle }}
  {% endblock %}
{% endembed %}

Drupal field template for the subtitle field in our “callout” custom block type:

<h3{{ attributes.addClass(‘callout__subtitle’) }}>
  {%- for item in items -%}
    {{ item.content }}
  {%- endfor -%}
</h3>

Accommodate Attributes All The Way Up

Now that we’ve established some options for accommodating Drupal at the field level, let’s take a look at how to accommodate Drupal in the block template for our callout component example.

One key Drupal feature that’s extremely helpful for content administrators is contextual links. To make these work in our callout component example we’ll need to accommodate the Drupal attributes variable on the main wrapper of the component template, plus include the title_prefix/title_suffix variables. These are what Drupal needs to inject the contextual links into a template.

Since the attributes variable can include class, id, and data attributes in one variable, we need to make sure we only combine Drupal’s classes with ours, and let the other attributes render without Drupal classes. This can be accomplished on the main wrapper of our callout component template:

<div class=”callout {{ attributes ? attributes.class }}”{{ attributes ? attributes|without(‘class’) }}>

Note that the ‘without’ twig filter in this example is a Drupal-specific filter, so for your style guide you’ll want to make sure you’re using one that supports Drupal’s custom filters (both KSS node, and Pattern Lab have configuration options that support Drupal twig filters.)

The other thing you’ll want to include to make sure contextual links get injected are the title_prefix/title_suffix variables. You typically will want to include this around the markup for the main title of the component:

{{ title_prefix }}
<h3 class=”callout__title”>
  {{ title }}
</h3>
{{ title_suffix }}

Make Sure Empty Means Empty

You may recall when first discussing the subtitle for our callout component it was mentioned that it would be an optional field, and in our component template we include an ‘if’ statement to check for a populated subtitle before outputting its related markup. One thing to keep in mind when letting Drupal fully render fields is that even though no content may have been entered for the subtitle on the Drupal side, your component may still read the value of the rendered field as not being empty, and proceed with outputting the markup inside the if statement. This is especially problematic when you have twig debug turned on in your theme.

A reliable way to avoid false positives when checking for empty fields is to check the results of a field after applying the render and trim filters. Example:

‘subtitle’ = content.field_subtitle|render|trim is not empty ? content.field_subtitle


Leave No Content Unrendered

Finally, one last step we’ll want to take in our “presenter” template, is to make sure we allow Drupal to go ahead and do its render thing on the main content variable of the block, even though we’re only interested passing specific field values to our component template. This is again is to help avoid headaches with how caching is handled (read more about this here: https://www.drupal.org/docs/8/api/render-api/cacheability-of-render-arrays). We also need to make sure that we exclude the fields we passed over to our component template since we don’t want them to actually be output in the Drupal template. Example:

{{ content|without(‘field_title’, ‘field_subtitle’, ‘body’) }}


What The Future Holds

As mentioned in the beginning there is also UI Patterns module that many are embracing for a component-driven approach to Drupal site building. The benefit of this module is that it eliminates the need for the “presenter” template when integrating your components.

For now, though, if you find yourself in a position where your Drupal templates are having to serve as the presenter for your components, make sure to consider these ways of keeping things as forward-compatible as possible with Drupal, so that you can take advantage of new Drupal initiatives as their rolled out, and save yourself some headaches later on.

Additional Resources
5 Advantages of Component Driven Theming | Video
Building Components: Breaking it Down | Blog
5 Aspects of Component Driven Back End Development with Drupal 7 | VIdeo

Jan 22 2018
Jan 22

Hello and welcome to my first blog post for Mediacurrent! Today’s post will be all about Docksal and how it can help you get up and running developing on Drupal 8 quickly and easily. This post was inspired by the great session I saw at DrupalCon 2017 and will explain how using Docksal will save you time getting up and running for a new Drupal development project. I’ll also talk about some of the technologies behind Docksal such as Docker and Oracle VM VirtualBox.
 

How does it work?

Docksal works by using Docker (a software container platform) and VirtualBox ( a general-purpose full virtualizer for x86 hardware) to create projects with a few simple commands. Instead of having many VMs (virtual machines) for all of the projects or websites that you work on, Docker allows a person to use a single VM instance for many websites.
 

Why Docksal?

So, why Docksal? Why not just use Docker, download Drupal, and get started on development that way? If you’re already quite familiar with the Docker and VirtualBox installation process and you want to customize all of that yourself, you could do just that, but if you don’t the main advantage of Docksal is less set-up to get started on developing code with Drupal.
 

Installation

By following the instructions on Docksal’s documentation, you can see that when using one of its supported OSes, Docksal is installed in two to three steps.

The main step to pay attention to is usually the same for each OS: “fin vm start”. Fin is a handy command line tool that comes with installing Docksal. It allows you to manage all the services related to the docker machine and virtual machine with easy commands.
 

Saving Time with Docksal: How to customize your stack

To save you time on your projects, Docksal comes with a default set of configurations (or in their language, a “ stack ”) that controls what services your project will use. Within the default stack, you’ll find values for the typical services needed to run a website, such as configurations for PHP, a web server, and a database server. The current configuration being used for your project’s stack can be found by running “fin config show”.

It’s important to note that you should not change the configuration found in the yaml files for the default stack (under ~/.docksal/stacks). If you want to customize your stack, you should instead use the “.docksal” directory in your project. These are created after running “fin start” in your project directory. Customization will allow you to add support for more services, such as Apache Solr, Varnish, Memcache, Selenium, Behat, XDebug, and many more. Since Docksal uses Docker containers, almost any service that can be found on Docker can be made to work with it. A list of some typical services and how to configure them to work with your project can be found under the “Tools and Integrations” section on Docksal’s documentation page.

Docksal currently only comes with two stacks: default and Acquia. The Acquia stack is for quickly getting started on development for an Acquia environment.

I hope this post has served as a helpful guide to jumpstarting a Drupal 8 project with Docksal. For more information on Docksal stacks, please see the following documentation.

Additional Resources
Better Local Development with Vagrant | Blog
Debugging Javascript Live in Chrome | Blog
How to Think About Drupal 8 | Blog

Jan 10 2018
Jan 10

When you’re solely focused on Digital Strategy and Drupal as your open source website and web application development framework like Mediacurrent has been for the last 10 years, you’re deeply invested in all of the great challenges and rewards that come with delivering products and solutions that are essentially only limited to your creativity and what you can dream up. In my presentation at DrupalCon Baltimore last year, I described how leading digital agencies and large enterprise global brands are shaping the new Internet with Drupal and other open source technologies. As all of us in the Drupal community begin our 2018 quests in Digital (now coined, “Digital Transformation”) having a reliable, innovative and proven starting point is critical for success and getting solutions to market faster.

From the early days in website design and development, having the right starting point was paramount and thankfully, Drupal answered that bell.  Think about it. Before Dries created Drupal, all of us in the Web industry did our own thing coding in PHP, ASP and, yes, ColdFusion. Granted, those were fun and exciting times, but before Drupal:

  • It was difficult to monetize and scale the wonderful work we did.
  • We were challenged with replicating and maintaining features and functionality from client to client.
  • We could not respond to the client demand for robust and maintainable Enterprise Content Management Solution (ECMS).
  • Proactive Digital strategy and measurement suffered because we were all too busy focusing on publishing and maintaining content.

Taking this example one step further, Mediacurrent is able to save our clients hundreds of thousands of dollars each year by pairing our Digital Strategy and Drupal 8 development services with another great starting point that Dries and Acquia produced: Acquia’s Site Factory. From Universities to Large Enterprise, Site Factory allows Premier Implementation partners like Mediacurrent the ability to work with our clients to consolidate hundreds of individual web properties onto a single platform to strengthen our clients brand, adhere to best practices in governance and Web Accessibility and reduce maintenance costs.

What about when it comes to localizing a website in multiple languages to drive increased conversion using the user’s native tongue?  Do we build a new website for each language?  No, no, no! We look to our Network Translation partner, Lingotek, and all the great work they’ve already done is getting their platform ready for Drupal 8.

What about Project Management? Still working in Spreadsheets? Clients value transparency and Online tools such as Jira allow us to work in an agile way while capturing all of the project’s detail in one data repository.

Now, fast forward to today at this in this era of personalization. Our mission on this quest: Deliver the right content to the right person at the right time and on the right device.

  • As a marketer? Are you doing this?  
  • Are you a digital strategist charged with the task - are you accomplishing it?  
  • Are you the technical lead and in charge of delivering personalization programmatically - how is that going for you?

In many cases, it’s how to get started that makes all the difference, and at Mediacurrent, we like another one of Acquia’s products for this, Journey,  in helping us deliver these solutions to our clients - especially those clients and prospects of ours who need to deliver relevant content at each step on their consumer’s purchasing path. How does Journey help specifically? Great question.

Imagine it’s a Saturday morning and you’re browsing a “Top Ten Burgers” list on your favorite website (for me our client, Thrillist, is always a good source for this type of content). Less than a week later, your business trip takes you to Atlanta. You get off the plane and BAM! You receive a push notification about the 3 best burgers in Atlanta.

This concept is incredibly valuable for those of you in the Media and Entertainment industry as a way to drive new Ad Revenue. Imagine receiving a push notification about a product you abandoned in a shopping cart experience that the same product is in stock at a store less than 3 miles from where you are eating lunch. Thank you Journey!

No matter where your Digital Marketing Journey takes you, here’s the guide to have ready as you enter into the conversations:

  • Have your data points ready. The questions to ask are:  
    • “What data do you currently capture about your prospects and customers?”
    • “How are you currently using that data to improve your KPIs?”  

I think our friends at the Executive Office of Technology Services and Security (EOTSS) with the Commonwealth of Massachusetts, did a great job of using data to better serve its constituents online with the new Mass.Gov!

  • Identify the list of technologies that are involved in capturing and understanding data. Obvious places to look are:
    • CRM applications such as Salesforce
    • eCommerce platforms, such as Magento
    • Marketing Automation technologies such as Eloqua, Pardot and Marketo
    • Good ole’ fashioned Google Analytics (Bots excluded of course!)
    • Acquia’s Products Journey and Lift
  • Put yourself in your buyer’s shoes. Let’s say you sell Drones. If you were a consumer, what obvious questions would come to your mind? I know if it were me, I would need help with the following:
    • Where can I fly my drone after I buy it?
    • What do I need to know before I arrive at that venue? Are there any regulations that I need to be aware of?
    • Where can I connect with other flying enthusiasts?

Acquia’s Journey Product, coupled with Drupal 8 and its support of Rest out of the box and the right Marketing Automation strategy would allow the company selling Drones to answer these questions at the right stage of the consumer journey.

  • Assemble the right team. At Mediacurrent, we’ve learned that organizations who are most successful in moving their digital strategy forward are those that have these characteristics:
    • Have a clear definition of how their digital strategy and assets will support their critical business objectives and drive ROI for the business
    • Understand how to get the most from their partner agency
    • Adopt a data-driven approach (vs trusting their “guts”) to identifying solutions

I’m really looking forward to what 2018 holds for us at Mediacurrent, as well as the Drupal Community. See you in Nashville!
 

Additional Resources
The 3 C's + 1 D of Drupal: Why Decoupled Matters | Blog
5 Things to Know About Digital Transformation | Blog
Digital Strategy Can Help Make Accessibility 'Just What We Do' | Blog

Jan 08 2018
Jan 08

As we begin a fresh, brand-spanking-new year, several UX design practices and technologies stand out as the most exciting and relevant. While they are not all necessarily bleeding edge or super trendy, these considerations are becoming more and more vital to our clients and will be at the forefront in the year to come and beyond. Here’s an overview of what we’re watching, how the UX landscape is shifting, its impact on marketing and consumer experience, and what it means to you!

Data-driven UX

What do you imagine when you think of a “designer”? Likely an artsy sort of person comes to mind, a wizard who can wave a wand and bring all the users to the yard. But I’m here to tell you - it’s not wizardry. It is, in fact, science!

Across the industry, much like scientists, designers are conducting controlled experiments and collecting data to determine the best approaches for presenting information and guiding users through interactions with digital systems. Following the latest user research is to designers what keeping up with medical journals is to doctors.

It gets even better. Professional digital strategists and data analysts can review your business and your website and make sense of all of this data for you. From competitor analyses to SEO audits, they collate numerical resources to produce a set of measurements for success, and a plan to get there. This is the mana that fuels the designer’s sorcery - and it’s really just numbers...and OK, maybe a little magic.
 

Evolving Navigation Patterns

Speaking of data-driven design, after extensive user testing, Spotify ditched its hamburger menu in favor of a strip of icons and titles along the bottom known as “tab bar navigation.” This is something that Facebook had already done a few years prior. Again, after extensive testing.

Spotify tested the tab bar navigation pattern to see how it impacted user engagement. They found that users with the tab bar ended up clicking 9% more in general and 30% more on actual menu items. The tests also revealed that reducing the number of options in the tab bar increased the reach of Spotify’s programmed content, the company says.

It’s certainly worth noting shifts in application design when choosing responsive website navigation patterns following a mobile-first approach. Regarding the hamburger menu, Nielsen Norman Group has found through testing that “Discoverability is cut almost in half by hiding a website’s main navigation. Also, task time is longer and perceived task difficulty increases.”

But by all means, let’s not declare hamburger menus dead and gone. Like the world’s most notorious font, Comic Sans, there are appropriate and inappropriate uses for the familiar 3-bar stack. The purpose of navigation, lest we forget, is to help a user navigate a website. It answers the questions “Where can I go?” and “What can I do?”

With data in hand and your company’s vision for the future in mind, information architecture and navigation can be crafted to prioritize key actions and content. This can still sometimes mean a hamburger menu because not all companies are Spotify. Would you like fries with that?
 

Persona-driven UX

Hand-in-hand with data-driven UX, goes persona-driven UX. What is a persona? A persona is a made-up character synthesized from patterns observed in data collected from large numbers of users. Identifying key personas allows project teams to focus on the primary user journeys.

There is also the notion of building atypical or “Rogue Personas” which act as edge cases to help establish boundaries (in the case of the Internet Troll or Phisher), fail safes (in the case of the Bumbling Noob), and highly accessible experiences for individuals with vision, hearing, or cognitive impairments.

The data used to build personas comes from a number of sources including surveys, interviews, and analytics reports. The data is not only used to create profiles but to establish a set of goals for each persona. These goals are the stops on the user journey for which designers will build guideposts.

Once a design has been prototyped, user testing can be done with individuals who match the demography of the personas, to validate or refute the assumptions, and to gather useful feedback. At this stage of a project, it can really start to feel like a fun science experiment!

Assessing a design as it develops against the wants and needs of these meaningful archetypes is a powerful tool. Personas help us ask the right questions as we work to create user experiences and to answer those questions from the perspective of the primary personas, rather than from our own.
 

VUI - Voice User Interface and Accessibility

“Alexa, will I need an umbrella today?”

How many seconds would you save asking a question out loud rather than picking up a device to click or tap to get answers? Especially considering the distractions you may encounter on your device - it’s all too easy to sometimes forget why you picked it up in the first place!

The screenless user experience is on the rise. It is often more convenient for users to interact with technology hands-free, with no visuals required. Driving, cooking, hosting a party - why stop what you’re doing when you can utter a voice command or ask a question?

From Apple’s Siri and Microsoft’s Cortana to Google’s Assistant and Amazon’s Alexa, VUI is on the rise. It’s not only the UI for Apple’s AirPods, Google Home, and Amazon’s Echo, but it’s even being built into devices like speakers, televisions, vacuum cleaners, and lightbulbs.

According to Gartner, by the end of 2017, room-based screenless devices will be a part of more than 10 million homes. By 2019, they predict, 20% of user interactions with smartphones will take place via Virtual Personal Assistants. By 2020, they predict, 30% of web browsing sessions will be done without a screen.

As UX designers, we are constantly challenged to develop experiences that are consistent across a great many channels and VUI is just another of those - and a very exciting one! Interacting with Alexa can feel like a science fiction film come to life!

The good news is that websites built with accessibility for the visually impaired and with Search Engine Optimization in mind are already well-placed to be highly functional when approached through VUI. And good UX is good organization, so well-designed websites will play well with Alexa and her ilk.
 

More Personalized Experiences

Users of Amazon or other online shopping venues have long been accustomed to product recommendations based on their shopping habits. And certainly marketers know how to target us online with advertisements based on our browsing history.

Users of Netflix and other streaming services are happy to scroll through lists of content related to what they’ve watched previously. But as a result of significant progress in AI and machine learning, a whole new level of personalization is here, creating more intimate experiences for users that build trust and secure brand loyalty.

Entire teams at Spotify focus on analyzing songs and listeners through collaborative filtering, machine learning, DSP and NLP approaches. They are constantly crawling the web for artist information, scanning each note in every one of their millions of songs for acoustic signals, and modelling their users' tastes with cluster analysis based on their historical and real-time listening patterns.

It is Spotify’s data-driven playlists that set it apart from its competitors. As of last year, they had millions more listeners than their closest competition. Of course, Pandora’s Music Genome Project has been categorizing tunes based on hundreds of unique characteristics since the early 2000’s. But Spotify wins because of how they leverage their data to generate customized playlists for each user. For example, “Your Top Songs of 2017,” which can be a very emotional (or cringe-worthy) walk down memory lane!

Personalization is going ever deeper. Netflix recently revealed that it is leveraging technology to assess not only what shows to recommend to their users, but what images to display along with those recommendations, customized to each specific user’s taste.

As personalization becomes smarter and more ubiquitous, UX professionals will be able to design websites not only with persona-based journey patterns, but websites that learn and adapt to each individual user. Algorithms will decide what content is displayed based on the unique interaction history and behavior on the site for any given visitor, allowing for a truly customized experience.

Of course, any potential privacy concerns should be anticipated and addressed at the outset in a way that is subtle but readily available. Personalization, when done well, can feel warm and “right” - it connects the user to the service on an emotional level. “They know me.” The user feels welcome and at home with the technology. Of course this is good for business, but putting that aside, creating these kind of deep, human connections is the greatest joy the UX field has to offer.

In conclusion, as a new year dawns, it’s wonderful to be a part of a world of technology that is making people’s lives better: more convenient, more connected, more accessible to all.

Additional Resources
6 Design Alternatives to Slide Shows | Blog
For the LOVE of User Experience Design | Blog
Why Your Website Project Needs a UX Designer | Blog

Dec 04 2017
Dec 04

Someone once said, “if you have to explain the joke, it takes the fun out of it.” Well, the same can be said for designing a website. Explaining the important and sometimes technical details can be a tedious process many designers would avoid if possible. But when it comes to communicating the form and function of the user experience through wireframes, explaining each element can make or break the project. It’s always a good idea to include annotations.
 

Types of Wireframes

First, let’s start at the beginning to avoid vague deliverables. Does every UX designer you’ve met create similar looking wireframes? There are about as many different styles of wireframes as there are websites on the world wide web, so chances are the term ‘wireframe’ by itself really isn’t saying much to your client.

Most folks understand a wireframe to be a basic layout for a web page, in shades of grey. But other than that, what else should they expect? Will it be a basic paper drawing or a functional computer drawn detailed webpage? Usually the type of wireframe provided is based on the budget and pace of the project, along with considerations for the type of site to be built, the scale of the overall project, and the depth of the sitemap. Sometimes more than one type of wireframe is used when user testing is needed. Once the most appropriate wireframe approach has been determined for the project, it’s a good idea to convey the definition in your deliverable documentation. Here is an example:
 

Low Fidelity Wireframe

  • Can be paper sketches or computer drawn.
  • Abstract lines and shapes that represent spatial elements on the page.
  • No actual copy is used, just lines to represent text.
  • Descriptions for content and functionality (as needed) are included directly on (or near) the elements.
     

Medium Fidelity Wireframe

  • Shows the content framework, layout structure, and hierarchy of key elements using basic lines, shapes, and boxes to represent images, icons, etc.
  • Copy inserted where available, otherwise lorem ipsum is used as a placeholder.
  • Presented in shades of grey with no styles or graphics applied.
  • Functions have labels.
  • Descriptions for content and functionality provided in annotations.
     

High Fidelity Wireframe

  • More details are included for each component along with additional views for features like modal windows or dropdown filters.
  • May include specific typeface choices to begin to show hierarchy.
  • Spacing between elements is further refined.
  • Determinations between image vs. illustrations may be eluded to.
  • Remains without color.
     

Why Annotations are Important

So you’ve just created a beautiful set of wireframes, had a great client presentation, and they’ve approved them. Great job! But that’s only part of it. Just because you’re ready to share the wireframes with the developers so they can begin their technical discovery, it doesn’t mean they have the same shared understanding about them as you and your client. Often times in an Agile development process, not everyone involved is present for every meeting during the discovery process due to the pace of the project and/or budget. Even when everyone is present, we don’t want to make them rely on sheer memory alone for how each component is going to be built or how it will function. That’s where the ever important Annotations come in. By providing fully annotated wireframes to both developers and your client will help to keep everyone on the same page for what to expect at launch.
 

The Art of Annotating

Once those medium or high fidelity wireframes have been created, it’s time to add the important information so we can ensure everyone has a clear understanding of the functionality that is expected for each component. The most important thing to remember when annotating your work is that it should speak for you when you’re not there.
 

Where Should The Annotations Go?

Typically, annotations are placed on the side or the bottom of a wireframe in a numbered list of descriptions with corresponding numbers next to the actual element on the wireframe. The language is kept brief in order to include as much information as possible within a limited physical space. It’s helpful to use color combinations that stand out from the wireframe to avoid confusion between elements. And when you have multiple audiences you need to address, it’s helpful to tailor your annotations by creating different sets for each.
 

Who Are The Annotations For?

Not that you need to include them all, but there are typically up to 5 different audiences who have different needs but may benefit from wireframe annotations:

The Client wants to understand how each element incorporates their business goals. When designing for Drupal, annotations are also the perfect place to highlight when certain components will be manually curated or fed automatically to ensure the expected maintenance after launch is clear.

The Front-End Developer wants to see where the images and icons are placed, what size and aspect ratio they are, defined page margins, amount of padding between elements, and the functionality for all interactive components.

The Back-End Developer can benefit from notes on image sizes, functionality for interactive components, manually curated elements vs. automatic feeds. They can also incorporate helpful tips for the content author with specific direction.

The Copywriter can write more freely if you’re able to provide recommended character counts for each section within the component: Title, subtitle, descriptive text areas, etc. Notes for optional elements will also improve the quality of the final copy. And when content will be auto-fed, note it so they can move on!

The Designer for those instances where wireframes and designs are handled by different people, it’s helpful to include design direction or live links to reference examples. You’ve been involved in conversations with the client during wireframe development and understand their vision. This is the opportunity to communicate that information.
 

What Information Should The Annotations Include?

Don’t think you’re being helpful if you annotate everything, without a cause. The last thing you want as an end result is a wireframe that’s so overloaded with annotations it looks like the plans for the next spaceship launch. It can actually be more confusing if too many notes are present. Smart wireframe design can alleviate the need for certain descriptive annotations when you include the descriptions within the titles of the element itself:

  • The title ‘Logo’ or ‘Icon’ sits inside of the circle.
  • The Button title reads ‘Optional, Editable Button’.
  • Required form fields have a red asterisk.
  • The opening ‘lorem ipsum’ descriptive copy instead starts with “This is an introductory paragraph that talks about scientific discoveries”.

What should you annotate?

  • Anything that is not obvious just by looking at the wireframe.
  • Conditional items: when and how to display them.
  • Cross-device differences. An example would be when an image may display on desktop but not on mobile. Or when an image may be replaced with one of a different aspect ratio on mobile, etc.
  • Logical or technical constraints: maximum image size, longest possible password field length, etc.
  • Any hidden details: content behind additional tabs, items in a drop-down menu, etc.
  • Functional items: links, buttons: expected behavior when the user clicks. This also includes how filters and form fields should respond.

Here are a few common areas of interaction states, feedback, and gestures that benefit from detailed annotations:

 
Dropdown Lists

Include the expanded states of the drop down menus on a separate page with annotations.

 
Dynamic Content

Explanations for things like search results listings, news content that will auto feed, image or video galleries, pagination.

 
File Uploads and Downloads

Provide interactions for the file upload. This may include things like file upload dialog, file upload progress bar, file upload completion notice.

 
Messages and Modals

Interactive feedback for form validation, confirmation, warnings, alerts, failed actions, errors, etc.

 
Numbers

Account for the longest number of digits that will be needed for any confined spaces. Example: Should it display as 100,000,000 or 100M ?

 
Titles and Labels

Account for the longest names potentially possible. Provide solutions for cases when the lines should not break: ie, within tables, accordions, filters, etc.

 
Tooltips

Provide visual reference and implied behavior for tooltips and try to account for the maximum characters that will be needed.

 
Gestures

Especially when annotating mobile wireframes, your intentions will not be lost if you add directional notes for specific gestures, such as:

  • Single-click (or tap)
  • Double-click (or tap)
  • Right-click (or tap)
  • Hover (provide mobile alternative)
  • Swipe
  • Pinch & spread
  • Drag & Drop
  • Default link for phone, email, map
  • External web links
     

Wrap it Up

Fully defining the wireframe process in the beginning of the project will clarify expectations for the client. Wrapping those completed wireframes in an annotated package will help to keep everyone involved working towards the same goals, and avoid disputes, disappointments, and costly reworks down the line.

Additional Resources
Designer to Developer: How to Go From Paper to Style Guide | Blog
Why Your Website Project Needs a UX Designer | Blog
For the LOVE of User Experience Design | Blog

Nov 29 2017
Nov 29

The issue of workforce diversity has been in the news a lot lately, and rightfully so. Diversity data is pretty dismal, particularly in the technology industry. Essentially, there is a long history of white males disproportionately holding leadership roles and minorities being immensely underrepresented. You already knew that though.

What I’ve been agonizing over is what do we plan to do about it at Mediacurrent? We began the process of recognizing that diversity was a problem we could improve. Essentially, this adversity can be used as a learning opportunity. This was also a personal struggle as well - after all, I am another white male in a leadership role. Who am I to be talking about diversity when I am not diverse myself?  

Mediacurrent has a long-standing track record of excellence within the open source software and Drupal communities. I’m incredibly proud and humbled by our amazing team. The people at Mediacurrent are some of the most collaborative, giving, positive, and supportive individuals I’ve ever met. This also means we have an opportunity to leverage our position in the technology sector as an example of what other digital agencies or companies can do to improve diversity. However, I want to be clear. We are not making the issue of diversity a top priority for purely altruistic reasons or social pressure. While benchmarking against other technology companies can be difficult, the anecdotal feeling is that we would probably be fairly average compared to companies our size (75+- employees) when it comes to diversity. The primary point is we can be doing better.
 

We are doing this because businesses that support a more diverse workforce attain greater productivity. We owe a commitment around improving diversity to our customers. We owe improving diversity to our team because it will help with their own professional growth and development.  The thought I’ve shared before is that if we had a company-wide retreat and everyone in the room looked and acted the same it would make for an incredibly uneventful outing. Different perspectives should be encouraged and welcomed.

In 2018 and beyond, here is what we are committed to changing:

1.  Collecting and tracking employee data. We are starting this effort by publicly posting our own employee data. What does this change?  It has been validated by renowned business books like “Good to Great” that profitable, sustainable companies improve by knowing their numbers. Diversity should be no different. To confirm, we are not mandating quotas v. sharing a belief that best-of-class companies tend to keep score.  For us, this will include items like the demographics of our employees, promotions or roles that involve more progressive responsibility, tracking those who are in a position of management or leadership, and striving for continuous salary equality for those who perform a similar role and have previous experiences that led them to Mediacurrent.  What is the end game? The goal is education, consistent improvement, and increasing awareness around these issues.

2.  First impressions about diversity are critical.  We will incorporate diversity training as part of our new hire orientation schedule. This will include sharing clear processes around how to get engaged with a cross-section of coworkers, sharing why diversity matters, and the protocol for how to provide feedback or concerns.

3. Re-thinking how we recruit and our overall interview process. If we continuously use the same sourcing methods to hire, how can we expect different results?  We have started to change hiring processes for those in leadership roles particularly. For instance, we want to ascertain feedback from those who may not have historically been involved with hiring. We are setting goals to ensure minority representation in interviews is happening since “likes tend to hire likes.” We also want be clear on the “why” around promotions, no matter the demographic.

4. Focus on more outreach. Our team at Mediacurrent speaks and writes a lot. This means we have a platform to make a difference. For example, I am committing to reaching out to historically black colleges and want the next generation to be aware of the opportunities that exist within open source technologies. This is such a huge opportunity for entrepreneurs and those in positions that have hiring responsibility. Open source software projects like Drupal must embrace ideas around scaling; becoming a shining beacon for engaging underrepresented groups could be a path to help achieve this. Recently, Mediacurrent sponsored five people (four co-workers and someone from our local community) to attend the Atlanta Women in Technology Awards ceremony.  We want to continue to amp up our involvement around initiatives that promote diversity in technology - if you have a suggestion or any first-hand experience with nonprofits that you would recommend please let me know in the comments below.

5.  We need to do a better job of listening. I am guilty of convincing myself that if I tell our team that “we have an open door policy” that they will pro-actively seek me out. The reality is upper leadership can often be seen as working in a bubble.  What we need to be doing is actually inviting people inside the door more often. We have also been adopting an open book management philosophy where collective problems and challenges are shared.  I am committing myself to more 1x1s with underrepresented groups at Mediacurrent to try and empathize with the challenges they are confronted with. Hopefully, this leads to a better understanding of issues in general and positive change moving forward.

Will any of this work? Can we keep improving diversity at Mediacurrent? I am not sure. In this type of situation though, I am a firm believer that trying and failing is always better than the alternative of doing nothing at all.

What ideas do you have around improving diversity in technology? I would welcome and be appreciative of your feedback.

Additional Resources
Technology is Not a Boys Club | Blog
DrupalCon: Not Just for Developers | Blog
Thoughts on Mediacurrent's Evolving Culture | Blog

Nov 15 2017
Nov 15

If there’s one thing I learned while attending DrupalCon Baltimore 2017 this past spring, it’s that those of us involved in building the web are only getting more and more specialized in how we help build it. It boggles the mind to witness the sheer amount of new session tracks, new technologies, new design patterns, and new discussions that come up each year at DrupalCon. However, amongst all the topics discussed this year, I was most intrigued by one of the oldest concepts in web development, which predates the web itself: content. Specifically, as sites and apps allow content to be distributed in more and more ways, we need to emphasize best practices around structured data from the start of any project and help clients view their own content in the same way.

As a developer mostly specializing in back-end technologies, I often find myself caught up in the never-ending race to discover and learn more about each and every corner of the expansive Drupal core and contributed ecosystem, along with all the constant discussions around the next big thing in this or that area of work. But, with so much discussion about the newest technologies and concepts, my focus is continually brought back to content as the center of the web-development universe. Specifically, structured content, which was was the topic of Dori Kelner’s excellent session on “Employing a Collaborative Model for Structured Content”.
 

The Importance of Structured Data

A website without meaningful content would be useless. But a website with compelling, yet poorly structured, content is not very usable either. For example, imagine a site where you can only enter content via singular WYSIWYG textareas. Granted, the WYSIWYG functionality may give you the sense that your content looks good and appears to be well formatted to the human eye. However, the data within that WYSIWYG textarea is effectively being saved as an amorphous blob of content, especially when viewed from the perspective of search engines, automated web services, and so on. Furthermore, it cannot be easily tagged or related to other content, with all the data being saved in an unstructured manner. As a result, this type of “blob content” ends up being significantly less shareable (in the eyes of search engines) and less reusable (by content authors on your site).

The problem is that we humans are often too good at understanding content, when compared to computers. People can almost always read and understand a site’s data, no matter how it's structured or formatted (within reason). And that is not to say that good UX design is not an extremely important task unto itself. However, sites should also be concerned about allowing other applications (in addition to humans) to come in and find, parse, and use their data. That is, the data on a site should not only be highly human-readable, but also highly machine-readable.

If a site’s data (and metadata) are easily parseable by machines, in the form of distinct, annotated fields, then that data can be gathered and shared efficiently by countless applications. This can even apply to a site internally, when considering a decoupled site that effectively contains multiple internal applications—the simplest example being a site with an independent front end and back end—where each of which needs to efficiently communicate with one another. Therefore, content is well structured when disparate pieces of data are saved in distinct fields and when metadata is available to describe the types of data in those fields. And metadata, in turns, helps to free your data by making it organized, logical, and classifiable. As Dori Kelner explained in her talk, when content is created as well-structured data, it becomes:

  • reusable,
  • scalable,
  • multi-channel,
  • device-agnostic,
  • and future-proof.
     

The (Non-Technical) Roadblocks to Well-Structured Content

Seeing how useful it is to have well-structured data, why do we still struggle in this domain, even when we know the right solutions?

As a developer, my job is most often focused on how and where content is being fetched, rendered, and served. But, if content is truly at the center of a site, then it touches everyone's job no matter what. And so, in theory, everyone should be involved in content modeling as soon as possible to ensure the most effective meeting of business needs. Unfortunately, this common-sense approach to collaborative content modeling can still run up against many roadblocks from the start. In fact, the biggest roadblocks to having well-structured content are often not technical in nature at all. Instead, content problems often reflect people problems.

For web agencies that are starting new web-based projects/engagements with clients, the client can often come to the table with many preconceived notions about how the content on their site or app should be structured. As experts in their particular business domain, a client will naturally believe that they have the best understanding of their industry and related content, compared to their partners at a web agency they’ve hired. However, this natural expertise about the content doesn’t always translate to how it ought to be structured, especially on the web. Many a project can spiral out of control, exceeding budgets and timelines, when a client insists on playing the role of information architect on top of being the content author. This approach forces the developers to adapt their practices to a potentially malformed conception of how a site’s content should be structured.

With that being said, web agencies can often be their own worst enemy as well in regards to how they approach content modeling with clients. For example, it can seem efficient to have a lone digital strategist sit down with the client to hash out their content needs. Afterwards, these requirements are passed down the chain and ultimately land in the laps of the developers. However, at that point, it’s already likely too late for the developers to make suggestions based on their particular knowledge of what might be the most efficient way to implement a content model with certain technologies.

Similarly, client and developers alike can get caught up in providing “easier” ways of authoring content, as a way of circumventing the hard work of content modeling altogether, via technologies like WYSIWYG and in-place editing capabilities. Rather than sitting down to accurately model how content will need to be presented and stored on the site for efficient future use, it can be very tempting for all parties involved to allow for content entry in the form of unstructured, WYSIWYG, in-place editors that permit users to enter data in practically any way they see fit. Then, only later do the client and agency come to regret their decision, when suddenly the data needs to be presented in a different channel or format, and it becomes prohibitive to manipulate the existing data in its amorphous, unstructured form.
 

The Case for Agile Content Modeling

As we’ve seen, it can be very easy to get things wrong when it comes to developing well-structured content for any project. But what if we were to take some of the lessons we’ve learned in modern software development, and apply those to modern content development as well?

In today’s software project management practices, the perils of the “waterfall” approach and the virtues of the “agile” approach have been touted for years now. When developing modern applications for any number of business needs, many of us take it for granted that it will be more efficient to build that application using an iterative, team-based approach, rather than a one-way, planning-first, building-later approach.

In fact, our very own Jen Slemp at Mediacurrent recently laid out the benefits of agile vs. waterfall, explaining why an agile approach has consistently been much more effective than a waterfall approach for our agency. And, as Mediacurrent’s Cheryl Little explains, , it should also go without saying that an agency’s designers and developers need to work hand-in-hand as a cohesive team throughout any project.. Of course, there are many other project management methods out there, but, to keep things simple, we can focus on a waterfall vs. agile approach and how we might apply that to the content development process.

While much has been said about agile processed within the software development world, these same insights often still appear to be missing from the content development world. As Dori Kelner mentions in her talk, the goal is “to get you to feel like you are part of the content creation team.” However, instead of having this feeling of being on the same team, our first inclination as clients and agencies is often to let a more classical waterfall approach take over all of the content creation processes.

As a method for content development, this waterfall approach can be laid out in four phases, as Dori Kelner cites in her talk based on Atherton and Hane’s paper “Designing Future-Friendly Content: Modeling Structure for Every User Interface”:

  • Phase 1 would involve domain and content modeling for the purpose of mapping out content types.
    • Here, domain modeling refers to the mapping of the entities that will exist on a site and how they relate to one another, while content modeling refers to the mapping of the attributes within each of those entities.
    • This phase would traditionally be handled by the content strategists on a team.
  • Phase 2 would involve content creation as well as the creation of wireframes/prototypes, traditionally overseen by content authors and UX designers.
  • Phase 3 would involve visual design comps created by graphic designers.
  • Phase 4 would involve the actual front- and back-end theming/coding carried out by developers.

If these phases are followed in a strictly linear path, as laid out above in a waterfall style, then the site’s content and its structure are often planned out by a small number of people—without much outside input. Consequently, it becomes very difficult to tackle any issues later on in the process as they arise, especially when it is often the developers who are the last ones to have any input in the content design.

For example, say we fast forward to the end of this process, where the developer is handed a visual comp and told to replicate it pixel-perfectly. If that developer runs into an issue where the Drupal API would have dictated a slightly different content model, there is not much the developer can change about the content model at that point. Instead, they would need to find some less-than-ideal workaround in order to match the visual comp they were handed while still trying to conform to Drupal best practices and its API requirements.

By contrast, how would this process appear under an agile approach? Assuming we maintain the same four basic phases, we can at least make each of them more flexible and responsive to our business needs. Furthermore, each phase of the content development process should be a truly collaborative effort across many disciplines, to guarantee efficient decision- and revision-making processes throughout.

For example, in the initial domain and content modeling being done, it would be ideal to involve developers from the start and let them play a much larger role in finishing the content model. This is preferable because content strategists might not be aware of what's possible/cost efficient when working within a specific technical framework like Drupal. Is this way, developers can bring their expertise to bear on the specifics of building content type, and should be able to preempt many common or less common issues with implementing certain content structures. Conversely, it is also up to the content strategists to still provide the developers with a solid, understandable base of requirements and models to work from.

Similarly, during a more agile version of the wireframing/prototyping phase, content authors would have already worked up a significant amount of real sample content, which they could use to validate the wireframes and prototypes being built by the UX and graphic designers. In this way, the wireframes and prototypes can be iteratively revised before anything is set in stone. By getting the content authors involved as soon as possible, we can ensure that their needs are anticipated during the design process, so that they can consistently maintain authoring standards later one, and not be forced to enter data in a convoluted way that may lead to bugs in the system or simply cannot be handled adequately.
 

The Bottom Line

The bottom line is that being proactive in the conversation about content with your client is essential, regardless of whether you're a freelance developer or team member at a large Drupal agency. And as technologies like decoupled site architectures become more and more prevalent, having good information architecture from the start will only become more and more crucial. With that in mind, content should never be the roadblock standing in the way of a successful launch. But the only way to systematically prevent that is by bring you agile software development practices into your content modeling and creation practices. If your team can achieve this, then you’ll be capable of:

  • Having fully updated content at launch;
  • Integrating real content during development phase;
  • Faster turnaround between development and launch;
  • Validating decisions (information architecture and menus) with the client during the discovery phase via user testing.

Just remember that, if content is at the center of a site, then it also touches everyone's job. Therefore, everyone should be involved in content modeling as soon as possible and as often as possible, in order to ensure the most effective meeting of business needs from day one.

Additional Resources
Scheduling Content Changes in Drupal 8 | Blog
Creating Content with YAML Content Module | Blog
Drupal 8 - The Entity CMS | Blog

Oct 30 2017
Oct 30

Keeping up with Drupal security updates is key to protecting your site, but assessing contrib module security before implementation is just as important. In a new guest post on the Pantheon blog, Mediacurrent Senior Drupal Developers David Younker and Joshua Boltz share a practical guide for sizing up the security of contrib modules.

Try this 7-Step Security Inspection 

To ensure a safe and solid foundation for your Drupal site, consider this 7-point assessment:

1. Has the module maintainer opted in to the security coverage?

2. Have you checked for the latest security advisories and release updates?

3. Is the module the recommended version?

4. Is the module deprecated or unsupported?

5. How many issues are in the issue queues?

6. Do you see any issues in the code?

7. Are you following best practices for patching? (Patch, don’t hack!)

Read More

Check out the Pantheon blog to read the full article. 

Additional Resources

Security by Design: An Intro to Drupal Security | Webinar
Gaurdr for Drupal 8: Meeting Enterprise Security Requirements | Blog

Oct 30 2017
Oct 30

This October, Mediacurrent was excited to participate in our 4th Acquia Engage conference in Boston. As returning sponsors we enjoyed connecting with friends, partners, customers and potential customers, all set to a backdrop of Boston Harbor. The sessions were interesting and the receptions boasted delicious local fare (hello lobster rolls!), but the real highlight was to listen in on the strategy behind Acquia’s latest product announcements.

If you were unable to attend, never fear because we have you covered with the biggest topics from this year’s event.

  1. New and Expanded Products - This was a big focus as Acquia is expanding to ensure they're a single source solution for enterprise needs, including Acquia Journey, Acquia DAM, and support for Node.js. As a partner, we are excited to see the product line develop and continue to iterate in the coming year.
     
  2. Journey and Transformation - The words of the week. We saw first hand how Acquia Journey integrates into Lift and, taking customer experience to the next level.  We are excited to see DAM (Digital Asset Manager) continue to iterate and eventually provide optional integrations to Journey/Lift and data warehouse. The CMS is only one part of what enterprises need to fuel their digital transformation. The website is only one small part of the ecosystem, a trend that Mediacurrent has seen become more prevalent.
     
  3. Session Highlights - A sampling of our favorite session from the weeks:

 4. Engage Awards - Approached with a customer and partner panel style this year, we were excited to be represented on the mains stage by our Director of Development, Kevin Basarab, as he discussed personalization.  It was inspiring to hear from nominees, customers, and partners elaborate on the successes they have seen by leveraging Acquia’s technologies to “transform the journey.” Although we didn’t take home the grand prize, Mediacurrent is proud to have been selected as finalists for the 2017 Acquia Engage Awards in the categories of Financial Services, Travel and Tourism, and Digital Experience.

5. Connect - Attending Acquia Engage provides lots of great connection opportunities with clients and other adapters. It is validation that we're heading down the right path of using Drupal as a baseline but ensuring connection to various other services.

If you’d like to discuss your experience or hear more about the products and topics discussed at Acquia Engage, we’d love to hear from you.  Connect with us on Twitter, Facebook, or send us a message.

Additional Resources
Mediacurrent Wins Acquia Site of the Year
Mediacurrent Partner Testimonial 

Oct 25 2017
Oct 25

It's official: the countdown to DrupalCamp Atlanta is on. In just two weeks (November 2 - November 4), Mediacurrent will proudly sponsor another great camp in Buckhead, the tech center of ATL. Known for being a top Drupal event in the southeast, DCATL isn't one to miss. It's not too late to register!

If you'll be attending this year, you can catch the Mediacurrent team presenting these sessions:

Survival Skills for Real-World Project Management

Time: Friday, 1:30 pm - 2:20 pm / Piedmont A

Bring your JIRA boards, your Scrum cards and, yes, even your waterfalls for COO Jeff Diecks session. He'll break down the daily survival skills Mediacurrent teaches to our project management team, such as:

  • How to stay organized through the power of the daily priority list
  • How to check in with a developer to evaluate true status
  • Ticket best practices to improve consistency
  • How to scan the code repository to identify and remove blockers
  • Speaking from data to calm nervous clients
  • Effective recap e-mails to manage scope and budget
  • Managing a product backlog to maintain clear priorities
  • Burn rate woes and how to fix them

Comparing CMS Platforms: A Cross-Functional View 

Time: Friday, 2:30-pm -3:20 om / Peachtree A

Clients need to sift through a lot of information when choosing an enterprise-level Content Management Systems (CMS) — features, functionality, cost, and more. Business Analyst Bill Shaouy will compare the three leading CMSs ( Acquia/Drupal, Adobe Experience Manager, and Sitecore) from the following five perspectives:

  • Content Authoring
  • Marketing
  • Business
  • Development
  • Community

No technical knowledge is required. Attendees will leave the session with a better understanding of the strengths of each of the three CMSs, and what the Drupal community is doing to shore up Drupal's relative weaknesses. 

Shifting UX to the Editorial Experience

Time: Saturday, 9:00 am -9:50 am / Peachtree C

With the rise in popularity of decoupled infrastructures, more clients are shifting their focus to improving the Drupal Administration UX. 

Kevin Basarab, Director of Development, joins with Group Nine Media to explore these questions:

  • How is design/UX reversing to focus on the editorial experience?
  • What contrib modules currently enhance the editorial experience?
  • How can a better editorial experience be beneficial to your client?
  • Where is the future of editorial experiences and Drupal heading?

Keynote Contrib Panel

Time: Saturday, 11:00 am - 12:00 pm / Peachtree A 

As some of the world's largest applications are developed as open-source, the need for project maintainers has become vital to the success and longevity of these programs. Damien McKenna, a top Drupal contributor, and Mediacurrent's own Community Lead will share tips for becoming a better maintainer. 

  • So what does it take to become a maintainer?
  • Why would someone volunteer so much time?
  • What are some tips to avoid burnout?
  • How do you split your time between client and contrib work?
  • How can someone become a (co-) maintainer?

Connect with Mediacurrent 

We know how difficult it is to get your questions answered and get one-on-one time with top Drupal experts. Here's your chance! Reserve a time to talk with one of Mediacurrent’s experts about your Drupal project. Reserve a time slot here. 

Stop by our table in the exhibition area to say hi, learn about our open positions and grab some swag. 

Additional Resources

Drupalcamp Atlanta 2016 Recap | Blog Post

Oct 19 2017
Oct 19

Mediacurrent’s commitment to innovation has been clear since our founding ten years ago. From helping spearhead the Atlanta Drupal community in our early days, to architecting the world’s highest-trafficked Drupal site, to building and open sourcing a Drupal 8 theme generator, Mediacurrent has lived up to its pledge to give team members internal time to work on their own initiatives, and to give back to the wider open source community in diverse and innovative ways. The choice to create a new Labs department and a Director of Emerging Technology role flows from that commitment, but also aims to go further. So what will these changes entail, and how will they help ensure the success of our clients and of Drupal?

More and more, we are finding that staying on the cutting edge of building with Drupal means also keeping up with where non-Drupal technologies are heading. Our clients are increasingly moving from traditional websites, through mobile-first thinking, and towards truly multi-channel technology experiences. Our ability to serve their needs as an agency, and Drupal’s ability to serve their needs as a piece of software, requires new ways of thinking and growing. Mediacurrent Labs is a formalization of our commitment to doing just that.

What does all this mean in practice? First and foremost, it means encouraging experimentation with new technologies within Mediacurrent, and contributing the lessons learned (and hopefully some useful tools as well) back to the open source community. The work I’ve been doing on Contenta Angular falls nicely into this category, as does our recently featured work on blockchains, Alexa skills and TypeScript integrations with Drupal behaviors. When these things are driven by a client’s needs, we also explore how we can generalize what we’ve learned and apply it elsewhere; perhaps by building tools to make the process simpler next time, or by documenting publicly our best practices. And when we’re excited about a new technology’s possibilities but don’t have a specific client asking for integration (yet), we can use internal proof-of-concepts to educate ourselves, then share what we learn with the world.

Speaking of sharing, our commitment isn’t just to fostering Mediacurrent’s thought leadership within the Drupal world; we are also committed to elevating outside voices of innovation. Being co-lead organizer of the new conference that debuted in New York City this August, Decoupled Dev Days, is a great example of how we help foster the momentum around rethinking Drupal’s future over the next decade. The conference, which was dreamt up less than four months ago at DrupalCon Baltimore, brought together speakers from seven Drupal agencies, as well as core members of two major javascript frameworks!

This is just a taste of what we are setting out to achieve. As we consider Labs projects in the coming months we want to hear about the emerging technologies you are interested in. Should we be exploring virtual reality or augmented reality integrations with Drupal? Maybe Drupal-backed IoT beacons are the next big thing? Or is there a good chance that blockchain technology will completely upend the way we think about Drupal today? We don’t have all those answers, but we are committed to exploring the questions collaboratively with our clients and community.
 

Additional Resources
5 Thoughts About Blockchain Technology | Video
Integrating Amazon Alexa with a Drupal 8 Site | Blog
Rinnai | Case Study

Oct 12 2017
Oct 12

With cybercrime on the rise, securing data in Drupal has become a hot topic for developers and project stakeholders alike.

In our latest webinar, we were joined by three Drupal security experts from Townsend Security, Lockr and Mediacurrent who shared their approach for building a secure groundwork to protect site data in Drupal.

Top 4 Takeaways 

1. An introduction to  "security by design" and how businesses should be thinking about security.  

2. The right tools to conduct a site security audit. 

3. A deep dive into data encryption and key management.

4. Resources to improve security -  and how modules like Guardr can help protect private data in Drupal.
 

View the Webinar 

 To learn more about this topic, check out their presentation slides below or watch the webinar recording.

About the Speakers

Mark Shropshire, Open Source Security Lead at Mediacurrent
Mark brings 20 years of experience leading technical teams to his role. He is also the maintainer of the Guardr Drupal security module suite.

Chris Teitzel, Founder/CEO at Lockr 
Chris has been working in Drupal for almost 8 years. During that time he has worked on projects spanning the globe in front-end design, e-commerce and security. His passion is for making technology accessible to all skill sets. 

Luke Probasco, Drupal GM at Townsend Security 
Luke manages Drupal business for Townsend Security. He's a DrupalCon, Camp, and Summit speaker, security professional and music enthusiast.

Additional Resources
Mediacurrent Dropcast Episode 34: Security! 
Security Dropcast Transcript | Townsend Security Blog 
Raising the Security Bar with Drupal | Drupalcon Presentation Recording 
Guardr for Drupal 8: Meeting Enterprise Security Requirements | Mediacurrent Blog

Oct 11 2017
Oct 11

Mediacurrent has been selected as finalists for the 2017 Acquia Engage Awards in the categories of Financial Services, Travel and Tourism, and Digital Experience. These awards recognize the amazing sites and digital experiences that leading digital agencies are building with the Acquia Platform.

Check out our three finalists!
 

Category: Travel and Tourism

Finalist: Brand USA
URL: visittheusa.com

Leveraging the powerful personalization features of Acquia Lift, Mediacurrent partnered the organization behind the official travel site of the USA to launch a new multilingual site on Drupal 8. Read more about the project in our case study.

 

Category: Financial Services

Finalist: MagMutual Insurance
URL: magmutual.com

After a complete transformation of their digital experience, MagMutual saw an increase in acquisition, engagement, and conversions. "I really like that Mediacurrent has a broad skill set - including SEO, UX/UI and Strategy,” said MagMutual CIO Sallie Graves. Read more about the project in our case study.

 

Category: Best Digital Experience

Finalist: The Commonwealth of Massachusetts
URL: mass.gov

Mediacurrent is among the four leading digital agencies that are working to transform Mass.gov, improving the user experience for residents of the Commonwealth of Massachusetts to interact with state government online.

“Building ambitious digital experiences has been a central focus in the Drupal community this year — a vision that we at Mediacurrent have fully embraced.These industry awards are a great validation of our team’s creativity, strategy, and technical strengths that drive some of the world’s most notable Drupal sites.”

- Dave Terry,  Mediacurrent co-founder
 

Acquia Awards History

In 2015, Weather.com won for best partner site of the year and in 2016, our work on Curtiss-Wright earned a finalist nod in the High Technology category.

For more on the 2017 finalists, see our press release.
 

Meet us at Engage

Winners will be announced next week at the Acquia Engage conference on October 17,  from 5:30 pm to 6:30 pm at the Intercontinental Hotel Boston.  During this time, Mediacurrent will participate in a panel discussion on the topic of personalization. In addition to sponsoring the event, several Mediacurrent team members - Dave Terry, Josh Linard, Megan Hofmeyer and Kevin Basarab - will be in attendance.

We’re looking forward to learning about the challenges and opportunities that Drupal users will face in the coming year, and anticipate some lively discussion around decoupling, personalization, user experience, and more. Will you be at Engage? Contact us to set up a time to network.

See you in Boston!

Oct 04 2017
Oct 04

Recently I was lucky enough to catch a workshop by Brian Sinclair entitled 'Accessibility: The Basics and Beyond'.  The workshop was part of the DinosaurJS conference in Denver CO.

As part of the accessibility group at Mediacurrent, I was excited to see the issue being addressed at a javascript conference.

Since the launch of Drupal 8,  front-end developers have had to pay a little more attention to either including or not excluding the accessibility features of Drupal. As decoupling the front end from Drupal is becoming more common and we use frameworks like Vue or React to provide the user interface, we need to make sure that we understand what we need to do accessibility wise to make sure that our sites and applications are available to all. If we are writing the markup, we need to make sure that we are aware of the HTML accessibility requirements without relying on the work of  Drupal’s accessibility team.

What a good time to get a refresher on basic accessibility - why we do this, and how to use the docs.

So one of the main takeaways from the ‘Why we do this?’ section was that improved accessibility means an improved user experience for everyone. When we are focussed on how things work for people who are accessing content in different ways, we are more conscious of how our site works. This mindset has the benefit of improving the experience for all users. In other words, ‘solve for one, extend to many.’

The ’Tools’ section of the presentation was extremely insightful. This centered around the WCAG 2.0 guidelines. Despite having been on the accessibility team for a year and reading this site many times I had not noticed how the guidelines were grouped. The sections are an acronym, POUR. Which stands for:

Perceivable - can everyone consume this content?

Operable - can you use it, can everyone use it, tab, enter etc.

Understandable - Does the content even make sense? Can someone use the site without explanation?

Robust - Can it be used in a broad variety of environments?

This is likely obvious, however, I had not made the connection and this really changed my perception of the guidelines. By understanding what each section was targeting, and relating each section to each other it really helps approach projects and issues with greater confidence.

When discussing the levels for WCAG 2.0, which range from A through AAA, AA is the target that most accessibility teams aim for. However knowing your audience is as important as adhering to standards. In Brian’s example he pointed out if your website or app is only available for Apple users, then there is little benefit to supporting internet explorer. The same is true for accessibility. You might not need to provide an extremely robust screen reader support if all users are using the built-in Apple voiceover. Sometimes it is not useful to say ‘we have to meet every AAA standard, or even AA’ if the site content doesn’t suit that need.

Another big takeaway from the tools sections was that the software tools we use when testing our sites to make sure that we are not overlooking any areas are not 100% foolproof. Things like aXe and Wave will catch some of the errors and oversights but are no real guarantee that you have hit everything. It is also worth noting that some items that are flagged may not be either desired or required. For example, sometimes providing alt tags for images that serve no useful information to a screen reader is better than bombarding the screen reader with information. The main takeaway for me was that we always need to be thinking about what we are presenting and how it is being viewed. If we can justify the decisions that we made then we will be in a better place for future iterations.

Overall I found this presentation to be very useful and would encourage you to check out the video here (from a different conference, but similar content). I try to attend all of the accessibility talks at the conferences I go to because I think it is important to support the work but also it is good to make sure that I am on the right track for current approaches. As we work on projects where we can’t fall back on provided HTML structure, it is important that we understand how to get the information we need and access the tools available to us.

Learn More:
http://brianyang.com/brian-sinclair-accessible-accessibility/
 

Additional Resources
Accessibility Best Practices for Content Editors | Blog
Dropcast Episode 15: International Front End | Podcast
5 Advantages of Component Driven Theming | Video

Sep 28 2017
Sep 28

Javascript has a reputation in developer circles as a terrible language. It’s classless, loosely typed, and plagued by cross browser issues. Douglas Crockford, author of JavaScript: The Good Parts, said “JavaScript contains some of the best ideas ever put into a programming language and it contains some of the worst ideas ever put into a programming language.” It was created in just 10 days in 1995, and not standardized by ECMA until almost 3 years later. Microsoft initially decided not to implement the new standards, almost putting an end to the language in its infancy.

The first JavaScript engine, codenamed SpiderMonkey, was built for Netscape Navigator and was simply an interpreter that read and executed source code. At the time, and for many years after, Javascript generally consisted of a few functions written into the head of a webpage or a handful of inline events. Interpreting the code as needed was satisfactory, if not fast.

We’ll skip the next 10 tumultuous years, to 2004, when Google introduced a new application; Google Maps. For Javascript and developers everywhere it was a game changer. A very, very slow game changer. Browsers bogged down as the JavaScript engine simply plowed away at all that code.  

There have been countless pages and bits dedicated to the explanation and description of  JavaScript engines, see the 'Learn More" section at the end of this post for examples. And it’s a topic that even most professional JS developers aren’t quite clear on. So I’d like to provide you with a very brief overview of engines, especially the shiniest toy in the box right now, V8.

Most Javascript engines process code in a few steps. First, lexical analysis breaks the code into tokens to identify their meaning. The tokens are then analyzed by a parser and built into a syntax tree in an intermediate language, like bytecode. Finally, the JIT compilers kick in and execute the code.
 

In 2008 Google introduced its souped-up version of the engine, V8.

The V8 engine uses several threads. The main thread does what you would expect: it fetches your code, compiles it, and executes it. There's also a separate thread for compiling, so that the main thread can keep executing while this one is optimizing the code, and a profiler thread that will tell the runtime in which methods we spend a lot of time, so that the compilers can optimize them. There are also a few threads to handle garbage collection and dead code elimination.

V8 has 2 compilers, Full-Codegen and Crankshaft. Full-Codegen parses JavaScript directly to machine code, without an intermediary language, allowing it to begin execution sooner. A JIT compiler called Crankshaft produces optimized code for hot methods. This means that in the same V8 program, different levels of optimized code coexist at the same time.

Crankshaft is where the speed really comes from. While Full-Codgen is running, a runtime profiler identifies “hot code,” code that’s executed many times. At this point, the current thread stops executing your code and passes it to Crankshaft. The base here for all optimizations is inline-caching, a technique pioneered by Smaltalk. It consists of patching the code with better code instantly.

The parsed JS is first compiled to a high-level representation called Hydrogen, where most optimizations are done. This is where type-specialization happens. The type-specialization removes what JavaScript calls boxing and unboxing operations. So, for example, if your script often runs a function on a set of integers, it avoids sorting through all the necessary steps to parse strings and floats, and saves the needed steps to parse your integers so it doesn’t have to run them again.

Because JS is non-typed, there is no guarantee that the specialized generated code will continue to work. Your function could be called on to work with strings, or doubles. This code now has to be de-optimized, pulled out of the running thread and replaced with the original runtime code. This is accomplished with a technique called on-stack replacement (OSR). OSR is the mechanism that preserves the semantics of the current stack frame while switching between optimized and unoptimized code. Using OSR, when your function arguments switch types, the optimized code is pulled and your thread is dumped back into the original Hydrogen generated thread to be recompiled.

Crankshafts final job is to lower the representation to a level called Lithium, which is architecture specific. Lithium is the representation that is finally translated into machine code. Here, we see OSR again. The code has been running in your browser or application while all these steps were going on, and now that we have a fully compiled and optimized version we can switch to the optimized version in the middle of the execution.

Simply running the two compilers concurrently boosts performance by 27%. And it’s not done. Every six weeks the V8 team releases a new branch. On September 11th, the team announced version 6.2, which will be released with Chrome 62 in a few weeks. This next version includes what the team calls “all sorts of developer-facing goodies” and performance optimizations. You can read about the next release HERE.

Learn more:

Chrome V8 developer channel: https://developers.google.com/v8/

Red Hat Developer Program: Javascript Engine & Performance Comparison (V8, Chakra, Chakra Core): https://developers.redhat.com/blog/2016/05/31/javascript-engine-performance-comparison-v8-charkra-chakra-core-2/

Lars Bak: V8: an open source JavaScript engine: https://www.youtube.com/watch?v=hWhMKalEicY

Daniel  Clifford: Google I/O 2012 - Breaking the JavaScript Speed Limit with V8: https://www.youtube.com/watch?v=UJPdhx5zTaw&t=48s
 

Additional Resources
AMP'lify Your Website: Google AMP 101 | Blog
Next-Level Drupal: Applied Progressive Decoupling with Javascript | Video
Decoupled Blocks with Drupal 8 and Javascript | Blog

Pages

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web