Using Gutenberg to Elevate the WordPress Editing Experience

Faye Polson

“Gutenberg” is the name given to the movable block editor adopted by WordPress back in 2018, harkening back to Johannes Gutenberg who invented one of the early European movable-type printing presses. Reusable individual letters that could be moved, and reused, eventually lead to typography and fonts as we know them.

Of course, nowadays we have printing technology that Johannes could not have even imagined, let alone believe that an entire online editing experience would be named after him.

But what exactly is Gutenberg?

Most of us are familiar with editing experiences, such as typing in an email, Microsoft Word, or Google Docs. These experiences are mostly similar; you have a blank space to type and buttons for alignment, styles, fonts, sizes, etc. This has been a common website editing interface for decades, but it is both creatively and logistically restricting.

If you wanted to move a section from one location to another, you’d have to copy and paste it, then delete the original. Trying to completely rearrange your content would be frustrating and time consuming. Or if you wanted some snappy responsive columns, you would have to switch to view the document code and write HTML and CSS.

Gutenberg is WordPress’s native “drag and drop” site builder. It solves those problems by allowing you to create your content in blocks designed for the specific content you’re using. There are over 90 blocks to choose from. You can play around with all of these options on the Gutenberg demo.

This flexibility allows content editors to populate their website with more complex content, and then shuffle it around within the layout. In fact, there are many themes that lean so heavily on Gutenberg that you wouldn’t need a developer at all. With the introduction of Full Site Editing, nearly anyone could put together a working website that’s beautiful too.

Why use a web developer at all?

While there are many themes that do leverage everything Gutenberg has to offer (those 90+ blocks), that’s not the case for most of them. And for existing sites with legacy themes, there is little chance that they are able to take advantage of this newer technology. Out-of-the-box websites are useful and serve a purpose but when you need custom design, structure, and functionality, you need to call in professionals.

Another struggle with drag-and-drop sites is the global element. If you have 30 headings on your website and decide you want to change them all from green to blue, you’d need to go through and edit the color settings on all 30 headings one by one. While there are some global elements, the vast majority of your page content will require manual editing. This can be incredibly time-consuming.

Native Gutenberg blocks can be unexpectedly limiting. For example, if you desire rounded borders on all media but the block you’re using doesn’t have support for a border-radius, you’d need a developer to create and apply custom classes. Keep going down that path and suddenly you can have a site full of custom classes and blocks that never look the same from one to another. This can be an editing nightmare and require excess documentation to keep it all straight. Suddenly that easy drag-and-drop editing experience requires a higher level of skill.

There’s a better way to customize.

Kanopi approaches Gutenberg blocks from the perspective of creating consistent and branded content. One of the big advantages of Gutenberg is that we can create new blocks and apply our own styles and structure. This allows us to create blocks that can hold and display any type of content within a defined set of rules. Instead of pouring budget into styling 90+ blocks (and their hundreds of combinations) that may never be needed, our team focuses on creating custom content solutions for our clients.

This “best of both worlds” approach lets site editors continue to use the ease of Gutenberg’s drag-and-drop experience, while also creating consistent, branded content. As a website moves from its initial build into support, these blocks can be expanded upon and updated globally (and thoughtfully). Even older sites without any Gutenberg usage can be configured to allow for this type of block expansion without disrupting the existing content.

Gutenberg is here to stay.

It’s clear that WordPress is leaning in on the use of Gutenberg and the Full Site Editing implemented in the past year. Meanwhile, Advanced Custom Fields Pro (the preferred and recommended plugin for enhancing WordPress’s content management) is keeping pace to ensure custom block creation works seamlessly with every stride made. Whether using an out of the box theme, or having an agency custom building according to your organization’s needs, Gutenberg is a phenomenal solution with room to grow in many directions.

The Top WordPress & Drupal Trends for 2023

Katherine White Chief Technology Officer

A new year means a new look at what’s on the horizon. Kanopi is always looking ahead to what is happening in the development space, so we asked our team to give their thoughts on what’s ahead for next year.

We’ve split this into three sections:

The top WordPress trends for 2023
The top Drupal trends for 2023
The top website development trends (regardless of CMS) for 2023

Let’s start with WordPress …

Top WordPress trends for 2023

New WordPress, new theme, same direction

With the release of WordPress 6.1, Twenty Twenty-Three has already arrived; the new default theme is called (numerically incremented, as usual) Twenty Twenty-Three (TT3). What hasn’t changed is the focus on Full Site Editing (FSE). In fact, TT3 continues with the trend of moving towards FSE. Block patterns are prevalent and variations are implemented theme-wide to allow for a huge variety of customizations (10 theme style variations!) without having to touch any code whatsoever.

What else is new in WordPress 6.1

WordPress 6.1 released on November 2nd with many improvements with much of the focus placed on accessibility and performance. Both of these areas were Identified by developers and the community (after heavy criticism) as needing more love as the Gutenberg block editor received the lion’s share of updates in recent releases.

Happily, many needed improvements and fixes were implemented in this release. Below are links to comprehensive lists of the updates, including:

Need more of a beginner’s guide? This blog post is a great resource.

Other Trends / Predictions

Agencies are figuring out how to stay on top of the changes with Gutenberg, building Block themes, and Full site editing.
Block Patterns will continue to be used and will become ubiquitous across any block-based theme.

Top Drupal trends for 2023

Drupal continues its rapid development pace, adding more secure and performant code releasing Drupal 10 on the backbone of Symfony 6 and PHP 8.1.

Upgrading from Drupal 9 to Drupal 10 is easy using the drupal-rector tool, which looks for deprecated code. There are also a large number of contributed modules that already have been ported. So if you’re on D9, moving to D10 should be easy.

Drupal 10 features include:

The new, modern Claro administration theme, which provides a better administration experience.
Olivero default theme, which is the new default front-end theme for Drupal with a modernized look and feel
CKEditor 5 which provides a much better authoring experience and more modern editing.
Modern JavaScript components to replace some uses of jQuery for better performance.
Theme Starterkit tools for bespoke theme creation.

But as the Drupal crew is ever working hard to keep evolving, the work has already begun to be included in Drupal 11. The following core initiatives are being worked on in the contrib community, and will be merged into core when they are ready:

Project Browser: this will allow ambitious site builders to discover and install modules and theme from their admin screens.
Drupal Recipes: allows site builders to install and configure groups of modules to achieve features such as an event section, or a blog.
Automated Updates in Core.
A more streamlined Core: the Great Module Migration continues moving lesser used modules from core to the contrib community for a smaller Drupal core.

General website trends

Performance and Speed

As we wrote in a blog post about Core Web Vitals earlier this year, research shows the chance of a bounce increases by 32% when a page load time takes one to three seconds, and by 90% when the page load time takes up to five seconds. Speed matters! Make sure to take a look at your Core Web Vitals.

Accessibility

This is a drum that Kanopi beats frequently, but that’s because it’s really that critical. 26% of US adults identify as being permanently disabled in some way. If you count those with temporary disabilities like a broken wrist, or situational disabilities like being on a noisy subway, the number climbs considerably. That’s a huge percentage of people that feel alienated when a site isn’t accessible to them. There are many ways to make a site accessible, including adding captions and alt text to images and videos, ensuring proper contrast, and entering content with a correct heading structure. Make 2023 the year you decide to make your site as accessible as possible.

Thumb-Friendly Mobile Navigation

In 2022, 60% of all website traffic came via mobile devices, so a mobile-first approach is imperative. This also means that all critical elements on a website must be within easy reach of a user’s thumbs, including the navigation. Think about what’s really necessary on each page and what can get edited. Focus on a vertical orientation rather than a landscape one, and what functions need to be done on your site with a touchscreen.

Artificial Intelligence (AI and Machine Learning (ML)

2023 should be the year when companies will move forward with implementing both of these, if they haven’t already (and our Creative team sees this trend on the design and content side as well). On top of improving productivity and using data more efficiently, AI doesn’t have to prove its usefulness anymore. Plus, it’s become quite accessible to work with as most cloud platforms offer it as a plug-and-play service.

AI enables machines to learn from their experiences and make decisions without human intervention. This technology can be used to automate mundane tasks such as data entry or content generation, allowing developers to spend more time focusing on more complex problems. For example, there are plugins that can help you create better content for your website by using artificial intelligence.

ML is also being used in web development, enabling sites to better understand user intent and behavior so they can deliver personalized experiences tailored just for them. For example, think about how chatbots can deliver a personalized experience with your audiences.

Speaking of …

Personalization

It’s impossible to talk about future website trends without discussing personalization. The days of one-size-fits-all websites are quickly coming to an end as organizations look for ways to tailor their websites to individual users’ needs, wants, and interests. Consider that Gen Z has grown up with some degree of personalization and expects it, and apps such as Spotify and Netflix have already conditioned us to expect some personalized recommendations on what we hear and watch. (Personalization is also critical in content strategy and web design for 2023.)

While it initially felt uncomfortable or intrusive when platforms knew personal things about us, it’s now become a more mainstream experience that helps users get what they want or need faster.

A few examples:

Geolocation: location services can help your audiences find events local to them.
Product recommendation: a great example of online shopping is Patagonia. After filling out a questionnaire about sizing, the site predicts what size would be best on every single product page. The algorithm bases itself on the information a user shares but also the reviews it receives from similar users who made the purchase.
Personalized newsletter: This is tangential to your website, but why ignore this critical marketing tool that leads readers to your website? It’s become a common practice to send a newsletter with content specific to your audience’s needs (and there’s lots of data to back up the power of personalized newsletters). Split up your newsletters by audience so you are speaking to their goals, then direct them to the content on your website so they do the conversions you want.

Voice Interfaces & Voice Search Optimization

Voice interfaces are becoming increasingly popular as more people turn to voice assistants such as Siri or Alexa for help with their online searches. To stay ahead of the curve, web developers need to start optimizing their sites for voice search by ensuring that all content is written in conversational language and utilizing structured data markup tools like Schema.org or Google’s Structured Data Markup Helper tool. This will ensure that your content is easily readable by search engines so that it shows up when people search via voice assistants.

Small bites can create big wins.

With these new developments come exciting opportunities for organizations looking to stay ahead of the competition. While some of these trends might not seem achievable or even necessary for your organization to implement at a large scale, even implementing some in smaller ways can garner big results. CMOs and marketing managers should keep an eye on these emerging trends so they can capitalize on them before their competitors do!

And as always, if you need any help with your websites in 2023, Kanopi is here to assist. Contact us anytime.

Drupal 10 is (almost) here!

Allison Manley

The next major release of Drupal is just around the corner: December 2022 is the target release date.

Drupal 10 will bring with it some significant changes that could potentially affect your website. As such, it’s important to be prepared and take the necessary steps to ensure a smooth transition. There are some major benefits to upgrading to Drupal 10, including improved security, performance, and accessibility. And, because Drupal 10 uses the same overall structure as Drupal 9, the transition shouldn’t be too difficult for most developers.

But what does this mean for CMOs and marketing managers who are using or considering using Drupal? Let’s review what you need to do to get ready for Drupal 10 and make sure your website is up to date.

What’s New in Drupal 10?

Drupal 10 includes several major new features and improvements, including:

A new default administration theme called Claro that is mobile-responsive and optimized for accessibility, replacing D7 which was over 10 years old.
A new default frontend theme called Olivero that replaces Bartik.
Initial upgrades to CKEditor from version 4 to version 5, introducing more modern content editing functionality and a better author experience.
Ongoing modernization of the JavaScript stack, replacing the large jQuery library with smaller, more performant solutions
Leveraging our technology partner’s improvements and upgrading from Symfony 4 to Symfony 6 and making the minimum version of PHP 8.1 to keep the whole stack secure and more performant.

These changes will be welcome additions that improve the overall experience for both users and administrators.

Preparing for the Upgrade

If you’re currently on Drupal 7 (as almost 54% of Drupal sites still are), you have some time as end of life is scheduled for November 2023. But it is recommended to upgrade to 9 as soon as possible; by upgrading, you ensure your website stays updated with the latest features and security measures. Our guide to transitioning from Drupal 7 to 9 provides additional insight into this process, or you can go straight to D10.

If you’re currently on Drupal 8, it’s time to upgrade asap. D8 was end of life in November 2021, and most Drupal sites have upgraded. You need to as well.

If you’re currently using Drupal 9, congrats! Because Drupal 10 uses the same overall structure as Drupal 9, the transition shouldn’t be too difficult for most developers. But here are a few steps to consider:

1) Check Your Version of PHP

One of the first things you’ll need to do is check what version of PHP your website is running on. As of Drupal 10, the minimum supported version of PHP will be 8.1. You can check your website’s PHP version by logging into your hosting account and checking the settings in your control panel. If you’re not sure how to do this, contact your hosting provider for assistance.

2) Update Your Modules and Themes

It’s important to make sure that all of the modules and themes on your website are up to date. While many modules and themes are already compatible with Drupal 10, there may be some that aren’t. Checking for updates is easy enough: head over to the “Updates” page in your Drupal admin panel and install any available updates. Once you’ve done this, it’s a good idea to clear your website’s cache so that the changes can take effect.

3) Test, Test, Test

Once you’ve updated your website for Drupal 10, it’s important to test everything thoroughly before taking your site live. The Kanopi support team uses tools like PHPstan and Drupal Rector to perform automated code checks to verify your codebase works as expected on the upgraded versions on PHP, Symfony, and Drupal.

We also recommend manually testing. This includes testing all forms, pages, links, etc. to ensure that they’re working as intended. It’s always better to catch any potential problems before they cause issues for your live website visitors.

You have time to upgrade.

While December is fast-approaching, upgrading to Drupal 10 is a decision that should be made on a case-by-case basis. If your website or application is already running smoothly on Drupal 9 (or earlier), there may not be enough incentive to justify the time and expense to do this immediately. However, if you’re starting from scratch or looking for an excuse to make a big change, migrating to Drupal 10 could be the perfect opportunity.

And if you need assistance, Kanopi is here to help as always.

Accessibility Overlays: Buyer Beware

Faye Polson

Uh oh. It’s come to your attention that your website needs to be accessible.

Whether it’s the Americans with Disabilities Act (ADA) and Section 508, the Accessible Canada Act, or the governing legislation in your area, the reality is your site has to be compliant with WCAG 2.1 Level AA guidelines or risk legal ramifications.

What is website accessibility, also known as A11y? Accessibility is “the quality of being able to be reached,” or, basically the idea that every part of your website can be accessed and used by anyone. So how do you achieve that? Well, on one hand you can spend the time, effort, and money having your website audited and remediated, then set up an ongoing process to ensure your site stays current with accessibility needs and requirements. Or you can install an accessibility overlay and call it a day.

The question is, do you feel lucky?

First, what is an accessibility overlay?

Accessibility overlays (including widgets and toolbars) are automated software solutions that serve third-party scripts intended to resolve accessibility problems on websites and applications.

Firstly, they usually apply a series of controls to a website that allow the user to adjust aspects of their viewing experience, such as colors, text size, and contrast.

Secondly, they use JavaScript to alter the code and content of your website on the fly to try and make up for existing accessibility errors with automated “repairs.”

Thirdly, they are really, really, really, really, really, really bad.

Wait, what? Why are accessibility overlays so bad?

Overlays may run into conflicts with user privacy.

Because users of assistive technologies often have specific settings on their devices and browsers, some overlays automatically detect those settings and attempt to utilize them for their configuration. To maintain this, it stores a cookie on the user’s machine, saving info about their disability settings without any kind of opt-in from the user.

To make matters worse, any other website using the same overlay can access that same cookie to apply the same configuration. Information about an individual’s disability is incredibly personal, and this is essentially a privacy breach the user never opted into. Having an accessibility overlay on your site could risk noncompliance with GDPR, CCPA, and the like.

They increase your site’s security risk.

Anytime you load a third-party script onto your site, you are putting part of your site’s safety in the hands of the vendor. If their server is insecure, then you could be directly impacted.

Your website performance will suffer.

This is a tale as old as time; the longer it takes for your site to load, the more likely it is that the user is going to leave. JavaScript always increases page load, and third-party scripts are even worse because it’s the vendor’s server dictating the speed of that script. It’s a known fact that Google and other high priority search engines monitor site speed and that metric is utilized in your SEO ranking. Slowing down your site with an accessibility overlay will directly impact your search ranking with Google.

Website creators may become reliant on them.

Overlays are insufficient bandaids to problems that designers and developers will continue to make if they are not required to solve them. This gives the team a false sense of security and no motivation to create inclusive, accessible websites.

The “repairs” made by overlays may not be reflected in the source code.

If you were to “view source” on a webpage, what’s reflected there may not match up with what you see being delivered by the overlay JavaScript. This means anyone using assistive technologies that rely on the source code would not be served the accessibility changes.

Overlays may be blocked by the intended audience.

Extensions designed to block ads are known to also block overlays, but ad blockers are a common tool users employ to ensure their assistive technologies are working properly. Instead those users will be served your existing inaccessible website without the overlay.

They actually create barriers to accessibility.

This is the big one. Most users of assistive technologies agree that overlays are ineffective at best, and detrimental at worst. These widgets often require activation via buttons or toolbars which of themselves may not be accessible to the user. Remember, not everyone is using their eyes and a mouse to navigate the page. Just because you can see and click on them doesn’t mean everyone can.

Moreover, users requiring assistive technologies already have solutions which impact the experience across their entire device and web browsers. An overlay can override or conflict with these settings, or even adapt unreliably (if at all), creating a frustrating experience for the user.

Companies using accessibility overlays are subject to brand damage.

Yeah. They are regarded that badly by the A11y community and those who use assistive technology. Companies caught using overlays have been called out for it on social media, and it is not a good look. The general feeling is that those organizations care more about their legal obligations than the actual end user.

If accessibility overlays are so bad, why are they so popular?

They require no actual accessibility knowledge or expertise.
They provide controls that seem very helpful, like color contrast and text size.
They promise fast and easy accessibility compliance.

It’s that last one that draws in companies and organizations looking to meet regulations. Accessibility overlays look like a temptingly cheap and quick fix for a big, expensive problem.

But accessibility overlays do fix accessibility problems, right?

No. A thousand times, no.

There is currently no way for a single automated tool to detect all accessibility issues on a website. This is widely known in the A11y community. When we do accessibility audits at Kanopi, we use a minimum of four different automated tools, in addition to manually testing via keyboard and screen reader. Most automated tools can only detect up to 30% of potential problems, leaving up to 70% undetected. It takes a human user with training, additional tools, and a good chunk of time to find the remaining items. How then could an overlay possibly identify all accessibility issues on a webpage?

Unfortunately, they can’t. And therefore, they cannot meet the WCAG 2.1 Success Criteria. Conformance is defined as meeting all of the requirements of the standard; partial compliance is not sufficient. Any accessibility overlay provider claiming conformance is misrepresenting their product.

Just a few examples of issues an overlay is not going to be able to address, but are basic A11y requirements:

Detect / repair missing headings, or misused headings
Fill in missing alt text with appropriate content
Add missing labels on form fields or submit buttons
Fix missing or incorrect error management and handling
Provide reliable focus control on form inputs
Provide reliable keyboard access
Correct JavaScript content injected independently of the overlay
Enable zoom
Correct the usage of layout tables
Reliably correct focus order
Prevent keyboard traps

There’s more, but these are areas that are known to be big problems for users of assistive technologies and can make your site completely unusable for part of your audience.

What’s the worst that could happen?

In 2020, more than 250 lawsuits were filed against companies using overlays to solve accessibility issues on their sites. In fact, around 70% of accessibility cases are brought by the same ten law firms who are actively seeking websites using overlays. These law firms specialize in accessibility lawsuits and are looking for easy targets.

Hunt Huey (PLLC) confirms this is a known strategy, stating: “The law firms who file website accessibility lawsuits and their pet clients start the process of finding a target using automated tools that scan for compliance with the technical requirements of the Web Content Accessibility Guidelines 2.0 or 2.1.”

“The conclusion is simple. If avoiding litigation is your goal, an overlay or widget won’t do the trick.”
Hunt Huey

The reality is, if you want to avoid legal action then you need to reach WCAG 2.1 Level AA compliance.

So, back to the original question: Do you feel lucky?

How do you become compliant?

It takes time, it takes expertise, it takes commitment. It takes caring about real people who use assistive technologies. Folks with disabilities are worthy of respect and inclusion. Design and build your website with inclusion and accessibility in mind, so that your site can be ‘reached’ by all. Dedicate resources to ongoing automated and manual A11y audits of your site, addressing issues at the root of the problem instead of applying bandaids.

Kanopi can help. If you’d like to know more about our A11y audits, or our dedication to building Level AA websites, get in touch with us.

Why do we need to make accessible websites?

Because it’s the right thing to do.

Forget the legal ramifications. Forget the fact that there’s a strong business case for it. Consider for a moment the ethical responsibility to ensure your site is barrier free to anyone regardless of who they are. Consider that your clients and customers are people to respect, not problems to solve.

It’s time to make your website accessible.

4 reasons for choosing an all-in-one design and development agency

Anne Stefanyk CEO/Founder

When designing and developing your website, partnering with one agency that handles both offers advantages that are hard to ignore.

Whether for your higher education institution, nonprofit, or your software as a service (SaaS) firm, a website build is often thought of as a two-phase process during its construction.

Firstly, you need a platform design and strategy. You’ll want to study your typical website visitors, organize and audit your pages and content, and create an information architecture while thoughtfully choosing fonts and colors for your user interface. The UX design process is a crucial part of every platform build, ensuring your site will be a pleasure to navigate while meeting website visitors’ needs.

Website development naturally follows once you have your design. Engineers code, test, debug, and retest every component of your site to ensure it’s functional, accessible, and secure before it’s ready to go live.

It’s not uncommon for companies to think of each of these vital phases — design and development — as two distinct and separate entities. Because of this, folks often consider partnering with one agency to design their platform and another to develop it.

We don’t deny this strategy can produce fantastic websites. In some instances, choosing a specialized agency to focus on a single phase of your site build makes sense. However, we’d like to highlight how design and development are not as independent as some think, and there are advantages to having the two phases connected.

Working with one agency that’s mastered both design and development can save you time and money while ensuring your site is a joy to use and will be for many years to come. We’ve pulled together our top four reasons firms should consider choosing one agency for designing and developing their website.

Four reasons for choosing an all-in-one design and development agency:

1) You’ll launch faster.

When gaining both design and development from the same agency, your project life cycle is more efficient, meaning your website is able to go live faster. This valuable time-saving is the result of consistent alignment between designers and engineers.

Whenever Kanopi inherits a platform designed elsewhere, we ensure the strategic thinking isn’t lost in the transition as this is one of the most common blockages when your platform moves from the design agency to a development agency. Accessibility issues, missed content requirements, and an unworkable CMS can also crop up when working with separate design and development firms.

One agency can ensure your site is accessible.

Design agencies that don’t offer website development in-house can sometimes create design specs that don’t meet accessibility and usability guidelines. When it comes time to build your site, engineers may need to do extra work or modify your agreed-upon design to meet the needs of everyone who uses your website.

With design and development working together, accessibility isn’t an afterthought and can be included in the strategy and design of your website from the very beginning.

Understanding your content requirements is more seamless.

Another challenge that can extend project timelines are missed content requirements, as design agencies can occasionally overlook your company’s content requirements due to focusing on aesthetics. Unfortunately, we’ve seen designs break when it comes time to migrate a company’s actual content over to the platform design. Without a technical review of the actual content that needs migrating, designers might miss any number of needs, including not taking image size requirements into consideration, ensuring that content isn’t being broken up into multiple components, or creating space for headlines that are too short to accommodate actual headline length.

Conversely, what if the designers create visuals around content that doesn’t yet exist? It can look great having all the bells and whistles in the design, but if the content doesn’t exist, someone has to make it, or the design may look flat. Make sure things like images, videos, and content fields exist or can be created before signing off on that design.

With development and design working hand-in-hand, engineers are able to provide expertise on content needs while designers are beginning to craft a beautiful website that’s functional.

You’ll get a CMS that’s easier to use.

Lastly, disjointed design and development can sometimes leave behind the unique needs of content managers. Busy content teams need a content management system (CMS) that’s a breeze to use. With a focus on front-end design, design-only firms sometimes provide designs that do not lend well to editing specific assets in the CMS (for example, image sizes that require Photoshop or another outside tool to crop to proper sizes). Development can lean into the design process to help integrate a CMS that’s user-friendly, no matter the skill level of your content team members.

Additionally, having a pattern library within your CMS is crucial to keep your site’s design consistent over time. Design firms tend to design each of your web pages, but rarely design full pattern libraries that work across an entire site that help maintain a smooth workflow between design and code when it’s time for development. Creating every web page in isolation leads to multiple ways to display content, slowing down your project.

When Kanopi develops websites, we look for patterns we can apply site-wide to eliminate gaps that commonly appear through separate page design. Without pattern libraries, numerous patterns may be created for similar content, which can lead to increased complexity, longer development time, and the need for additional project management support with a heftier price tag.

2) Feature development is easier.

When you decide to partner with an agency providing both design and development, designers and engineers work in tandem and are able to understand the nuances of the features necessary to make your website the best it can be.

When the Golden Gate National Parks Conservancy and Institute of Golden Gate partnered with Kanopi, we were able to take a strategic approach to their visual design, factoring in their complex infrastructure and functionality requirements.

Mapping, in particular, is a complex feature for the park and one that needs to look great while providing an intuitive user experience and a CMS behind the scenes that’s fit for purpose. Kanopi created a content administration experience, allowing for polygon drawing and mapping files to direct intricate paths for hiking in the park:

An example of one of the many available maps of the trails managed by Parks Conservancy. This one overlooks the Golden Gate Bridge.

3) Project management is more cohesive.

When you partner with an all-in-one agency, you ensure the smoothest transition possible as your platform passes from the designers to the engineers.

Designers within an all-in-one agency understand the skillsets, workflow, and limitations of the engineers with whom they work. They’re familiar with what design practices are going to make the job of the developers as smooth as possible, and which ones might come up against issues in the build phase. Those built-in efficiencies make a huge impact on time and budget.

Working with separate design and development agencies can lead to numerous layers of project management with a costly transfer (in terms of both time and money) between them all.

Working with an all-in-one agency can also help your internal project management go more smoothly. You can avoid misaligned team expectations with the help of the agency, which will work to meet with senior-level stakeholders regularly and keep them up to date on your web strategy. Learn more about this process in our guide to avoiding the “Swoop and Poop.”

4) Your designs will have more longevity.

The final reason for choosing the same agency for both design and development comes down to the sustainability of your site. Websites designed and developed by the same team prove the test of time because designers, engineers, and project managers can collectively gain a deep understanding of your company’s mission and long-term goals. They are able to strategize a plan for your website post-launch, so it continues to support your business goals and remain a great site to interact with next year and the year after next.

With design files at the ready, simple navigation enhancements and tweaks to key elements can be made quickly and easily, keeping your website looking sharp and delightful to navigate.

Weeks can stretch into months for design updates that need to go back to an original contractor that crafted your initial platform design. An all-in-one agency becomes an expert in your business, armed with a thorough understanding of your history and unique growth plans.

Build a better, more sustainable platform with Kanopi.

Kanopi is a close-knit team of designers, engineers, and project managers, who are all working towards the same mission of pairing creative solutions with solid and sustainable architecture while keeping our client’s entire ecosystem in mind.

We’re incredibly proud of the award-winning websites we’ve designed and built for our clients. In addition to design and development, we provide robust support after your website goes live, going above and beyond basic bug fixes and security updates.

‘When I describe Kanopi to others, I talk about customer service, great services, a sustainable site, and a relationship that gets better over time. Every project we have done with Kanopi has improved our site and made it work harder and better for us.’
Laura H, Digital Marketing Manager, Stratford Schools

Are you interested in partnering with us? Rea ch out if you want a better, more sustainable site.

Drupal 10 is Coming Soon. Here’s Everything You Should Know

Jim Birch Director of Engineering, AI Practice Lead

Is your website ready for Drupal 10?

Hot on the heels of Drupal 9 (D9) comes its successor, Drupal 10 (D10). D10 is set to be released in December 2022, a mere two years after the release of D9. For current Drupal 9 users, this won’t be a major overhaul of your current system, but it’s still important to review the details of the upgrade to prepare for this new version.

In this guide, we’ll cover everything you need to know about the Drupal 10 release, from what’s included in the update to how to prepare your website effectively. Remember, you can stay in the loop regarding all Drupal updates by signing up for the Drupal newsletter and keeping an eye on industry resources like Kanopi’s blog.

Kanopi's here to help you prepare for the Drupal 10 release. Contact us today for assistance.

Drupal 10 FAQs

This Drupal timeline shows the EOL dates for D7, 8, and 9 as well as the Drupal 10 release date.

When will Drupal 10 be released?

Drupal 10 is set to be released on December 14, 2022.

What is the latest Drupal version?

Drupal 9 is the latest version of Drupal, released in June 2020.

How long will Drupal 9 be supported?

Drupal 9 will be supported until November 2023. This coincides with the EOL (end of life) for Symfony 4, which is the framework upon which Drupal 9 is built.

What’s Included in Drupal 10

Unlike previous releases (like the transition from D7 to D8), Drupal 10 will not be a comprehensive overhaul. Instead, it will provide a variety of new or enhanced features, including:

Improvements to the Layout Builder and Media Library features, offering greater out-of-the-box functionality.
Enhanced decoupled developer and site builder experiences, with particular attention made to menus and URL handling.
Replacing CKEditor 4 with CKEditor 5, facilitating a better authoring experience and modern editing tools.
Swapping out jQuery components with more modern and performant JavaScript elements.
Replacing Symfony 4 with Symfony 5 or 6 and upgrading PHP from 7 to 8. PHP 8 is a significant update to the PHP scripting language.

These updates will make the Drupal platform easier to use while providing more advanced, state-of-the-art tools for developers to explore.

How to Prepare for the Drupal 10 Release Date

Depending on what version of Drupal you’re currently using, the process will vary when upgrading to Drupal 10:

Drupal 7 users: Drupal 7 will reach its end of life in November 2023. While Drupal 10 will feature some tools to help upgrade from D7 to D10, it’s highly recommended to upgrade to D9 as soon as possible. By upgrading at the earliest possible time, you ensure your website stays updated with the latest features and security measures. Our guide to transitioning from Drupal 7 to 9 provides additional insight into this process.
Drupal 8 users: Drupal 8’s end of life occurred on November 2, 2021. You’ll have to upgrade to Drupal 9 to be able to upgrade to Drupal 10 next year. The migration from D8 to D9 is generally straightforward, so it’s in your best interest to initiate this upgrade as soon as possible.
Drupal 9 users: If you’re currently using Drupal 9, you’re in a strong position to start preparing for the release of D10. To position your site for a successful upgrade, keep your code updated and conduct ongoing site maintenance. For instance, with Kanopi’s ongoing support process, we run automated tests and checks on every code change, ensuring that we keep our code up to date with Drupal 10 development.

All Drupal users can join the dedicated Slack channel where the Drupal 10 readiness team hosts meetings every Monday at 6 p.m. GMT in the #d10readiness channel. If you’d like to stay updated on the latest D10 news, you can join the conversation and get your questions answered.

Working with a Technology Consultant

You might be doing all you can to keep your site updated and secure, but when it comes time to conduct a version upgrade, things can get more complicated. Plenty of web development and design firms (like Kanopi!) can help manage your website upgrades and ensure you’re in a strong position ahead of Drupal 10’s release.

Whether you’re currently working on D7, 8, or 9, technology consultants can help enhance your website with a variety of services. These professionals can:

Conduct a technology assessment to determine the effectiveness of your website and digital strategies.
Take your Drupal web design to the next level with enhanced visual and interactive design, improved accessibility, and streamlined page structures.
Perform website maintenance and provide ongoing support.
Manage your website’s upgrade to Drupal 9 and eventually Drupal 10.

Here at Kanopi, no project is too large or complex for our team of Drupal experts. Whether you’re looking to upgrade to Drupal 9, better maintain your site, or ensure you’re doing everything you can to prepare for Drupal 10, we’re here to help.

Each of our team members has, on average, 11 years of experience in Drupal Development, and several of them are Acquia-certified. We also are a supporting partner to the Drupal Association, regular contributors to the Drupal Project, and one of the main organizers of BADCamp, a Drupal-focused community event.

Additional Resources:

Drupal 7 to 9 Migration Planning Guide. Do you need to upgrade your Drupal 7 site to Drupal 9? This guide offers everything you need to know about the migration.
Drupal 8 End-of-Life and Support: What’s Next? Are you a current Drupal 8 user? Here’s what the D8 end of life means for your website and how you can update your site.
How (And Why) To Set Up Drupal Maintenance And Support. Ongoing maintenance ensures your website is updated and secure. This post explores essential maintenance tasks and how Kanopi can help.

Interested in working with Kanopi to prepare your Drupal website for D10? Contact us today.

Time to update your website? You need a website transition plan

Anne Stefanyk CEO/Founder

Why a website transition plan is crucial, and how to get the most out of it.

At some point in your website’s lifespan, it’s time to do an update. Every few years, your site’s code gets outdated, old features may not be available, and security and performance improvements are released. The average website lifecycle is around 2 years, but many companies go well beyond that, leaving them with a site that’s in dire need of a refresh.

Also, new CMS versions tend to be released on a regular cycle, making it necessary to upgrade. You might be facing that if, say, your current site is built on Drupal 7 (D7). As D7 reaches end-of-life, you’ll need to decide how and when to move to Drupal 9.

Whatever the reason, this is an excellent time to create a comprehensive website transition plan, rather than simply doing a barebones update to your site.

A website transition plan looks at the site update process from a strategic standpoint and with a holistic view, covering the following aspects:

Reviewing design and user experience. Can visitors interact with your website effectively to find the information they’re looking for? During your website transition, you can take the time to review and enhance your user experience.
Determining how/why things are built the way they are on your site. Which design or functionality elements need to remain the same, and which can be updated to improve efficiency or user experience? A website transition plan can illuminate opportunities for improvement.

Let’s think about your website like a house…

Imagine you’ve been in that house for several years. Over the years you’ve added additions, done some small renos, maybe updated the paint job. Perhaps you ambitiously added a second story and a suite for the in-laws. And, you most definitely have accumulated a lot of “stuff” you’re storing there.

Okay, we’re still talking about websites here, I promise…

Like a house you’ve been in for years, an old website can become cluttered. As your business has expanded, you may have made additions quickly, without taking a step back and looking at it from a bird’s-eye view.

When it’s time to upgrade your site (just like if you were updating your home), you need a blueprint to help make decisions that consider every site element, your goals, and how you can give your site as much longevity as possible.

A website transition plan is like the blueprint for the “house.” It can include key elements like:

A deep-dive review of your website’s current infrastructure and design
An assessment of your site’s URLs, using a visual representation or sitemap
An analysis of why visitors are using your site and how you can better appeal to their needs and preferences
High-level design and user experience recommendations
Recommendations for how to rebuild your site better

When you’re armed with your blueprints and recommendations for your future build, you can use them to decide what you’re going to do to build the best version of your new “house.”

Are you going to knock the entire old house down and start from scratch? Or, are there strategic changes you can make that will be impactful without needing to do an entire rebuild?

We like to call these “small bites for big wins,” and there are a couple of ways you can approach this:

1. The Lift-and-Shift

You can leave your design and UX as is and do a lift-and-shift. With this approach, you keep the same look and feel of your current site but perform a replatform.

This is a good option if your design is good overall and you only need to make minor tweaks. It’s a chance to improve your accessibility, performance, and design best practices without starting from scratch.

PROS:

This approach can save time. You likely won’t need a lot of internal stakeholder engagement, so you can move fairly quickly.
You can adjust portions of your site with partial migrations of different sections rather than a massive overhaul. This can help spread the cost of your redesigns out over time and avoid surprising site visitors with a major and unexpected rebrand.

CONS:

If you have to rebuild your entire house anyway, why would you only paint the walls? If your site is in need of a major upgrade, this piecemeal approach may end up being more costly over time.
After you conduct a lift-and-shift, your site might look similar or exactly the same as when you started. This approach might not offer the visible improvements you (and your stakeholders) are looking to implement.

2. The Reimagine

A website reimagine is a full rebuild, taking a fresh look at your design, user experience, content, and conversion strategy.

Websites are the #1 marketing tool an organization has. If you go this route, take this opportunity to design a visually stunning website design that gives your audiences the information they want in a way that positively enhances their interaction with your brand.

To execute this successfully you’ll need stakeholder buy-in, end-user data, and a clear creative vision, paired with technical mapping.

PROS:

You’ll get the heavier lifting over with upfront, rather than just applying a coat of paint.
You’ll be able to incorporate the most modern components available.
Your site will have a longer shelf life since design and development is fresh.

CONS:

You might spend more.
Since this is a more major overhaul, there will be more stakeholders involved.
This approach will take more time.

We recently created a website transition plan for one of our clients, the Centre for Digital Media (CDM), whose goal is to move from a Drupal 7 site to Drupal 9. Rather than simply planning for that upgrade, we dug deeper into their website to create a plan that includes improvements to the site and will future-proof the site long after the update.

We did a deep dive into the technical side of how the site was built and why the site was built that way (The “why” is just as important as the “how”). We met with CDM bi-weekly, shared our findings, and ultimately came up with a technical plan as well as suggestions on how to move forward with content restructuring, migration, performance, design, and security improvements. Ultimately, they were able to determine that they needed a “Reimagine” of the site. By going through the process of creating a website transition plan, they were empowered with the information they needed to make decisions with confidence and buy-in from the right people.

A good website transition plan should be customized to support the goals of your specific site. Your website and business are unique, and a successful transition plan will keep this in mind. Ultimately, the plan acts as a blueprint that allows you to understand the scope of your build, so you can make the best decisions for your site’s update.

We’d love to help create the blueprint for your site and map your next steps! Contact us to get started on your website transition plan.

Drupal 8 End-of-Life and Support: What’s Next?

Allison Manley

This post was last updated in September 2024 to incorporate information about the recent release of Drupal 11.

Kanopi is a Drupal Certified Partner and can help with your migration needs.

Drupal, one of the world’s most popular open-source content management systems (CMS), has continuously released new versions of its platform since its launch 20 years ago. Website developers were thrilled when Drupal 8 hit the scene in 2015, bringing with it a plethora of improvements and bug fixes. However, the system has now run its course and reached its end of life on November 2, 2021.

This leaves groups like nonprofits, businesses, associations, and other organizations that rely on Drupal 8 at a crossroads. As an organizational leader or staff web developer, you may be wondering what Drupal 8’s end of life means for your organization, and how you should tackle upgrading your site to Drupal 11 (the latest version).

In this guide, we’ll review what Drupal 8’s end of life means for organizations like yours and how you can best approach the migration to Drupal 11 if you haven’t already done so.

Keep in mind that this guide is meant only for Drupal 8 users, not Drupal 7 users. If you are a Drupal 7 user, please review our resource dedicated to Drupal 7’s end of life.

What Does Drupal 8 End-of-Life Mean?

Several different versions of Drupal are currently active and supported: Drupal 7, 10, and 11. Drupal 11 is the most recent version, launched in August 2024.

If your site is currently running Drupal 8, it is built upon the Symfony 3 framework, which reached its end-of-life on November 2, 2021. This means that after November 2021, security issues in Symfony 3 (and therefore Drupal 8) will no longer be fixed, resulting in:

No new features added to Drupal 8 after this time.
No minor releases or security updates.
No long-term support for the platform.

We can’t emphasize the last point enough—failing to migrate to a currently supported Drupal version will result in losing access to Symfony support, meaning your site’s code will no longer be updated by Symfony or Drupal. This could leave you exposed to a variety of security threats and vulnerabilities.

To ensure that your Drupal 8 website remains secure, it should be upgraded to Drupal 11.

What Does This Mean for Drupal 7 End-of-Life?

Drupal 7, which was released a decade ago, does not use Symfony. Instead, it is built upon a PHP framework developed by the Drupal community. Drupal 7’s end of life was extended to January 2025 due to the impacts of the COVID-19 pandemic, meaning it will live on past Drupal 8’s EOL. So, if you’re a Drupal 7 user, there is still time to come up with a strategic plan for upgrading your website.

What Happens if Drupal 8 Users Don’t Upgrade?

Because Drupal 8 reached its end of life, no more security updates or bug fixes/improvements will be released for that version.

Remaining on an unsupported version of Drupal leaves your website vulnerable to cyber attacks and lacking in new features. In addition, the plugins and tools you’ve added to your site over the years may not be compatible with your system anymore, causing you to lose functionality.

For all of these reasons, it’s best practice to update your Drupal version before its end-of-life date.

What is the Drupal 8 End of Life Process for Upgrading to Drupal 11?

To upgrade your website to the latest version of Drupal, D11, you must first migrate to Drupal 10.3. According to Drupal, “sites running 10.2.x or earlier versions must first update to 10.3.0 or later prior to updating to Drupal 11, because all core updates added prior to 10.3.0 have been removed. If any modules or themes have been removed you may use the respective contributed project instead.”

Fortunately, the upgrade from Drupal 8 to later versions is much easier than other migrations because later versions are backward compatible with Drupal 8. If you were to switch from Drupal 7 to 10, for instance, it would require all of your site’s data to be transferred to a brand new Drupal website. In contrast, since you’re already a Drupal 8 user, you won’t have to take as big of a leap to transition to Drupal 10.

To get your site ready for the upgrade, follow these steps:

Update your site to the latest version of Drupal 8.
Update any outdated modules and dependencies.
Update your PHP and database versions on your hosting environment.
Check if you have any deprecated code on your site and fix/remove it.

After completing these tasks, your site can be upgraded to Drupal version 10.3, and then to Drupal 11.

Even though the migration from Drupal 8 to later versions is relatively straightforward, you may still encounter roadblocks or obstacles that slow down the process. Our website professionals at Kanopi are experts in Drupal planning and development and can aid you in your migration journey.

Each of our team members has, on average, 11 years of experience in Drupal Development, and several of them are Acquia-certified. We are also a supporting partner of the Drupal Association, regularly contribute to the Drupal Project, and are one of the main organizers of BADCamp, a Drupal-focused community event.

Improving Collaboration Between Web Designers & Copywriters

If you’re a marketer, you know that working on a cohesive team is the foundation of any marketing campaign. Stellar work can’t happen if you don’t have strong collaboration and clear communication.

Still, fostering seamless collaboration between teams can be a struggle. When communication breaks down or systems don’t work properly, people become frustrated and relationships begin to fray.

As a copywriter myself, I know how crucial it is to develop a strong and stable working relationship with the web designers on my team. They are the ones who take my writing from black font on a page to a seemingly living and breathing page design. The better we work together, the better the final deliverables will be across any marketing project we tackle.

Here are four tips I’ve picked up over the years that can help improve collaboration between web designers and copywriters.

Find Ways to Automate Processes

Nobody enjoys tedious, time consuming tasks. Manual work can add stress to an already taxing marketing job. One way to create better collaboration across web designers and copywriters is through automating processes performed across the roles on a daily basis.

For instance, I’ve set up multiple automations within Formstack’s Monday board that automatically communicate project status with my web designer, Jason. When copy is done being reviewed by my editor, Jason is automatically alerted so he knows he can proceed with developing imagery and web designs.

Adding in automations like this smooths processes, eliminates time-consuming manual work, and ensures everyone is on the same page. I don’t have to worry about remembering to tell him something is ready for development, and he doesn’t have to rely on me for constant status updates. This way, we can focus our time on important conversations that propel strategy forward and help us reach big milestones.

Leave Clear Notes

It’s frustrating when someone doesn’t understand your vision. This pitfall has doomed many working relationships across the world. Whether you’re the copywriter sending copy to a designer or the designer showing a comp to a copywriter, it’s important to have clear notes available for review.

For copywriters, it’s important to provide context on how you see your words compiled on a page. Be clear on headlines, subheads, and sections. Want something to feature an image or video? Make a note. Want a blog post to be highlighted or a stat pulled out of the copy? Make a note. The clearer you can communicate your vision to the designer, the more likely they can execute correctly.

But don’t go overboard. Your designer should be able to make most of the design decisions and have full control of the design direction. Consider your notes as suggestions, not set-in-stone instructions. My comment example here is from our most recent report, The Rise of the No-Code Economy, to provide some guidance on a special section of copy.

For web designers, if something will look different between comp and final design, make that clear. If something is a working draft, be sure everyone knows this before asking for feedback. If something needs to be cut, adapted, or edited between copy and final design, make the change clear and provide the reasoning to ensure everyone understands why a change is necessary.

Get Personal

You spend a lot of time with your coworkers, even if you’re in a completely virtual environment, like Jason and I are. We are constantly slacking each other, in Zoom meetings, and commenting back and forth on drafts. If we didn’t enjoy working together, my job would suck.

One way to ensure interactions go well is by developing a personal relationship with the people you work with. This tip works for anyone, not just copywriters and designers. The more you know someone, the better you will be at interpreting their comments, actions, and reactions. Getting to know someone better helps improve communication and can even improve productivity.

Meet Before Copywriting Begins

If you’re working on a big project, like a report, it is very important for the designer and copywriter to discuss the project before copy begins. The last thing you want to do is go into a large project with the wrong expectations of what the final product will be.

When I began writing Formstack’s The New Digital (Transformation) Divide, I made sure to touch base with Jason and the rest of our digital and design team to ensure we all went into the project with the same expectations. This helps avoid bottlenecks, miscommunications, and misunderstandings further down the road.

By aligning the copywriter’s and designer’s visions before a project begins, you can set yourself up for success knowing that each party understands—and agrees upon—the final outcome.

Did you know? 50% of all big projects fail, including websites. A big contributor: stakeholder misalignment.

Communication is Key

As with almost all working relationships, the key to sustaining great collaboration between a copywriter and designer all comes down to communication. Many of the most common workplace frustrations, delays, and mishaps can be avoided by ensuring open, clear, and consistent communication. I hope the tips above help you!

Want to learn more about improving collaboration? Check out the article How to Improve Cross-Departmental Collaboration for even more tried and true tips.

Lindsay is the Content Marketing Manager at Formstack, splitting her time between creating blog content and producing Formstack’s Ripple Effect podcast. She is a graduate of the University of Missouri School of Journalism and enjoys all facets of marketing.