11.10.2024

Toni Nissinen

DrupalCon Barcelona 2024: Tech, Community, and Inspiration

DrupalCon Barcelona 2024, great location, great weather, great tech and even greater community. Thanks to everyone that I had the honor of speaking with!

This was my first DrupalCon, though not my first Drupal event. Just like at the camps, what stood out to me most was the community – caring, supportive, and welcoming. Seeing a familiar face first thing in the morning as I picked up my badge immediately made me feel at home.

Of course, comparing DrupalCon to local Drupal Camps and meetups highlights some differences. DrupalCon is way bigger, with many more talks and BoF sessions, often diving deeper into technical and theoretical aspects. There were sessions on debugging techniques, accessibility (which, by the way, is top-notch), and other specialized Drupal topics.

The long conference days can be exhausting, and it’s impossible to attend every session you’d like to, but luckily, most of them are recorded and available on YouTube later. It’s such a great way to share knowledge across the community. I love that anyone who builds something innovative or learns something new can share it for the benefit of all.

I was especially excited to see some users (content creators, project owners, etc.) participating in DrupalCon. It’s fantastic that they could gather new ideas and insights on how to advance their projects. This, of course, might require some understanding of the technical aspects of Drupal, but I highly encourage more people using Drupal in their projects to attend future DrupalCons. There is so much value in being part of this community.

Read also about my visit to Drupal Mountain Camp

More about DrupalCon:

DrupalCon Barcelona: Community Reunions, Business Insights, and an Unforgettable Hike

DrupalCon Barcelona: Reflections on Community Evolution and Business Insights

DrupalCon Barcelona: Not the city but the people

Photo: Paul Johnson, licensed as Attribution-NoDerivs. The original image was edited by narrowing it.

Author

Toni Nissinen

Drupal Developer

10.10.2024

Arto Iijalainen

DrupalCon Barcelona 2024: Community Reunions, Business Insights, and an Unforgettable Hike

This was the second time I attended DrupalCon in Barcelona. Back in 2015, I traveled there earlier with my wife (girlfriend at the time), explored the city and got engaged!

On the morning of the first conference day, my wife-to-be flew back home, and the conference started. Whatever agenda I had prepared for the event was pretty much washed away.

This time, my wife decided to stay home with the kids and I was able to fully concentrate on the conference. My agenda was to understand what Starshot / Drupal CMS will bring to the table and how far are we. And, of course, to reconnect with old friends and make new ones within the Drupal community.

I am really thrilled with the progress of Drupal CMS! The first release candidate will be launched on December 11th at the time of DrupalCon Singapore and the actual 1.0 release will happen on 15th of January 2025. The only thing that we really need to wait for is the Experience Builder, which will be released with the Drupal CMS 2.0 in late 2025. The Experience Builder will be a game changer for the content editors as it enables them to easily compose the pages they are building with the components tied to the organization’s design system.

DrupalCon isn’t just about the conference sessions. As an owner and board member, I always find it interesting to attend the CEO/business dinner and hear about the latest market trends in Europe and the US.

The cherry on top of the entire trip was the DrupalHike, where we climbed to the summit of Sant Llorenc del Munt! Our guide and fellow Drupalist, Fred, led us along lesser-traveled paths with stunning views. The sense of adventure still lingers with me.

Mikko and Arto on the top of the Sant Llorenc del Munt

Author

Arto Iijalainen

Production Director

20.09.2024

Kirsi Vatanen

How to tackle the “monsters” lurking in public sector websites

As a website administrator, you face an increasingly demanding job. It’s not enough to create engaging content, master SEO, and keep your organization’s information up-to-date. On top of that, you also need to comply with the requirements of the Information Management Act, the Digital Services Act, and data protection laws. These “monsters” often end up lurking under the bed because you’re unsure where to even begin.

In this blog, I’ll briefly outline these “monsters” and provide a few tips to help you get started. These guidelines won’t cover everything or guarantee perfection, but a little is better than nothing.

Accessibility

Website accessibility means that as many people as possible, regardless of their abilities, can easily use the service. This includes technically error-free implementation, a clear and understandable user interface, and content that is easy to comprehend.

At a minimum, check the following:

Visit a random page from your site’s footer menu. Imagine a user lands on this page via Google. Can they understand where they are within the site and what topic the page relates to?
Ask a colleague to find a guide or page unrelated to their usual tasks. Does the menu make sense? Can they find the page in multiple ways (menu, sitemap, internal search)?
Can you navigate your site using only the keyboard (tab, space, and enter keys will be your friends here)?
Test your site on a mobile device.
Does your site have an accessibility statement?

Additional tips:

Use Google’s PageSpeed Insights tool for more guidance on improving accessibility, along with other useful information.
Explore the accessibility guides from Papunet and AVI’s Saavutettavuusvaatimukset.fi website (both in Finnish).

Data security and privacy

Data security is about ensuring the availability, integrity, and confidentiality of the service. Data privacy, on the other hand, refers to using personal data for its intended purposes and minimizing the amount of collected data.

Improving both data security and privacy starts with identifying what data is used and what risks are associated with it, followed by preparing for potential issues.

First steps to improve data security:

Gather information:
- What non-public data is stored in your service? For example, feedback, inquiries, or data behind login systems.
- List all the services connected to your platform, such as the content management system, analytics, chatbot, server capacity, domain management, etc.
- Collect a list of companies and contact information related to the services mentioned above.
- Gather a list of administrators and user accounts for the services.
Risk assessment:
- Do you know all the entities involved with your platform? Do you know who can modify the content?
- Would data leaks cause any harm?
- How long can the service be down without significant impact?
- What if all data in the service is completely or partially lost?
Get the basics right:
- Are user accounts only given to the right people, with appropriate access permissions?
- Do you know who logged into the system and when?
- Can you view the content’s version history?
- Do you know where backups are stored, and have you practiced restoring them?
- Have security updates been installed for your software? Who is responsible for this?
- How do you receive information about security threats?
Prepare for the unexpected:
- What steps should be taken if the service is down for an extended period?
- How can you restore backups?
- What if the service needs an emergency shutdown? For example, if it starts distributing viruses.
- How could you switch to an alternative service if things go wrong?

Checklist for improving data privacy:

Make sure your privacy policy is easily accessible, and that you understand its contents.
Ensure you aren’t collecting more data than specified in the privacy policy.
Keep personal data up-to-date, and don’t retain unnecessary information longer than necessary.
Are you transferring data outside the EU/EEA?
- If so, ensure this is mentioned in your policies, and that transfer mechanisms are covered in agreements.
- If not, avoid installing tools like Facebook Pixel or Google Analytics on your site.
If you use cookies that are not strictly necessary for the technical functionality of the service, ensure your cookie policy is on the website, and that it’s as easy to reject cookies as it is to accept them.

Remember, achieving perfection is nearly impossible. The key is to make continuous improvements step by step, focusing on what is most relevant and practical.

Would you like to hear more? Get in touch using the form, and I will get back to you shortly.

Let’s talk

Fill in the form and we’ll get back to you shortly.
Name*
First
Email*
Company
Phone
Message
I accept the use of my personal data in accordance with Druid’s privacy statement.
Comments
This field is for validation purposes and should be left unchanged.

Author

Kirsi Vatanen

Marketing Manager

05.09.2024

Mikko Hämäläinen

Website personalization in practice

One of the key challenges for online services is the ability to provide content and services to diverse user groups while maintaining discoverability. A company’s website serves many different user groups, such as prospective and current customers, job seekers, and investors. Each of these groups has its own specific needs when it comes to content.

In e-commerce, personalization has long been a standard, at least in the form of product recommendations. However, in other online services, personalization is often conspicuously absent, particularly in the public sector, which is increasingly offering transactional services through its websites. Megamenus have been an impersonal response to this challenge, one that could be addressed more intuitively by genuinely considering the user’s needs.

In this blog, I’ll show how a marketer can implement personalization in practice by leveraging the Drupal content management system and Mautic marketing automation platform—without needing to dive deep into the world of IT.

Target communication to different customer groups using automation

A company’s website is connected to its marketing automation system, and they have launched a new product serving two distinct customer groups: private sector businesses and public sector organizations. The marketing team has created a landing page in the content management system that provides a general overview of the product. However, they want to emphasize features that are particularly relevant to each customer group.

The marketing automation system segments visitors based on the content they have previously browsed, categorizing them as either private sector or public sector customers. Personalization is applied to all site visitors, regardless of whether they are identified users or anonymous visitors.

Putting plans into action

Let’s start by creating a dynamic content section tailored to private sector customers in the marketing automation system. We’ll create a list of personalization features that are relevant to private sector customers, illustrate it, and add a call-to-action link at the end.

This content section will be given the short name “customer-experience-private” (asiakaskokemus-yksityinen).

Next, we define the conditions under which the content will be displayed on the website. It’s sufficient for us that the user belongs to the customer segment “private sector customer” (Yksityisen sektorin asiakas).

After that, we move to the content management system to edit the previously created landing page. The dynamic content is embedded between the sections titled “Kohti parempaa asiakaskokemusta” and “Personoinnin rakentaminen”.

Dynamic content from Mautic can be easily embedded into any content management system using HTML code. The necessary line of code can be copied and modified to include the correct dynamic content shortcode.

If no dynamic content is available to display, the   automatically added by the editor will appear as a blank space on the page. However, this can be replaced with default text instead.

Testing personalization

Testing personalization is straightforward. Start by visiting the site in incognito mode, which keeps the user anonymous. The finalized landing page will look like this when the user has not been identified as a private sector customer.

For testing purposes, find the anonymous user in Mautic and manually add him to the “Private Sector Customer” (Yksityisen sektorin asiakas) segment. Mautic can track both identified and unidentified users; the latter are users who do not yet have contact information or marketing consent. Personalization is one of the few ways to enhance the customer experience for these anonymous visitors.

Normally, segmentation would be automated by building a campaign within the marketing automation system. The customer segment could be determined based on the visitor’s browsing history, such as their interest in specific customer case studies or other pages.

However, for this test, we’ll manually add the user to the segment.

The test user refreshes the landing page in his browser, and Mautic loads the personalized content onto the page. This means that the list of personalization features relevant to private sector customers—created with ChatGPT—appears in the desired location on the site.

Simple Yet Complex

This simple example demonstrates how website content can be tailored and targeted to a specific audience. The same outcome can be achieved in various ways, such as by creating separate landing pages for each segment and directing visitors to the appropriate pages via marketing campaigns. When personalization is integrated into marketing automation, it allows for better control over the customer experience for visitors arriving organically on the site.

Segments and personalized content can be created freely, making it possible to implement more complex scenarios as needed. Below is a view of three different versions of the same landing page: one for non-segmented visitors and two for segmented user groups.

a view for no personalizationed page, personalization for private and public sector.

I implemented this example using the standard features of Drupal and Mautic in Druid’s demo environment. With a few small adjustments, the content editing experience can be further improved. For instance, dynamic content can be embedded by selecting the appropriate content block directly from the drop-down menu in Drupal’s editor.

If this topic piques your interest or resonates with your everyday needs, feel free to reach out. I’d be happy to give you a more detailed demonstration of Mautic’s functionalities.

Let’s talk

Fill in the form and we’ll get back to you shortly.
Name*
First
Email*
Company
Phone
Message
I accept the use of my personal data in accordance with Druid’s privacy statement.
Phone
This field is for validation purposes and should be left unchanged.

Author

Mikko Hämäläinen

CEO

Mikko is the CEO of Druid with more than 20 years of experience in content management and customer experience development. He helps marketing and business teams harness the potential of technology, and his true passion lies in digital customer experience management systems

20.08.2024

Mikko Hämäläinen

Streamline your digital marketing path: Tools, trends, and customer experience

In 2024, the life of a marketing professional is a tale of two extremes: on one side, there’s an abundance of data-driven marketing tools and information available, but on the other, the scales are weighed down by tightening legislation, increasingly complex technologies, and consumers’ (justified) concerns about privacy.

Let’s start with the customers. Today’s consumers are more independent, idealistic, and demanding than ever before. Companies must approach customers more personally and communicate on topics that matter to them, such as ethics, sustainability, and environmental responsibility. Moreover, focusing on the Zero Moment of Truth —the stage when consumers actively seek information —has become a marketing necessity.

Customer experience has become as important as the product itself and the price point. According to a Salesforce study, 80% of customers valued the customer experience as much as the products and services offered. Personalization plays a critical role in managing customer experience. Freshworks’ Deconstructing Delight study reveals that 63% of consumers expect brands to communicate with them in a personalized, value-based manner. During the pandemic, 53% of consumers switched brands due to poor communication.

If a consumer’s purchase journey spans three to seven channels, maintaining relevant communication becomes a daunting task—especially if those channels are disconnected and there isn’t a comprehensive view of the customer. The physical dimension, like in-store experiences and phone services, should also be considered when crafting an excellent customer experience. Information must be collected from all channels and disseminated across all touchpoints.

Hyper-Personalization: The AI-powered evolution of traditional personalization

While traditional personalization relies on historical data, hyper-personalization is reactive and real-time. It involves collecting information on customer actions across channels, analyzing it, and delivering content that meets their current needs.

Since customers are known to seamlessly switch between channels—browsing on their mobile in-store or starting a purchase on a computer and completing it on a bus ride—we need to be able to recognize our service users and link disparate sessions to the same customer profile. This information is used in both marketing and sales contexts. Twilio’s State of Personalization 2023 report highlights that 53% of consumers become repeat customers after a personalized experience.

Many consumers view persistent marketing communication as one of the great nuisances of the modern world, and AI as the final nail in the coffin of privacy. However, research repeatedly shows that well-executed data collection is often met with approval. Transparency, honesty, and responsible use of data soften consumer concerns. While only 51% of consumers (according to Twilio) trust brands to handle their data responsibly, 77% (according to Freshworks) are willing to share their data for a better customer experience.

Beyond consumer attitudes, legal frameworks and browser manufacturers have also thrown a wrench into the machinery of personalization. Who still remembers GDPR and its impact on marketing? Now, with Chrome phasing out support for third-party cookies and the waning influence of social media, it’s high time to focus on systematically gathering your own marketing data.

Here are my tips for tackling this challenge:

Treat different channels as a unified whole. Consider how your customer’s journey crosses from the website to the mobile app and then to the physical store. What should ideally happen across these channels?
Centralize data collection so it’s accessible across all channels and units within your organization. Customer Data Platforms (CDPs) are well-suited for this, and many come as user-friendly applications.
Choose the right communication solutions, such as content management and marketing automation systems, and ensure their longevity, customization, and integration capabilities to avoid creating new silos.

A Unified customer experience across all channels

A system that delivers a coherent, multichannel customer experience is known as a Digital Experience Platform (DXP). Broadly speaking, this system integrates content management, marketing automation, CRM systems, and user data management under one umbrella. But it’s much more than that.

The goal of such a system is to create a seamless customer experience while providing the company with a holistic view of the customer through a single interface. It eliminates silos within the organization, allowing all units—from marketing to customer service—to better understand the customer’s needs and goals.

In terms of implementation, the system can be built modularly, leveraging components that the company already has in place—content management, marketing automation, analytics, and CRM. Customer data is brought together in a Customer Data Platform, where it can be further refined using AI.

A DXP can also be connected to other business systems as needed, such as e-commerce, product management, or ERP systems.

By tailoring the platform instead of opting for a ready-made (and often expensive) solution, you can build a DXP flexibly and expand it as your business evolves. This modular approach is cost-effective and allows for the replacement of individual components if they fall behind the curve.

Implementing such a system yourself enables vendor independence and ensures compliance with data protection laws. This is particularly beneficial in sensitive sectors (like healthcare, banking, and the public sector), where using traditional marketing stacks can be challenging due to privacy concerns.

I don’t believe every company should rush into building their own systems, but the facts are undeniable: in the future, competition for consumers will be tougher, the share of digital commerce will grow, and differentiation will become even more critical. Technology has advanced to meet these challenges, but it’s up to organizations to take the reins and start offering better customer experiences.

I discuss this topic in Finnish in the MarkkinointiRadio episode Customers Deserve Personalization. Listen to the podcast on Spotify or SoundCloud.

Want to learn more? Get in touch!

Author

Mikko Hämäläinen

CEO

31.07.2024

Kirsi Vatanen

How to create an outstanding user experience on your website

Why does your company’s website exist? The question might sound trivial at first, as it’s clear in today’s world that if a business isn’t online, it might as well not exist. Consumers are online, and online interactions are only increasing. But is your web service truly customer-centric? Does it serve your customers more than it serves your business?

Most companies believe they offer a good customer experience, but rarely is the perspective genuinely customer-focused.

If you want your site to be more than just a mundane business card with basic info, promotional talk, and contact details, it must deliver value to your customers. And to provide value, you need to understand what your target audience values and needs.

From the company’s perspective, a good web service reaches the right people, and visitors find what they’re looking for and perform the desired actions.

From the visitor’s perspective, however, it’s more emotional: a good web service not only provides value but also feels pleasant and effortless to use. If it doesn’t, the customer is easily lost.

So how is a good user experience created online? These five steps will take you a long way.

1. Involve the users in the designing process

Too often, user needs are overlooked when building web services. It’s essential to utilize user testing and surveys during the design process. This ensures that the information is presented to users in the way they expect to receive it.

2. Ensure good usability

Users appreciate quick and effortless transactions. At its best, a web service is so easy to use that navigation is intuitive.

The service’s functionalities are clarified with visual elements, and users are gently but clearly guided along the path towards the desired action.

3. Provide truly useful content

It’s important to consider the entire customer journey rather than just a single purchase event. How can you help the visitor when they are just beginning to look for a solution to their problem? How can you serve the customer after the purchase? How can you encourage the customer to return?

Forget about your product and focus on solving the problems users face at different stages of their journey. Meaningful content that engages the customer is key here, whether it’s a thought-provoking blog post, guide, video, discussion forum, or even a recipe bank.

4. Make an impact with visuality

The appearance of the site should reflect your company’s message. A significant part of the first impression is formed based on the visual style of the site. The visual style is one of the most important tools a company has to convince the customer and build trust.

5. Invest in scalability

As your business grows, the user experience of the web service must scale smoothly with it. For the user, it’s important that the service operates consistently and that they don’t have to learn new things as the system expands.

A good user experience is a significant competitive advantage, and its importance for business success is constantly growing. It’s about serving customers and creating customer satisfaction.

Your website should be seen as a tool for building and maintaining customer relationships. At its best, your service not only supports your business but becomes a profitable business model in itself, delighting customers—so much so that they keep coming back and recommend it to others.

If you want to improve your website or have questions about its user experience, feel free to get in touch.

The blog post was originally published in 2017.

Author

Kirsi Vatanen

Marketing Manager

15.05.2024

Simo Hellsten

Fix accessibility problems at the (open) source

Accessibility is an important topic for people responsible for the profits and expenses of the web world – somewhat dependent on the nature of the actor. A lot of web commerce sites would do well welcoming the money from those clients who benefit from improved accessibility, while the public sector, that has no direct income, is bound by the law to provide accessible services. Faced with ever-tightening budget constraints, decision-makers may wonder about the most effective ways to improve accessibility. The easy answer is of course – have someone else do it, and for free.

The content of the internet today consists of a multitude of services, platforms and frameworks. While there are several strictly commercial companies with successful products, the majority of the internet we see today has its base on open source software. About two thirds of all the websites are built on open source software content management systems (CMS). The overwhelmingly biggest player in the field is WordPress, while Drupal is a strong second for large and complex sites.

Open source code is free to distribute and modify within the limits of it’s license. This has usually resulted in the software being developed and maintained by online communities. And the communities take the accessibility of their products seriously.

In the recent past I myself have spoken at both WordPress and Drupal developer community events and Drupal is a CMS where I contribute to accessibility and usability regularly. At Drupal’s chat forum the accessibility channel has 1560 participants ranging from developers interested in accessibility to hard-core accessibility professionals – some of whom are currently also working on the next generation of the international web content accessibility guidelines, WCAG 3. Drupal has also a monthly live online meeting on accessibility where one can present issues or ask questions. This is one of the ways to share accessibility knowledge in the community.

A typical website, depending on the complexity, has a development team of just a few people. While a lot of developers today have some level of accessibility skills, not all projects have an actual accessibility specialist in their team. This is where the community shows its power. Accessibility is always easier when done right from the beginning, instead of fixing afterwards based on testing the otherwise ready product. When the CMS of choice has gone through accessibility testing before being released as an installable distribution. A lot of the work has already been done by the community. And if (or more likely when) new issues arise during the individual site’s development, the community is available for advice on best practices and fixing newly found issues.

The community will help you to fix accessibility, but it is a two way road. When working on a project, every once in a while you come up with big or small accessibility issues that can be fixed at the source. These can be for example administration theme issues or maybe even some core JavaScript. When you or your team fix such an issue on your production site, make sure to give your code back to the CMS project core – or if the finding was about a contributed open source module to its source code. This way the effect of your finding will have a much bigger impact all over the Internet.

Just this spring my team, in which we develop and maintain a small number of university services, two of which use Drupal 10, identified three small accessibility issues that were part of the Drupal core. As we fixed the accessibility for our sites I made merge requests to Drupal core. This way we not only contributed to Drupal development but also got additional review for the code and even some advice on how to best implement the solutions proposed by our team’s web accessibility specialist in the Drupal core context. I even learned how to write my first Nightwatch.js test for the feature – something I probably wouldn’t have ended up doing if we had only fixed the issue on our own projects.

Now that our three small accessibility fixes have been merged to Drupal core, by the time sites have updated to the latest bug fix releases, we have contributed to one in eight enterprise web sites around the world. In small steps, we can make the world a better place. This is open source at its best.

Simo is member of Drupal UX team and following accessibility issues. He is also member of W3C Cognitive Accessibility Community Group, W3C Nordic Accessibility Group and IAAP.

Author

Simo Hellsten

Full Stack Developer

17.04.2024

Toni Nissinen

Mountain Highs: My unforgettable experience at Mountain Camp Davos

This year, I had the fantastic opportunity to attend Mountain Camp in Davos, Switzerland. It marked several firsts for me: my first Drupal Camp outside Finland, my first visit to Switzerland, and my first work-related conference trip. I’m excited to share my experiences with you in this blog post.

The experience overall was just awesome! The Drupal community is so welcoming and supportive. Immediately I felt welcomed to the community and didn’t hesitate to be myself and ask questions. We went skiing, some of us on multiple days, had dinner together and a couple of drinks along the way. Chill atmosphere all the way for the whole week.

Group photo of Mountain Camp attendees. Photo Patrick Itten.

I met many wonderful and inspiring people around the world. I couldn’t be happier to meet all of you, a special shout-out to those who were there for the pre-event days! It was so exciting to hear all the stories about how people do their work and how they participate with both the global and local Drupal communities. Even though there are many companies doing similar things with Drupal, we should not fear collaborating with each other over the companies and sharing knowledge with each other. Something you have been struggling with recently could be a piece of cake for someone else and vice versa. This is the essence of community: helping each other succeed. What we contribute benefits not just ourselves but also others within the community.

The event was packed full of useful information and the session topics, with sessions covering a wide range of topics from Drupal security practices to card games about hardware and software. Some topics were about how we could develop a software solution with a customer and some were about developing a smart watch application. The variety of topics was astonishing as I thought that all the topics will be strictly Drupal, especially the nerdy code stuff, though there were also those kinds of topics. I wish I could participate in every session as there were so many interesting and inspiring speakers and topics.

Toni Nissinen etualalla parvekkeella. Taustalla näky yAlpit

I made numerous global contacts, and I feel these connections will extend beyond simple LinkedIn additions. They are fellow professionals I can reach out to for advice and support, which I value immensely. I look forward to meeting many of them again at future events and hope to connect with new people.

The sessions in Drupal Camp were really interesting and some of the topics were not that technical Drupal development topics (the nerdy code stuff) so in addition to developers and people working around Drupal, people who use Drupal based solutions and who are interested in maybe making a switch to using Drupal can get invaluable information. In general if you work in a team developing a software solution, even if it’s not Drupal, you might find something useful in these kinds of events.

I highly recommend participating in Drupal Camps and Cons in general. The next opportunity to join is at DrupalCamp Helsinki + Baltics on April 26th! Be sure to check the website for schedule and registration, by the way it’s FREE!

I’ll be there, too and if you have any questions, or if you just want to chat, please feel free to say hi!

Photos: Toni Nissinen and Patrick Itten.

Author

Toni Nissinen

Drupal Developer

29.02.2024

Tuukka Turu

Building Blocks of Modern Web Development – Web Components

The rapid pace of web development demands continuous innovation and efficiency. Developers are actively seeking new ways to streamline their workflow and enhance user experience. A significant step forward has been the emergence of web components. These compact and versatile elements offer developers a fresh approach to building web applications and a powerful toolkit for creating modular and maintainable user interfaces.

What are web components?

At their core, web components are a set of standardized technologies that enable developers to define their own HTML elements. Comprising three main technologies – Custom Elements, Shadow DOM, and HTML Templates – web components allow for the creation of encapsulated, reusable components that can be seamlessly integrated into almost any web application.

How are web components created?

At its simplest, custom elements can be created with Vanilla JavaScript. However, this is not the most efficient or appealing way to create components. Fortunately, there are libraries available that enable an efficient and user-friendly way to create components.

Lit.dev, supported by Google, is gaining popularity and offers an excellent starting point for developing your own components. StencilJS, developed by the Ionic organization, is another library for web component development.

Where can web components be used?

Web components can be used in many different contexts, from simple websites to complex single-page applications (SPAs). They are particularly useful in situations where modular, reusable elements are needed across different parts of an application or when building component libraries for widespread use.

Web components and design systems

Design systems have gained popularity among larger organizations, where the need for a consistent visual style across multiple services is important. Web components offer an ideal tool for their implementation.

Design systems are a collection of defined components, styles, and guidelines that enable a consistent appearance and behavior across all parts of an application.

Web components fit naturally into design systems, offering clear, modular, and easily reusable building blocks that support the correct visual style and, most importantly, are functional and accessible elements. In this way, they promote consistency and efficient design implementation in different use cases. Additionally, the use of web components allows for effortless updating and maintenance of components, making design systems more dynamic and flexible.

Why use web components?

There are several compelling reasons to adopt web components in modern web development:

Reusability: Web components enable the creation of reusable elements, reducing unnecessary repetition and promoting code efficiency.
Modularity: Encapsulating functionality in separate components allows for greater modularity, making code management and maintenance easier.
Compatibility: Web components are compatible with different framework and library environments, offering flexibility and compatibility in various development contexts.
Encapsulation: Shadow DOM ensures encapsulation, preventing style and behavior conflicts between components and the surrounding page.
Standardization: As a W3C standard, web components enjoy broad support in modern browsers, ensuring consistency and reliability in web development projects.

What challenges might arise?

While web components offer numerous advantages, they also come with challenges:

Browser support: Although support for web components is extensive, older browsers may lack full compatibility, requiring polyfills or alternative arrangements.
Complexity: Developing and managing web components can be complex, especially for teams not yet fully familiar with the technology.
Performance load: Depending on implementation, web components can cause performance load, particularly in large component counts.
Potential SEO challenges: Depending on the implementation approach, SEO can be a challenge. Search engine crawlers may have difficulty reading Shadow DOM elements, as they require JavaScript processing. However, this challenge can often be resolved, for example, through server-side rendering if the application architecture allows it.

Advantages and Disadvantages of Web Components

Advantages:

Reusability and modularity promote code efficiency.
Compatibility ensures application functionality across different framework and library environments.
Encapsulation prevents style and behavior conflicts.
Standardization promotes consistency and reliability.

Disadvantages:

Browser support may vary, requiring polyfills or alternative arrangements.
Development and management can be complex, especially for beginners.
Performance at the browser level can pose challenges in extensive setups.

This is a concise, high-level overview of web components. In the next part, we will delve deeper and examine the more technical side.

Author

Tuukka Turu

Front-end Developer

09.01.2024

Erika Vanhala

What insights can Matomo Analytics provide?

Matomo is an open-source tool that allows you to track and analyze the traffic on your website. It provides insights into various aspects of your website’s performance, such as the number of visitors, traffic sources, page views, and user behaviour.

Matomo analytics can tell you how many visitors your website has had during a specific time period and where these visitors are coming from. The data also reveals user behavior across different devices, locations, and even purchase transactions. Additionally, you can gain insights into how effectively different social media channels drive traffic to your website.

With Matomo analytics, you can uncover which pages your visitors are navigating to, how long they spend on each page, and their overall journey through your site. This valuable information enables you to enhance the user experience on your website, making it more appealing to your audience.

Data Analytics: The backbone of your online service’s development

With analytics, you’ll know where your site’s visitors come from, allowing you to tailor your marketing to those sources. Heatmap data visualises where on the page users exit and which links they click, providing concrete information on how to make your content more engaging. You can also create different versions of headlines, texts, or images, and determine the most effective version through A/B testing.

Tracking the effectiveness of marketing campaigns is easy, as you can see how many visitors your campaign brought to your website and how many of them performed the desired action, such as purchasing a product or subscribing to a newsletter.

Matomo’s reports are user-friendly, customisable to fit your needs, and informative even for internal stakeholders.

In my opinion, Matomo analytics is a powerful tool that provides valuable insights into your website’s traffic. It allows you to target your marketing accurately, enhance your website’s user experience, and make it more attractive to visitors, all while ensuring the protection of user privacy.

Matomo is a smart solution for organisations that want to safely track and optimise their website’s performance while owning their data.

Interested in how Matomo could fit into your website?

Let’s talk

Fill in the form and we’ll get back to you shortly.
Name*
First
Email*
Company
Phone
Message
I accept the use of my personal data in accordance with Druid’s privacy statement.
Email
This field is for validation purposes and should be left unchanged.

Author

Erika Vanhala

Project Manager

DrupalCon Barcelona 2024: Tech, Community, and Inspiration

Author

Toni Nissinen

Other interesting stuff

Hacktoberfest with Mautic

Druid’s ongoing partnership with Business College Helsinki

DrupalCon Barcelona 2024: Community Reunions, Business Insights, and an Unforgettable Hike

Author

Arto Iijalainen

Other interesting stuff

AI in Content Creation

Your Website as a Customer Experience Platform – How to Build a Truly Impactful Digital Experience

How to tackle the “monsters” lurking in public sector websites

Accessibility

Data security and privacy

Checklist for improving data privacy:

Let’s talk

Fill in the form and we’ll get back to you shortly.

Author

Kirsi Vatanen

Other interesting stuff

AI is Reading Your Content – Are You Ready to Respond?

How to Harness Personalization on Manufacturing Websites

Website personalization in practice

Target communication to different customer groups using automation

Putting plans into action

Testing personalization

Simple Yet Complex

Let’s talk

Fill in the form and we’ll get back to you shortly.

Author

Mikko Hämäläinen

Other interesting stuff

How to Harness Personalization on Manufacturing Websites

AI in Content Creation

Streamline your digital marketing path: Tools, trends, and customer experience

Hyper-Personalization: The AI-powered evolution of traditional personalization

A Unified customer experience across all channels

Author

Mikko Hämäläinen

Other interesting stuff

AI is Reading Your Content – Are You Ready to Respond?

How to Harness Personalization on Manufacturing Websites

How to create an outstanding user experience on your website

1. Involve the users in the designing process

2. Ensure good usability

3. Provide truly useful content

4. Make an impact with visuality

5. Invest in scalability

Author

Kirsi Vatanen

Other interesting stuff

AI is Reading Your Content – Are You Ready to Respond?

How to Harness Personalization on Manufacturing Websites

Fix accessibility problems at the (open) source

Author

Simo Hellsten

Other interesting stuff

How to Harness Personalization on Manufacturing Websites

AI in Content Creation

Mountain Highs: My unforgettable experience at Mountain Camp Davos

Author

Toni Nissinen

Other interesting stuff

Hacktoberfest with Mautic

Druid’s ongoing partnership with Business College Helsinki

Building Blocks of Modern Web Development – Web Components

What are web components?

How are web components created?

Where can web components be used?

Web components and design systems

Why use web components?

What challenges might arise?

Advantages and Disadvantages of Web Components

Author

Tuukka Turu

Other interesting stuff

Hacktoberfest with Mautic

Druid’s ongoing partnership with Business College Helsinki

What insights can Matomo Analytics provide?