Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
Apr 20 2021
Apr 20

open waters

New Year, New Faces, Same Focus

We’re back! Season 2 of Mediacurrent’s Open Waters podcast is officially on its way. We recorded a special trailer episode to celebrate. 

Our own Susan Cooper is taking over the mic this season with co-hosts Mark Shropshire and Mario Hernandez. Just like last season, our purpose is to explore the intersection of open source technology and digital marketing. We’ll share the challenges and solutions we see with our own clients and in the market.

During season 2, we'll be covering topics including:

  • How to optimize your digital strategy
  • Accessibility as a business imperative
  • UX design principles
  • How it all works together using open source technologies like Drupal

Welcome to Season 2

Meet the Hosts 

Susan Cooper 

Susan headshot

Role at Mediacurrent: Senior Project Manager

Podcast creds: Co-host of Inclusion Catalyst, a podcast about diversity and social justice issues, and Producer of Marketing Upheaval.

What are you most excited about for season 2? I love podcasting and audio branding in general, so this is something I’ve been looking forward to since the day I started at Mediacurrent! These conversations are a great opportunity to learn from our guests and build community around our open source mission.

Mark "Shrop" Shropshire 

Shrop headshot

Role at Mediacurrent: Senior Director of Development 

Podcast creds: Shrop can be found talking about open source security, leadership, mentoring, and more on his two personal podcasts: goServeOthers and SHROPCAST

What are you most excited about for season 2? The opportunity to learn more about what other talented folks are doing in the marketing and tech industries. It is easy to be comfortable with what you know today, but I find that having conversations with others can really challenge you to think differently and learn new niches.

Mario Hernandez
Mario headshot

Role at Mediacurrent: Head of Learning 

Podcast creds: Member of the original cast of Open Waters  - Mario co-hosted the first season of our podcast.

What are you most excited about for season 2? I am looking forward to interviewing industry leaders to discuss all things open source. I am also really excited about teaming up with Susan and Shrop. Both of them have vast experience in podcasting and I am ready to learn from them.

Podcast release schedule 

New episodes will be released monthly on the Mediacurrent blog and wherever you follow your favorite podcast. You can also follow us on Twitter for updates.

Subscribe to Open Waters

Visit mediacurrent.com/podcast to hear the latest episode and subscribe to the podcast on your favorite podcast app. Share the podcast or tell a friend about it - tag us @mediacurrent on Twitter. 

How can I support the show?

Subscribe, leave a review, and share about us on social media with the hashtag #openwaterspodcast. Have an idea for a topic? Get in touch with our hosts at [email protected]

Mar 30 2021
Mar 30

Rain logo updated

The best open source distribution for Drupal just got better! The latest version of Rain University and Rain CMS now ship with Layout Builder pre-configured to make page building faster and easier. So how does it work? Check out below!

Editing Layouts

Now, when you navigate to any page with layout builder enabled you can edit the layout by clicking on the “Layout tab” under Tasks. Alternatively, you can click on the same tab while editing a page.

Rain editor experience with layout builder
Rain CMS homepage

Rearranging Blocks

With layout builder you have an instant preview of any blocks added to the page. That being said, it’s usually easier to move blocks around with preview turned off. Drupal provides a checkbox that makes it simple to toggle preview on or off.

Rain CMS, rearranging content blocks

Rearranging blocks in Rain CMS

Adding Blocks

To add a block to the page click the “Add block” link in any section. Rain CMS ships with 15 block types out of the box that you can easily drop onto the page. Each component has a preview wireframe and label to help the author understand the look and function of each component. 

Rain add block

Adding blocks in Rain CMS

Layout Controls

One of the big benefits of Layout Builder is now you have more control over the layout of a page. Editors can easily add new sections with various layouts where blocks can be placed. Layouts can be customized per project.

adding sections in Rain CMS

Adding sections in Rain CMS

Rain University CMS

The Mediacurrent team has also updated our RainU CMS to ship with Layout Builder. Same great experience, but tailored specifically for universities.

Rain University homepage

Rain University homepage layout

Want to Know More?

For developers, you can download and install Rain CMS with Layout Builder using our Drupal project template: https://bitbucket.org/mediacurrent/drupal-project/src/9.x/. Setup and installation remain the same, with detailed instructions provided in the project README file.

We are also happy to demo Rain University or Rain CMS for organizations interested in partnering with Mediacurrent for your next redesign project. To schedule a free demo, please visit our contact page or chat with us right now (see bottom right corner of the page). 

Mar 19 2021
Mar 19

rocket blasts off against a starry sky

DrupalCon North America 2021 is right around the corner! Check out the ever-growing schedule of sessions, industry summits, and special events on the official event site, and mark your calendar for these Mediacurrent sessions. 

Our Sessions 

The Mediacurrent team is proud to support this community event as a platinum sponsor. We’ll be presenting several sessions at this year’s online conference.

Whether you’re a site builder scaling up with multisite, a marketing leader in search of current guidance on open source security, or a Drupal community member of any kind looking for inspiring real-world case studies, we’ve got you covered. 

Here’s what we have in store for sessions and case studies in Drupal innovation:

Unlock The Power of Multisite 

DrupalCon program speaker card with Jay's headshot

Join Jay Callicott, Mediacurrent’s VP of Technical Operations, for a comprehensive approach to manage your Drupal sites at scale.

Interested in evaluating multisite options for your organization? Jay will cover several ways to scale your Drupal platform from one site to many dozens or even hundreds.

Register here to join the session and learn best practices for governing multiple sites from one codebase, how to configure a multisite installation, and considerations for your hosting solution. 

Open Source Security for CMOs

DrupalCon program speaker card with Mark and Krista's headshots

As open source software continues to become widely adopted, adhering to security standards is becoming more challenging. So what's a CMO to do?

Inspired by our ebook, The CMO’s Guide to Open Source Security, this session will help you navigate the terminology, expectations, and tools to ensure security is a priority for your web properties.

You can register here to join the session led by Mediacurrent’s resident Drupal security experts Mark Shropshire and Krista Trovato.

Case Study: Habitat for Humanity 

Imagine a world where everyone has a decent place to live. That’s the vision fueling Habitat for Humanity to create ambitious digital experiences with Drupal. 

This session will present a case study covering how Drupal is being used to bring mission-driven innovation to reality for this international nonprofit. Both Drupal site builders and non-technical roles are encouraged to attend. 

You can register here to join the session led by Mediacurrent Project Manager Vicky Walker and two members of Habitat for Humanity's web team.  

Drupal for Higher Education 

The year 2020 called for higher ed leaders to accelerate digital marketing strategies. For many, Drupal was a key part of the equation. This rang true among a spectrum of Mediacurrent’s higher education partners, including an Ivy League university that chose a decoupled architecture for its breakthrough knowledge platform.

Dan Polant, Director of Development at Mediacurrent, will share that story in a co-presented session at the Higher Education Summit. The session will explore the University’s driving mission to build toward a brighter financial future on a Drupal and React-based platform.

Join the session on April 20 at the Higher Education Summit.

Connect with Us

There's more to come! Check back for Rain CMS demos, Drupal 9 info sessions, giveaways, and more coming soon to our DrupalCon 2021 event page.

Mar 03 2021
Mar 03

This post is an updated part of our Marketer's Guide to Drupal series. This guide will walk you through considerations for choosing an open source CMS, plus case studies and CMO advice to bring your site to the next level.

Supercharge SEO with Drupal

“Over the last 20 years, Drupal has grown into one of the largest enterprise content management systems in the world.” - Drupal Founder Dries Buytaert

Along with the growth of Drupal, the marketing landscape is vastly different now than it was 20 years ago. The same techniques once used to make the top of the search engine no longer work, so marketers need to understand the powerful role a CMS like Drupal can play in building a successful SEO strategy. 

The release of Drupal 8 marked a significant stride in giving content authors more control. That focus continues to evolve with Drupal 9. Notable editor-focused features include a templating engine called Twig for component variety, an API-first foundation to “write once, publish everywhere”, and an editor-friendly content block authoring experience. Layout Builder additionally provides a "drag and drop" module that lets editors add components to pages and add pages to the site with no code. Now, Drupal 9 has even more upgrades for marketers, tech-savvy or not.

This shift places the marketing team in the driver’s seat more often and allows them to get involved in the CMS decision. In this post, we’ll outline some ways you can up your SEO game with Drupal.

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, the user’s intent. If you want your rankings to stick, 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 9 is built with several of these factors in mind to help us make needed improvements quickly and effectively.

Mobile-First Mentality

Drupal 9 is created with responsive design capabilities built-in, so you can begin to address many problems immediately. That’s not to say all of your responsive problems will be solved. Content editors still need to think through their content and imagery, and themers will still need to do configuration to establish things like breakpoints. But Drupal 9 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 provide a PageSpeed Insights test to show where and how your website is slowing visitors down. Drupal 9 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. It also uses a feature called velocity, which makes creating and publishing new dynamic content experiences is significantly faster than in Drupal 7 and older Drupal versions.

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 your marketing team is focused (as you should be) on top rankings, Drupal 9 provides many of the tools to make that happen. 

Accessibility = Key for Search

Drupal 8 spurred an overall commitment to accessibility from the community, and with the release of Drupal 9 came another big push toward improving web accessibility, including: 

This is important because, as we know, the relationship between web accessibility and SEO is closely intertwined. Although accessibility is not actually a Google ranking factor (yet), improving accessibility on your website has a high chance of improving your SEO rank.

SEO Friendly Modules for Drupal 9

There are thousands of modules available for Drupal 9, many of which are perfect for marketers. Whether you’re looking to try out something new or to find something that fits what you already know, you have your pick. Here are our favorite SEO modules to use when optimizing your site:

  1. Metatag - allows you to automatically provide metadata, aka "meta tags", that help search engines understand your content. This must-have module offers over 300 different meta tags for different purposes, so take a look and find the right ones for your site.
  2. Two Metatag submodules that we highly recommend are Twitter Cards and Open Graph. Connect your site to Facebook, LinkedIn, Slack, Twitter, and other social platforms and control how links will look when shared on them.
  3. Schema.org Metatag - provides a way of adding some of the hundreds of standardized metadata structures from the international schema.org project on a site, making it easier to clearly define metadata that Google et al can use to more accurately understand your site’s unique information.
  4. Pathauto - helps save you time from manually having to create URL path/aliases as new content is created.
  5. 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.
  6. 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.
  7. Google Analytics - this simple module allows site admins the ability to easily configure Google Analytics in Drupal.
  8. 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.

Thankfully, because Drupal is open source, you’re not out of luck in the instance that you can’t find a module that works for you. There are many options available for making a new one that works, from building it yourself to enlisting help from a Drupal team like Mediacurrent.

Visualize SEO Success with Siteimprove

In addition to Drupal's SEO-friendly modules, an SEO optimization tool like Siteimprove can…

  • Give content editors information about their technical SEO to make more informed decisions
  • Gain an understanding of how SEO and content intersect for your overall strategy
  • Flag potential issues before your content is published
  • Provide insights about the SEO impact on unpublishing a page

The Siteimprove module works directly in Drupal, giving editors access to these insights while they’re adding content. This means no more waiting to fix it post-publish. It is important to correctly set up Siteimprove in order to get the most out of it and effectively transform your strategy into a workable roadmap for your site.

SEO and Beyond

Drupal’s content management system is perfectly structured for search optimization and its core features support many of the critical SEO elements. But features only take you so far on their own. To manage and continuously improve your SEO, consider a dashboard like Siteimprove that you can customize to show you just how the data is processed and how it impacts your business's goals.

Setting those custom data points and interpreting the data that comes in can be time-consuming and difficult, so if you need any help, our team of Siteimprove certified experts can apply our knowledge to configuring your dashboards and making sense of the data. Get started with a Siteimprove tune up.

Feb 17 2021
Feb 17

TL&DR: Use drupal.org's issue forks to make Drupal 9 compatibility fixes work with Composer.

While most software developers are in agreement on the two hardest things in software development – cache invalidation, naming things, and off-by-one errors – not everyone is in agreement on how to rank the rest of the top ten challenges. One that must surely rank high is dependency management algorithms and dependency management tools. These make sure that different libraries and additions to a codebase are kept up to date and APIs are kept compatible. For example, supposing a codebase has SquareWidget v2 and CircleWidget v2; if SquareWidget v3 comes out but is incompatible with CircleWidget v2, the codebase's dependency management tool would prevent updating to SquareWidget v3 until a compatible version of CircleWidget was available.

In the Drupal world we've historically avoided formal dependency management as we could just download a package from drupal.org and get running, occasionally realizing "Oh I needed CTools too" and grabbing it. Along the way some folks built the Drush tool which, amongst other things, could download these dependencies automatically. It wasn't until Drupal 8 came along that more formal dependency management became a thing because of its heavy use of 3rd party libraries, in large part thanks to the use of the Composer system. This tool came out of the wider PHP community's need for a generic, reliable dependency management system, and in the Drupal maintainers' drive to adopt more 3rd party libraries and tools it was the obvious choice. After an initial bumpy learning phase, almost all contemporary Drupal 8 and 9 website projects today are managed using Composer.

The drupal.org infrastructure provides a custom wrapper around Drupal core, module, and theme meta data so that it can be loaded using Composer using its metadata platform Packagist. Modules and themes which already include a composer.json file will have that made available as-is. However, a large portion of Drupal 8 and 9 contrib projects don't have this, so the drupal.org infrastructure maps the info.yml files into a format Composer can understand. This way a module that was initially ported to Drupal 8 a few years ago can still be added to a contemporary D8 project managed with Composer, even if the module hasn't been touched in years. It's awesome.

The World of Drupal 9 Updates

Back in October 2019, a new feature was added to core 8.7.8 which allowed modules to specify the versions they were compatible with by using a new line in their info files. This new line became a requirement on Drupal 9 as there needed to be an indication in modules & themes to indicate what APIs they were compatible with. For most projects the new line makes the info file look like this – note how the old "core" value is now replaced with a "core_version_requirement" value:

name: Commerce Migrate
type: module
description: Provides various Commerce-specific Migrate handlers.
core_version_requirement: ^8.8 || ^9
package: Commerce (contrib)
dependencies:
 - drupal:migrate
 - drupal:telephone
 - migrate_plus:migrate_plus

A module (or theme) could use the new line to indicate they were compatible with both Drupal 8 and 9 simultaneously, and the majority of the most popular modules have made the necessary changes.

Drupal 9 presented the first major release of Drupal core that was such a low impact update it was possible to run many websites on either 8.9 or 9.0 just by swapping the core files out (and updating the dependencies). Gone are the days of having to rebuild a site from scratch for each major upgrade, instead we just have to keep our codebases fully up to date and swap to the new core release pretty quickly.

Except for that one line.

That one new line has to be in each info.yml file in the codebase (except for test files, but that's a different matter), so any under-maintained or unmaintained module or theme will need to be updated. Thanks to the wonders of modern development tools, it was estimated that almost a quarter of all Drupal 8 modules & themes could be upgraded to be compatible with Drupal 9 by just changing their info file! Over the course of 2020, thanks to contributions and collaborations from folks all over the world, a huge number of modules and themes were updated to be fully compatible with Drupal 9, and a large portion of those that don't have releases have patches available.

The Catch-22

The fact that there are patches to make Drupal 8 modules & themes compatible with Drupal 9 is great for maintainers or would-be maintainers - they don't need to go through the efforts of making all of the changes themselves, they can just review what has been provided and, hopefully, commit it. Normally patches are great for end-users too, because again they don't have to take the time to make the change themselves, someone has made it available for them.

Here is what happens when you apply a patch using Composer:

  1. Composer downloads the project's listing from Drupal's custom Packagist system (see above).
  2. It compares the dependencies from the listing against what's currently in the codebase.
  3. It deletes the existing copy of the underlying module or theme, if present.
  4. It downloads a fresh copy of the module/theme that matches the dependencies.
  5. It applies the patch.

Normally this patch process works great - you find a patch, add to your codebase, and away you go, remembering to leave a comment to the patch creators how well it works for you. However, there's a major limitation here - even if the patch contains changes to the composer.json dependencies, it's applied after Composer has decided whether or not to install it.

In short, you can't use a patch to tell Composer that a Drupal 8 module is compatible with Drupal 9.

Improved Code Collaboration Workflows

Drupal originally used CVS to manage the codebase. This was very limited by today's standards, but it was reasonable back in the early 2000s and provided a means to centrally manage the large codebases of both core and the ever expanding array of contributed modules & themes. Proposed changes to these codebases were handled using patch files, which are simply text files which indicate a file to be modified, which lines are to be removed and which are to be added. It worked well enough, but there was a large learning curve for beginners to get past.

Over the years more flexible & functional replacements for CVS became common, including centralized systems like Subversion and decentralized systems like Mercurial, Perforce or git. Rather than take the short jump to another centralized system, the effort was taken to build out a replacement code management platform using git, under the umbrella project name of "The Great Git Migration". Completed in 2011, the effort was lead by Sam Boyer, and the community has been all the better for it.

However, after the git migration was completed the community was still stuck with patch files. While github had its pull request workflow, the Drupal community was screaming at the need for somewhat archaic collaboration workflows.

Skip ahead nine years and an awful lot of discussion and research, in 2020 the community finally had a replacement code collaboration workflow in the form of merge requests via the Gitlab system. This new workflow allows anyone to create a fork of a project, make changes, and then create a gihub-pull-request -like change request, dubbed a "merge request", for others to review. Unlike github's pull request system, it's also really easy for anyone to collaborate on the same merge request, which lends itself really nicely to collaboration with others rather than solo development. After some opt-in beta testing, the new system was launched community-wide for every single code project on drupal.org to use.

The new issue fork and merge request system is based upon the simple concept that each individual issue on drupal.org can have its own copy of that project's codebase, an issue fork, and that codebase can be downloaded individually using git. With an issue fork anyone can make whatever changes they need directly with git and others can then download those changes directly using git - no additional tools needed, no patch files flowing around.

This also means that it's possible to tell Composer to download the codebase from an issue fork instead of from the main repository.

This means that an issue fork can be used to get around Composer's patch-vs-dependencies catch-22!

Putting it All Together

First off, it should be noted that issue forks are, to all intents and purposes, a separate physical repository than the parent project they fork from. This means that you cannot just download the issue fork by telling Composer to use a specific branch of the main project, Composer has to be told to use a completely different repository.

It's also worth bearing in mind that, for a given Drupal project (module or theme), only one issue fork can be used at a time. Because an issue fork is a separate repository, it isn't possible to download two different versions of the same module/theme and magically have them squish together. Therefore, if multiple merge requests / issue forks are needed for a given project then the others have to be applied as patches; alternatively, a separate "meta" issue could be created that combines multiple changes into one merge request, but at that point it might be easier to just become a maintainer and commit the changes.

In this example, I'm going to use the merge request created for the Drupal 9 compatibility issue for the Commerce Migrate module.

  • First off, find the issue fork portion of the d.o issue, which should be right underneath the list of attachments & patches, which is underneath the issue summary.
    Issue fork options
  • Click the "Show commands" button to expand out the example git commands.
    Show commands
  • In both the "Add & fetch" sections there will be a "git remote add" line. Included in this is a URL that's needed to download the codebase from the issue fork - one starts with "[email protected]" while the other starts with "https://git.drupalcode.org". Copy the full line (click the "copy" icon to copy it to the clipboard) and extract the URL, e.g. [email protected]:issue/commerce_migrate-3150733.git.
  • Click the "commands" button again to hide them, and then get the branch name, which in the example above is "3150733-drupal-9-compatibility".
  • In the site's composer.json file, in the "repositories" section add a new item with two values: {"type": "git", "url": "URLFROMABOVE"} e.g.:
           {
               "type": "git",
               "url": "[email protected]:issue/commerce_migrate-3150733.git"
           }
  • Look for the item in the "repositories" section that has "type" set to "composer". If it doesn't exist already, add an item called "exclude" and make it a list. Add the Composer name of the module/theme you want to use, e.g. "drupal/commerce_migrate", so that it looks like this:
           {
               "type": "composer",
               "url": "https://packages.drupal.org/8",
               "exclude": ["drupal/commerce_migrate"]
           },
  • Change the listing for the project in the "require" (or "require-dev") section to point to the branch name identified above, e.g. "drupal/commerce_migrate": "dev-3150733-drupal-9-compatibility",
  • Save the changes to the file.
  • Update the project in composer, e.g. composer update drupal/commerce_migrate.

The last command will now download that project from the issue fork instead of the main codebase.

Note: these should only be used as a short term solution, the goal should always be to collaborate to get changes committed so that these steps aren't needed.

(there might be other ways of doing this using repository priorities, but this method works)

But it Didn't Work?

One problem that can arise is that Composer can't process the project, which it will tell you with this error message:

  [Composer\Repository\InvalidRepositoryException]
  No valid composer.json was found in any branch or tag of [email protected]:issue/commerce_migrate-3150733.git, could not load a package from it.

This simply means that the project doesn't have a "composer.json" file in it, so you can fix that by adding a composer.json file to the repository. Once that is created (make sure to run "composer validate" before saving it!) and uploaded to the issue fork, it'll be possible to download it to a site's codebase again.

Put That Thing Back Where it Came From or So Help Me

Because they don't keep current with upstream changes and can fall out of date quickly, issue forks should be used sparingly in website projects. As it happens, the patch for Commerce Migrate I wrote this blog post around was committed between the time I started the blog post and it was published – "The Drop Is Always Moving", as they say.

When the day arrives and the project has its Drupal 9 fixes committed, there are a few steps to remove the issue hackery and make the website's codebase happy again.

  1. Remove the extra "repositories" item.
  2. Remove the "exclude" line from the "type":"composer" repository; if there aren't any remaining items in the "exclude" section it can be removed entirely.
  3. Change the "require" line (or "require-dev" line) back to point to the appropriate release that includes the Drupal 9 fixes.
  4. Run "composer validate" to make sure the compost.json file is correct.
  5. Run "composer update drupal/PROJECTNAME" to get the new, cleaner version of the project.
  6. Commit the changes.
  7. Celebrate.

That Was a Lot of Words, Do You Have a Picture?

This topic was covered in a recent Contrib Half Hour. Because I forgot to record that meeting (I'm a professional, honest) I repeated the steps the following week, so now there's a recording of me stepping through the process to create an issue fork to make a Drupal 9 fix for a Drupal 8 module work in Composer:

[embedded content]

Feb 11 2021
Feb 11

In our recent webinar, we set out to help higher ed marketing teams rethink their digital focus for the year ahead. 

We tapped a group of experts with years of experience helping some of the best-known colleges and universities deliver engaging digital experiences to discuss key web strategy takeaways. Members of the expert panel included:

  • Muzel Chen - Senior Digital Strategist, Mediacurrent 
  • Diane Kulseth - Senior SEO Consultant, Siteimprove 
  • Steve Persch - Technical Product Marketing Manager, Pantheon

If you missed our webinar or want to watch it again, check out the full recording: 

[embedded content]

The live audience came ready with their most pressing questions on topics from personalization and SEO best practices to harnessing analytics and breaking down the communication barriers between Marketing and Admission departments. Below is a summary of what was discussed on the webinar. 

Personalization 

Is personalization dead?

Diane Kulseth: I've seen some higher education institutions using personalization effectively by auto-populating forms. That can be really helpful to keep things seamless for the experience for the student. At the same time, we're talking to a generation that's getting more and more skeptical of the internet. 

There's a misconception that adopting new technology will automatically save you time. Technology, like personalization, can save you a lot of time but it will also take time to implement correctly.

Steve Persch: Technology buying decisions are often made on the assumption that by buying a tool, you will get to spend less time doing a certain task. I think a similar motivation leads a lot of people to buy personalization. They think getting a more powerful measuring tool will fix their problem, but it actually gives you more to measure and requires more of your time.

Muzel Chen: There’s also the issue of how do we use personalization effectively? Students want to get information right away and personalization can reduce these obstacles in navigation and process.

Personalization can mean many things, but in the context of higher ed, we can personalize content for an audience based on their common demographics and behaviors. But it also depends on your medium: are you trying to personalize in social media? Website? Email? Text message? Audiences have different expectations from each marketing channel, which is predicated by the amount of PII (Personally Identifiable Information) they have disclosed to those channels. 

Depending on the context and level of personalization, they can range from convenient to creepy, and striking that right balance can be tricky. But when it works, visitors experience a higher level of engagement because of the convenience and they feel the institution cares about them.

SEO Best Practices for Subsites and Domains 

When thinking about a redesign, I know websites should have ONE main goal, but how do you handle a few different audiences without creating microsites? For example, prospective vs. current students?

Muzel Chen: Some of these issues are mitigated by dedicating an area in your architecture for those specific audiences. But there are situations where it feels the content is servicing all audiences or only one exclusively. These situations typically result in microsites which can be difficult to manage. 

An easy way to address those needs is to start with an audience-neutral page, have the audience self-identify, and place those audience-specific pages at a deeper level. For example, common pages where this occurs are: campus living, parking permits, and health services. These top-level pages will have content that speaks to all audiences and grows in detail as the visitor goes deeper into your site. The details can then begin to diverge by audience type. 

Do you see any trend of separate sites vs. subsites for academic departments (or other smaller units) within a university or college?

Muzel Chen: Over the last decade, it's been very common for higher ed to have subdomains (separate sites) for each individual department or school. But, these sites grow out of hand and become difficult to manage especially when there's not any established governance for tracking content updates across all of the subdomains. 

More institutions are starting to transition to the subfolder (or subsite) practice. It’s easier to see the big picture of all your sites and manage them all within their content management system. 

How can one build a culture of importance for SEO across a decentralized organization (i.e., schools, departments, and offices, like Admissions, all run their own websites)?

Diane Kulseth: I think the biggest part is tying it back to what it all means. Whether it's donor relations, increased revenue for the university, or admissions, tie it back to their goals. That's first and foremost and all of that helps the website and it helps your students. It helps your donors. It helps your prospective parents of students to be able to better navigate the website. 

SEO is great for SEO's sake and building great traffic, but it's also really helpful for all your other marketing initiatives to make sure that people are able to get where they want to go on a seamless web experience that loads properly and is easy to navigate with strong information architecture. 

Marketing Strategy and Analytics 

What are some of the challenges you've seen higher ed leaders face when implementing marketing technology?

Muzel Chen: Reporting. I often see data collection tools being misconfigured. Or collecting lots of data without really defining its purpose. Everybody wants to get access to analytics data, and once that's provided, they use it once and never touch it again. Suddenly, you have 100 users and nobody is providing insights. Without data, all planning comes down to guesswork.

Steve Persch: You almost need Google Analytics for your Google Analytics to track who's using it.

Which analytics data seems to be the most valuable to higher ed? I realize this is likely very organization or campaign dependent, but anything generally useful that may not be obvious?

Diane Kulseth: First and foremost, you want to have your reports on RFIs or requests for information and your applications, and then connect that to enrolled students within your CRM or admissions platform. 

Beyond that, once you start digging deeper, it's really important to start looking at insights like when people are coming to this page from an advertising campaign, are they actually engaging with the page for a substantial amount of time? Are they going elsewhere? How are they responding to your marketing messages? Can you get even more granular and start looking at the demographics behind them? Are these men, women, what are their age ranges? What other insights can you glean from your different tools? I think all of that can be really helpful, but again, start with your basics: RFIs, enrollments, and applications.

Overcoming Department Silos 

Do you have any tips for how Admissions and Marketing can work together?

Steve Persch: Shifting to an iterative or agile mindset for your website is especially difficult when so much of a university operates on a semester or year-long calendar. There's an expectation that you need the web plan for the next year or 10. Saying we're going to do small experiments and get feedback week by week is challenging to accomplish in the higher ed ecosystem. However, I think that you need to find a way to do it with strong cross-departmental relationships across those silos. 

Muzel Chen: We talked about analytics access as one of the technology challenges, but as far as a people challenge, what I see most often is communication. A lot of departments are still siloed — especially marketing and admissions.

A good starting point here is setting up a meeting cadence where you can share common challenges to solve and opportunities to pursue. For example, an ideal project is to link marketing and admissions data, which tracks the visitor as they leave the main site and enters the application process. Marketing could validate their campaigns by reviewing the application data, whereas admissions could personalize the student experience by using marketing’s data. 

Optimize Your Higher Ed Site 

Explore how RainU CMS can help your school launch on Drupal in 30 days or less with a Pantheon-powered hosting solution. Together with Siteimprove, Mediacurrent’s digital strategists can help you optimize your website for SEO, accessibility, and overall performance. 

Feb 09 2021
Feb 09

[embedded content]

It is not uncommon for links to be styled like buttons when building websites.  Although this is not frowned upon, it is important to understand what HTML element to use depending on the purpose of that element.  For example, a element is frequently used to perform an action such as submit a form, or interact with an element to change its behavior., whereas s element is often used to direct the user to another page, site, or section of a page.  Visually it may not make much difference how links or buttons are styled, but choosing the right element matters from a semantic and even accessibility perspective.  Let’s go over how to dynamically render the right HTML element depending on the element’s purpose using Twig on a Drupal website.

Before we get into the details of the code, let’s understand how the two elements differentiate from each other which will help us qualify the right element to use.  Probably the easiest way that makes the

and different from each other is that a contains a href attribute and the does not.  This alone can help us determine whether we should use a or element on our site.  The href attribute will always be present when using an anchor element.  So let’s use the href attribute to our advantage.
  1. Let's start by defining some key data elements we usually have at our disposal when building a button or anchor element in Twig or React:  url, text, class
  2. It’s possible we won’t always have url or class, but text will most likely be available so we can label the element (i.e. Read more, Submit, etc.)
  3. We know that a will always need a url.  We also know a
will never have a url value</li></ol>

Using the logic above, we could start writing some code.  Let’s start with Twig and then we will repeat the process with JavaScript if you are working on a React or Gatsby project.

{% if url %}

  

    {{ text }}

  

{% else %}

  
    {{ text }}    {% endif %}

JavaScript and/or Gatsby

The logic to follow in any other language will be the same. The syntax may vary but ultimately we are checking for a URL and if so, let’s print a element, otherwise, let’s print a element.  However, in Gatsby there is one more scenario to consider; is the URL internal or going to an external page/site?  One of Gatsby’s powerful core components or features is .  This is used to prefetch pages in a gatsby site which results in incredible performance improvements.  So our logic just got a little more complex because not only do we need to check for whether there is a URL, we also need to determine if the URL is internal or external.  If it is internal, we will use a component, otherwise, we will use a traditional element.  Let’s see how we can make this work.  In an effort to keep this example short and to the point, I am excluding some pieces you normally would see in a real gatsby component.  This would typically be done in a button.js file.

import React from 'react';
import { Link } from 'gatsby';

const Button = ({
  children,
  to,
  href,
  ...props
}) => {

  // If the `to` prop exists, return a link.
  if (to) {
    return (
      
        {children}
      </Link>
    );
  }

  // if the `to` prop does not exist but `href` does, return a  element.
  if (href) {
    return (
      
        {children}
      
    );
  }

  // If the `to` or `href` props do not exist, return a 
element. return ( {children} ); }; export default Button;

If a to prop is identified, we return a Gatsby component. As we can see this is a more complex piece of code but ultimately does the same thing as when we wrote it in Twig.  The difference here is that we are detecting three scenarios to determine which element to return:

  • If href prop is detected instead of to, we return a traditional element with target="blank" and rel="noopener noreferrer", According to Gatsby docs, routing to target="_blank" is the equivalent of an external page and Gatsby cannot be used. Docs here: https://www.gatsbyjs.com/docs/linking-between-pages/#using-a-for-external-links
  • Finally, if neither to nor href are detected, we return a element.

In Closing

Some may not see the need to go to this extreme to simply decide whether we need a button or anchor element.  However, there are many reasons why this is something you should consider as this could impact accessibility, UX, and in the case of Gatsby, even your site performance.

Jan 27 2021
Jan 27

RainU logo

On the heels of our recent Drupal 9 release of Rain CMS, we are excited to officially announce the beta release of our Rain University platform, RainU. RainU CMS is a Drupal-based development platform made just for higher education. Colleges and universities can now launch new sites faster with full, flexible control over content.

The RainU CMS Theme

RainU for Drupal homepage with hero image shows a group of students in graduation caps

New RainU CMS theme homepage

The RainU theme is based on the main Rain base theme but adds additional features that are relevant for university websites. The navigation and content have been staged to help content authors get started quickly. Some of the new features added to RainU are the event and quote carousels, as well as more components for highlighting content.

Building pages

RainU CMS content field for frequently asked questions

Rain CMS admin content edit page

RainU content authoring

Paragraph browser dialog

With Rain University, we give content authors the freedom and flexibility to build robust pages using a library of pre-stocked components (called “paragraphs” in Drupal). The Rain Admin UX offers many improvements over the stock Drupal admin which makes the overall experience more intuitive for editors.

Find out more

Currently, Mediacurrent’s Rain University CMS is available to new and existing clients. Our team of strategists, designers and developers can work with your organization to migrate your website from a legacy CMS onto an enterprise, open source platform.

For more information on the benefits of Rain University CMS and to schedule a free demo, please visit the RainU page or chat with us right now (see bottom right corner of the page). We would be happy to talk more about your project or schedule a demonstration.

Jan 26 2021
Jan 26

As we look ahead to the end of the future academic year and what the future looks like, we see uncertainty clouding what is a typical admissions season for teams in higher education. 

Recently, we asked our partners in higher education to share their digital challenges. We heard that admissions personnel, as well as marketing teams at the college and university level, are feeling the pressure. They need to make sure the expectations of stakeholders are met or exceeded despite the unpredictable path ahead. 

Even though teams may face challenges ahead, one thing is certain: rethinking digital strategy to set your path forward will set your team up for success and your institution apart from others. 

The website is the heart of your digital strategy, and both should be built to adapt. That’s why many higher education institutions choose Drupal for their organization’s CMS. 

Below are five areas to focus your digital strategy, with some of our favorite tips and tools to improve campaigns moving forward.

Reevaluate Your Content Strategy

Universities used to enjoy a steady flow of students enrolling in programs. However, the future is now uncertain because of the COVID-19 pandemic leading many students to forego education or to choose online courses over taking classes in a traditional, physical environment. 

The uncertainty affected not just marketing teams at universities, but students as well. When the McKinsey higher education survey was conducted in April 2020, 37% of responding students were confident that things would return to normal by the end of summer. However, the 2020-2021 school year has thus far reflected much of what the previous school year 

Findings from our own client survey showed that uncertainty in the 2020 recruitment season led to several shifts in strategy to further help the user journey in the decision making process of choosing programs such as the following: 

  • Virtual tours rather than in-person tours
  • Live video conferences rather than in-person sessions
  • Website content to supplement brochures and physical marketing materials

Changes in academia lead to a shift in messaging, so teams need to evaluate if their content strategy is still working or if more needs to be done to cater to today’s student and their new priorities. 

Some ways in which evaluating content strategy can be done include: 

Persona research

 Although you may have a general idea of who your target audience is, more thorough research that includes user surveys can help create a better understanding of who your content should speak to. For instance, you may learn from user surveys that students and parents are uncertain about returning to in-person learning because they want to know more about what is being done to keep people safe in the classroom. With this information in mind, you might develop more content about COVID-19 cleaning protocols to give them peace of mind.

Content audit

Is your content resulting in growth, and does it cater to your users? If you are not getting the most out of it, an audit can help address gaps and find opportunities. 

Dashboard creation

Making sense of data is an important responsibility of a university’s marketing team. User-friendly dashboards can simplify the process of reviewing data and making decisions based on findings. Working with a digital strategy team with experience in higher education to improve your approach can yield results that allow your content to better serve student needs.

Give Your Marketing Team The Tools to Succeed

Giving the university marketing team agency in creating content quickly and efficiently is a top priority of many agencies that work directly with these teams. However, finding a CMS that provides the flexibility they want and a user-friendly editorial experience they need can be a challenge.  

RainU CMS can improve the editorial experience for content editors looking for a solution that allows for easier workflows that match with your existing design standards. With the ability to launch sites in 30 days or less, Rain helps both content editors and developers create flexible websites fast.

If your site is on Drupal, creating a decoupled solution with Gatsby may be just what you need. The business case for decoupled Drupal with Gatsby can help you determine if the cost and benefits are right for your university. Our developers are well adept at providing guidance in setting up GatsbyJS.

Using Drupal with Gatsby is a great way to get an enterprise-quality CMS for free, paired with a great modern development experience and all the benefits of the JAMstack, like performance, scalability, and security.

Gatsbyjs.org

Make Smarter Use of Resources  

Unprecedented changes in higher education likely result in unexpected changes to budgets and priorities. Streamline the routine maintenance of your Drupal site to shift more budget toward new features. Here’s how Mediacurrent’s development solutions like Automated Updates and Multisite+ can help:

With Automated Updates, you can save hours of manual development work. Our automation services initiate pull requests, create JIRA issues, and stage updates within Pantheon’s multidev environment. Your team of project managers and developers can focus on productive work rather than administrative tasks when using Automated Updates for your project. 

Need to create multiple sites? Spin up new instances with Multisite+! With a shared codebase, your sites can go from concept to creation quickly and efficiently, and each has its own database, configuration, files, and base domain or URL to help with organizing your content. 

We have a wide variety of development services to meet your university marketing needs. 

Enhance Web Accessibility 

Universities cater to individuals of all abilities, so it’s important to make sure the digital experience is accessible to all. Using a tool like Siteimprove can help university marketing teams better understand how their site’s accessibility matches up to Web Content Accessibility Guidelines (WCAG) standards. 

SiteImprove dashboard with circular progress charts for QA, accessibility, SEO

SiteImprove's automated reports provide an easy way to measure and document progress toward accessibility goals

Failing to keep on top of website accessibility could lead universities to face warnings from the Department of Education as well as lawsuits. Mitigation measures such as using Siteimprove or working with a skilled accessibility team to audit and remediate your site allows your team to take steps that minimize the possibility of lawsuits as a result of your site’s digital experience. 

Launch New Campaigns Faster 

Colleges and departments within universities often need to launch campaigns quickly, and depending on the technology involved, expediency is integral. Teams must have a workable solution to accomplish the goals of an individual college or department.

Marketing teams can take advantage of RainU CMS to launch to market in 30 days or less. 

RainU CMS for Drupal homepage

Gain more control over your site with RainU CMS such as:  

  • Robust Security - Mitigate attacks from hackers - RainU CMS has several built-in security hardening features to help.
  • Flexible Content Feature-Packed - Build pages with a flexible, easy to use interface in RainU CMS for rapid development.
  • Component-Based Theme - Like with other Drupal sites, RainU CMS has reusable components and a built-in style guide which reduces design time.

Demo RainU CMS 

Ready to take your higher ed site and marketing campaigns to the next level? Explore how RainU CMS can get you there and check out the demo below. 

[embedded content]

Jan 21 2021
Jan 21

Problem: The Power (and Pitfall) of Paragraphs

With great content modeling powers comes great responsibility for Drupal developers. 

While building a website, you may face the challenge of creating multiple paragraphs without much reuse. This can contribute to a poor content architecture that will burden you for the lifetime of your application. This issue can come about when a developer is building out paragraphs and decides to generate multiple paragraphs with similar fields or new fields that perform the same functionality as other fields. 

For example, let’s say a developer is tasked with building a normal Text Paragraph which is just one textarea field, which is simple enough. Now, let’s say a client comes to that developer and ask if the Text Paragraph could have a header field, and a subheader field. Usually, a developer might decide to just create a new paragraph, maybe call it a Card Paragraph, that has a new header field, subheader field, and a new body field. Well, what if you could just reuse the body field from the Text Paragraph? There is a way to do that by using Form Displays and the default Paragraphs reference field widget. Of course, the example above is simple, but there might be better cases which will be explained below.

Solution: Reuse Paragraphs and Form Displays

Mediacurrent’s Rain CMS  is an open source project that comes bundled with ready-to-use content types and paragraphs. One of those is the Card paragraph. The Card paragraph by itself might just have a title, media, body, and layout field. This is pretty useful as its own componentized item that can be reused on other components. Now let’s say you have another paragraph that is called a Breaker, which essentially is almost like a Card Paragraph but might have some variation. This Breaker paragraph might reuse the same title, body, but also has an extra field called right body for any text that might need to be put on the right column.

The way one can keep reusing the Card paragraphs, with other paragraphs that get created in the future is to add more fields onto the Card paragraph itself.

Drupal manage fields tab

As displayed above we have a ton of fields added on to the Card Paragraph. One might say that why are you doing this, wouldn’t all these fields get displayed on the frontend. Technically yes at first, but there is a way to limit what fields get displayed on the Card paragraph itself and then a step on getting the Breaker paragraph to utilize the same fields coming from the Card paragraph.

This method is using what’s called view modes in the Form Display configuration. What you want to do is go into Managed Form Display in the CMS for the Card paragraph that you just created and take a look at what displays are available.

Drupal backend - manage form display

As you can see above we already have some displays created in the Rain distribution we are using. We have the Default, Breaker, Carousel, Column, Card Compound, and Overlay Breaker. These are all Form Display’s which are used for other Paragraph variations. 

custom form display

Creating a new display is easy; you want to go to the bottom under the Default view mode and hit Custom Display Settings, which should drop down the above selection. As displayed in the screenshot there are some that are enabled and disabled. You can create a new one by clicking Managed form modes.

Now that we sidetracked a bit and explained how view modes work and how they are created, let's dive back in and talk about how you can now create this Card variation paragraph which is called the Breaker. Since we have a display already enabled for the Breaker what you want to do is click on the Breaker and see what fields are enabled by default.

Drupal manage form display

Shown above this has the title, body, and the new body right field which is technically still part of the Card Paragraph, but just using a different form display. If you compare this display with the default display you can see that different fields are enabled and disabled, which allows for flexibility for reusability. Now that we see that the fields needed for the Breaker have been created or enabled, let’s go create the Breaker paragraph.

create breaker paragraph

We then add a description and say that this is a breaker that will have content with two columns. If you remember above we have a body field and a body right, this is used to create these two columns.

When creating your Breaker paragraph make sure to add all the fields that are unique to this breaker like Line Break, and Show Two Columns which have specific functionality for the Breaker, but you also want to create a Paragraph reference field called Card which will allow you to reference a Card.

So how do you get it so this Card field shows the fields that you want from the Card Paragraph? Well, that’s why we worked on using the view mode on the Form Display for the Card Paragraph. What you want to do is the following.

Drupal manage form display card

Under the Breaker paragraph go to the Managed Form Display. Then under the Card field, you can use any widget that has the Form Display mode available. This will allow you to use the Form Display mode option in the widget to target the right display mode you want to use from the Card. Select the Breaker display mode.

select breaker display mode

Once this is done, hit save.  Now what you should expect is that whenever you go to create a breaker and you use the card field it should show the fields that are specified on the Card Breaker view mode.

card breaker

Building Paragraphs the Smart Way 

Now whenever you as a developer get tasked with building out a paragraph, make sure to ask yourself: What can I do to reuse fields and displays as much as possible? I hope this guide will help you to make smart decisions for a better content architecture going forward.

Jan 13 2021
Jan 13
If it is the top level menu, we print a
    and we pass Drupal’s attributes in addition to our custom classes.</li>
  • If menu is not top level (submenus), then we simply print a
      with its corresponding class.</li>

Learn more about Macros in Twig Templates.

Looping Through the Menu Tree

Looping through the items array allows us to intersect each item and apply classes or attributes.

  • First, we loop through the items array (for item in items), and for each item, we print a
  • to which we pass an array of CSS classes using attributes.addClass() method.  However we do this only if we have access to Drupal's attributes ({% if attributes %}).  If not, we manually print the same classes on the list item. 
  • For each item and link, we pass a series of things such as:
    • The link title
    • The link url
    • Is the link in the active trail,
    • ... and others.
  • Inside the list item, we check to see if that particular item has other items or submenus({% if item.below %})
  • When submenus exist, we make use of the macro again to repeat the process of printing the menu. This is where the macro saves us from writing duplicate code.
  • For each level of submenus we are increasing the menu_level by 1 and printing it as part of the submenu class. This is handy if we want to target a specific submenu in the tree.
  • Finally, we close all previously open actions/tags (i.e. for loops, if statements, lists, and macro).

RESOURCE: I recently ran into a blog post by Tamas Hajas where he has a great way to address classes and states on a menu. Check it out: Drupal 8 Twig: add custom CSS classes to menus

Looking at the Rendered Menu after Macro Improvements

Now that we have a better understanding on how the macro works, and after making the improvements discussed above, the markup for the menu would look something like this:
Example of menu with good markup.

These styles are as bare as possible. They are simply to make the menu look presentable and could use a lot of improvements. This is what the multi-level menu looks like:

Example of an expanded menu

Create a Twig Template Suggestion for the Main Menu

Our ultimate goal is to update Drupal’s menu system to render using the navigation component. 

Follow these steps to enable Twig Debugging in your theme. Then, you can inspect your site, which will allow you to see the various template suggestions that Drupal uses to render the page; including your navigation menu. The debug information looks like this:

Example of twig debugging code.

Under File Name Suggestions notice two template names: menu.html.twig & menu--main.html.twig. The X next to menu.html.twig indicates Drupal is using this file to render the Main Menu. The second file, menu--main.html.twig, is what Drupal is suggesting we create if we only want to alter the Main navigation and not other menus.  The word "main" in the file name represents the Drupal machine name for that menu.

Under Begin Output notice the path where menu.html.twig can be found, the example above is pointing to Drupal’s stable theme.

To ensure we only affect the main menu and not other menus on our site, we are going to make a copy of Drupal’s menu.html.twig in our theme and then override it. This is recommended rather than modifying Drupal core’s template. Let’s start:

  1. Copy the menu.html.twig template from core/themes/stable/templates/navigation/ into [site_root]/themes/custom//templates/navigation/menu.html.twig (if these folders do not exist yet in your theme go ahead and create them).
  2. Following the golden rule “Never hack core”, we want to make a copy of Drupal’s menu template in our own theme. Replace the core theme’s name with your core base theme if you are not using stable.
  3. Next, In your theme rename the newly copied template to menu--main.html.twig.
    Copying menu.html.twig into our theme will affect other menus. This is why we are renaming the template so it only affects the main menu (menu--main.html.twig). Replace ‘main’ with whatever your menu’s machine name is if you are not using Drupal’s Main Menu. This can be found in Drupal’s Menus page (admin/structure/menus).,>
  4. After clearing Drupal’s cache, inspect the menu again and you should see the X next to menu--main.html.twig which means Drupal is now using our custom twig template suggestion to render the menu.

Create a Multi-level Menu in Drupal

  • Let’s make sure we have a menu we can see in Drupal. Let’s create a multi-level menu using the Main Navigation menu (Structure | Menus | Main Navigation).
  • Add as many links as you wish. Be sure to add nested items so we end up with a multi-level menu.
  • In addition, ensure each of the submenu’s parent links are set to “show expanded”. You will see the option on the Add/Edit Link page.
  • Finally, go to Structure | Block Layout and click Configure next to Main Navigation
    • Change Number of levels to display to Unlimited. This will ensure dropdowns are rendered and display in your navigation.

Integrate the Main Menu component with Drupal’s Menu

The last part of the process is to integrate all the work we’ve done with Drupal, so our Navigation is rendered with the markup, styles, and behavior we implemented when we built the component.  

  1. In your editor, open [site_root]/themes/custom//templates/navigation/menu--main.html.twig
  2. Delete all the content in the twig template except for the comments, and then paste the code below into it
{% include '@your-namespace-here/navigation/navigation.twig' %}
  1. Clear Drupal’s cache
  2. Reload Drupal’s page

Since we moved the macro to the component’s location, all we need to do in the menu--main.html.twig template is to call our Navigation component by using a Twig include statement. 

If we did our job right, Drupal’s menu should now look and behave the same way as our component. In addition, if you inspect the Drupal page, the menu should reflect the same markup as the main-menu component.

Drupal Libraries

As a best practice, we should create a drupal library to attach any styles and javascript to our component. See this article for adding CSS and JS to a page or component.

If your navigation is displaying unstyled that's because a Drupal library does not exist.  Create one as follows:

navigation:
  css:
    component:
      dist/css/navigation.css: {}

Your compiled css path may be different.

This library has already been attached above inside navigation.twig

By doing this any styles we wrote for the component will apply to the main navigation when it’s rendered in Drupal. Drupal libraries have no effect in Pattern Lab.

After completing the steps above, clear your Drupal’s cache and reload your Drupal site. You should see your Drupal menu being rendered with all the styles and markup we wrote throughout this post,

What about Accessibility?

You should always ensure your menus and navigations are accessible. It is the right thing to do. However, don't yell at me for not following my own advice. In an effort to keeping this tutorial simple, I opted to omit anything related to accessibility. Perhaps part two can focus on that ;-)

Video Tutorials

[embedded content]

[embedded content]

In Closing

I’d like to admit that I went about the long way to get the main menu working on both, Pattern Lab and Drupal. There are other ways to accomplish this by using contrib modules such as Simplify Menu (full disclosure, I am a co-maintainer of the module), and perhaps Twig Tweak among several others, however, the approach I took here gives you the most control and that can make all the difference if you are dealing with a pretty advanced or complicated menu.

Jan 07 2021
Jan 07

student in cap and gown attending a virtual college graduation ceremony

Customer Stories on The Pivot to Digital 

In a year like no other, Mediacurrent’s higher education partners were challenged to shift strategies. We recently welcomed a customer panel of seven marketing strategists to share their stories at our company retreat. With voices ranging from two Ivy League universities to an online college, the panel reflected on how the pivot to virtual tours was an ambitious undertaking. So too was the need to rethink student communications and reassess the metrics that matter most.

The following is a transcript of a virtual roundtable by Michael Silverman of Mediacurrent with a panel of seven digital leaders in higher education. It was conducted in December 2020 at the Mediacurrent company retreat. Some of the questions have been edited for brevity and clarity.

How has your recruitment strategy changed with COVID-19? What works now for student enrollment marketing?

For this digital director at a private catholic university, COVID-19 drove his team to imagine creative alternatives for events and approach their marketing funnel in a new way: 

There's been the need to be more creative to reach our target audience. We had to find different ways to engage prospective students. One thing we did was to host a socially distanced drive-in event where prospective students came to the college and watched all about our college. We’ve also moved to more virtual events (I can tell you because I entered over 300 events on our Drupal site!) for new and returning students. We look for different ways to connect with them, to make sure that they stay engaged with the university.

We had a habit of focusing on top of the funnel brand awareness and it was harder to get prospects into the funnel. So we had to make a more concerted effort to reach the students that were already in the funnel, getting them to apply and then put their deposit down. We were working with a smaller pipeline and we had to be more efficient in speaking to it. 

According to this director-level digital strategist for a major state university in the northeast, highlighting the value of a local education was a successful tactic:

When we were being able to get people onto the campus, 70% of people who came to visit ended up applying. Because we were missing out on that, moving to virtual visits, we had to change our messaging quite a bit. 

We found that people were more likely to want to stay at home or stay local. Because our biggest audiences are in-state, and we have 19 campuses across the state, that's been a big point for our message. We really focus on the campus and that local education rather than that “big brand” messaging. 

On a campus of 2,000 students in the Great Plains region, this marketing expert saw how small group tours are more personalized than before:

After shutting our campus down for the spring and summer, we were able to get back to a model that allows for individual family tours. That personal touch has helped us a lot. In October, we hosted more individual tours than any group tour of previous years. Our admissions counselors really take pride in fostering relationships with prospective students through personal interactions like texting, calling, or writing letters.

Aside from campus visits, what were some other leading indicators for applications? 

Prospective students had a high need for information about how the school was reacting to the pandemic. This state university (the same referenced above) saw the opportunity for retargeting campaigns:  

We’ve started to focus more on people coming to the admissions website and just reading through some of our COVID information. Our focus groups found that given the uncertainty, people wanted us to be able to proactively communicate what was going on and what we were planning to do with student enrollment moving forward. So we drove a lot of people to that information. If we saw that people were reading that and clicking over to one of our conversion actions, we would set up retargeting campaigns towards them and get them further down. This was a new strategy because we had never really used any of our PR materials within our enrollment advertising. 

We had never really done retargeting before for trying to get people to accept their offer of admission. We've started to build up some scores in our Slate CRM for the probability of enrollment. We've been able to figure out the people that are most likely to enroll and are able to retarget them at the beginning of the funnel with lookalike audiences and Facebook. Then we’re also retargeting accepted students who are still in the funnel. 

Where do you see the biggest change in measurable goals for your organization due to the changes brought on by COVID-19?

This CMO of an online college for holistic health was able to boost enrollment even as the competition for distance education was skyrocketing:  

We didn't see an enrollment drop-off at all. In fact, we've seen an increase in enrollment. Back in February, I pulled all of our pay-per-click marketing. I had a feeling that if this hit, every single on-campus entity would need to go online and we wouldn’t be able to compete. That strategy saved us. 

We stopped focusing on trying to attract people to enroll. We knew that everyone else was trying to attract them as a consumer. We started doing educational wellness webinars to help people to grow their skills, inviting them to engage with us on an entirely different platform. 

Has your institution been forced to cut costs or reallocate resources? If so, how has that affected your group?

This web strategist for a small university in the midwest weighed in that she faces uncertainties in the upcoming admissions cycle. Looking ahead, her department budget will be geared toward third-party community platforms:

We’re a small school and we were able to pivot pretty well...until now. Our students come because they get to co-op the entire time they're here as a part of the degree requirement. So we're now starting to see it going into this admissions cycle, but we're being very creative because obviously, you're not having your large scale visit events on campus.

For my role, which is running the main site, there probably will be some dollars pulled from me in order to focus on some third-party platforms that are focused on building a community with potential students. Not necessarily budget cuts, but I’ve seen the shifting of money to focus on some of these ongoing virtual things that will continue. 

Without the in-house IT resources to launch a new website, this project director at an Ivy League school relied on Mediacurrent for support:

We hired Mediacurrent prior to the onset of the pandemic to create an online platform that would be useful in the event of a future financial crisis. Two months later, we found ourselves potentially in the midst of that financial crisis.

Our IT department needed to focus on making it so that our students could all attend class online from all over the world. All of a sudden I was in the middle of a Drupal website project, and frankly, I'd never heard of Drupal before this. 

What are the biggest pain points from day to day related to the technology and management of your website?

The crisis forced us to go digital in many ways. It's incredibly important for our websites to stay accessible. Mediacurrent has done a good job of understanding what matters to our stakeholders and helping us navigate accessibility. That’s a huge priority.

This is where working at a school that has a lot of name recognition can bite you. We may not have had to do as much outreach or aggressive marketing as some other schools. So we were extremely behind the curve when we changed to virtual info sessions. We were able to get our information sessions up and running in a way that's decentralized so I didn't have to manage all of that. We could train other staff to get them up and running and host them on their own, which we do through Slate. 

Having virtual information sessions and other digital channels is something that definitely will continue going forward because it allows us to get our message to a broader audience. We're able to share what the school community is like, and what our financial aid can offer.

Marketers from a state school and a small private school both shared how Drupal empowered them to quickly adapt the digital experience: 

On our current site, the back end user experience is really difficult. We have no flexibility to change things when our strategy changes. It's a mess. So what we're building now in Drupal 8, we are very, very excited about. We've been working very closely with the team at Mediacurrent to improve the user experience for our authors and also being able to adapt to changes quickly. 

This year is nothing but pivot. I’m constantly making changes to the website. On our previous Drupal 7 site, I had a hard time adding blocks of content. Now, with Drupal 8 and Layout Builder, I’ve got everything that I need in my tool kit. I can go in on the pages to move around what I need to move around. I’m able to change the content up on a dime. 

What has been your experience working with Mediacurrent? 

All of our panelists agreed that finding the resources to launch new digital campaigns was a steep challenge. This Ivy League marketer summed it up best:

Staff in higher ed are stretched very, very thin. And at this moment, I'm finding that it's harder for us to be forward-looking. The availability and transparency with the Mediacurrent team have been wonderful. We’ve had many Mediacurrent developers working on our team over the past couple of years and as well as user experience and project managers. They’ve not only helped to find ways to improve our site and make the experience better for prospective students and current students but also to keep up with the necessary bugs and Drupal security features. 

The panelists also thanked the Mediacurrent team for being a reliable partner in uncertain times:

It was an enormous blessing not to worry about the development of our platform given everything else that was going for our school in response to the pandemic. I had complete trust in the Mediacurrent team and you didn't let us down.

I’ve needed things more quickly to adapt our strategy this year. As a digital agency partner, Mediacurrent did that. It’s made the difference between sinking and swimming.

What areas of your digital strategy do you see remaining post-pandemic?

An Ivy League project director reflected on how lessons learned from virtual learning may carry over to the classroom:

The particular program that I'm involved in is a specialized master's program targeted specifically overseas. In addition to all of the other travel-related concerns associated with the pandemic, there are also visa issues, et cetera. By necessity, we've been in this mode of, rather than bringing students to campus to sort of convince them to ultimately enroll, needing to do that in a virtual way. As with the classroom experience, we're hoping ultimately to get back to a non-virtual experience. But there are pieces of the virtual experience that we would think about trying to preserve, even in a nonvirtual world. 

We're anxious to get back into the classroom but there are pieces of the online experience that we've enjoyed and have started to think about how we can bring some of those elements into a physical classroom. Something as simple as the ability to interact with students via the chat function in Zoom. How do you think about taking that functionality and applying it in a physical classroom? And I don't know that we have any great answers yet. But it's very much something that we're thinking about.

This private catholic college sees a data-driven website in its future: 

Partly because of COVID, my marketing department was moved into admissions. It's been great because we've had access to more data, so it's allowed us to be more targeted and granular in our advertising. Now I know down to zip codes where my most likely students are to come from. 

So it's been a real benefit in a time where we've had to be more efficient with what we're doing, what we're spending, what we're advertising. And it's kind of also the direction for where I want to go with the website. And that's making sure that all of my analytics, all of my CRM pieces, everything is hooked into Drupal and doing what it needs to do so that we can be efficient even after COVID.

Now What? Rethink Your Digital Focus 

Whether the goal is to boost enrollment, improve student retention, inspire, educate, or engage learners, your website plays a critical role. See how other institutions adapting their digital experience in our upcoming webinar. Join experts from Mediacurrent, Siteimprove, and Pantheon who have helped some of the best-known colleges and universities deliver engaging digital experiences. We hope to see you there! 

higher ed webinar banner

Save a spot for the webinar: Reimagining Your Higher Ed Web Strategy

Dec 28 2020
Dec 28

If you are deciding between a standard Drupal architecture vs. a decoupled one with a GatsbyJS front end (which I’ll call “Gatsby” from here on out), certainly the latter approach offers some compelling advantages. Decoupling Drupal may be easier than you think. A Gatsby front end offers a more flexible and compelling user experience across multiple channels, as well as excellent performance, security, and scalability. 

However, in developing an independent front end and back end, one must factor in the additional costs and financial benefits of doing so vs a traditional standalone approach. As described in our introductory blog post, Building a Business Case, a business case exercise can clarify costs and benefits, both in terms of initial cost, ongoing costs, and revenues of each. 

In this blog post we’ll perform this exercise for standalone vs. decoupled Drupal with Gatsby, performing the following steps: 

  1. Determine the costs of each option
  2. Determine the benefits for each option
  3. Recommend an option based on cost and benefits

Determine the Costs of Each Option

Two different types of costs need to be considered when evaluating options, the cost of the initial implementation, and the ongoing and operating costs once the implementation is complete. The following two tables approximate these costs. Note: these costs are highly theoretical approximations, only to be used as an illustration. Actual costs can only be calculated once detailed requirements are considered. 

Implementation Costs

The following table summarizes theoretical implementation costs for each of the two options. These entail the licensing and build estimates for each option. This illustration (again, theoretical numbers) assumes a simple implementation with little to no customization. 

Cost

Standalone Drupal

Decoupled Drupal with Gatsby

Initial License

$0

$0

Build

$100K

$180K

Hosting (average)

$30K

$45K

Total

$130K

$240K

A few things stand out in this comparison:

  • Freedom from Licensing Fees: Of course, Drupal has no licensing fee, but if you use an open source front end technology like Gatsby, the licensing fee will be free for that as well.
  • Time and Effort Up Front: The initial effort for the decoupled build is greater than that for the standalone Drupal build. This is because front end technologies like Gatsby are newer, and in our experience, there are bumps in the road when working with them in an initial build.
  • The Stability of Drupal 8 and Drupal 9: Drupal 8 is stable and mature, having been release level since 2016, and Drupal 9 is architecturally similar.  With a standalone solution, there are fewer bumps in the road. 
  • Hosting: Hosting costs are greater with a decoupled solution as well. The cost of hosting services vary greatly and the figures we’re stating here are an illustration. Your actual hosting costs will certainly differ. That said, you will be paying for two hosting services with a decoupled solution, one to host the back end and another to host the front end, whereas a standalone solution requires just one.

Ongoing/Operating Costs

After implementation, each option incurs recurring costs. This is a critical consideration in evaluating options that often gets overlooked, and we recommend you always factor in these costs in your decision. For our example, the following table summarizes those costs (again, they are theoretical):

Cost

Standalone Drupal

Decoupled Drupal with Gatsby

Ongoing License

$0

$0

Maintenance and Support

$40K

$20K

Hosting

$30K

$15K

Total

$70K

$80K

As with the initial cost, the ongoing costs of the decoupled option are higher, albeit by less. In our example, they’re almost equal. While hosting costs are again higher for the decoupled option, maintenance and support costs are less. Although there are initial bumps in the road for a decoupled solution, our experience has also taught us that once those obstacles are overcome, it is a lower effort to maintain the solution because Gatsby, and the React framework it’s built upon, are simpler than that of Drupal’s front end engine. It is easier to learn, and developers skilled in it are easier to find. 

Determine the Benefits of Each Option

For investment in any of these options, a benefit is expected, particularly in expenses saved or new revenue earned. Focusing on annual revenue, the following table summarizes the theoretical benefits of each option based on an assumption that the standalone Drupal solution would generate $1000 a day in revenue, or $365K per year:

Standalone Drupal

Decoupled Drupal With Gatsby

Annual revenue

$365K

$416K

In this example, and in many real-world circumstances, a decoupled option slightly improves a site’s revenue, all other things being equal. This is because, in addition to having a more powerful and flexible user interface, a decoupled solution is more performant for the end-user. Further, a Gatsby front end typically runs as a static site on a CDN, with little to no database fetching occurring during a page load. According to sources like DomainRacer and MachMetrics, companies like Myntra, Amazon, Yahoo, Flipkart, and Mozilla experienced a boost in business by increasing the page load speed of the website with less than 2 seconds. Estimated revenue decreases conversions by 7% with a one-second delay, and a whopping 17% with a five-second delay. Further, page load time affects SEO rankings in Google, and slower websites have higher bounce rates. All of this impacts an organization’s reputation and customer loyalty.

Recommend an Option 

When we combine costs with benefits as described above, we are left with the following comparison: 

standalone vs Decoupled Drupal

A scenario for Standalone Drupal vs. Decoupled Drupal With Gatsby

In year 1, for example, the net amount earned by the standalone option is $365K - $130K, or $235K. In year 2, the cost is reduced to $70K, bringing the net amount to $295K. The above graph plots net revenue for the standalone option, in blue, and the decoupled with Gatsby option, in tan, over five years.

So, in this example scenario, we can draw the following conclusions:

  • If your organization is prioritizing short term results, the standalone option is more attractive due to the stability and maturity of the Drupal platform. There are fewer early bumps in the road. 
  • If your organization is willing to make a greater up-front investment for greater long-term benefit, consider the decoupled option with Gatsby by virtue of its low long-term maintenance costs and revenue-boosting performance improvements. 

As in our previous blog post on building your CMS business case, our example scenario is overly simplistic. In reality, detailed requirements can radically alter both the costs and benefits of any option one considers. We at Mediacurrent have performed this type of analysis for some of our clients to help them with their technology investment decisions and can do the same for you. Please contact us to learn more!

Dec 22 2020
Dec 22

Have you ever decided on investing in a product or service, but require approval from executive sponsors before proceeding with your purchase? Or do you like a product or service, but are hesitant to make the investment in it because it’s costly?

If either of these scenarios describes the situation you’re in, a business case is an excellent thinking tool that can help you with your decision. A business case articulates the rationale for investing in a product or service in terms of numbers. It is often presented in a formal document, but may also be presented through more informal methods like a spreadsheet or even a single slide in a slide presentation. It further provides a way to make your case to nontechnical decision-makers without needing to provide the specific intricacies about the method or approach to your desired product or service’s implementation. 

To build a business case, perform the following steps: 

  1. Define the options to evaluate
  2. Determine the costs of each option
  3. Determine the benefits for each option
  4. Recommend an option based on cost and benefits

Let’s look at each of these steps more closely.

Defining Your Options

When evaluating a new product or service, you instantly are faced with two options: purchase the new product or service, or stay with what you have. In many cases, decision-makers start with a bias toward the status quo because there is no cost in transitioning to new technology and the business process that goes along with it. Further, if a new product or service is being considered, its competing options should be considered as well, for example, if you’re considering Drupal as a web content management platform, consider WordPress too.

Let’s illustrate with an example. Say you have a proprietary, licensed legacy content management system (CMS) that is poorly performing and difficult to maintain. You and your company are no longer happy with it and want to make a change. Your budget is limited, so an open-source solution is more attractive because it carries no licensing fees. Drupal is certainly an attractive option, but as just stated, add WordPress as an option. This brings our options to the following:

  • Drupal
  • WordPress
  • Status quo CMS

In a real-world scenario, it’s good practice to consider more options than this, including evaluating proprietary options like Sitecore and Adobe Experience Manager. For the sake of simplicity, however, let’s limit our example to the ones we’ve listed. 

Determine the Costs of Each Option

Two different types of costs need to be considered when evaluating options, the cost of the initial implementation, and the ongoing and operating costs once the implementation is complete. The following two tables approximate these costs. Note: these costs are approximations only to be used as an illustration. Actual costs can only be calculated once detailed requirements are considered. 

Implementation Costs

The following table summarizes theoretical implementation costs for each of the three options. These entail the licensing and build estimates for each option. This illustration assumes a simple implementation with little to no customization. Please note that these numbers are for illustrative purposes only. Real-world figures, driven by project requirements, will certainly differ.

Cost

Drupal

WordPress

Status Quo CMS

Initial License

$0

$0

$0 (already paid)

Build

$100,000

$50,000

$0

Total

$100,000

$50,000

$0

It comes as no surprise that the implementation cost of the status quo CMS is $0, because, after all, it has already been bought and configured. The licensing costs of all three options are $0 because Drupal and WordPress are open source offerings, and the license fee of the status quo CMS has already been paid. Had Adobe Experience Manager or Sitecore been considered, their license costs would be non-zero. In our example, we budget more for the Drupal build than that of WordPress because in our experience, with Drupal’s greater power and flexibility comes greater complexity, and that typically translates to greater investment in development hours. 

Ongoing/Operating Costs

After implementation, each option incurs recurring costs. This is a critical consideration in evaluating options that often gets overlooked, and we recommend you always factor in these costs in your decision. For our example, the following table summarizes those costs. To reiterate, these numbers are for illustrative purposes only. 

Cost/year

Drupal

WordPress

Status Quo CMS

Maintenance and Support

$20,000

$10,000

$50,000

Ongoing License

$0

$0

$10,000

Total

$20,000

$10,000

$60,000

Factoring ongoing costs makes it immediately apparent that the status quo CMS is costlier in the long term, both in maintenance hours spent and in annual licensing. As with their initial implementation costs, Drupal’s ongoing costs are greater than those of WordPress because, again, of Drupal’s greater complexity.

Determine the Benefits of Each Option

For investment in any of these options, a benefit is expected, particularly in expenses saved or new revenue earned. Focusing on annual revenue (again, just an illustration), the following table summarizes the benefits of each option. 

Benefit/year

Drupal

WordPress

Status Quo CMS

Annual revenue

$200,000

$150,000

$100,000

Finally, we see where the investment in Drupal’s complexity pays off; its greater functionality typically means a greater ability to meet ever-evolving needs. We translate this in our example to a greater annual revenue than that of WordPress, and both CMSs, being more functional than the status quo CMS, are capable of generating more revenue. 

Recommend an Option 

When we combine costs with benefits as described above, we are left with the following comparison:

Cost/benefit comparison chart for Drupal vs WordPress

The above graph makes the following assumptions:

  • In Year 1, the Drupal and WordPress options earn no revenue because they’re being built
  • Likewise the status quo CMS is earning revenue in Year 1 because it has already been built

So, in this example scenario, we can draw the following conclusions:

  • If your organization is prioritizing short term results, staying with the status quo CMS is the best option.
  • If your organization is willing to make a moderate up-front investment for moderate long-term benefit, WordPress is the best choice.
  • If your organization is willing to make a greater up-front investment for greater long-term benefit, then Drupal is the way to go.

Admittedly, our example scenario is overly simplistic. In reality, detailed requirements can radically alter both the costs and benefits of any option one considers. We at Mediacurrent have performed this type of analysis for some of our clients to help them with their technology investment decisions and can do the same for you. Please contact us to learn more!

Dec 18 2020
Dec 18

Rain logo updated

The Mediacurrent team is proud to introduce the latest version of our open source Rain CMS, now for Drupal 9. The latest version ships (currently in beta) with a brand new theme and admin experience. Make your move to Drupal 9 with speed and confidence. 

The New 'Nimbus' Theme

Homepage design for Mediacurrent's Rain CMS for Drupal 9 Nimbus theme

New Rain CMS theme homepage

The new base theme comes with a full Pattern Lab style guide to make development easier using a component-based theming approach. The new Rain CMS theme also adds color module support for in-browser color configuration. We wanted a great out-of-box experience for content authors and administrators so we pre-load the site with sample content to make it simple to get started.

Rain Admin 2.0

Rain CMS for Drupal authoring experience with jump navigation to manage page components

Rain CMS admin content edit page

With the latest version of Rain Admin, the content editing experience is more intuitive to use. A jump-navigation on the right-hand side helps authors move between different sections of the page. The UX for Paragraphs has also been improved to make it visually easier to manage components on the page.

Let’s Get Started

For developers, you can download and install Rain CMS 9 using our Drupal project template: https://bitbucket.org/mediacurrent/drupal-project/src/9.x/. Setup and installation remain the same as our previous version, with detailed instructions provided in the project README file.

For more information on the benefits of Rain CMS D9 and to schedule a free demo, please visit our contact page or chat with us right now (see bottom right corner of the page). We would be happy to talk more about your project or schedule a demonstration.

Nov 19 2020
Nov 19

Is Drupal’s open source platform secure?

When deciding on the best CMS to meet your organization’s digital vision, security is often one of the top concerns. 

Here’s the reality. ALL software (closed source, open source, or custom-developed) has the potential for security vulnerabilities. Web security is a fast and ever-changing world. 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 Drupal a proven, secure CMS but that it's also in an active state of safeguarding against attacks. 

With proper planning, maintenance, and updating, open source software, like Drupal, can meet and even exceed the security standards of closed source. 

- Mediacurrent’s Mark Shropshire, Senior Director of Development, quoted in an excerpt from Setting the Record Straight on Drupal Myths: Acquia eBook 

Security and The Drupal Community

Open source software, like Drupal, has the bonus of having thousands of experts work on a particular problem. With entire teams and methodology devoted to ensuring its steadfast reputation as a secure CMS, it's comforting to know modules and code procured from the official Drupal site are as secure as possible.

Using Drupal means you never have to face these risks alone, let alone attempt to correct the problem by yourself. There's power in numbers when it comes to both discovering and fixing potential software flaws, and the Drupal community has those numbers.

Dedicated Security Team

The Drupal project has an approximately 32-person security team with a track record of professionally handling security advisories. 

Community Code Review

One of the largest developer communities in the world, Drupal.org clocked 100,000 contributors and 1.3 million users at the time of Drupal 9’s release. Having many eyes on the source code ensures more issues are discovered and resolved. 

Rapid Response Time

Defined processes around reporting and resolving security issues accelerate the response time to fix vulnerabilities and release patches. 

Core Security

Core API tools and techniques address common security risks. Community projects such as the Guardr distribution help educate the community on best practices around Drupal security.

Guardr for Drupal logo

The Guardr distribution was created to enhance a Drupal application's security and availability to meet enterprise security requirements.

Proven High Standards 

Drupal-based organizations around the world — including enterprise-level brands, major universities, government, and large non-profits — put Drupal’s high security standards to the test every day.

Drupal Security Throughout the Website Process

The Drupal community has built-in security measures to combat threats — reassuring for sure. To proactively protect your site, the concept of security needs to be at top of mind when campaigns are being launched, systems/applications are being integrated, or when software is deployed or updated. 

Security-First 

A security-first approach means going beyond compliance to better assess risk. There are two paths to achieve this approach:

1) Culture: Adopting a security mindset culture for your organization. 

2) Automation: Taking on a continuous development plan that’s rooted in process automation.

In other words, start planning for security early and often throughout the website development process. 

phases of a web project: discovery, design, development, quality assurance, deployment, support

Don’t wait until the project is about to launch to think about security! Explore our Guide to Open Source Security eBook for tips and processes to consider when putting together a security-first maintenance plan for your website and marketing tech stack.

Developer Best Practices 

Here are three ways to safeguard your Drupal site: 

1. Choose the Right Modules

If you can dream up a feature for your site, chances are it can be found in the tens of thousands of community-contributed modules available for Drupal. With so many different options to pick from, how do you choose the most secure modules possible? Some steps to take are checking for how many sites are using the module, reviewing the issue queues, and avoiding deprecated or unsupported modules. 

Find more criteria for module decision-making in our guide to Drupal module evaluation

2. Use Drupal APIs

Look to Drupal APIs documentation to secure your contrib or custom code on a project. Drupal APIs have been nurtured by the community and have built-in protections for database security. If you do write new code, whether it’s a small amount or a completely new module, the “Writing Secure Code for Drupal” guide is a must-read reference. 

3. Monitor Drupal Security Advisories 

The Drupal security team posts weekly security advisories to Drupal.org.

To keep up with security releases, you can sign to receive email notifications through your drupal.org profile options, follow the RSS feed in your news reader (core, contrib, public service announcements), follow @drupalsecurity on Twitter, or join the Drupal Slack #security-questions

Sleep Better With a Secure Drupal Site 

For more best practices, check out the Mediacurrent presentation Sleep Better with a Secure Drupal Site: 

[embedded content]

Are you ready to build a strong foundation for Drupal security but unsure where to start? There's a lot to consider in your security plan but it doesn't have to keep you up at night. Contact the Mediacurrent Security team for support. 

Nov 11 2020
Nov 11

 workflow automation diagram with gears and icons with connection line network in background

If you know us at Mediacurrent, you know we create amazing digital experiences with Drupal. Did you know we also support WordPress websites?

Since 2007, Mediacurrent has been the open source expansion partner for enterprises and global brands. As certified experts, we have a reputation for providing best-in-class digital solutions and growing long-term, strategic partnerships for clients like Weather.com, MagMutual, and Emory University

With thousands of implementations and thought leadership resources completed, we have been continuously looking for ways to add more value to our customers. We've seen a rising need in our Drupal community through hours of partnerships, and that need is more WordPress support. 

WordPress in the enterprise has risen 16%, driven largely by the rise of multiple CMS use.

- Source: The Rise of Multi-CMS in the Enterprise

Why the Expansion?

For over a decade, we have been helping customers migrate from WordPress to Drupal, and we've proven ourselves a trustworthy partner in the migration process. As we've grown, we’ve expanded our Drupal expertise into deep open source strategies—partnering with clients on a long-term basis to solve their technology challenges.

Many enterprise organizations that have standardized on Drupal will still have some non-Drupal sites in their ecosystem. That's where Mediacurrent comes in as a single-source digital partner. 

What We've Done So Far

Currently, Mediacurrent is assisting large-scale enterprises with their WordPress sites. What started as Drupal legacy clients have turned into an opportunity to better serve our customers. Our open source software clients came to us with similar pain points, and thanks to our long-term partnership, we were able to provide crucial benefits that provided a valuable impact on their return of investment, including but not limited to:

  • Engaging UX - Our recent WordPress customers faced the challenge of creating an engaging user experience. Mediacurrent planned for a full redesign of the website's look and feel, providing branding, design, and value proposition workshops and including considerations for persona needs and critical business objectives.
  • Data-driven Strategy - These organizations needed to maximize the return on their digital investment. Mediacurrent is continuing to incorporate best practices for content, page layout, navigation, lead generation, and search engine optimization.
  • Open Source Training - Designs were implemented using the Elementor page builder plugin for WordPress. Mediacurrent’s training team provided specialized instruction on Elementor page design to create page layouts and components. 
  • Post-Launch Support - Monthly support agreements help to optimize for performance and security, providing immediate value to our legacy customers. Security updates to WordPress and plugins can (and do) come at any moment. You must have a dedicated support team closely monitoring and upgrading the code regularly.

Where We're Going

Moving forward, we will expand our support for open source clients who maintain Drupal and WordPress websites within their organizations. If 2020 has taught us anything, it’s that Mediacurrent needs to pivot with our customers' needs and continue to provide the best solutions possible.

As your digital partner, Mediacurrent will evaluate your web properties by assessing several core functionalities including;

  • Security - Making sure your WordPress site stays updated and secure.
  • Responsive Design and Development - Mobile-first designs backed by data and user research.
  • Search Engine Optimization - We consider three factors when it comes to perfecting your on-page optimization: Page load times, Schema.org implementation, and CDN.
  • Content Authoring Experience - A seamless publishing workflow is the key to empower content creators. Tools like Elementor let teams create and design new page layouts on the fly using a drag and drop interface. We've found this very similar to Drupal's Layout Builder, but more advanced and easier to use. 

We see organizations growing, and the need to evolve our services to support others who have more than one CMS to manage. 

49% of enterprises are planning to expand to additional CMSs in the future.

- Source: The Rise of Multi-CMS in the Enterprise

How We Can Help 

Desktop computer background in office and handshake hologram drawing

Mediacurrent is excited to continue to expand our unique value proposition to organizations that aren’t standardized on a single platform and require peace of mind in terms of quality, security, and consistency. We have a reputation as a valued partner that is driven by growth strategy, risk mitigation, solving complex business problems, and producing real, bottom-line value with our solutions.

If you’re already running on Drupal and need help managing additional WordPress sites, or just have a lot of questions about migration, security, or future support, please reach out to the Mediacurrent team. We are available to discuss your websites' future, how we can help you efficiently manage your existing platforms, and provide a strategic roadmap that will keep your multi-CMS organization on the path to success  

Nov 10 2020
Nov 10

Open Source for Everyone

Open source runs the digital world. As a top 10 contributor to Drupal—the software used by 1 out of 30 sites in the world—Mediacurrent feels a deep sense of responsibility to be the change we wish to see. 

From “IDEA” to Reality 

Building a culture that values open dialogue and accountability around issues of diversity and inclusion has always been our goal. This year, we took steps to define our core values and unite our voices for change by launching an employee-led diversity council. Our Inclusion, Diversity, Equity, & Awareness (IDEA) team drives an important mission. The group strives to lift up marginalized voices in tech and address difficult, ongoing challenges including societal racism, racial bias, transphobia, and homophobia. 

logo for Mediacurrent Inclusion, Diversity, Equity, & Awareness team

Opening Up About Privilege 

The IDEA committee brings many voices together. As Mediacurrent’s Director of Project Management, I’m proud to be one of those voices.

We often hear that the benefit of open source communities is that anyone can contribute. Yet, this paints a rosy picture of equality that’s far from the current reality in our Drupal community. (Drupal creator Dries Buytaert presents the issue well in this article: The Privilege of Free Time in Open Source.) My personal mission is to lead a dialogue on understanding how individual privilege can open doors for an open source community that's as wonderfully diverse as Drupal’s end users. 

What can those with privilege do to effect change? I grappled with this question in a DrupalCon Seattle session Putting Our Privilege to Work for Inclusivity in Open Source, below. It represents the types of conversations happening within our IDEA committee:

  • What does privilege look like?
  • Mindfulness and recognizing our own privilege
  • How to address privilege in others...gently
  • How to bring about real change

[embedded content]

The Path Forward

The IDEA team is hard at work on a few upcoming initiatives, including:

  • Sharing new data about our employee diversity 
  • Making socially conscious choices together about the charities we support 
  • Updating job postings to include our values
  • Technical documentation audit for inclusive language

We look forward to introducing more members of the Mediacurrent IDEA team and sharing some of the many in-progress initiatives on our path forward.

Oct 27 2020
Oct 27

For many years styling websites with CSS has been pretty standard. A CSS stylesheet exists somewhere in your project which provides styles for your pages or components. Even with the introduction of CSS preprocessors like Sass, Less, Stylus, and PostCSS to mention a few, the ultimate result is for stylesheets to serve styles to your pages and website.  

With the introduction of JavaScript frameworks such as React, NextJS, and others, the approaches for writing and serving CSS styles have become more complex and at times controversial. Things like CSS-in-JS (Reactjs.org defines this as “a pattern where CSS is composed using JavaScript instead of defined in external files"), can make some people question whether we are getting ourselves in trouble and whether we will regret going in this direction. It wouldn’t be the first time we find ourselves undoing practices we have followed for years because we realized there was a better way.

In GatsbyJS, a library of React, we can use different methods for styling a website.  Some of these approaches include:

  • Plain CSS
  • Inline styles
  • Styled Components
  • CSS Modules
  • Others

In most cases, people who lack the in-depth knowledge of CSS will opt for the easier way possible to style a website.  This is not always the best way to go about it, but unfortunately, it is the reality.  As someone who has worked with CSS for many years, I could technically pick any of the approaches above and accomplish my goal of styling a website, but I see issues with some of those practices and prefer to use an approach that provides flexibility, control, and best practices.

Choosing a Styling Method 

Working for an agency where we build websites for clients of all sizes, many times the method we choose for doing something depends on the client’s preferences or skill level of their team.  Meaning that we want to build a website that a client could take over and maintain on their own after our engagement with the client has scaled down.  So even if I have a personal preference but the client has no experience or desire to work with that approach, I would need to provide a way for the client to work with a system or approach that may be more comfortable to them.

The one thing to keep in mind when choosing a method for styling your websites, Gatsby or otherwise, is that at the end of the day, we are producing plain CSS and as such, it should be well-written, and easy to maintain and scale. I am a fan of keeping styles simple, flat, and to a minimum. I don’t see the point of using over-engineered methods that complicate the most simple task.

CSS Modules

My approach of choice for styling React or Gatsby websites is CSS Modules because it most closely resembles the traditional way of styling websites I have grown accustomed to. As I alluded to before, my ultimate goal is to write proper CSS, following best practices, while leveraging styles scope, performance, and scalability. CSS Modules allows me to do all these things while providing an environment I am familiar with. I am not against learning new ways of doing things (I welcome them), but if new approaches don’t offer significant benefits, I don’t see the need of complicating my life and that of clients who will interact with my code.

In a typical Gatsby website, CSS Modules works out of the box without any special configuration. You can create any CSS files in your project, import them into the components you are working with and your styles will work. This is great and can get you very far if you are working with a simple website. However, this only works with plain CSS and not Sass. I personally like Sass because it provides features that are currently not available in CSS. Things like Mixins and nesting to mention a few. I will use Sass and SCSS interchangeably in this post to refer to the preprocessing process of compiling SCSS into plain CSS code.

Add Sass to Your Gatsby Website

Adding Sass to a Gatsby website is relatively easy. It’s a two-step process that includes installing a Gatsby plugin and adding a line of code to gatsby-config.js. Let’s do this now:

  1. While In your Gatsby project root directory, run the following command to install the gatsby-plugin-sass and node-sass plugins:

    npm install node-sass gatsby-plugin-sass
    Gatsby-plugin-sass has a dependency of node-sass and therefore we need to install both.

  2. Edit gatsby-config.js (located in the root of you gatsby project), by adding the new plugin to the plugins array:

    plugins: [`gatsby-plugin-sass`]
    If you already have other plugins in place, you can add each new plugin in a new line within the array.

That’s it! Now Sass is available on your site.

Updating CSS Modules to use Sass

Now that we have Sass available, the last thing to do is to update CSS Modules to use Sass versus plain CSS. This is a two-step process:

  1. Rename any existing .css files to use .scss
  2. Update any imports of these files to also use .scss

Now you can take advantage of CSS Modules and Sass for writing great styles. Let’s go over a quick example of how CSS Modules works.

Using CSS Modules and Sass in Gatsby

Consider the following HTML/JS in your Gatsby Component (hero):

import React from 'react';
import PropTypes from 'prop-types';
import Image from 'gatsby-image';

import Heading from '../Heading';
import Link from '../Link';
import {fluidImage} from '../../global/js/customPropTypes';

const Hero = ({ title, image, body, path }) => {
  return (
    
        
          {title}
        

{body}

Learn more ); }; export default Hero; Hero.propTypes = { title: PropTypes.string, body: PropTypes.string, image: fluidImage, path: PropTypes.string };

Styling the Hero component above with CSS Modules will require we create a stylesheet for the Hero. Assuming you have a Hero folder inside components, which has an index.js for the component’s markup and JavaScript, create a file called hero.scss with the following code:

.hero {
  background-color:$color-white;
  position: relative;
}

.media {

  img {
    display: block;
    height: auto;
    max-width: 100%;
  }
}

.content {
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
}

.title {
  color: $color-secondary;
}

And finally, you would update index.js by first importing the hero’s stylesheet as follows:

import styles from './hero.scss';

Then adding the respective CSS classes to each of the HTML elements in the Hero component. The end result of index.js would look like this:

import React from 'react';
import PropTypes from 'prop-types';
import Image from 'gatsby-image';

import Heading from '../Heading';
import Link from '../Link';
import styles from './hero.scss';
import {fluidImage} from '../../global/js/customPropTypes';

const Hero = ({ title, image, body, path }) => {
  return (
    
        
          {title}
        

{body}

Read the full article ); }; export default Hero; Hero.propTypes = { title: PropTypes.string, body: PropTypes.string, image: fluidImage, path: PropTypes.string };
  • When we imported the Hero styles into the component we used styles as the namespace in the import.
  • To apply each of the CSS classes found in hero.scss to the markup in index.js we are using the className attribute since class is a reserved keyword in React/Gatsby.
  • Then in curly brackets we apply each class by prefixing them with styles. For example: 

If you render this component in the browser, what you will see as a result when you inspect the code is something similar to:

Example of HTML code through dev tools

  • Main things to note from the image above are the CSS classes added after css-modules--. These are the classes we created in hero.scss.
  • The end of the class names (i.e. akrigl, woitn, w95ls9), are dynamic strings created by CSS Modules which ensure they are unique CSS classes.  This prevents issues of regression and styles from leaking into other parts of your website.
  • CSS Modules restricts the scope of its styles to only the component they are written for.

In closing

I like CSS Modules because it provides a familiar approach to working with Sass similar to that of a traditional Sass project. This works well with clients who are not well-versed in React or Gatsby but still want to be able to update styles.

[embedded content]

Oct 14 2020
Oct 14

Acquia Engage is coming soon (October 20 and 21) to a screen near you. There’s still time to register and join us! The Engage 2020 conference will be fully virtual and free for all attendees. 

This interactive event will inspire business and technology leaders to learn and connect on the path to bringing outstanding digital experiences to life with Drupal and Acquia. As a sponsor, we are excited to network with the Acquia community, connect with old friends, and meet new ones. 

Come connect with the Mediacurrent team at our virtual booth. Here's our Acquia Engage schedule so that you can plan your visit. We’ll be sharing best practices, case studies, and info sessions throughout the event. Drop in any time to chat with us.

Acquia Engage Mediacurrent Schedule

Digital Experience Case Studies 

Mediacurrent has been selected as finalists across three categories for the 2020 Acquia Engage Awards. These three finalists exemplify world-class digital experiences in healthcare, financial services, and emergency communication. Stop by our booth to learn best practices from these Acquia Open Experience Platform projects.

Acquia engage awards banner

Area Alert - Open Source Giants 

Area Alert is an open source solution for organizations that need to quickly build highly performant, low-cost, and easy-to-update emergency websites during the COVID-19 pandemic and other large-scale emergencies. The Area Alert Drupal distribution delivers a head-start for faster deployment with special design consideration for the user experience in times of crisis.

Montefiore Medical Center - Building a Better Tomorrow 

The Bronx’s Montefiore Health System, which served one of the hardest hit areas in New York City, saw that existing and prospective patients were delaying the care and treatment they needed due to fears of COVID-19. Montefiore endeavored to create a new microsite to reassure patients of the steps the health system was taking to ensure patient safety, and encourage patients to return for the care they required. With just over one month to launch, a speedy end-to-end solution was needed to launch the COVID-SAFE Care microsite.

BDO Alliance USA - Leader of the Pack (Financial Services)

Become an indispensable resource to Alliance firms. This was BDO’s main goal when they approached Mediacurrent to expand its portal functionality and increase customer acquisition, retention, and satisfaction. BDO Alliance USA is among the industry's largest associations of accounting and professional service firms. The Alliance Portal, a private Drupal-based platform, is available to members of firms who are members of the BDO Alliance USA. BDO took a big step in the evolution of its Alliance Portal with the move toward a more integrated, relevant, and metrics-based platform.

Stump the Drupal Experts 

Lately, we’ve been focused on gearing up for Drupal 9 with our Rain install profile, increasing conversion rates with Acquia Personalization, and decoupling Drupal with Gatsby...but you can ask us anything.

Try to stump our Drupal experts with your digital dilemmas – they welcome the challenge!

Sleep Better with a Secure Drupal Site

Mark Shropshire, Open Source Security Lead, will give a rundown of the 10 most common website security vulnerabilities and Drupal best practices to mitigate these risks. 

Drupal 9: Roadmap and Tools

Everyone’s buzzing about the strategic advantages of Drupal 9. We’re here to bring those Drupal 9 visions to reality with these open source tools:   

  • Rain: Go from zero to launch in 30 days. This Drupal installation profile enables rapid development and gives editors the ability to build robust pages with over a dozen pre-built components.
  • Automated Updates: Speed up the update process 3x faster. Managing updates in Drupal can be a challenge as core and contributed projects are frequently updated. There’s a better way to streamline the management of your Drupal application.
  • Mediacurrent Multisite+: Spin up a new site in minutes — no development help required. 

Connect with Us

Mediacurrent team holds Acquia Engage Award trophy in 2019

Conferences looked a little different in 2019!

We’ll miss in-person networking this year but our team of Drupal and digital strategy experts will be just a few clicks away. Stop by Mediacurrent’s virtual booth or book a 1:1 meeting with our attending team members:

  • Josh Linard, CRO
  • Michael Silverman, VP of Strategic Growth
  • Client Success Team: Mary Pat Kelsey, Scott Liberman, Madison Smith. and Carlos Lee
  • Damien McKenna, Community Lead
  • Kevin Basarab, VP of Delivery 
  • Jay Callicott, VP of Technical Operations 
Sep 03 2020
Sep 03

Mediacurrent is at the forefront of what’s next for the future of decoupling Drupal. We’re excited to team with Netlify to bring the modern Jamstack architecture to customers for better performing websites and web applications. By joining the Netlify Agency Partner Program, together we’re continuing our commitment to deliver transformative digital experiences to customers and run web projects at a global scale.

Delivering Modern Jamstack Websites and Web Applications

Jamstack, pioneered by Netlify, is a web architecture to make the web faster based on decoupling the front end pages from the back end apps and databases that enables site prerendering and global delivery. Netlify provides a platform to enable the Jamstack with modern build workflows, serverless functions, and a global multi-cloud edge network to deliver better performing, more secure, and scalable websites and applications. Netlify helps developers and teams to be productive, agile, and responsive to change throughout the project lifecycle and to deliver performant, dynamic digital experiences.

“Jamstack is an approach to build for the web that has generated a large global community and movement over the past five years,” said Sarfaraz Rydhan, director of partner ecosystem, Netlify. “Netlify is focused on bringing this community together and enabling the benefits of Jamstack with its platform alongside partners and customers. Working with Mediacurrent as a member of our agency partner ecosystem helps our combined customers to achieve their digital and web goals faster. We look forward to working with them to bring the benefits of productivity, performance, and speed to customers’ websites and web apps.”

A decoupled architecture can be a great approach for sites that require functionality beyond what Drupal normally supports. Organizations keep the best-in-class authoring experience of Drupal while adding the website performance, streamlined developer workflows, and design flexibility that comes with a Jamstack site. Learn more about our decoupled approach for MagMutual.com and the city of Sandy Springs.

To join the Netlify Agency Partner program, agencies apply and demonstrate understanding of the Jamstack architecture and Netlify’s platform. Netlify agency partners have the opportunity for deeper levels of collaboration with Netlify on their projects. As part of this agency program, partners can offer the full suite of Netlify features and products to customers.

Is decoupled Drupal right for your site?

Contact us today to learn more about decoupled architectures and whether it is the right approach for your organization.

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