The Future of Drupal Theming: An Overview of Emerging Trends and Tools Editor Mon, 10/30/2023 - 09:32

Drupal started as a student project in Belgium. Initially, Dries Bytart devised a communication system between students living in dormitories. But the Drupal software and community have grown significantly over the years. For now, ten significant versions of Drupal have been released. 
In this article, we will talk about Drupal theming that makes our sites precisely how we see them. It is impossible to divide them into good and bad strictly. Some templates suit your project and those that look out of place. Drupal allows you to use both templates and customize themes individually. Developers constantly offer improvements and updates. Stay updated with emerging trends and tools to ensure you have a competitive edge in the changing landscape of Drupal themes.

Website migration is, for many people, changing to a new website. However, it’s worth understanding what this activity actually entails. It's not just switching or updating a CMS but also a process that can significantly affect the web page's performance, security, and alignment with modern standards. In this article, we’ll focus on the general approach to migration, but we’ll use Drupal as an example to provide a comprehensive perspective on the topic.

What is a website migration?

Website migration is the process of moving a website to a newer version of a CMS or another platform. In practice, this means, for example, upgrading Drupal 7, whose support is about to end, to the latest Drupal 10. It also includes changing from one system (such as WordPress or Joomla) or a less popular and no longer supported CMS to an entirely different system. 

During the migration, we consider data, functionalities, and integrations with external systems. We rewrite the website's frontend, taking advantage of the latest technical capabilities and taking care to maintain the page speed (for example, looking at the score in Page Speed Insights). From the perspective of the owner or editor of the web page, we really gain a lot, which we write about later.

Why you should migrate your website?

The migration process brings numerous benefits. It improves the website performance, increases its security, and aligns it with current programming standards. We’ll look at this process's advantages using a specific example – Drupal migration. 

Improving the website security and functionality 

Moving to a newer version of this system can significantly improve the functionality and security of the web page. We must remember that regular security updates are crucial, as they fix vulnerabilities, minimizing the risk of attacks and data loss or leakage. By choosing to migrate the website, we thus ensure protection against new threats. 

Changing the website design to a more modern one

Migration is an excellent opportunity to perform a website redesign, that is, to refresh its appearance. We can craft and apply modern design patterns at this stage and even change the entire visual concept of our web page. 

A design update not only attracts users' attention but can also improve the functionality and readability of the website, which is essential for the overall satisfaction of visitors. A refreshed layout is the most visible element to the end user, making the website no longer look outdated. 

Modification and possible archiving of data

During the migration, it’s possible to thoroughly review and modify the data. Outdated or redundant information can be archived to keep the database in order. During such a revision, we may conclude that some fields are unused, they can be merged with others, or the issue can be resolved in another way. This could include removing a separate field for an article summary or using a dictionary for tags. 

At the same time, adjustments can be made to the data, adapting it to the newer version of the CMS and Drupal modules. For example, since Drupal 8 we have had to deal with the Media module, which has changed the approach to images, documents, or videos placed on the website. 

Changing the way of data storage

Migration allows not only efficient modification or archiving but also thoughtful adjustment of data storage. Changing the system to a higher version of Drupal with all the new modules can allow you to store information optimally using content types, groups, or taxonomies. 

Examples of entities (groups), taxonomies and content types in Drupal 

Thoughtful management of entities and data allows for optimized website performance and the ability to make changes easier in the future, reducing costs over the website’s life.

Rewriting existing integrations and functionalities

When migrating a website, it’s worth re-evaluating existing integrations and features. Sometimes, at this stage, it turns out that certain elements are practically unused, and moving them is not justified. This may be, for example, a contact form that is no longer on the web page or a disabled integration with an external service whose subscription has long expired. They can be strictly housekeeping issues, such as pages whose content has been moved or deleted in the past.

At this point, we can also look for new, more efficient solutions to increase the website's functionality. We can write elements that are key to the web page’s operation more thoughtfully, thus increasing security, performance, and future extensibility with new features. 

How to perform website migration?

The process of migrating a site is relatively universal, regardless of the system. The most important thing is to think it through before creating a new look or writing the first lines of code. You should plan a migration, as it can save time in later changes. We must keep in mind that with higher versions of the system, such as Drupal 10, many modules have changed from previous ones, and some aren’t even supported anymore. 

So, we migrate the web page's content, which we need to test decently for any errors. We are keen to catch, first of all, incorrectly migrated or empty fields where data has not migrated. We deploy the website with the newly written functionalities in place of the old website, and it's done. But is it actually that simple? Yes and no. Let's look at the process in more detail.

Step 1. Planning the website migration

In the first step of migration planning, especially for Drupal 7, it’s important to determine exactly what will be moved and from where. Sometimes, it happens, for example, that the website owners no longer need old news items over 10 years old. Migration is, therefore, an opportunity to optimize the data structure and eliminate redundant information, making it easier to manage content later.

If the website uses an external integration, such as Mautic, it’s necessary to consider this in the migration process. This element can be implemented on the new website in accordance with current standards, which will positively affect security and ease of subsequent administration. 

Planning a proper list of tasks, breaking them down, prioritizing them, and indicating the relationships between them supports the development of the website. This not only facilitates effective task management but also provides clarity in the project's direction, allowing flexible responses to possible changes during the website migration.

Step 2. Preparing for website migration

The next step is to prepare for website migration, including creating a local environment and developing a suitable data structure. By creating groups, content types, or taxonomies with appropriate fields, we prepare a target environment to transfer data from the old website to the new one in an orderly manner. 

At this point, backup is also crucial. We make a backup of the previous version of the website, especially the database, because it’s from there that we will transfer the content. 

Step 3. Migrating website content

Regardless of the system, try to move the website's content even before implementing new features. This will enable us to detect early the so-called edge cases, i.e., specific situations that can disrupt the website. By following this sequence, we can address them immediately at a relatively early stage of the website's development. Thus, we minimize the number of errors before implementation. 

For Drupal, the critical aspect is to use migration modules and modify data using migration plugins. This allows you to adapt your data structure to the new version of Drupal. Migration from other systems can be more complex and requires an understanding of how the previous CMS, or rather its database, worked. 

Step 4. Testing website migration

Testing is key to verifying that all data has been migrated correctly. We prove that the data in the new database matches the previous one, which can help avoid problems down the road. After all, we don't want some articles to have any tags or authors assigned, for example.

A very important issue is the files that, after migration from the previous website, should also be available in the new one. It’s not only copying from one place to another, but also interfering with their paths. Therefore, we need to pay special attention when testing them. For example, PDF files that have a preview should be available with it, and images must have a migrated box with alternative text. There are a lot of these kinds of small elements that we need to take care of to minimize later adjustments. 

Step 5. Styling the web page

If we wish to change the design of our website during the migration, the initial styling of the website also takes place before the next step. 

This is the process by which we arrange the content on the web page, give it the right look, add the necessary animations, and so on. With this activity, we try to bring the website as close as possible to the design prepared earlier, keeping in mind its responsiveness. 

Example of a website with and without styling, source: Droopler Demo

The order here may vary depending on the complexity of the web page, but usually this process is already done when we have the data ready on the website. This saves us time because of the lack of need to add temporary or test content. This way, we can see how the new website, already with migrated data, looks in a completely new "outfit".

Step 6. Migrating the functionalities

The next step will be to move the more complex business logic that exists on the previous website. 

In the case of Drupal, at this stage, we’ll encounter challenges due to the differences between PHP versions, but it's also a great opportunity to refresh the code. In Drupal 10 using PHP 8, we write object-oriented code that is much more readable and open to new functionality. So we can't copy the old code to the new website in most cases, because it won't work. We can, however, model the old code, adapt it to the modern approach, and, on occasion, modify it to meet the additional business logic that was approved at the planning stage.

Functionality migration is also an ideal time to perform code refactoring. We can then optimize it, and refresh it to make it more readable. Often, during this process, we remove redundant parts of the code and use tools that take care of its quality from the beginning.

Many modules used on the old version of the website may no longer be available. Sometimes, however, it turns out that we don't need to write them on our own but just look for a similar one that performs similar tasks. This can save a lot of time and provide new features to the website. 

Step 7. Deploying the website

The final stage is the so-called deployment, which is implementing the website on the new platform. We test whether the functionalities work according to expectations and our assumptions. Here, we also have a reference point in the form of the previous website, and the test scenarios may look similar. 

We can take care of the separation of configurations so that after deployment, all API access keys are correct and all integrations are active. In addition, we activate file minification, enhancing website performance by reducing file size. This will make the website load faster, improving SEO performance. 

Migrating a Drupal website 

Website migration is a complex process of moving data, functionalities, and integrations, affecting performance, security, and alignment with modern standards. These include using the latest versions of programming languages and frameworks or writing object-oriented, secure code. Such code refreshes minimize the risk of errors or possible attacks. 

We've gone through this complex topic step by step to give you a better idea of how to prepare for the migration and what to expect during the process. Every phase of it – from planning to implementation – is necessary and incredibly important in creating a properly functioning website. The process looks quite similar regardless of the CMS. 

If you need support in transferring the web page, we can help. In carrying out such implementations, we have gained experience, what to pay attention to, and how to approach this topic. We’ll be happy to share our knowledge, and plan and carry out the migration of your Drupal website. 

Enhancing Application Stability, Performance, and Security: Best Practices

A round-up from our group discussion at DrupalCon Lille

Pavel Bulat Wed, 10/25/2023 - 12:20

Drupal introduces 'Innovation Ideas,' an open space for community-driven innovation, fostering creativity within the community.

The Drupal Marketing Committee will lead the Drupal Association's goals of harmonizing our marketing efforts into a unified, impactful strategy. Despite the challenges of tailoring messages for diverse user segments, there’s an amazing opportunity to showcase Drupal’s unique capabilities.

DrupalSouth Community Day On Thursday 23 November 2023, DrupalSouth is holding a Community Day in Canberra . Although it’s the day after the GovCMS Mega Meetup , this is a community event that focuses on Drupal in both the private and public sector.  The day starts at 9.30am and finishes at 4.30pm. It includes: Welcome/intro Session 1 tracks Lunch Session 2  tracks Networking social event View the schedule Register for the DrupalSouth Community Day  Salsa at DrupalSouth Community Day Salsa is involved in the day as sponsors , attendees and presenters . Salsa joins other Community Day sponsors, Acquia, Annex, Ironstar, Morpht, Pragma and PreviousNext.  Presenting CivicTheme Salsa’s Akhil Bhandari and Alex Skrypynk will be presenting on the day, talking about CivicTheme.

It's exciting to see some recent momentum into adopting DDEV as the official local development environment for Drupal, supported by core and contrib community leaders.https://www.drupal.org/project/ideas/issues/2965681#comment-15278862

This year's DrupalCon Europe was hosted between the 17th and 20th of October, in the French city of Lille. My DrupalCon adventure began early on Monday morning when Chris Maiden picked me up to drive to France via the EuroStar train. We arrived in Lille a little after 4pm, which was really good going for a nearly 400+ mile trip.

DrupalCon Lillie was a first for me as I was there representing a company and so spent some time on the conference floor talking about services. Code Enigma, who I work for full time, had sponsored the event and organised a booth (well, a table). The booth wasn't so that we could sell anything, it was more more because we wanted to support Drupal and the sponsorship came with a booth. Driving to Lille allowed us to fill the car with 200 coffee cups, which we gave out at the event.

Once we had found a parking spot we wondered through Lillie, found our hotel, and met up with the rest of the Code Enigma group for a dinner of "Le Welsh"; a local favourite dish.

Tuesday

The first session I managed to attend on Tuesday was the Driesnote, where Drupal founder, Dries Buytaert, talked us through some of the headline initiatives being worked on in Drupal at the moment and why these are important. The presentation started with a very highly produced story, with some fantastic artwork depicting the "Drupal fairy" and the village of Drupal, as well as some surrounding villages like Rectopia and Contentville. This was an interesting way of showing how Drupal is different from other major players in the content management sphere in the form of an analogy.

Read more

As artificial intelligence (AI) is steadily seeping into nearly every aspect of modern life, government website stakeholders are sorting through what’s new and next to explore possibilities, embrace advantages, and avoid pitfalls. 

The release of Drupal 10—and the subsequent minor release of 10.1—has brought an impressive array of new features and improvements. If you attended our EvolveDrupal Summit in Toronto, you had the opportunity to walk through the best new features with Martin Anderson-Clutz, Senior Solutions Engineer at Acquia. 

Missed the summit? No worries! Use this article to catch up on key points from the presentation, or watch the recording below. 

 

//--> //--> //-->

 

Read on to explore eight awesome reasons why you should consider upgrading to Drupal 10.

1. Speedy Performance 

Sites that load quickly usually see more traffic and better conversion rates. Drupal consistently outperforms its competitors when it comes to speed, and version 10.1 brings improvements that make it faster than ever. 

Core Web Vitals (CWV) are a reliable measure of a performance—they consist of three metrics that measure how long a site visitor has to wait until they can see a page and begin to make use of it. From January to July 2023, Drupal achieved an impressive CWV score of 51.4%, far outstripping other open-source CMS rivals like Joomla (41.7%) and WordPress (32.5%). 

Drupal 10.1 improvements that are contributing to its speediness include:

• Lazy loading. While lazy loading has been a part of Drupal since version 9, Drupal 10.1 takes it to the next level. It now also works for responsive images and OEmbed content.
• Big Pipe. Building on the Big Pipe functionality introduced in Drupal 8, Drupal 10.1 now allows custom placeholder content. This means reduced layout shifts, resulting in a smoother user experience. With placeholders, the layout remains stable as Big Pipe loads in content.
• On-the-fly JS minification. Minimizing code and markup through on-the-fly JS minification is another technique employed by Drupal 10.1. This optimization dramatically improves site speed, leading to a better user experience and lower bandwidth usage.

2. Global-Readiness

Drupal's advanced multilingual support has long been a standout feature, but the community hasn’t been resting on its laurels. There are several improvements that mean:

• It’s easier than ever to manage translations and translation workflows
• You can add and manage custom languages within Drupal
• Language detection is more accurate as Drupal now uses browser settings to determine a user's preferred language, rather than relying on their location

3. Modern Functionality 

Drupal has dropped support for Internet Explorer, enabling it to support much more modern development techniques. This has resulting in some fantastic initiatives and features such as:

• Olivero front-end theme. The new default theme in Drupal 10, Olivero is designed with accessibility in mind. It embraces modern CSS techniques and atomic design principles, setting a high standard for front-end theming.
• Claro admin theme. Claro is not just a new UI for admin tasks; it's a complete design system with accessibility in focus. It's decoupled from Drupal, allowing for customization to meet specific admin requirements.
• Views responsive grids. Drupal 10.1 introduces a new format for views using modern CSS. This neat feature has gained recognition beyond the Drupal community, even getting featured by CSS Tricks.
• Single Directory Components (SDCs). SDCs make it easier for front-end developers to work with Drupal by grouping related files together. This simplifies customization and enhances the developer experience. SDCs are currently available as an experimental module in Drupal 10.1, and work is ongoing to convert regular components to SDCs.

EvolveDrupal Toronto united 180+ professionals from the tech and design communities.

 

4. Intuitive Design

Drupal is continuously working to make its interfaces more intuitive for users. For example, the interface for reusing an existing field now provides more information, including field type and summaries, making it easier to select the right field for your content. The bulk content operations interface has also undergone a thorough overhaul. 

Meanwhile, the upcoming release of Drupal 10.2 promises a more visually appealing interface for creating new fields that will be easier and less intimidating for Drupal newcomers.

5. Built for Inclusivity

Drupal continues to deliver on its commitment to improving web accessibility and supporting customized digital experiences for people with disabilities. Drupal 10 introduces:

• Nightwatch accessibility tests. This helps the Drupal accessibility team to identify and address potential issues in core.
• Accessible default themes. Olivero and Claro offer out-of-the-box WCAG Level AA compliance. 
• Support for assistive devices. The new default themes support HTML5 tags to improve context for assistive devices such as screen readers. 

6. Easy Content Creation

One of the biggest improvements to the Drupal content editing experience is the adoption of CKEditor 5. CKEditor 5 is a complete rewrite of its predecessor, making it far more extensible and compatible with modern JS frameworks. It also offers premium features such as real-time collaboration tools, which give users access to a Google Docs-like editing experience within the Drupal admin UI. 

CKEditor 5 also introduces autoformats, allowing users to apply formatting using only their keyboard. It supports markdown-like shortcodes for things like bolding or italicizing text and creating headings and bullet lists. For example, typing two asterisks either side of text (**like this**) will bold it.

Media integration has also been revamped in CKEditor 5. There used to be a modal overlay for doing things like setting image alignment or adding a caption, which was problematic as it obscured the content you were working on. There’s now a ribbon overlay instead, giving content creators more context and a much easier experience. 

Want to enhance your content editing functionality? Read how to port a CKEditor 5 plugin to Drupal 10 or explore our 5 favourite modules for extending CKEditor 5.

7. Advanced Security

Drupal has a reputation for being secure. It’s trusted by many governments, banks, insurance providers, and other organizations that deal with sensitive data and mission-critical projects. 

Drupal has a dedicated security team with a track record of 15+ years that regularly releases security updates and patches. Running security updates just got easier thanks to the Automatic Updates module, which allows you to update Drupal core simply by clicking a few buttons. It also helps with database updates and provides APIs for custom updates. It’s currently available as a contributed module, but work is underway to adopt it in core.

8. Continuous Innovation

With minor releases every 6 months and major releases every two years or so, Drupal continuously drives innovation within its community and ensures compatibility with the latest technologies (Drupal 10 is compatible with PHP 8.1 and Symfony 6.2). There’s also a new initiative to streamline Drupal core by removing less-used components, making it faster and more efficient for developers. 

Drupal’s open source community of 1.4 million members—of which more than a hundred thousand are active contributors—have created over 50,000 free modules and 3,000 free themes. This gives Drupal users tremendous power to customize and extend their websites.  

What’s more, it’s easier than ever to select the right module for you thanks to Project Browser—a new module that allows you to browse the repository of contributions from within the Drupal UI. 

In his presentation, Martin highlighted a few exciting new modules:

• Event Condition Action module – enables site builders to create custom workflows without having to write code.
• Same Page Preview – lets you see in real-time what your content will look like by displaying a preview on the edit page itself.
• OpenAI initiative – a suite of modules and an API foundation for AI integration in Drupal. This will allow you to use tools such as ChatGPT within the Drupal UI for content creation, analysis, and more. 

Get Expert Help With Your Drupal 10 Upgrade

If this article got you excited about adopting Drupal 10, why not start a conversation with our Drupal migration experts? 

We can help you plan and execute a smooth transition whether you’re switching to Drupal, upgrading from Drupal 9, or taking action due to Drupal 7’s end of life.  

 

//--> //--> //-->

+ more awesome articles by Evolving Web