CMS | The Blog Pros

December 13, 2023

8 Best WordPress CRM Plugins in 2023 (Compared)

Are you looking to add a CRM to your WordPress website?

A customer relationship management (CRM) plugin can help you follow up leads, increase sales, and manage interactions with your customers.

In this article, we will share some of the best WordPress CRM plugins.

Why Use a WordPress CRM Plugin?

A customer relationship management (CRM) plugin will store the contact details of your customers and prospects, quickly show your previous interactions with them, and help you offer streamlined customer service across your business.

This data can be used by your sales, marketing, and customer service teams to follow up on leads, view purchasing history, and record how your customer’s problems were solved.

A CRM plugin needs to integrate with social media platforms, your lead generation software and email marketing service, and your membership website or online store. It should offer everything you need to manage your customers in one place.

With that being said, let’s take a look at the best WordPress CRM plugins with their pros and cons to help you choose the best tool for your business.

1. HubSpot

HubSpot is a comprehensive CRM plugin for WordPress that integrates seamlessly with their marketing, sales, and customer service products. It allows you to capture leads, manage contacts, and track user interactions.

HubSpot CRM comes with built-in tools to collect customer data on your WordPress website and add it to your contacts list. These include forms, email, and live chat.

Your data is stored on HubSpot’s cloud platform. It also integrates with more than 300 apps and services, such as email marketing and lead generation software like OptinMonster.

The core HubSpot CRM platform is free and supports unlimited users and unlimited contacts. You can upgrade to a paid plan for more powerful features.

Hubspot is easy to use, and we show you how to add it to your WordPress website step-by-step in our guide on how to add a CRM on your WordPress site and get more leads.

Pros:

HubSpot is an easy-to-use CRM.
The core HubSpot CRM features are free.
With paid plans, you can choose to focus on marketing, sales, or customer service.
You can easily embed forms and live chat on your site.

Cons:

Beginners may find the plugin has a learning curve.
Data is stored on the HubSpot cloud service.

Why we chose HubSpot: HubSpot is the best CRM for small businesses and easily integrates with your WordPress website.

2. FunnelKit Automations

FunnelKit Automations is a powerful CRM and marketing automation tool for WordPress websites and WooCommerce stores.

You can use it to see every detail about your customers, including their name, email, gender, geographical location, tags, lists, and more. You can also see the details of their past history on your website or online store, including their purchase history.

The plugin’s strength lies in automation. You can also use its visual automation builder to automate targeted email and SMS campaigns, create subscription reminders, send automated coupons, and much more.

Pros:

In-depth contact profiles show all client information in one place.
It allows you to automate your WooCommerce store, including emails and SMS messages.
FunnelKit Automations has advanced features like analytics, revenue tracking, and A/B testing.
It has integrations with popular apps and plugins.

Cons:

Beginners will find there is a learning curve.
It is more expensive than most CMS solutions.

Why we chose FunnelKit Automations: Funnelkit Automations is one of the best marketing automation platforms for WooCommerce. Its contact profiles give you easy access to customer details and purchase history.

3. Freshsales CRM

Freshsales CRM is a popular and affordable CRM with a sales-oriented approach. It has a scoring feature that helps you prioritize and personalize customer engagement.

Its dashboard gives you instant access to customer data, including reports, activities, phone calls, emails, and contact details.

Other features include visual sales pipelines, actionable insights into conversations, event tracking, custom workflows, and integrations with popular third-party services.

Freshsales also lets you automate your work to save you time. This lets you automatically assign leads, send emails, add tasks, create reminders, and much more. It can also save time by automatically filling in extra details based on social and publicly listed information.

You can find the Freshsales Integration plugin in the WordPress Plugin Directory. It allows you to sync contacts and leads, embed forms, track website activity, and receive notifications.

Pros:

Affordable and easy to use.
The scoring system helps you prioritize leads.
Automation features save you time.
Inexpensive and offers a 21-day free trial.

Cons:

Offers less customization than other CRMs.
Offers fewer integrations than some other CRMs.

Why we chose Freshsales CRM: Freshsales CRM has a sales-oriented approach. It helps you prioritize your leads and saves time by offering automation and automatic data entry.

4. Brevo (Formerly Sendinblue)

Brevo, formerly known as Sendinblue, is a popular email marketing service. It offers CRM features like contact management with custom fields, contact tracking, lead scoring, and transactional email logs. It can also integrate with other CRM products.

The company also offers a free WooCommerce CRM plugin in the official WordPress Plugin Directory. This will automatically sync your WooCommerce customer data with Brevo so you can improve customer service for your store using a single tool.

Once your online store data has been synced, you will be able to better manage your customers and their orders, create effective email and SMS campaigns, and track how many emails were delivered, opened, and clicked on.

Pros:

Its limited CRM features can do all you need if email marketing is your focus.
You can set up automated workflows to increase conversions in your store.
Brevo’s free plan allows you to create unlimited contacts and send up to 300 emails per day.
The Brevo plugin for WooCommerce is free.

Cons:

Its CRM features are more limited than other CRM solutions.
Plugin integration is only for WooCommerce stores, not general WordPress websites.
You depend on Brevo’s platform, so any downtime may affect your campaigns.

Why we chose Brevo: Brevo is one of the best email marketing services and will provide all the CRM features you need for email marketing. The free WordPress plugin also allows you to instantly sync the customers in your WooCommerce store.

5. Pipedrive CRM

Pipedrive CRM is another sales-driven CRM plugin for businesses. It lets you manage your sales pipeline management using an intuitive interface that gives you quick access to all the information you need.

It is tailored for sales teams and offers functions such as sales reporting, precise activity tracking, advanced contact information, customizable pipelines, sales forecasting, and seamless email integration.

In addition, it offers plenty of integration options, enabling you to link your CRM with your existing services.

You can find the LeadBooster Chatbot by Pipedrive plugin in the WordPress Plugin Directory. It is a chatbot plugin that captures visitors to your WordPress website and turns them from qualified leads into deals in your Pipedrive CRM account.

Pros:

Intuitive interface.
Monitors your sales performance and conversion rates.
Tracks customer communication.
Automate repetitive tasks.
Affordable pricing.

Cons:

Its advanced reporting and automation capabilities are more limited than other CRMs.
Some advanced features have a steep learning curve

Why we chose Pipedrive CRM: Pipedrive CRM is an affordable customer relations solution for sales teams.

6. GreenRope CRM

GreenRope CRM is a multi-purpose CRM designed for teams. It allows your sales and marketing, customer service, and operations departments to all use a single platform when dealing with your customers.

It integrates CRM, email marketing, automation, social media, project management, and more into a single flexible system.

The CRM also offers features that allow you to automate customer communication, prioritize your leads, track deals, and monitor social engagement.

You can find the GreenRope Analytics WordPress CRM plugin in the WordPress Plugin Directory. It lets you track your WordPress site visitors within your GreenRope account.

Pros:

A single tool can meet the needs of your sales, marketing, and support teams.
Additional features include project management, lead scoring, and event management.
It is highly customizable.

Cons:

This tool fills multiple purposes, so it has a learning curve.
It is more expensive than some CRM solutions.

Why we chose GreenRope CRM: GreenRope CRM is a flexible CRM tool that can meet the needs of multiple multiple departments in your business or online store.

7. FluentCRM

FluentCRM is a self-hosted CRM and email automation plugin for WordPress. Unlike many other CRM solutions that store their data in their own cloud services, all FluentCRM data belongs to you and is stored in your WordPress database.

This plugin is easy to set up, and beginners will enjoy its user-friendly dashboard. It lets you track important customer information such as purchase history, form submissions, and their open email rate and click rate.

FluentCRM is compatible with many popular WordPress plugins, including Easy Digital Downloads, MemberPress, and LearnDash.

You can find FluentCRM’s Email Marketing, Newsletter, Email Automation and CRM plugin in the WordPress Plugin Directory. It allows you to sync your contacts, automate emails and create email campaigns, track your website activity, and more.

Pros:

Stores its data in your WordPress database.
Fast performance.
Also offers email automation.
You can get started for free.

Cons:

Paid plans cost more than some other CRMs.

Why we chose FluentCRM: FluentCRM is an easy-to-use WordPress CRM plugin that can also track and automate your email campaigns. All of its data is stored in WordPress, so you don’t have to rely on third-party cloud services.

8. WP-CRM System

WP-CRM System is a free WordPress CRM plugin designed for freelancers and small business owners. It provides basic CRM functionality for WordPress websites, such as managing contacts, tracking communication history, and assigning tasks.

Like FluentCRM, WP-CRM stores all of its data in your WordPress database. This means that you own all of your data and don’t depend on another company to keep your data accessible.

You can also purchase extensions to add new features such as custom fields and integrations.

Pros:

User-friendly and easy to navigate.
Data is stored on your WordPress website, not a third-party cloud service.
The free plugin will meet the needs of many freelancers and small businesses.

Cons:

Limited advanced features.
The cost of paid extensions can add up.

Why we chose WP-CRM System: WP-CRM System is the best free CRM plugin for WordPress. The basic plugin will meet the needs of many small businesses, and you can purchase extensions to add custom fields and integrations as you need them.

What Is the Best WordPress CRM Plugin?

In our expert opinion, we believe that HubSpot is the best WordPress CRM plugin. It’s easy to use, offers the most important features, and the core plugin is free.

On the other hand, if you have a WooCommerce store and need a CRM with eCommerce-focused marketing automation, then you should also look at FunnelKit Automations. It’s powerful, can help you grow your overall sales, and is worth every penny.

However, if you are looking for a completely sales-focused CRM, then we also recommend using Freshsales CRM or Pipedrive CRM because they are sales-driven and can help you automate your sales processes.

FAQs About CRM Plugins for WordPress

Do you still have questions? Here are answers to some of the most common questions we are asked about WordPress CRM plugins.

Is WordPress a CRM or CMS?

WordPress is a CMS, or content management system. It lets you build and manage your website and all its content.

However, WordPress is a very flexible platform that can be used for many purposes.

You can easily install a WordPress plugin to add the features you need to use your website for customer relationship management (CRM).

What is a WordPress CRM plugin?

A WordPress CRM plugin is an add-on that puts customer relationship management functionality directly into a WordPress website. It allows users to manage leads, contacts, and customer interactions within the WordPress dashboard.

Do you need a CRM plugin for your WordPress site?

Whether you need a CRM plugin depends on your business goals and the level of customer relationship management required. If you interact with leads or customers frequently, then a CRM plugin can help organize and streamline these interactions.

What features should you look for in a WordPress CRM plugin?

Important features to look for in a CRM include contact management, lead tracking, email integration, task management, reporting and analytics, customization options, and integration with other tools and platforms.

However, the features you need will vary depending on your specific requirements, the size of your team, the number of customers you need to deal with, and the type of business you are running.

Expert WordPress Guides for Customer Service

Now that you have learned about the best WordPress CRM plugins, you may like to see some of our other guides on customer service:

We hope this tutorial helped you find the best WordPress CRM plugins. You may also want to see our guide on how to increase your blog traffic or our expert picks for the best WordPress help desk plugins for customer support.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post 8 Best WordPress CRM Plugins in 2023 (Compared) first appeared on WPBeginner.

October 2, 2023

WaterBear: Building A Free Platform For Impactful Documentaries (Part 2)

In my previous article, I talked about Waterbear, a significant project I worked on as a newly-appointed lead developer, and the lessons I learned leading a team for the first time. In this second article, I’ll go over some key technical highlights from the project. Before we start, let’s quickly remind ourselves what WaterBear is all about and what makes it so interesting.

WaterBear is a free platform bringing together inspiration and action with award-winning high-production environmental documentaries covering various topics, from animals and climate change to people and communities. The WaterBear team produces their own original films and documentaries and hosts curated films and content from various high-profile partners, including award-winning filmmakers, large brands, and significant non-governmental organizations (NGOs), like Greenpeace, WWF, The Jane Goodall Institute, Ellen MacArthur Foundation, Nikon, and many others.

For context, I am currently working at a software development company called Q Agency based in Zagreb, Croatia. We collaborated with WaterBear and its partner companies to build a revamped and redesigned version of WaterBear’s web and mobile app from the ground up using modern front-end technologies.

In the first article, I briefly discussed the technical stack that includes a React-based front-end framework, Next.js for the web app, Sanity CMS, Firebase Auth, and Firestore database. Definitely read up on the strategy and reasoning behind this stack in the first article if you missed it.

Now, let’s dive into the technical features and best practices that my team adopted in the process of building the WaterBear web app. I plan on sharing specifically what I learned from performance and accessibility practices as a first-time lead developer of a team, as well as what I wish I had known before we started.

Image Optimization

Images are pieces of content in many contexts, and they are a very important and prominent part of the WaterBear app’s experience, from video posters and category banners to partner logos and campaign image assets.

I think that if you are reading this article, you likely know the tightrope walk between striking, immersive imagery and performant user experiences we do as front-enders. Some of you may have even grimaced at the heavy use of images in that last screenshot. My team measured the impact, noting that on the first load, this video category page serves up as many as 14 images. Digging a little deeper, we saw those images account for approximately 85% of the total page size.

That’s not insignificant and demands attention. WaterBear’s product is visual in nature, so it’s understandable that images are going to play a large role in its web app experience. Even so, 85% of the experience feels heavy-handed.

So, my team knew early on that we would be leveraging as many image optimization techniques as we could that would help improve how quickly the page loads. If you want to know everything there is to optimize images, I wholeheartedly recommend Addy Osami’s Image Optimization for a treasure trove of insightful advice, tips, and best practices that helped us improve WaterBear’s performance.

Here is how we tackled the challenge.

Using CDN For Caching And WebP For Lighter File Sizes

As I mentioned a little earlier, our stack includes Sanity’s CMS. It offers a robust content delivery network (CDN) out of the box, which serves two purposes: (1) optimizing image assets and (2) caching them. Members of the WaterBear team are able to upload unoptimized high-quality image assets to Sanity, which ports them to the CDN, and from there, we instruct the CDN to run appropriate optimizations on those images — things like compressing the files to their smallest size without impacting the visual experience, then caching them so that a user doesn’t have to download the image all over again on subsequent views.

Requesting the optimized version of the images in Sanity boils down to adding query variables to image links like this:

https://cdn.sanity.io/.../image.jpg?w=1280&q=70&auto=format

Let’s break down the query variables:

w sets the width of the image. In the example above, we have set the width to 1280px in the query.
q sets the compression quality of the image. We landed on 70% to balance the need for visual quality with the need for optimized file sizes.
format sets the image format, which is set to auto, allowing Sanity to determine the best type of image format to use based on the user’s browser capabilities.

Notice how all of that comes from a URL that is mapped to the CDN to fetch a JPG file. It’s pretty magical how a completely unoptimized image file can be transformed into a fully optimized version that serves as a completely different file with the use of a few parameters.

In many cases, the format will be returned as a WebP file. We made sure to use WebP because it yields significant savings in terms of file size. Remember that unoptimized 1.2 MB image from earlier? It’s a mere 146 KB after the optimizations.

And all 14 image requests are smaller than that one unoptimized image!

The fact that images still account for 85% of the page weight is a testament to just how heavy of a page we are talking about.

Another thing we have to consider when talking about modern image formats is browser support. Although WebP is widely supported and has been a staple for some time now, my team decided to provide an optimized fallback JPG just in case. And again, Sanity automatically detects the user’s browser capabilities. This way, we serve the WebP version only if Sanity knows the browser supports it and only provide the optimized fallback file if WebP support isn’t there. It’s great that we don’t have to make that decision ourselves!

Have you heard of AVIF? It’s another modern image format that promises potential savings even greater than WebP. If I’m being honest, I would have preferred to use it in this project, but Sanity unfortunately does not support it, at least at the time of this article. There’s a long-running ticket to add support, and I’m holding hope we get it.

Would we have gone a different route had we known about the lack of AVIF support earlier? Cloudinary supports it, for example. I don’t think so. Sanity’s tightly coupled CDN integration is too great of a developer benefit, and as I said, I’m hopeful Sanity will give us that support in the future. But that is certainly the sort of consideration I wish I would have had early on, and now I have that in my back pocket for future projects.

Tackling The Largest Contentful Paint (LCP)

LCP is the biggest element on the page that a user sees on the initial load. You want to optimize it because it’s the first impression a user has with the page. It ought to load as soon as possible while everything under it can wait a moment.

For us, images are most definitely part of the LCP. By giving more consideration to the banner images we load at the top of the page, we can serve that component a little faster for a better experience. There are a couple of modern image attributes that can help here: loading and fetchpriority.

We used an eager loading strategy paired with a high fetchpriority on the images. This provides the browser with a couple of hints that this image is super important and that we want it early in the loading process.

<!-- Above-the-fold Large Contentful Paint image -->
<img
  loading="eager"
  fetchpriority="high"
  alt="..."
  src="..."
  width="1280"
  height="720"
  class="..."
/>

We also made use of preloading in the document <head>, indicating to the browser that we want to preload images during page load, again, with high priority, using Next.js image preload options.

<head>
  <link
    rel="preload"
    as="image"
    href="..."
    fetchpriority="high"
  />
</head>

Images that are “below the fold” can be de-prioritized and downloaded only when the user actually needs it. Lazy loading is a common technique that instructs the browser to load particular images once they enter the viewport. It’s only fairly recently that it’s become a feature baked directly into HTML with the loading attribute:

<!-- Below-the-fold, low-priority image -->
<img
  decoding="async"
  loading="lazy"
  src="..."
  alt="..."
  width="250"
  height="350"
/>

This cocktail of strategies made a noticeable difference in how quickly the page loads. On those image-heavy video category pages alone, it helped us reduce the image download size and number of image requests by almost 80% on the first load! Even though the page will grow in size as the user scrolls, that weight is only added if it passes through the browser viewport.

In Progress: Implementing `srcset`

My team is incredibly happy with how much performance savings we’ve made so far. But there’s no need to stop there! Every millisecond counts when it comes to page load, and we are still planning additional work to optimize images even further.

The task we’re currently planning will implement the srcset attribute on images. This is not a “new” technique by any means, but it is certainly a component of modern performance practices. It’s also a key component in responsive design, as it instructs browsers to use certain versions of an image at different viewport widths.

We’ve held off on this work only because, for us, the other strategies represented the lowest-hanging fruit with the most impact. Looking at an image element that uses srcset in the HTML shows it’s not the easiest thing to read. Using it requires a certain level of art direction because the dimensions of an image at one screen size may be completely different than those at another screen size. In other words, there are additional considerations that come with this strategy.

Here’s how we’re planning to approach it. We want to avoid loading high-resolution images on small screens like phones and tablets. With the srcset attribute, we can specify separate image sources depending on the device’s screen width. With the sizes attribute, we can instruct the browser which image to load depending on the media query.

In the end, our image markup should look something like this:

<img
  width="1280"
  height="720"
  srcset="
    https://cdn.sanity.io/.../image.jpg?w=568&...   568w,
    https://cdn.sanity.io/.../image.jpg?w=768&...   768w,
    https://cdn.sanity.io/.../image.jpg?w=1280&... 1280w
  "
  sizes="(min-width: 1024px) 1280px, 100vw"
  src="https://cdn.sanity.io/.../image.jpg?w=1280&..."
/>

In this example, we specify a set of three images:

Small: 568px,
Medium: 768px,
Large: 1280px.

Inside the sizes attribute, we’re telling the browser to use the largest version of the image if the screen width is above 1024px wide. Otherwise, it should default to selecting an appropriate image out of the three available versions based on the full device viewport width (100vw) — and will do so without downloading the other versions. Providing different image files to the right devices ought to help enhance our performance a bit more than it already is.

Improving CMS Performance With TanStack Query

The majority of content on WaterBear comes from Sanity, the CMS behind the web app. This includes video categories, video archives, video pages, the partners’ page, and campaign landing pages, among others. Users will constantly navigate between these pages, frequently returning to the same category or landing page.

This provided my team with an opportunity to introduce query caching and avoid repeating the same request to the CMS and, as a result, optimize our page performance even more. We used TanStack Query (formerly known as react-query) for both fetching data and query caching.

const { isLoading, error, data } = useQuery( /* Options */ )

TanStack Query caches each request according to the query key we assign to it. The query key in TanStack Query is an array, where the first element is a query name and the second element is an object containing all values the query depends on, e.g., pagination, filters, query variables, and so on.

Let’s say we are fetching a list of videos depending on the video category page URL slug. We can filter those results by video duration. The query key might look something like this basic example:

const { isLoading, error, data } = useQuery(
  {
    queryKey: [
      'video-category-list',
      { slug: categorySlug, filterBy: activeFilter }
    ],
  queryFn: () => /* ... */
  }
)

These query keys might look confusing at first, but they’re similar to the dependency arrays for React’s useEffect hook. Instead of running a function when something in the dependency array changes, it runs a query with new parameters and returns a new state. TanStack Query comes with its dedicated DevTools package. It displays all sorts of useful information about the query that helps debug and optimize them without hassle.

Let’s see the query caching in action. In the following video, notice how data loads instantly on repeated page views and repeated filter changes. Compare that to the first load, where there is a slight delay and a loading state before data is shown.

We’re probably not even covering all of our bases! It’s so tough to tell without ample user testing. It’s a conflicting situation where you want to do everything you can while realistically completing the project with the resources you have and proceed with intention.

We made sure to include a label on interactive elements like buttons, especially ones where the icon is the only content. For that case, we added visually hidden text while allowing it to be read by assistive devices. We also made sure to hide the SVG icon from the assistive devices as SVG doesn’t add any additional context for assistive devices.

<!-- Icon button markup with descriptive text for assistive devices -->
<button type="button" class="...">
  <svg aria-hidden="true" xmlns="..." width="22" height="22" fill="none">...</svg
  ><span class="visually-hidden">Open filters</span>
</button>

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
}

Supporting keyboard navigation was one of our accessibility priorities, and we had no trouble with it. We made sure to use proper HTML markup and avoid potential pitfalls like adding a click event to meaningless div elements, which is unfortunately so easy to do in React.

We did, however, hit an obstacle with modals as users were able to move focus outside the modal component and continue interacting with the main page while the modal was in its open state, which isn’t possible with the default pointer and touch interaction. For that, we implemented focus traps using the focus-trap-react library to keep the focus on modals while they’re opened, then restore focus back to an active element once the modal is closed.

Dynamic Sitemaps

Sitemaps tell search engines which pages to crawl. This is faster than just letting the crawler discover internal links on its own while crawling the pages.

The importance of sitemaps in the case of WaterBear is that the team regularly publishes new content — content we want to be indexed for crawlers as soon as possible by adding those new links to the top of the sitemap. We don’t want to rebuild and redeploy the project every time new content has been added to Sanity, so dynamic server-side sitemaps were our logical choice.

We used the next-sitemap plugin for Next.js, which has allowed us to easily configure the sitemap generation process for both static and dynamic pages. We used the plugin alongside custom Sanity queries that fetch the latest content from the CMS and quickly generate a fresh sitemap for each request. That way, we made sure that the latest videos get indexed as soon as possible.

Let’s say the WaterBear team publishes a page for a video named My Name is Salt. That gets added to a freshly generated XML sitemap:

Now, it’s indexed for search engines to scoop up and use in search results:

Until Next Time…

In this article, I shared some insights about WaterBear’s tech stack and some performance optimization techniques we applied while building it.

Images are used very prominently on many page types on WaterBear, so we used CDN with caching, loading strategies, preloading, and the WebP format to optimize image loading performance. We relied on Sanity for the majority of content management, and we expected repeating page views and queries on a single session, prompting us to implement query caching with TanStack Query.

We made sure to improve basic accessibility on the fly by styling focus states, enabling full keyboard navigation, assigning labels to icon buttons, providing alt text for images, and using focus traps on modal elements.

Finally, we covered how my team handled dynamic server-side rendered sitemaps using the next-sitemap plugin for Next.js.

Again, this was my first big project as lead developer of a team. There’s so much that comes with the territory. Not only are there internal processes and communication hurdles to establish a collaborative team environment, but there’s the technical side of things, too, that requires balancing priorities and making tough decisions. I hope my learning journey gives you something valuable to consider in your own work. I know that my team isn’t the only one with these sorts of challenges, and sharing the lessons I learned from this particular experience probably resonates with some of you reading this.

Please be sure to check out the full work we did on WaterBear. It’s available on the web, Android, and iOS. And, if you end up watching a documentary while you’re at it, let me know if it inspired you to take action on a cause!

References

Fast load times (web.dev)
“Hide Content,” Dave Rupert (The A11Y Project)
“Use WebP images,” Katie Hempenius (web.dev)
“Accessible SVGs: Perfect Patterns For Screen Reader Users,” Carie Fisher
TanStack Query Documentation

Many thanks to WaterBear and Q Agency for helping out with this two-part article series and making it possible. I really would not have done this without their support. I would also like to commend everyone who worked on the project for their outstanding work! You have taught me so much so far, and I am grateful for it.

June 20, 2023

Visual Editing Comes To The Headless CMS

A couple of years ago, my friend Maria asked me to build a website for her architecture firm. For projects like this, I would normally use a headless content management system (CMS) and build a custom front end, but this time I advised her to use a site builder like Squarespace or Wix.

Why a site builder? Because Maria is a highly visual and creative person and I knew she would want everything to look just right. She needed the visual feedback loop of a site builder and Squarespace and Wix are two of the most substantial offerings in the visual editing space.

In my experience, content creators like Maria are much more productive when they can see their edits reflected on their site in a live preview. The problem is that visual editing has traditionally been supported only by site-builders, and they are often of the “low” or “no” code varieties. Visual editing just hasn’t been the sort of thing you see on a more modern stack, like a headless CMS.

Fortunately, this visual editing experience is starting to make its way to headless CMSs! And that’s what I want to do in this brief article: introduce you to headless CMSs that currently offer visual editing features.

But first…

What Is Visual Editing, Again?

Visual editing has been around since the early days of the web. Anyone who has used Dreamweaver in the past probably experienced an early version of visual editing.

Visual editing is when you can see a live preview of your site while you’re editing content. It gives the content creator an instantaneous visual feedback loop and shows their changes in the context of their site.

There are two defining features of visual editing:

A live preview so content creators can see their changes reflected in the context of their site.
Clickable page elements in the preview so content creators can easily navigate to the right form fields.

Visual editing has been standard among no-code and low-code site-builders like Squarespace, Wix, and Webflow. But those tools are not typically used by developers who want control over their tech stack. Fortunately, now we’re seeing visual editing come to headless CMSs.

Visual Editing In A Headless CMS

A headless CMS treats your content more like a database that's decoupled from the rendering of your site.

Until recently, headless CMSs came with a big tradeoff: content creators are disconnected from the front end, making it difficult to preview their site. They can't see updates as they make them.

A typical headless CMS interface just provides form fields for editing content. This lacks the context of what content looks like on the page. This UX can feel archaic to people who are familiar with real-time editing experiences in tools like Google Docs, Wix, Webflow, or Notion.

Fortunately, a new wave of headless CMSs is offering visual editing in a way that makes sense to developers. This is great news for anyone who wants to empower their team with an editing experience similar to Wix or Squarespace but on top of their own open-source stack.

Let’s compare the CMS editing experience with and without visual editing on the homepage of Roev.com.

You can see that the instant feedback from the live preview combined with the ability to click elements on the page makes the visual editing experience much more intuitive. The improvements are even more dramatic when content is nested deep inside sections on the page, making it hard to locate without clicking on the page elements.

Headless CMSs That Support Visual Editing

Many popular headless CMS offerings currently support visual editing. Let’s look at a few of the more popular options.

Tina

TinaCMS was built from the ground up for visual editing but also offers a “basic editing” mode that’s similar to traditional CMSs. Tina has an open-source admin interface and headless content API that stays synced with files in your Git repository (such as Markdown and JSON).

Storyblok

Storyblok is a headless CMS that was an early pioneer in visual editing. Storyblok stores your content in its database and makes it available via REST and GraphQL APIs.

Sanity.io (via their iframe plugin)

Sanity is a traditional headless CMS with an open-source admin interface. It supports visual editing through the use of its Iframe Pane plugin. Sanity stores your content in its database and makes it available via API.

Builder.io

Builder.io is a closed-source, visual-editing-first headless CMS that stores content in Builder.io’s database and makes it available via API.

Stackbit

Stackbit is a closed-source editing interface that’s designed to be complementary to other headless CMSs. With Stackbit, you can use another headless CMS to store your content and visually edit that content with Stackbit.

Vercel

Although it’s not a CMS, Vercel’s Deploy Previews can show an edit button in the toolbar. This edit button overlays a UI that helps content creators quickly navigate to the correct location in the CMS.

Conclusion

Now that developers are adding visual editing to their sites, I’m seeing content creators like Maria become super productive on a developer-first stack. Teams that were slow to update content before switching to visual editing are now more active and efficient.

There are many great options to build visual editing experiences without compromising developer-control and extensibility. The promise of Dreamweaver is finally here!

April 25, 2023

Could UX Be The Key To Unlocking Web3 Mass Adoption?

Let’s pretend you are interested in trying out Web3 (aka Blockchain or Crypto). You might have experience with various software tools from Web 2.0 and think Web3 is going to be as equally user-friendly, right?

You get a blockchain wallet, and that’s your passport to everything in the space. Once you’ve got your wallet set up, you’re free to take advantage of blockchain apps. Well, that’s how it works in theory. The reality is far more complex and is enough to confuse even pretty technical people.

So let’s say you start by getting a wallet. Which wallet? Well, there are hundreds to choose from, so just pick one you like the look of. Not that one, though; it doesn’t work with the blockchain you need it to.

And when you set it up, make sure you keep a digital and physical copy of your 24-word seed phrase safe. Lose that, and someone could syphon all of the assets in the wallet.

Set it up? Awesome. Now just head to the project you want to use and... Oh, wait. Before you can sync your wallet and log in, you need to add and switch to a different network. Done that? Perfect.

Ok, now we’re ready to jump into the decentralized web! How long will a transaction take? I don’t know. It could be a few seconds, could be a few hours. It really depends on network congestion and what it is you’re looking to transfer.

Once that transaction has gone through, make sure you get a different wallet — ideally a hardware wallet — to keep everything safe. Yeah, I know there are fees involved, but that’s the price of having full control of your own assets and data.

Well done, you’ve actioned a single transaction in Web3! Give yourself a pat on the back because it’s anything but simple.

This is, sadly, not an exaggeration. This is what we expect new users to Web3 to do to get set up with a new project or platform. Is it any wonder that most people find the space confusing and frustrating?

I’ll soon come onto the issues in Web3 adoption and how we might be able to solve them. But first, let’s address the elephant in the room and speak briefly about what Web3 actually is.

What Exactly Is Web3 (And Why Should We Care)?

If we’re being blunt, Web3 is little more than a marketing term. Something brands in the space have conjured up to put a little distance between themselves and the negative public view of crypto.

However, there is a difference between Web 2.0 and Web3. At a high level, Web3 brands are built on blockchain technology, which allows a more decentralized approach to their operation. These brands also tend to focus on transparency, security, and accessibility.

In effect, the key benefits include:

Better security (fewer single points of failure);
Better interconnectivity and fewer controlling intermediaries.

But what does that actually mean?

Well, really, it’s about returning more control to the user and removing multiple intermediaries. In Web3, brands want users to control their owned assets and their data. They want to remove or limit the control of large, centralized entities.

Users are at the mercy of these large centralized entities. If these entities decide to implement a rule change, fare increase, or even experience negative outcomes themselves, the end users have no say in the matter and are often the ones who suffer.

Brands in the Web3 space are looking at how they can limit the amount of control centralized entities exert.

I’ll use financial systems as a starting point to highlight this.

If you want to set up a bank account, you often need to fill in an application and provide several forms of ID and information. Once you’re approved, you get an account.

That account comes with certain rules and regulations which you must abide by. If the bank decides you’re not abiding by the rules, they’ll close your account. If the bank decides that you shouldn’t have the ability to send funds internationally, you can’t. If the bank decides to hike its interest rates and fees, you have to pay them.

You are at their mercy because they own the infrastructure you need. It might not sound like an issue, and it’s not for the vast majority of people in Western nations. But access to a stable financial system can be a difficult thing for those in developing nations.

Let’s also think about how something like an international transfer is processed. If you want to send money to another country (or even someone who uses a different bank), there’s a multi-step chain of approvals and communications that needs to happen.

Now, each of these steps comes with a fee and a delay. Meaning it can take more than a few days for your payment to process.

With the decentralized nature of blockchain, though, you could send funds directly to the recipient without any intermediaries. That means fewer delays and zero chance a centralized entity within the system will decline the payment.

Now, let’s also talk briefly about the security of it all.

In the image above, you can see that there is one centralized ledger in the traditional banking system. If that one centralized entity is compromised, either through a hack or some form of error, everything suffers.

With blockchain tech, there’s a distributed ledger. If one of the “nodes” is attacked or fails, there are still multiple other copies that can be used to form backups and keep the system running.

As blockchain works on consensus between all nodes, you’d need to simultaneously attack 51% of the nodes to assume control. Currently, on Ethereum, there are 10,637 nodes across the globe.

An attacker would have to assume control of 5425 nodes at the same time. And even then, there are precautions and methods to prevent ongoing damage. As such, it’s generally considered to be far more secure than centralized systems.

All of the above might be focused on the financial. However, it’s true for any blockchain-based use case. From finance to data to the simple transference of ownership paperwork. It is more secure, more direct, and more easily controlled by the end user.

Now, there are issues with things like energy consumption that are being addressed. However, when we’re just looking at onboarding new users, there’s one big problem with blockchain-based apps and Web3. The UX is generally terrible.

Why UX Is Key To Unlocking Web3’s Potential

Let’s be blunt about this. Most people don’t care about the tech behind a service, nor do they want a convoluted, complex system to activate the most simple of actions.

People want convenience.

They want to quickly understand what a product does and how to achieve the benefit it offers. Great products attract users because they help people achieve their goals faster, easier, or cheaper than the existing method.

And yet, it feels like most Web3 projects are created by engineers, for engineers. The complexity extends beyond the actual service and includes how these projects explain themselves. The self-help documentation is often full of technical jargon most will never understand.

I mean, check out this paragraph from LooksRare (one of the most popular NFT marketplaces). It’s a simple statement about what they do.

“LooksRare’s smart contracts are custom-built within a modular system that enables new features to be rolled out over time — without compromising security — thanks to standardized signatures that clearly define the execution scope.”

I spend all day analyzing Web3 projects, and it takes me more than a second to decipher what they mean. Imagine trying to convince someone not in the space that they should take a chance on Web3 with the above. Right now, the only people truly involved in Web3 are those who have persisted through jargon-filled explanations and complex user journeys.

If QWeb3 and blockchain technology ever have a hope of going mainstream, everything needs to be simplified. The friction to onboarding new users needs to be reduced so that we can welcome those who aren’t technical. We need to make it so simple the generations that didn’t grow up with cell phones and video games can action a transaction. And that includes everything from the language used to the systems to onboard new users.

Here are a few of the overarching elements that should be addressed.

Core Elements Of Better Web3 UX

I’ll get into detail on these a little later on. First, I want to outline what I believe to be the major, big-picture difficulties that need to be overcome in the space.

Clear Communication

Too many projects fall back on jargon-filled explanations. They sound fancy, but they also limit who understands what the project does. It’s common when new developments are made, as most of the documentation is made by highly technical people. The issue is it’s extremely limiting.

Most people don’t care about how an L2 scaling solution helps improve the speed and efficiency of an underlying layer-1 blockchain without compromising cryptographic security. What they want is to quickly and safely send funds.

One of the best pieces of advice I received when first starting as a copywriter was to imagine you’re explaining concepts to a group of young children. If you can do that, even the most tech-unsavvy people out there will quickly understand why they need your offer.

Clear answers to key questions is critical to enabling your users to help themselves.

There’s a prime example of this below. You might not need to go that simple, but it definitely shouldn’t be as complex as most people make it.

Most Web3 apps have a fraction of that.

So the question is, what do these exchanges do differently? Well, they take the complexity out of cryptocurrency. Let’s look at Coinbase’s onboarding.

To sign up, they’ve used a common Web 2.0 sign-up process. It’s just your name, email address, and password. People are familiar with this, and anyone who’s been on the internet for more than a day will likely have auto-fill add in these details in a few clicks.

Once you’ve confirmed your email, you’re in the main dashboard. You’ll need to provide some details for the financial know-your-customer (KYC) checks, but then you’re ready to go. The whole thing takes maybe 2 minutes before you’re “interacting with the blockchain” and able to buy some cryptocurrency.

And even that’s made easier. On the main dashboard, there’s a huge "buy" button that brings up a modal where you simply add how much of the cryptocurrency you want to buy.

A few clicks later, you own some cryptocurrency. If you remove the approval of your KYC info, the whole process could be done in around 5 minutes. Likely the same time it would take you to process a bank transfer of some kind.

And notice how there was no mention of or need to set up:

Blockchain,
Crypto wallets,
Seed phrases.

The onboarding and usage mirror that of a familiar Web 2.0 system. The wallets and blockchain elements are all hidden from the user. This is how most tech-heavy businesses operate.

No one needs to see or know how the sausage is made. You don’t see YouTube going to great efforts to talk about how videos are stored and secured on their servers and then streamed to millions of devices. People simply click “upload” and then are given a link to share so others can watch it.

It’s so simple a child can do it. And it’s that level of simplicity blockchain-based brands should be aiming for. Crypto exchanges do this so well, and yet few other Web3 brands are mimicking their successful approach.

So, if you’re a UX professional and want to get involved in Web3, what are the primary opportunities you could explore as a new revenue stream?

UX Opportunities For Entrepreneurs And Designers In Web3

If I had to sum it up, the biggest opportunities in Web3 are in making everything more accessible for non-technical people. Think of how difficult it would have been to set up a website before popular website-building platforms and companies.

No one wants to code their own CMS and figure out how to host it on a domain. It’s way too complex for most people. As soon as companies like Cloudflare and WordPress came along, the potential for people to set up their own digital businesses exploded.

We need the same level of simplicity UX in Web3.

The person or team who solves any of the below issues will be on to a winner. They’ll have something the industry desperately needs for its growth, and I wouldn’t be surprised if great brands line up at the door of those offering these solutions. Here are a few of the biggest opportunities as I see them.

Now, I’ll preface this by saying there is a lot to be improved in Web3. Too much to cover in detail in this piece. So for the sake of brevity, I’ve segmented into two primary segments. First up is the issue with engineering.

Engineering Issues In Web3

I’d argue that engineering issues are more important for Web3 adoption. You can improve the marketing and general UI as much as you like, but if the products don’t work as intended or have huge flaws that prevent people from getting the best from them, it’s all in vain.

One of the major issues with the functionality of Web3 engagement is with wallets, more specifically, wallet recovery.

Wallet Recovery Without Compromising Security

This is a big one, in my opinion. As mentioned above, blockchain wallets are key to engagement with Web3 brands. They’re incredibly secure. So secure that if you lose that 12 or 24-word recovery seed phrase, you lose access to your wallet and its contents, probably forever.

It’s a huge risk. Some people take to writing their seed phrase on a piece of paper which obviously compromises security in more ways than one.

So what’s the solution? How can we keep that wallet’s security without making it so unforgiving that people are locked out of their own identity and assets?

One of the proposed solutions is to use what Vitalik Buterin calls a social recovery wallet.

In short, you add a couple of trusted guardians to your wallet. If you lose access, you ask them to authorise its transfer to a new address. It’s not perfect, but it’s, unfortunately, the best option we have right now.

This removes that single point of failure and turns the whole “I lost my seed phrase” from a complete loss into a slight hassle of asking friends or family to help you transfer to a new address.

If anyone out there can figure out how to create a better solution, they’ll be welcomed with open arms in Web3.

Potential fixes:

Social recovery systems as mentioned above.
Backup seed phrase to the cloud. (There are security risks here.) Potentially using a decentralized storage service to segment the seed phrase and store those segments separately.
Using multi-party computation to secure wallets. In this method, the private key could be split between a cloud server and a device like your phone. Both parties have to be available to access the wallet. Kind of like 2FA authentication.

Interoperability Between Different Blockchains

Blockchains are, unfortunately, siloed. Ethereum is different from Solana, and they don’t exactly work well together yet. If you want to work across chains, you need to work through multiple front-ends — blockchain bridges — and submit a lot of different bridge transactions. All of which are costly and cumbersome.

This is what the ecosystem looks like.

It’s a real pain to navigate. Most people will try to move assets and information across chains through centralized exchanges or individual cross-chain bridges, which is, at best, highly inefficient.

What’s needed is a method for assets and chains to interact with one another more seamlessly — for the end user to have a single dashboard that could pull details or assets from Chain 1 and use them on Chain 2 without the user having to do any manual moving of currencies or assets through a third-party service.

It’s a big problem, but the unlocking of this not only hugely improves UX but should foster greater innovation and growth in the sector as a whole.

Potential fixes:

There is sadly no real fix for this. There will continue to be new chains popping up. The best solution is for people to work on interoperability protocols that allow users to interact with two chains seamlessly.

Financial Off-ramps

One of the most talked about uses of blockchain technology is cryptocurrency. The big usability issue with crypto is that few places outside of Web3-specific services accept it as payment, and it’s peculiarly difficult to change back into fiat currency.

Imagine you have $1000 of Ethereum in your wallet and need $800 USD to pay a bill. If you wanted to turn that Ethereum into USD, you’d have to do something like the below:

Log into a crypto exchange;
Sync your wallet;
Add your funds from your wallet to the Exchange’s wallet;
Exchange your ETH for USD for a transfer fee;
Withdraw the USD to your bank for yet another fee.

You’ll spend a good deal on fees, and the process takes longer than it should. There are some cool tools out there that are working to make the financial off-ramps simpler, but we’re still in the early days.

The faster and easier this process can be made, the more likely it is that crypto payments will be more popular. And for the person who solves this they have a great revenue-generating business on their hands.

I mean, think of how amazing Stripe has been for digital payments. Now add digital assets into the mix, and you can see the potential.

Potential fixes:

Creation of a crypto exchange-like service within an app that converts your crypto to select fiat currencies for you. You could even white-label some of the crypto exchange’s institutional services and do this for the user for a small fee.
Integration with various existing payment solutions. Apple Pay lets users use their Coinbase debit card for payments. You can also leverage a brand like MoonPay to enable easier on and off-ramps in the app. There’s a lot of disruption potential here. There are a handful of companies doing this, proving it is viable, but not enough yet to be competitive.

Communication And Education Issues In Web3

In addition to the basic functionality and ease of use issues with Web3 projects, we also have the marketing side of things.

Even if Web3 brands simplify the processes, they still talk about them in highly technical terms and make little to no effort to make it understandable to those not in the space. Below are a few of these issues and potential fixes in detail.

Marketing And Communications

Right now, Web3 is by engineers and for engineers. People are working on use cases that can really help non-technical people with their day-to-day lives, but they’re not succinctly communicating how it can help them.

And so, these great tools are being overlooked by the people they’re built to help.

One of the biggest opportunities I see is in better marketing and communications.

We, of course, need copy that explains what a product does. But more so, we need good UX copywriters and content producers to create information and education on how to simply set up the service and get the most from it. Without this, you might be able to attract new users, but they won’t get the most from your tool or stick around for a long time.

Make it simple, remove the jargon, and ensure even complete non-technical newbies understand how to achieve the key benefit with minimal effort. Manage to do this, and the project should succeed.

Potential fixes:

Hire technical writers from customer-facing, but highlight technical, Web 2.0 brands to help simplify messaging.
Make use of existing communication channels. A lot of Web3 brands don’t offer a bridge between something like email and Discord, meaning only those already in the space get the detail they need to onboard effectively.

Simplifying Transactions

There are two major problems with blockchain transactions right now:

Addresses,
The way transactions are processed.

Let’s first look at addresses.

My public Ethereum address is 0xde590D7ba25Ae2eCEAbbde7546D4Cbe94cc66961.

That’s not a typo. If I want someone to send me something, I need to give them that address. And they need to type it into the recipient field when sending funds without a mistake.

If either one of us messes it up, the transaction doesn’t fail, but the assets being sent are lost. Yeah, that’s right. You don’t get a nice warning message. The funds are sent to an address that doesn’t exist, and you’ve no way of easily getting them back.

These long hashes for addresses are also terrible when it comes to figuring out who sent what and when. Here’s a look at the Etherscan run down for my address:

Finding a particular transaction in that mess is insanely difficult. We need a way to simplify the way people refer and identify accounts and how the transactions are listed. The long-form cryptographic hashes are so user-unfriendly it’s unreal. It’s honestly amazing they’ve managed to get this far.

One of the tools aiming to help with this is ENS Domains. Much like buying a website domain, you buy an ENS domain, and that shows up instead of the long hash.

In the above, I had that insanely long hash as my address. With an ENSDomain, someone doesn’t need that as they can find my account by searching for PJBoyle.eth. That makes it much easier to find and send me assets or see how I’m engaging on the chain. But it’s only for Ethereum, which is why we also need that interoperability I mentioned earlier.

The second issue is in the way transactions are processed.

A lot of dApps need you to sign the agreement at each and every stage. Basically, to action one thing on the chain, you might have to stop the process in order to click “agree” multiple times. It’s a longer, more inefficient way of doing things and requires too much action from the user.

A solution that rolls all of these actions into one for a single-user authentication could improve the UX. Here’s an example diagram:

above is how a typical Defi app works today

below is how I think it should work

first, complete all actions (on simulated data if necessary), then batch-sign everything. more than one signature per interaction should be an anti-pattern pic.twitter.com/wQ8aSv0kNQ
— Hasu⚡️🤖 (@hasufl) June 20, 2022

Both of these improvements would make transacting so much easier and simpler, which should enable more people to get into Web3.

Potential fixes:

Roll out more services like ENS Domains, where abstract addresses are transformed into easily memorable phrases.
Reduce the load on the user. Don’t make them triple-check everything. Reduce the number of steps they have to take by rolling all confirmations into one approval.

Today’s Problems Are Tomorrow’s Opportunities

All of these problems are really because of the early nature of the tech.

None of the above will be the end of Web3, but for the people or teams who are able to solve them and make the entire ecosystem more user-friendly, these problems could be the catalyst that grows tomorrow’s most impactful businesses.

January 23, 2023

Adobe Connect Review

Adobe is one of the biggest names in the tech industry, and its virtual hub, Adobe Connect, seeks to be the go-to service for webinars, meetings, and training.

Although Adobe Connect may have quite a way to go to compete with more robust and affordable options, it will appeal to businesses who also want to utilize Adobe’s other tools, like PDF editors and content management systems. These services combine nicely, and some features even require other Adobe software to use.

Adobe Connect Compared

Adobe Connect did not make our top list of the best webinar software. Livestorm is our recommendation for most users for its interactive tools and deep performance analysis. Get started with Livestorm for free.

Livestorm — Best all-in-one-combo of webinars and virtual meetings
WebinarJam — Best for hosting all types of webinars
ClickMeeting — Best for beginners
Demio — Best for marketing and sales
Webex — Best for hosting accessible webinars
BlueJeans — Best for scaling live webinars beyond 500 attendees
EverWebinar — Best set-it-and-forget-it webinars
Vast Conference — Best budget-friendly option
Zoom — Best for educational institutions
BigMarker — Best for large virtual events
Crowdcast — Best webinar platform for a built-in audience
GoTo Webinar — Best for infrequent webinars
MyOwnConference — Cheapest way to facilitate simultaneous webinars
WebinarGeek — Best for GDPR compliance and/or EU audiences

About Adobe Connect

Adobe started back in 1982, before most people even used a computer. Today—40 years later—it’s going strong as an innovative company with a host of tools for businesses, from entrepreneurs to large corporations.

Adobe’s mission is to encourage creativity through digital tools. At its core is documentation, which the company has transformed from paper to collaborative, digitized documents that users can share and view from wherever they can find a screen.

Known as Macromedia Breeze until 2006, Adobe Connect added virtual meetings and trainings to the Adobe ecosystem, competing with other well-known web conferencing software tools like Zoom and Livestorm.

Adobe Connect Products and Services

While Adobe has numerous products to fit specific digital needs, Adobe Connect focuses on webinars, virtual meetings, and online training. Its tools enhance productivity and engagement in conferences through collaboration and communication features. These tools include:

Adobe Connect Webinar Review
Adobe Connect Content Management System Review
Adobe Connect Digital Asset Management Software Review
Adobe Connect Electronic Signature Software Review
Adobe Connect HTML Editor Review
Adobe Connect VoIP Call Recording Review
Adobe Connect Web Design Software Review
Adobe Connect Social Media Scheduling Tool Review
Adobe Connect PDF Editor Review

Multiple industries can use Adobe Connect’s tools, but the service is especially beneficial for industries highly focused on remote collaboration and training. Companies in the education, government, and healthcare industries are among the company’s top customers.

Adobe Connect Health and Stability

Adobe has been a household name for years with its four decades of experience in the tech industry. It’s clear that Adobe isn’t going anywhere anytime soon, thanks to its commitment to innovation and drive to stay ahead of the game with its many products and SaaS offerings.

For reference, Adobe has nearly half (45%) of the market share in the United States. Additionally, revenue in quarter 3 of 2022 was record-breaking for the company at $4.43 billion, a 13% year-over-year growth rate.

Because of Adobe’s focus on creating and tweaking products to fit its customers’ needs best, the company consistently pumps out updates and new products that transition seamlessly into today’s digital world. It’s this adaptability that will likely carry Adobe into success for decades to come.

Adobe Connect Pricing

Adobe Connect is quite expensive compared to other webinar and conferencing software. Although the product offers meetings, webinars, and learning tools, each category is priced as a separate tier, in contrast to other services that bundle them together for one price.

In other words, if you want lots of collaborative learning tools, even on smaller webinars and meetings, you may end up overpaying with Adobe Connect.

Try Adobe Connect free for 30 days.

Adobe Connect Pricing Structure

Adobe Connect is available for free for micro-meetings with up to three participants. After that, pricing starts at $50 per host per month. This gives you room for up to 25 participants and includes transcription, breakout rooms, and interactive recordings.

For more collaborative tools for webinars and large meetings, pricing begins at $130 per host per month with space for a minimum of 100 participants. Branding and event management are included in these higher-tier plans.

You can opt for annual pricing to save money, with the highest tier costing $3,500 per host per year compared to $4,440 when paid month-to-month.

Adobe Connect Pricing Comparison

Adobe Connect has a lot of features that could make its higher-than-average pricing worth it for your company, especially if you already utilize other Adobe products. Still, it’s certainly not the most budget-friendly option, and you might find another product that has what you need for less money.

To compare, BlueJeans is designed for large to massive meetings and webinars. The highest webinar tier allows up to 500 attendees for $69 per month or $57.50 per month when billed annually. It includes an array of production and collaboration tools similar to Adobe Connect to keep webinars engaging and interactive.

Livestorm is also highly scalable, with custom quotes for businesses and enterprises to ensure that you don’t overpay for what you don’t need. Or, take advantage of a prepackaged option with up to 500 attendees for $110 per month or $88 per month with annual billing.

Adobe Connect Trials and Guarantees

Adobe Connect’s free plan is good for figuring out if it’s something you want to stick with, but you can only test it with three participants. If you want to experience the full Adobe Connect package, use the free trial again. It’s good for 30 days of full access to the webinar and conferencing software.

Get a free 30-day trial of Adobe Connect.

Adobe Connect Webinar Software Review

Adobe Connect’s webinar features are numerous, catering to everything from highlighting company branding to virtual whiteboards and other productivity and collaboration tools. Upper tiers of the software have everything you need to keep teams engaged and learning, no matter where they tune in from.

Our research team initially considered Adobe Connect as a contender for the best webinar software. However, it ultimately fell short of the top list because of its more complicated setup and pricier packages than other services.

What Makes Adobe Connect Webinar Software Great

Adobe Connect upgrades — Adobe Connect streamlines the process of logging into and off the system, creating a more accessible flow for everyone.

Recording capabilities: Record anything you use during your live webinars for future playback, including interactive polls and live Q&As. When participants replay your webinar, everything will appear just as it was when it was live streaming.
Webinar types: You can host virtually any type of webinar to appeal to your audience with Adobe Connect, including on-demand, live, and automated webinars. This opens the doors for your audience to catch your information in the ways they enjoy most.
Simple logins and exits: With its newest update, Adobe Connect made it easier than ever to join and exit a webinar or meeting. Participants can enter a lobby to set up their cameras and microphones to ensure everything works before jumping in. Hosts can also leave a meeting without abruptly ending the session for everyone, allowing for a distraction-free exit.
Accessibility: Although Adobe Connect can be more confusing for hosts to set up than other webinar software, it’s relatively simple for participants to use. There’s nothing to download, so attendees can join quickly via a link on their computer or mobile device. Users needing adaptive features for auditory, visual, or mobility needs can also benefit from a wide range of accessibility tools, like screen readers, customizable displays, and keyboard shortcuts.
Analytics: An engagement dashboard tracks useful stats about your meetings for you to review later, including the number of people who viewed your recordings, the most active meetings you’ve hosted, and lead conversions.
Engagement tools: Adobe Connect prioritizes engaging meetings with tools like immersive screen sharing, surveys and polls, games, and note-taking. Hosts can also add custom apps to tailor the experience for attendees.
Education tools: Breakout rooms allow teams to meet in smaller groups for necessary training. Hosts and attendees can also share their screens with each other for test-taking, note-taking, and more.

Where Adobe Connect Webinar Software Falls Short

Adobe Connect Security features — Adobe Connect offers AES-256 encryption to protect sensitive data across webinars and meetings.

Lack of auto-generated passwords: Although Adobe Connect does a good job with overall security through encryption and flexible deployments, it could improve its password protection system. By default, everyone uses the same password to log in, which makes it easier for non-invitees to attend. Hosts can manually set unique passwords for everyone, but that can be time-consuming with hundreds of attendees.
Limited non-paid support: Adobe Connect users are limited to support through live chat and the website’s community and tutorials. To get more premium support, you may need to pay extra in addition to your monthly or annual subscription.
Limited integrations: Adobe Connect can integrate with several Adobe tools, unsurprisingly, but it doesn’t play as well with non-Adobe products. Third-party integrations are relatively limited outside of learning management systems.
Significantly higher pricing: Our research found that Adobe Connect costs quite a bit more than many other webinar software tools with similar features and functionality. Some competitors, for example, offer customizable plans so that you only pay for what each host or participant needs. And nearly all of them simply don’t charge as much as Adobe does for similar offerings.

Adobe Connect Webinar Software Compared

Adobe Connect has robust features for webinars and meetings, but Livestorm offers a good mix of features and affordability that may meet the needs of businesses of all sizes.

Livestorm — Best all-in-one-combo of webinars and virtual meetings
WebinarJam — Best for hosting all types of webinars
ClickMeeting — Best for beginners
Demio — Best for marketing and sales
Webex — Best for hosting accessible webinars
BlueJeans — Best for scaling live webinars beyond 500 attendees
EverWebinar — Best set-it-and-forget-it webinars
Vast Conference — Best budget-friendly option
Zoom — Best for educational institutions
BigMarker — Best for large virtual events
Crowdcast — Best webinar platform for a built-in audience
GoTo Webinar — Best for infrequent webinars
MyOwnConference — Cheapest way to facilitate simultaneous webinars
WebinarGeek — Best for GDPR compliance and/or EU audiences

Adobe Connect Content Management System Review

Adobe offers a content management system known as Adobe Commerce, which was formerly Magento. Its inventory management makes adding and organizing products a breeze, even for ecommerce businesses with massive inventories.

Adobe Commerce is much more advanced than other CMS software, so it may be best for advanced users who feel confident with the multitude of tools at their fingertips. It did make our list of the top content management systems.

What Makes Adobe Connect Content Management System Great

Adobe Commerce Content Management — Adobe Commerce simplifies payment processing with secure and diverse payments and analytics solutions.

Inventory management: Adobe Commerce absolutely excels at ecommerce, especially in the realm of inventory management. The system updates inventory in real-time and allows you to use nearby fulfillment centers to ship items off quickly. Backorders, multi-address orders, and multi-channel inventory tracking are also available.
Omnichannel management: If your company offers a hybrid mix of sales points, like mobile ordering, in-store sales, and web-based sales, you can manage inventory from all places together from Adobe Commerce. Inventory and payments track across each channel to ensure that your data stays up-to-date.
Scalability: Adobe Commerce can handle millions of SKUs at a time, allowing you to have multiple products with numerous variations and continue growing your product line as you scale. As a cloud-based service, there are virtually no limits as to what you can do with the platform.
No transaction fees: Unlike other CMS software with transaction fees for payment processing, Adobe Commerce doesn’t charge these fees. However, you’ll still need to pay applicable fees for your chosen payment processors.
Open-source coding: Because it uses open-source coding, Adobe Commerce is highly customizable by developers. Create themes and custom content types to make your website look and behave the way you and your customers need it to.

Where Adobe Connect Content Management System Falls Short

Steep learning curve: Adobe Commerce won’t be nearly as easy to start using as, say, Wix or Shopify. Still, the product isn’t necessarily targeted at beginners. Instead, large ecommerce companies tend to be the ones using this CMS platform, and they may have highly skilled teams at hand that can navigate the system.
Expensive pricing: Expect to pay much more for Adobe Commerce than you would with competitors like Squarespace or BigCommerce. However, the priciest options are reserved for the platform’s managed services, which may be worth the cost for companies wanting more of a hands-on approach to content management. Additionally, premade themes aren’t included, so you’ll need to budget extra for them.
Significant maintenance required: Small businesses may find Adobe Commerce too high-maintenance for their needs. Quality performance may require lots of upgrades and maintenance to the system and hosting for websites to load quickly and remain secure.

Adobe Connect Content Management System Compared

Our pick for the best content management system is WordPress, which blends ease of use with beginner to advanced features to fit just about any content management needs.

WordPress – Best overall content management system
Wix – Best website builder for content management
Shopify – Best CMS for Ecommerce
Squarespace – Best CMS for beautiful designs
BigCommerce – Best CMS for high-volume ecommerce
Joomla! – Best WordPress alternative
Drupal – Best CMS for security
Adobe Commerce (Formerly Magento) – Best CMS for advanced ecommerce Users
Adobe Experience Management Sites – Best AI-powered CMS
Magnolia CMS – Best omnichannel content hub

Adobe Connect Digital Asset Management Software Review

Adobe Experience Manager Assets is an ideal option for advanced users who are confident in their understanding of asset organization and management. It’s impressively rich in features, but some businesses might find it to be too complex for their needs.

If you need a simpler solution, check out some of the other options for the best digital asset management software.

What Makes Adobe Connect Digital Asset Management Software Great

Adobe Experience Manager Assets — Adobe’s digital asset management software targets advanced users with its feature-rich platform that’s speedy and responsive.

Asset automation: Businesses can save time organizing, storing, and optimizing assets with Adobe Experience Manager Assets. The software’s artificial intelligence adds tags to assets and resizes them automatically to fit ideal content sizes for multiple platforms. Smart Tags make your content more searchable to find when you need it.
Seamless integrations: As part of the Adobe ecosystem, Adobe Experience Manager Assets works smoothly with other Adobe products, especially Creative Cloud. Creative Cloud includes stock photos, graphic editing software, and other important digital assets and tools businesses use for marketing, offering an easy bridge between marketing and digital asset management.
Lots of space: It’s unlikely that a business will run out of space or feel restricted with Adobe’s DAM solution. Up to 2 GB uploads are allowed, and custom packages are available to ensure you have the space you need.
Agile workspace: The Adobe DAM workspace allows for massive customization and collaboration between team members. Multiple people can work on the same workspace at one time to manage or pull assets. Although some features are advanced, the interface itself is simple enough for virtually anyone to use easily.
Approval process: Admin can set review and approval processes in Adobe Experience Manager Assets to manage workflow and ensure that assets get full approval before entering the system. The system sends notifications to relevant users, letting them know whether assets need more work or have been approved.

Where Adobe Connect Digital Asset Management Software Falls Short

Adobe Experience Manager Assets agile workspace benefits — Adobe’s DAM software offers a scalable workspace that allows teams to collaborate efficiently.

Tech-focused setup: If you plan to DIY your Adobe setup, you should be sure to have a solid tech team on your hands. Documentation for this software is quite complex, and connecting it to your network infrastructure requires intermediate IT knowledge, at minimum.
Non-transparent pricing: Similar to other Adobe products, its DAM software only has custom pricing that you’ll need to reach out to the support team to learn more about. If you were interested in quickly comparing options, Adobe might be left off the list for this reason. With that said, you can expect to pay enterprise pricing for this software, as it’s mostly large businesses and enterprises that it caters to.
Complex features: The Adobe Experience Manager Assets interface is user-friendly, but many of the features accessible behind-the-scenes require development experience to use. This software simply isn’t for beginners, at least those who’ll be working mostly on the backend.

Adobe Connect Digital Asset Management Software Compared

While Adobe Experience Manager Assets is best suited for advanced users, we believe MediaValet has some of the most well-rounded features and is, therefore, our top digital asset management software pick.

MediaValet – Best for organizing gigantic asset libraries
CoSchedule Asset Organizer – Best for marketing teams
Filerobot by Scaleflex – Best all-in-one DAM software
Canto – Best for large organizations
Brandfolder – Best easy-to-use asset management
Adobe Experience Manager Assets – Best for advanced users
IntelligenceBank – Best DAM software for creative collaboration
Cloudinary – Best free digital asset management software
Extensis Portfolio – Best DAM software for content creators
Widen – Best DAM software for midsize organizations

Adobe Connect Electronic Signature Software Review

Adobe Sign is Adobe’s e-signature software that lets you and others sign electronic documents as quickly and conveniently as possible. It’s available as part of Adobe Acrobat, which also gives you access to PDF form creation, conversion, editing, and more.

We chose Adobe Sign as the best electronic signature software for small businesses because of its affordability and straightforward usage.

What Makes Adobe Connect Electronic Signature Software Great

Adobe Sign bulk signatures — Adobe Sign lets you send documents to multiple recipients in one click to get bulk signatures.

One-click bulk signatures: Rather than sending your document to each person separately for a signature, you can use Adobe Sign’s bulk-send feature to send a document to each recipient with the tap of a button. Your dashboard shows you who’s already signed and who still needs to, so you can send reminders if necessary.
User-friendly: Unlike some other Adobe products that are built more for large organizations and advanced users, Adobe Sign is much less complex. Most people can begin using it without a walk-through, as the interface guides you through each step for signing and getting signatures.
Mobile scanning: Connect the Adobe Scan app to your account to access quick and easy mobile scanning, allowing you to skip the scanner and upload a document with your mobile device instead. Users can also sign documents using the app on their devices.
Automated reminders: Although you can send manual reminders to document recipients to encourage them to sign, you can also save some time by setting automated reminders. Admin can also set reminders to appear in document audit reports to show reviewers when notifications were sent to various recipients.
Affordable pricing: Adobe Sign subscribers must purchase Adobe Acrobat Standard or Pro. However, either one is still a highly affordable option at $12.99 per month or $19.99 per month when paid annually. Plus, you’ll benefit from all Adobe Acrobat features for one price.
Custom branding: Every document you create or send with Adobe Sign can include your company branding for a cohesive look and feel. Signature invitations can also showcase custom messaging and logos.

Where Adobe Connect Electronic Signature Software Falls Short

Adobe Sign custom branding — Put your company’s branding on documents and invitations from Adobe Sign.

Subpar mobile app: While the Adobe Sign app is a convenient addition to the service, several users note problems with it crashing or moving slowly, especially with large documents. Some features available on the web-based version also are not as easy to use on the mobile app, like resizing fields and syncing.
Customer support issues: Adobe Sign doesn’t appear to have the same level of responsive customer support as other electronic signing software. A virtual assistant is available to help with some questions, but for more pinpointed support, you’ll need to wait for a response from the community forums or call the support center.

Adobe Connect Electronic Signature Software Compared

If your medium or large business needs more than what Adobe Sign provides, consider some of the other options for the best electronic signature software.

signNow – Best value electronic signature software
SignWell – Best free electronic signature software
SIGN.PLUS – Best electronic signature app
PandaDoc – Best for document management
DocuSign – Best multi-purpose electronic signature software
HelloSign – Best for legally binding documents
Adobe Sign – Best for small businesses
Signeasy – Best for individual and personal use
KeepSolid Sign – Best for signing documents offline
GetAccept – Best for B2B sales
SignRequest – Best for simplifying the e-signature process

Adobe Connect HTML Editor Review

Adobe’s HTML editor is known as Dreamweaver, which is part of the Creative Cloud bundle. It has a lot of exciting features and flexible coding capabilities, but it did not make our list of the best HTML editors.

One reason Dreamweaver fell short of our top picks is its confusing interface. Similar to many Adobe products, it errs more on the side of targeting advanced users than beginners, which can make it feel bloated and frustrating for people who are learning to code.

Unlike other editing tools, Dreamweaver is only available as a download, so you can’t use it in your web browser. This makes things a little clunky when switching between the tool and your website previews.

Finally, slower computers may not be able to run Dreamweaver efficiently because of its demanding specs compared to more lightweight solutions.

HTML Editors Compared

Adobe’s HTML editor is feature-rich and flexible, but there are a few others that we feel more precisely target specific use cases, making them land on our list of the best HTML editors.

UltraEdit — Best Versatility for Advanced Users
Sublime Text — Best for Customization
Atom — Best for Collaborative Coding
Visual Studio Code — Best for Debugging Code
BBEdit — Best for Simple HTML Editing
NoteTab — Best for Fast HTML Coding
TinyMCE — Best Flexible and Powerful WYSIWYG HTML Editor

Adobe Connect VoIP Call Recording Software Review

Adobe Connect includes a VoIP system that users can use to join meetings with audio. However, it does not offer a regular phone system, so this review focuses only on its Meetings product with VoIP.

Although it’s not the most robust VoIP call recording software, Adobe Connect provides an excellent selection of features for businesses prioritizing educational meetings.

What Makes Adobe Connect VoIP Call Recording Software Great

Adobe Connect for meetings — Adobe Connect offers an in-house VoIP system for dialing into meetings with audio.

Great interactivity: Adobe Connect with VoIP audio is one of the best of its kind in terms of interactivity, which is why it shines for educational purposes. Users can record video meetings, switch from a laptop to a mobile device and vice versa when on a call, share screens, draw and annotate, and more. Adobe Connect’s storyboards and layouts also let hosts present information in the most effective ways. Choose between layouts with multiple channels, multimedia types, and interactive elements to give participants the information they need.
Helpful audio controls: Whether you want to give only specific people the floor to speak during a meeting or you need to optimize VoIP audio levels, Adobe Connect provides numerous settings to do so. You can also allow participants to join with third-party audio rather than the Adobe Connect VoIP network.
Bandwidth allowance: Hosts can set a bandwidth allowance for meeting rooms to keep connections flowing smoothly while still getting information to attendees as necessary. The allowance also prevents poor connections from joining by setting a minimum connection per attendee.

Where Adobe Connect VoIP Call Recording Software Falls Short

Adobe Connect meetings interface — Adobe Connect’s new meeting interface is simpler and more responsive than its previous version.

Lack of basic phone features: While Adobe Connect shines in its ability to create immersive educational experiences and webinars, it’s not as ideal for businesses needing a traditional phone system, too. You can’t get business phone numbers or calling systems through Adobe Connect like you can with services like Nextiva or Ooma.
Higher prices: Considering that other options, like Nextiva and RingCentral, have plans in the $25-$35 per month range with full phone and video services included, Adobe Connect’s $50 per month pricing for its Meetings solution is relatively steep. Plus, adding Webinars is another $130 per month.
Complex setup: A running theme with Adobe Connect is its complexity, which can be great for advanced users with detailed setup needs. However, setting up video meetings and VoIP audio can be more complicated than necessary with this system, which could be a turn-off for hosts who aren’t as well-versed with more intricate meeting and VoIP settings.

Adobe Connect VoIP Call Recording Software Compared

Adobe Connect is excellent for educational institutions, but other types of businesses may want to try another VoIP call recording software.

Nextiva — Best all-in-one business phone system
RingCentral — Best business phone system with video call recording
Ooma — Best for small and medium businesses (SMBs)
8×8 — Best flexible call recording service
Adobe Connect — Best for educational institutions that host frequent webinars
Callcap — Best third-party call monitoring and analysis
CallRail — Best for tracking multiple campaigns
CallTrackingMetrics — Best call recording controls
Cube ACR — Best free call recording service for Android phones
Gong.io — Best AI call analysis for sales teams
LiveAgent — Best all-in-one solution for customer support teams
MightyCall — Best for solopreneurs who need long-term call recording storage
Recite by Numonix — Best for security and compliance

Adobe Connect Web Design Software Review

Adobe Dreamweaver is the company’s web design software in addition to its HTML editing solution. Although its live previews and templates are great, the software may feel too complicated for most individuals and companies looking to build sites quickly.

The primary reason for Adobe not making our list of the best web design software is that it’s not built for simplicity. Unlike other options, like Wix and Webflow, Adobe’s interface can feel overwhelming.

We also didn’t choose it as a top option because of its speed. On high-performance computers, the software typically runs smoothly. But on slower systems, you might experience bumpy transitions and lags that interfere with speedy designing.

Web Design Software Compared

In terms of ease of use and speed, Adobe Dreamweaver doesn’t quite live up to these other options for the best web design software.

Webflow — Best for Designing Production-Ready Websites
WordPress — Best for Content Websites and Blogs
Wix — Best for Beginners
Figma — Best for Teams and Agencies
Sketch — Best for Creating Prototypes and Designs

Adobe’s social media scheduler, Adobe Express Schedule, is part of the Adobe Express suite of tools similar to Canva.

Unfortunately, the scheduling tool isn’t available as a standalone option, which is the main reason it didn’t make our top list of social media scheduling tools. Adobe Express Schedule isn’t the right solution if you’re looking solely for social media automation.

With that said, you can pay $9.99 per month or $99.99 per year to get the full Adobe Express service with social media scheduling and graphics creation.

However, the social media scheduling tool itself lacks advanced features, like ideal post time suggestions, and connections to platforms like Tumblr, Reddit, and Facebook Groups.

Social Media Scheduling Tools Compared

Adobe Express Schedule is an easy-to-use content scheduler to help you stay on top of your social media game. However, it’s not quite as robust as others that made our best social media scheduling tools list:

SocialBee – Best Overall
Sprout Social – Best for Bigger Businesses
Later – Best for Social Media Managers
Agorapulse – Best for Teams
Buffer – Best for Keeping it Simple
Napoleon Cat – Best for Automation
MeetEdgar – Best if You’re Short on Time

Adobe Connect PDF Editor Review

Adobe Acrobat Pro is probably the most well-known PDF editor on the market. This is not a big surprise, given that Adobe was the original creator of the PDF file type back in the early 1990s.

Adobe’s software has evolved to cater to a wide range of needs when working with PDFs. With Adobe Acrobat Pro, you have full control over PDFs, from creating and converting them to editing PDFs and gathering electronic signatures. Learn more about Adobe Acrobat Pro and other PDF editor alternatives.

What Makes Adobe Connect PDF Editor Great

Adobe Acrobat Pro PDF editing — Make fully editable PDFs with Adobe Acrobat Pro.

Complete PDF editing control: Adobe doesn’t leave a single feature behind when it comes to creating and editing PDFs. Document owners can edit any piece of the PDF at any time, as well as export, print, and share them with others. Additional highlights include the ability to add comments to and highlight parts of PDFs, merge multiple documents into one PDF file, and split larger documents into separate PDFs.
Feature-packed mobile app: Mobile app users can do virtually anything with a PDF using Adobe Acrobat Pro’s desktop version. The app provides collaborative tools, like signing, reviewing, and sharing PDFs with others, and all editing tools to help you manage PDFs on the go. You can also track PDFs as they get shared, downloaded, signed, opened, and more.
Document security: Adobe Acrobat Pro provides document protection with passwords to ensure that a PDF is only accessible by allowed personnel. Document administrators can remove passwords at any time, apply custom protections to a document, and add safety certificates to PDFs for an extra layer of protection.
Document organization: Make documents look exactly how you need them to with Adobe Acrobat Pro’s organization tools, which include page rotation, deletion, reordering, and insertion. You can also extract single or multiple pages from a document to save as a new PDF. In other words, every document you create is fluid to adapt to your needs.
Affordable pricing: Adobe Acrobat Pro is $19.99 per month when billed annually, which is a small price to pay for such robust features, especially if your business heavily relies on PDF documentation. It also includes Adobe Sign, an added bonus if you frequently collect signatures on documents. Annual subscriptions can be canceled for a full refund within 14 days if you’re not satisfied, but you can also download a one-week trial before buying.

Where Adobe Connect PDF Editor Falls Short

Adobe Acrobat Pro mobile app collaboration — Adobe Acrobat Pro’s mobile app allows the same level of collaboration as its desktop tool.

Conversions can be clunky: While Adobe Acrobat Pro excels with PDF document creation and editing, file types from other programs don’t necessarily convert as well to PDF with Adobe as expected. You might run into formatting and data loss issues when converting, although this problem is more of a PDF conversion issue in general rather than an exclusive Adobe issue. Still, it’s something to be aware of if you plan to convert a lot of files to PDF.
Layouts can be tricky: Adobe Acrobat Pro is simple to use for creating documents, but creating more complex PDFs can come with a learning curve. You might need to experiment a bit with your layout to get the final product to look the way you want.

Adobe Connect PDF Editor Compared

Adobe Acrobat Pro is our top PDF editor pick for most businesses, but you can also find other excellent solutions that might suit your needs better.

Adobe Acrobat Pro DC—Best Overall
PDF Candy—Best Free PDF Editor with OCR for Scanned Documents
PDF Expert—Best for Editing Short Documents Using Clean Tools
PDFelement Pro—Best for Editing Large Documents
Foxit Phantom PDF—Best for Mobile PDF Editing
Nitro PDF Pro—Best for Collaborating on PDFs

Final Verdict

Adobe’s suite of products does many things well, including video recording, collecting electronic signatures, and digital asset management. It also easily leads the pack in its powerful PDF creation and editing capabilities.

As webinar software, Adobe Connect is simply too pricey compared to competitors offering similar services. However, it could be the right solution for companies already investing in other Adobe products, as it seamlessly integrates with Adobe tools.

December 29, 2022

Collective #745

Inspirational Website of the Week: Constance Souville Portfolio

The last inspirational website of the week is Constance Souville’s lovely portfolio which boasts a visually appealing and distinctive design with engaging details.

Get inspired

Microfeed

A lightweight CMS for blogs, podcasts, documents and more. Self-hosted on Cloudflare.

Check it out

React Wrap Balancer

A simple React component that makes titles more readable. Made by Shu Ding.

Check it out

Koi Pond

Scott Darby made this wonderful interactive koi pond demo with a heightfield water simulation, real-time refractions and a generative night sky that’s different each time.

Check it out

OpenAI PHP

Nuno Maduro made OpenAI PHP for Laravel which is a supercharged community PHP API client that allows you to interact with the Open AI API.

Check it out

EFA World Cup 2022

A cool interactive website with an eco-friendly activities contest.

Check it out

Framer Awards 2022

The Framer team is inviting you to design and publish your most creative site and join the #FramerAwards2022. The Framer team will review all submissions and announce winners in the end of January.

Check it out

Things CSS Could Still Use Heading Into 2023

Chris Coyier shares his thoughts on the exciting possibilities for the future of CSS in this article, offering a collection of innovative ideas for what the styling language could achieve.

Read it

A CSS challenge: Skewed Highlight

Sacha Greif recently issued a challenge on Twitter, daring his followers to create a visually striking highlighter effect using only CSS. Vadim Makeev accepted the challenge and set to work on coding a solution.

Check it out

Jazz.Computer

An interactive song by Yotam Mann with visual design by Sarah Rothberg. Scroll to play it!

Check it out

CSS Subgrid

Get ahead of the game and learn about the potential of subgrid in web design with Rachel Andrew’s informative article on the subject.

Read it

2022 Roundup of Web Research

Geoff Graham from CSS-Tricks has compiled the annual roundup of the latest front-end research, showcasing this year’s trends and offering insights into what we can expect in the coming year.

Read it

Localfonts

This handy tool allows you to preview and compare your local fonts against various background colors, making it easy to select the most fitting font for your newxt project.

Check it out

This is the year of the RSS reader. (Really!)

Nikki Usher’s prediction for the next year: a better, bigger, bolder RSS reader.

Check it out

Pbproxy

If you need to access and manipulate the clipboard on a remote machine, this tool makes it easy to do so.

Check it out

Obscure CSS: Restoring Visibility

In this article, Roman Komarov talks about one of the interesting aspects of the visibility propery in CSS and proposes a bold idea: what if we would never use visibility: visible?

Read it

Parsify Desktop

In case you didn’t know about it: Parsify Desktop is a next generation, notepad-based calculator, built with extendibility and privacy in mind.

Check it out

From Our Blog

UI Interactions & Animations Roundup #27

Looking for a fresh burst of animation inspiration? Check out this new collection of creative Dribbble shots.

Check it out

December 12, 2022

What is Headless WordPress and Should You Use It? (Pros & Cons)

We are often asked by users about what is headless WordPress and should they use it?

Headless WordPress separates WordPress’s back-end admin area from the front-end that visitors see. This allows developers to use different technologies for the front-end part of a website while still keeping the stability and security of WordPress.

In this article, we’ll explain what is headless WordPress and if should you use it. We’ll also talk about the pros and cons of a headless WordPress website.

Here is a quick overview of the topics we’ll cover in this guide:

What is Headless WordPress?
How Headless WordPress Works?
What Are the Advantages of Using Headless WordPress?
What Are the Disadvantages of a Headless WordPress Website?
Should You Use a Headless WordPress Website?
How to Make a Headless WordPress Website?

What is Headless WordPress?

Headless WordPress is a term for any website that uses WordPress as the back-end software to manage data and content, but uses separate technologies to display the data on the front-end.

The back-end is the term used for the admin area of a website. This is where you create content like posts and pages, install plugins, manage comments, and more.

Front-end is the publicly visible area of your website.

This is what the users see when they visit your site their browsers.

WordPress normally takes care of both components in one robust software. You can simply use any WordPress theme to display your website.

However, some developers and website owners may have different requirements where they may need to use others technologies such as React.js, Angular.js, Faust.js, and others to create a custom front-end for their website.

Headless WordPress allows them to use those technologies while still using WordPress in the backend for easier content management.

How Headless WordPress Works?

WordPress comes with an easy-to-use admin area where you create content and manage your website. It also includes a templating engine to display the front-end of your site using themes.

For more details, see our article on how WordPress works behind the scenes.

WordPress also ships with an API called WordPress REST API.

This API provides a programming interface for developers to access WordPress website data in JSON format.

When making a headless WordPress website, developers use the REST API to fetch data from WordPress. After that, they can use it in their apps or other front-end technologies like React.js, Angular.js, Faust.js, and more to create a custom website.

What Are the Advantages of Using Headless WordPress?

Headless WordPress can be beneficial in some specific scenarios. We’ll talk about some of the advantages of using headless WordPress in those.

1. Headless WordPress Can Be Faster Than Regular WordPress Website

Many developers believe that headless WordPress can be used to create a much faster WordPress website.

By separating the front end of the site using technology such as React.js, many developers try to deliver more efficient code than most WordPress themes.

However, in our experience simpler WordPress performance optimization techniques work just as good as headless WordPress for most small business websites and use-cases.

2. Integrate Headless WordPress Data into Other Apps

Let’s say you have a mobile app and now you want to integrate your blog or other section from your WordPress website into that app.

Headless WordPress can help you bring your WordPress data into other apps, and you can use different technologies to create a seamless user experience.

Similarly, if you have a static website, and you need a dynamic section only for a specific section like a blog, reviews, or online store. Then headless WordPress can integrate WordPress data into your static website.

3. Publish on Multiple Platforms via Headless WordPress

Headless WordPress makes your WordPress data portable, so that you can take it anywhere.

You can use the data in your marketing campaigns, post on social media platforms, use it on IoT devices such as smart speakers, feed an artificial intelligence tool, connect to virtual assistants, and more.

4. Headless WordPress is far more affordable than proprietary headless CMS

Headless WordPress is far more affordable and powerful than proprietary “enterprise CMS” solutions like Contentful which will easily cost you tens of thousands in hosting alone (not including development costs).

What Are the Disadvantages of a Headless WordPress Website?

Creating a headless WordPress website may also put your website at certain disadvantages. Let’s take a look at a few of them.

1. Headless WordPress is More Expensive compared to Traditional WordPress sites

You’ll need to hire a developer to make a custom front end for your website. This could easily get into the range of tens of thousands of dollars.

If you are a developer, then you’ll be spending valuable time making a custom front end.

Even if you are using a front-end development framework, it would take more time and effort than using a ready-made WordPress theme with proper caching on server / DNS level.

2. Some WordPress Plugins May Not Work

Plugins are like apps for your WordPress website, and they allow you to add new features to your site and extend its functionality.

A headless WordPress website may not be able to take advantage of some of the WordPress plugins.

For instance, some WordPress plugin data may not be accessible using the REST API, or plugin features may require a WordPress theme to function properly.

With that said, popular WordPress plugins like AIOSEO have a REST API extension that lets you create SEO friendly headless WordPress sites.

3. Maintainance Headaches

You’ll basically be using separate platforms for the front and back end of your site, and you will need to maintain both of them separately.

Occasionally, things may break down on either side. You will need to rely on developers to sort out these issues. Or you will spend your own valuable time fixing them.

The additional complexity will make it harder as your business grows.

Should You Use a Headless WordPress Website?

In our opinion, most WordPress users don’t need to use a headless WordPress website or other types of headless framework.

It is expensive, needlessly complicated, and not suitable for vast majority of website owners, bloggers, small businesses, or online stores.

For instance, if speed and performance is your main concern, then your existing WordPress website can easily beat any headless WordPress website.

All top WordPress caching plugins come with page caching, cache preloading, object caching, and gzip compression features.

Turning on these features can significantly boost your website speed without hiring any developers.

Combine that with a powerful CDN and web application firewall like Cloudflare or Sucuri, and your website will be even faster.

See the case study of how we made WPBeginner load faster than headless websites.

As for integrations, there are more than 59,000+ WordPress plugins offering integrations with almost every third-party platform available.

There are even tools like Uncanny Automator that allow integrations with WordPress websites and third-party tools using Zapier.

If you need an integration that is not available via an existing WordPress plugin, then perhaps you should hire a developer to write a custom plugin.

This will cost a lot less, and you can even make money online by selling it as a digital download to other WordPress users.

Who Should Use Headless WordPress?

We believe that headless WordPress should only be used in very specific scenarios.

First, you need to evaluate if there is a genuine need for headless CMS.

For instance, a company that has built a custom website or an app. They might need WordPress for easier content management features, and in that scenario it makes sense to use headless WordPress.

Secondly, you should either have the budget to hire & retain developers or have the skillset required to maintain a headless CMS.

Remember, a headless WordPress CMS is used for creating a new custom app, or one that uses WordPress for easier content creation and management.

Important Thing to Watch Out for with Headless WordPress

As a non-techy business owner, sometimes it’s hard to know if you truly need headless WordPress.

Some WordPress developers and agencies will try to push headless websites on you, and you must know what you’re getting yourself into. Remember their incentives are to charge you more money.

If the only reason why they propose headless WordPress is speed or SEO, then you must ask them what have they already done to optimize the speed of your website, and how big of the impact will switching to headless WordPress may have. If you don’t get a concrete answer, then you should look for a second opinion.

You will be surprised that for vast majority of websites, the improvements are negligible, but the cost to develop & maintain headless WordPress websites are much higher.

Whatever you do, definitely do not let anyone talk you into switching away from WordPress to something like Contentful because you’ll be highly disappointed.

We have heard numerous business owners switching only to realize what a mistake they had made, and then converting back to WordPress.

What that said, if you’re 100% convinced that you need a headless WordPress website, then below is a quick step by step guide.

How to Make a Headless WordPress Website?

There are many ways to make a headless WordPress website depending on what tools you want to use for the front end.

For the sake of this tutorial, we’ll show you how to create a headless WordPress website using only the static pages generated by WordPress. This is NOT the most flexible way to create a headless WordPress website, but it is the easiest way for beginners.

First, you need to make a WordPress website that you want to use as your headless CMS.

This needs to be a live website on its own domain name and web hosting account.

We recommend using SiteGround. They are one of the fastest WordPress hosting companies and an officially recommended WordPress hosting provider.

SiteGround servers are powered by Google Cloud and they have many built-in performance optimization tools.

Alternatively if you can spend a little more, then take a look at WP Engine. Their Atlas plan is made for large headless WordPress websites and is targeted towards developers.

Atlas comes with a free sandbox account, custom content modular, pre-configured blueprints to speed up your workflow, and a deeper integration with WPGraphQL plugin.

You can also make a local WordPress website on your own computer.

After that, you can start working on your website by adding posts and pages. You can also choose a WordPress theme for your website and design your website.

Once your website is ready, you need to install and activate the Simply Static plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Simply Static » Settings page to configure the plugin.

From here, you can choose the URL path you want to use in your static files.

For instance, if you know the URL or domain name where you will host your static files, then you can provide that URL under the ‘Absolute URLs’ field.

If you are unsure, then you can use the ‘Relative URLs’ option.

Next, switch to the ‘Include/Exclude’ tab. From here, you can add additional pages that you want to include or add pages that you want to exclude.

You can also use regex expressions to exclude URLs that match a specific pattern.

Don’t forget to click on the ‘Save Changes’ button to store your settings.

Now, you are ready to generate static files for your headless website. Simply go to the Simply Static » Generate page and click on the ‘Generate Static Files’ button.

The plugin will then start crawling your website and storing static files in a temporary folder. It may take a while depending on how many pages your website has.

Once finished, you will see a success notification with a link to download files to your computer in a zip archive format.

After downloading the zip file, you will need to extract it.

You are now ready to upload the extracted files to your website or the server where you want to host your headless website.

Simply connect to your website using an FTP client or use the file manager app in the hosting control panel.

Once connected, upload the extracted static files you downloaded earlier to your website.

After that, you can visit your static website to see it in action.

Note: To update your static website, you will need to create new content in your WordPress installation and then repeat the whole process again to replace the static files being served to your users.

It’s important to note that this is not the most flexible way to create a static WordPress website.

When you’re using a headless WordPress solution like WP Engine Atlas, it comes with better developer tooling, starter site blueprints, how-to guides, smarter production deployment solutions, and more.

For larger websites and enterprise solutions, we would recommend using WP Engine Atlas along with WPGraphQL to unlock the full power of headless WordPress CMS.

With that said, if you’re a small business owner and read somewhere that you need a headless WordPress site to improve your SEO rankings, that’s just wrong advice. You can get similar results by just improving your website performance by following our guide on how to speed up WordPress.

We hope this article helped you learn what is headless WordPress and if should you use it for your website. You may also want to see our guide on how to create a custom WordPress theme without coding, or see our comparison of best smtp services to improve email deliverability.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post What is Headless WordPress and Should You Use It? (Pros & Cons) first appeared on WPBeginner.

October 14, 2022

2022’s CMS Market Share Report – Latest Trends and Usage Stats

Are you looking for the latest CMS market share trends and usage stats?

These statistics can help you better understand the CMS market so you can choose the best CMS for your needs. Or you might even learn something new about your favorite content management system.

In this CMS market share report, we’ve collected the latest trends and usage stats for all the biggest content management systems.

2022's CMS market share report - latest trends and usage stats

CMS Popularity and Market Share Report 2022

We’ve divided this CMS market share report into several different categories. Simply use the table of contents below to jump straight to the statistics or content management system you’re most interested in.

CMS Usage Statistics
CMS Market Share
Content Management System Market Value
WordPress Market Share
eCommerce CMS Platforms Market Share
Wix Market Share
Squarespace Market Share
GoDaddy Market Share
Joomla CMS Market Share
Weebly Market Share
Drupal CMS Market Share
Shopify Market Share
CMS Predictions for 2022 and Beyond

CMS Usage Statistics

In 2011, around 76% of all websites were hand-coded. By 2022, this figure had fallen to around 33%.
Today, over 78 million websites use a content management system. That’s around 58% of all websites.
When we look at the top 1 million websites based on traffic, almost 900,000 use a CMS. That’s nearly 90%.
However, experts warn that content management systems may be less popular in the business space. This is due to the higher costs of setting up a CMS for business use and a lack of CMS knowledge among small-to-medium enterprises.

The best content management systems make it easy to manage your content and create web pages, usually without having to write any code.

While it is possible to build a website without a CMS, you would need to learn a few different programming languages such as HTML, CSS, and PHP. You might even need to hire expert developers or web design specialists.

Without a CMS, you would need to write code every time you wanted to update your site. You might also have to deal with common errors if you make a mistake in the code.

With that being said, it’s not surprising that so many websites already use a CMS. In the future, we expect to see the number of hand-coded sites continue to fall, as more and more people realize the benefits of a good CMS.

Throughout 2021, North America held a dominant share of the global CMS market, with Europe holding the second largest share.
Experts predict that North America’s share will continue to grow throughout the 2022-2028 time period.
When compared to other regions, it is estimated that Latin America, the Middle East, and Africa will contribute the least to the global market throughout 2022-2028.
According to experts, the government, life science, medical and health, retail, consumer goods, and defense sectors all contribute “significantly” to the size of the CMS market.
In 2021, enterprise web content management dominated the CMS sector, although the healthcare sector did acquire a “significant” share of the CMS market.
Experts predict that the Asia Pacific region will see the highest compound annual growth rate (CAGR) throughout 2022-2028. CAGR is the average rate that an investment grows or shrinks over a period of time.
According to experts, the CMS market in the Asia Pacific region is currently experiencing growth due to more small and medium-sized businesses adopting content management systems.

North America may continue to dominate the CMS market, but experts predict that the Asia Pacific region will get the highest return on investment out of all the regions.

This suggests the Asia Pacific market will play a much larger role in the CMS space, moving forward.

Content Management System Market Value

The global CMS market was valued at approximately $35,903 million in 2018.
By 2021, the global CMS market was worth around $17.5 billion.
The CMS sector is predicted to hit $25.5 billion by 2028.
Experts predict that the CMS market will have a compound annual growth rate of roughly 6.5% between 2022 and 2028.

No matter whether you’re starting a blog, running a global eCommerce business, or making a small business website, the right CMS can help you succeed.

With 58% of all websites now using a CMS, it’s easy to see why this is a billion-dollar industry that shows no signs of slowing down.

WordPress has the biggest CMS market share.
Out of all the websites that use a known CMS, 45% of those sites use WordPress.
In 2022, WordPress has a 64.2% share of the global CMS market.
It is estimated there are 34,896,678 live WordPress websites.
There are over three million, five hundred thousand WordPress blogs and websites in the US alone.
When we look at the top 1 million sites based on traffic, 28.7% of those sites use WordPress open-source software.
29.65% of the top 100 thousand websites use WordPress, and 29.41% of the top 10 thousand sites run on WordPress.
The WordPress CMS market share has grown from 55.3%-64.2% between 2011 and 2022, which is an 8.9% increase.

WordPress is the world’s most popular CMS, and that seems unlikely to change anytime soon.

The figures show that the number of hand-coded websites has decreased every year since 2011. At the same time, the number of WordPress websites has increased every single year. This suggests that WordPress is a popular choice among first-time CMS users.

This makes sense, as WordPress is one of the most user-friendly content management systems. WordPress is also one of the most flexible and customizable CMS platforms, and you can even download it for free from WordPress.org.

No matter whether you want to start a personal blog, an online store, or a multilingual website, you’ll have no problems finding the perfect WordPress theme and plugins. You can think of plugins as modules or apps that extend the core CMS.

WordPress is also optimized for search engines and gives you easy access to specialist SEO tools such as AIOSEO. All of this explains why WordPress has such a big user base.

Since WordPress is an open-source CMS, you can use it with a huge range of different WordPress hosting providers. Again, this makes WordPress a flexible CMS that appeals to lots of different people and businesses.

However, although WordPress has a far bigger market share than any other CMS, the content management system space is huge.

Even a 1% market share still translates to millions of websites. With that in mind, many of the content management systems in this report are still big players on the CMS market, even if they can’t compete with the sheer number of WordPress websites.

For more information, please see our ultimate guide on how to create a WordPress website.

eCommerce CMS Platforms Market Share

The WooCommerce eCommerce WordPress plugin

When you look at the top 1 million eCommerce sites, 2.67% of them use WooCommerce, a popular WordPress plugin.
3.84% of the top 100 thousand websites use WooCommerce, and 3.82% of the top 10 thousand sites use WooCommerce.
Out of the top 1 million eCommerce sites, Shopify is the second most widely used CMS at 2.05%.
Meanwhile, 0.85% of those sites use Magento, and 0.49% use OpenCart.

It may not be a standalone CMS, but the statistics show that a significant number of online stores use WordPress and WooCommerce to create a CMS with eCommerce functionality. For this reason, we’re including WooCommerce in our CMS market share report.

According to the data, eCommerce sites that get the most traffic are more likely to use WooCommerce, although Shopify is a close second favorite among the top online stores.

Shopify is a fully hosted platform so you don’t need to worry about performance, which could explain why Shopify is used by 2.05% of high-traffic eCommerce sites.

Similarly, there is no shortage of managed WordPress hosting providers who can fine-tune your WooCommerce store and make sure it provides the best possible customer experience.

If you choose WordPress and WooCommerce as your eCommerce CMS, then you’ll also have access to lots of WooCommerce plugins that can extend and optimize the platform.

Since WooCommerce is a WordPress plugin, you can also follow our ultimate guide on how to boost WordPress speed and performance.

With their managed hosting and high performance, both Shopify and WooCommerce have a lot to offer online store owners and entrepreneurs. For a more detailed look at these two platforms, please see our Shopify vs WooCommerce comparison.

Wix is the CMS with the second biggest market share

Out of all the websites that use a known CMS, around 10% of those sites use Wix. This makes Wix one of the most popular content management systems.
Wix is used by around 7 million websites.
In the United States, 991,860 websites use Wix.
Despite holding a 10% share of the global CMS market, Wix only powers 0.56% of the top 1 million websites.
0.69% of the top 100 thousand websites use Wix, and 0.98% of the top 10 thousand sites use Wix.

When we compare Wix’s market share to its closest competitor, we get interesting results.

Out of the top 1 million sites, 28.7% of those websites use WordPress but only 0.56% use Wix. This suggests that Wix appeals to small sites and businesses that get less traffic, rather than high-traffic websites.

By comparison, high-traffic websites are much more likely to use WordPress.

For a more detailed comparison, please see our complete guide to Wix vs. WordPress – which one is better?

Looking at the websites with a known CMS, around 3.71% of those sites use the Squarespace CMS.
Around 2,896,221 live websites use Squarespace.
0.69% of the top 1 million sites use Squarespace.
1.36% of the top 100 thousand websites use Squarespace, while 3.16% of the top 10 thousand sites use this popular hosted platform.
Squarespace’s CMS market share has grown from 0.2%-3.0% between 2011 and 2022, which is a 2.8% increase in 10 years.

Similar to Wix, Squarespace is much more popular among sites that have less traffic, compared to sites that get lots of visitors.

This makes sense, as Squarespace is best known for its ready-made templates and ease of use, which makes it a great platform for first-time website owners and smaller businesses.

Squarespace also has some limits that may be less appealing to larger businesses. For example, Squarespace only has a few integrations with third-party services. This can be a problem for big companies that want to use lots of different software and services with their content management system.

All of this may explain why we see larger organizations opt for flexible platforms such as WordPress, while smaller sites tend to choose hosted platforms like Squarespace or Wix.

For more information on this topic, you can see our guide on Square vs. WordPress – which one is better?

2.24% of all websites with a known CMS, use the GoDaddy website builder.
It is estimated that 1,750,645 live websites are GoDaddy sites.
When we look at the top 1 million sites, 0.02% of those sites use GoDaddy.
0.02% of the top 100 thousand websites use GoDaddy, while 0.03% of the top 10 thousand sites are built with GoDaddy.

Our market share stats show that very few high-traffic websites use GoDaddy, which reflects the audience that GoDaddy seems to be targeting.

GoDaddy’s website builder is a simple and easy tool that lets you create a professional looking website without any special design or development skills. It comes with ready-made blocks and layouts, which are perfect for anyone who is looking to create a website, fast.

However, GoDaddy is not as feature rich or flexible as some of the other content management systems and builders on our list. This could explain why it’s only used by 0.02% of the top 1 million websites.

If you’re looking to move away from GoDaddy, then you can see our expert pick of the best GoDaddy alternatives.

1.72% of all websites with a known CMS, use Joomla.
It is estimated that 1,325,993 live websites use Joomla.
When we look at the top 1 million sites based on traffic, 1.34% of those sites use the Joomla CMS.
2.04% of the top 100 thousand websites run on Joomla, while 1.89% of the top 10 thousand sites rely on Joomla as their CMS.
Joomla’s CMS market share has reduced from 10.9% to 2.5% between 2011-2022. That’s a 8.4% decrease in 10 years.

Joomla still has a significant user base, but the growing popularity of user-friendly platforms such as WordPress and Shopify have affected its market share.

Many shared hosting providers offer one-click install packages for Joomla. However, the Joomla control panel isn’t as straightforward as other systems, with lots of different menus and settings that you can use to customize your site. This means that Joomla has a steep learning curve.

By default, Joomla also doesn’t allow users to install extensions and templates from the control panel, which can make it difficult for first-time users to find helpful addons.

This is a powerful platform with a loyal fanbase, but with so many user-friendly alternatives we may see Joomla’s market share continue to decline.

To learn more, please see our guide to WordPress vs. Joomla Vs. Drupal.

1.28% of all websites that use a known CMS use Weebly.
It is estimated that 991,368 live websites run on Weebly.
When we look at the top 1 million sites based on traffic, 0.09% of those sites use the Weebly CMS.
0.17% of the top 100 thousand websites are built using Weebly, while 0.31% of the top 10 thousand sites use Weebly.

Weebly is a fully hosted platform that has everything beginners need to build a website, including ready-made templates. a built-in contact form, professionally-designed sliders, and photo galleries.

It’s an easy-to-use platform, which explains why Weebly has a user base of over 991,000 websites.

However, as a fully hosted platform you’re locked into the functionality that Weebly provides. You can’t hire a developer or designer to add new features to a Weebly website, which might be why so few high-traffic websites use Weebly.

For more details, please see our guide on WordPress vs. Weebly – which is better?

0.71% of all websites whose CMS is known, use Drupal.
It is estimated that 555,754 live websites use Drupal.
When we look at the top 1 million sites based on traffic, 2.93% of those sites are built using Drupal.
6.82% of the top 100 thousand websites use Drupal, compared to 10.46% of the top 10 thousand sites.
Drupal’s CMS market share has reduced from 6.1%-1.8% between 2011 and 2022. That’s a 4.3% decrease in 10 years.

The CMS statistics show that Drupal has a smaller overall market share compared to other content management systems on our list. Despite this, Drupal is used by a much larger percentage of high-traffic sites.

By comparison, Wix has a much larger overall market share (10%) but is used by a much lower percentage of the top 1 million websites (0.56%).

Drupal may not be the most popular CMS platform, but it’s a powerful software with lots of support resources. It also has a reputation as a very secure CMS.

While smaller websites, first-time site owners, and bloggers are choosing user-friendly platforms, the figures show that Drupal still has a loyal following among high-traffic websites.

For more information, please see our guide on WordPress vs. Joomla Vs. Drupal – which one is better?

Shopify has a 6.2% share of the CMS market.
Impressively, Shopify’s market share has risen from just 3.4% in 2020 to 6.6% in 2022. That’s an increase of 3.2% in just two years.
It is estimated that 3,834,405 live websites use Shopify.
Shopify is used by 2.05% of the top 1 million eCommerce websites.
2.62% of the top 100 thousand websites use Shopify, while 3.99% of the top 10 thousand sites are Shopify websites.
During the fourth quarter of 2020, Shopify reported earnings of $977.7 million, which was a 94% increase compared to the same period in 2019.
In 2020, Shopify reported a 53% year-over-year increase in subscription revenue.

Shopify had a sudden spike in popularity between 2020-2022, which saw its market share rise by 3.4% in just two years.

Many experts say this is due to the COVID-19 pandemic. With physical shops closed around the world, many businesses needed an easy way to sell their products online during this time.

As an all-in-one fully hosted eCommerce platform, Shopify is a user-friendly choice for anyone who wants to launch an online store, fast. Shopify comes with full inventory management, unlimited products, powerful analytics, marketing tools, and lots of designs, all in one product.

However, Shopify forces you to use its Shopify Payment platform. If you prefer to use your own payment processing solution, then Shopify charges an extra 2% transaction fee which is very high compared to other eCommerce solutions.

With that in mind, we may see Shopify’s growth slow as store owners start to look for more affordable Shopify alternatives. For example, you might move from Shopify to WooCommerce.

CMS Predictions for 2022 and Beyond

Experts predict that artificial intelligence and machine learning will be big trends in the CMS space.
In particular, they see an increasing demand for image recognition, voice recognition and transcription, natural language understanding and natural language processing in content management systems.
Studies predict that personalized technologies will be another must-have feature among CMS users.

Artificial intelligence and machine learning promise to make all kinds of tasks easier and more efficient.

The world of content management systems is no exception, and it will be interesting to see how these platforms use advanced technologies in the future.

Sources: BuiltWith Trends, W3Techs, Zion Market Research, Facts and Factors, Statistica, Shopify, BuiltWith Knowledge Base.

We hope this CMS market share report helped you learn all about the latest trends and usage stats. You may also want to see our research on top marketing statistics as well as latest web design trends and stats.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post 2022’s CMS Market Share Report – Latest Trends and Usage Stats first appeared on WPBeginner.

September 15, 2022

Accessibility In Times Of Headless

This article is a sponsored by Storyblok

We should all care more about web accessibility. It’s the best tool to make the web a more inclusive, equal space — and, in my opinion, it’s our responsibility as developers, UX specialists, and designers to support this mission. While the CMS might, at first glance, seem like a small piece of the puzzle, it’s really the baseline to set your project up for success.

Let’s have a closer look at the basics of web accessibility, the difference between monolithic and headless content management systems, and how to make the most of your CMS in terms of accessibility.

What Is Web Accessibility?

Web accessibility means, in short, that we design and implement our projects in a way that people with disabilities can use them and participate as equally as possible. There are many different kinds of disabilities like physical, auditory, cognitive, speech, neurological, or visual disabilities. In the World Report on Disabilities by the WHO from 2011, it was found that over 15% of the global population experiences some form of disability throughout their lifetime — that’s 1 billion people in total; and with the global population generally growing older, it will only continue to rise.

But the applications for web accessibility are even broader: making your website accessible benefits not only people with permanent disabilities but also those with situational or temporary impairments, like folks with a broken arm or new parents holding their baby (and only having one hand free to use a device). Looking at your phone in bright sunlight, you probably rely on sufficient color contrast, and captions enable you to watch videos without turning to volume up in a quiet environment.

In short: Web Accessibility benefits all of us.

But What Does That Mean In Practice?

Web Accessibility takes many shapes and forms, but it could mean, for example, including alternative texts for your images, adding captions to videos, and ensuring enough contrast between background and foreground for texts. Keyboard navigation is also essential in making your website more accessible, as many users rely on their keyboard or assistive technology to navigate the web. The same is true for writing semantic code — making sure you are using the right HTML elements and structure gives assistive tech lots of valuable context — while simultaneously improving your code.

While the whole task of making your website accessible may seem daunting at first, there are many good resources out there, like the Web Content Accessibility Guidelines (WCAG) for instance. These guidelines were developed to promote a unified, international standard for web accessibility. They include three different levels of accessibility (A, AA & AAA), A being the least and AAA the most inclusive.

Why Does The CMS Matter?

Ideally, your content management system is where it all comes together, right? And having the right tool for the job will make it much easier for everyone involved to create an accessible website. In short: once you have found the ‘right’ CMS, you have plenty more headspace to take care of overarching issues. Your content management system should not hinder you in developing accessible content, it should support you in doing so.

What Are Your Options?

In the world of CMSes, there are two big categories: monolithic and headless CMS. While radically different in their approach and architecture, they both have a lot of things going for them — it’s basically a matter of finding the right fit.

Monolithic CMS

Monolithic CMS, sometimes also called ‘traditional’ or ‘coupled’ content management systems, are ‘where it all started.’ In the early 2000s, open-source platforms like WordPress, Drupal and Joomla emerged — providing an easy way for people to create websites or personal blogs quickly.

The idea of a monolithic CMS is a ‘one-stop shop’ — usually, you have a database where the content is stored, an admin interface, and the frontend that combines the data from the database with the styling and logic — you don’t have to worry about hosting or writing code.

This might mean a few compromises: Since you are buying into the ‘package deal’ for all these solutions, your solution might not excel at every task. There are likely some features in the mix that really suit your approach (which is probably why you chose it in the first place) and others that are not really a good match or which you simply don’t need but which are just part of the whole package.

In terms of the tech stack, you probably highly depend on the CMS’ default — not much flexibility here. What attracts many people to platforms like WordPress, for example, are the ready-made templates and plugins to choose from — these tools make it relatively easy to extend your website’s functionality or change the styling.

All in all, not a terrible solution if you are looking to get started quickly and have little experience in setting up your own website from scratch.

The New Kid On The Block: Headless CMS

With the rise of mobile devices, the demands on the CMS ecosystem changed as well — an omnichannel approach became the new norm, and traditional systems weren’t fit to cope, at least not effectively. Out of this need, headless systems were born:

A headless content management system means decoupling the ‘head’ (aka ‘frontend’) from the ‘body’ (backend or content repository). The focus of a headless CMS is solely on storing and delivering structured content. Due to this approach, omnichannel becomes second nature: through an API, you can access your data and distribute it wherever you like — be it in a mobile app, on a website, or in an e-commerce store.

Headless follows the best-of-breed approach: connect the tools and services that fit your needs through the API but don’t worry about unnecessary baggage. And as a developer, headless gives you the freedom to choose any kind of tech stack that you would like for the frontend. Even if you need to change frameworks in the future, it won’t affect your headless CMS in the slightest.

Headless vs. Monolithic: What’s The Best Fit For You?

So, in the end, as always — it comes down to your needs. There is no definite answer. A headless CMS might likely be an excellent fit for you, especially if you are working with multiple output channels and are experienced with creating your own frontend. There has been a massive shift in the last couple of years towards headless — with good reason. If you prefer an out-of-the-box solution with little programming effort on the other hand and don’t mind working with templates, a monolithic approach could be the solution for you.

What’s More Accessible: Monolithic Or Headless CMSs?

The short answer is again: it depends.

Both monolithic and headless solutions are not inherently accessible, unfortunately. Many platforms make some effort to meet minimum requirements when it comes to web accessibility, but there is still a long way to go.

How Accessible Is A Monolithic CMS?

When it comes to monolithic platforms, generally speaking, your frontend can only be as accessible as your least accessible plugin. Let me expand a little here, using WordPress as an example:

How accessible or inaccessible your site is largely depends on what data is stored and how it is displayed. This is massively affected by the themes and plugins you may use. And while there are many themes that claim to be ‘accessibility ready’, not all of them are. And even if you manage to select an accessibility theme, it can become inaccessible if you install an inaccessible plugin. So it’s not impossible, but there are definitely some obstacles in your way.

One thing to keep in mind: when working with a monolithic CMS, you are generally limited to the accessibility features provided by the CMS (or plugins) itself — customizing the editing experience will be a lot more challenging than when working with a headless CMS.

Creating Your Own Themes

If you want to be in more control, it might be feasible to create your own themes — you could even use a base theme for the underlying HTML structure. By creating your own theme, you can ensure sufficient color contrast and solid keyboard navigation, make sure there aren’t exclusively visual cues to alert the user to changes, test for screen reader users, and implement things like motion control.

Plugins: Curse Or Blessing?

The beauty (and the danger) of plugins is, that you can choose from over 55.000 plugins in WordPress and install them at the click of a button. Each gives new functionality to your site — many being interactive. Especially these interactive plugins are full of potential accessibility pitfalls and need to be tested thoroughly.

Accessibility Plugins

There are also plugins that claim to make your website accessible. And while it’s tempting to fix your accessibility needs just by quickly installing a plugin, don’t be fooled. These tools promise you to fix issues like color contrast, enable zoom or add alt text to images — all good ideas in theory. But in most cases, trying to solve accessibility issues with quick fixes like plugins creates more issues than it solves. These tools usually create an overlay of your website, not actually fixing the issues but — well, painting over them.

While there have been significant advances in technology, automatically generated (alt) texts still need to be checked manually and are not always accurate, causing confusion for the users. Another big issue is that these automated tools often clash with the assistive technologies people might already be using. Before using an accessibility plugin in production, make sure to test it thoroughly — if it seems too good to be true, it usually is.

“I will recommend staying away from any plug-in that claims or implies that it will fix your site to help you meet accessibility guidelines—no plug-in is going to be able to seriously achieve that goal.”

— Joe Dolson

Accessibility In Times Of Headless CMS

Now you might wonder: is a headless CMS the answer? Well, again: it depends.

A headless CMS will give you a lot more freedom than a traditional CMS. You’ll have a lot more flexibility when it comes to:

Choosing the best tools for the job
Working with a tech stack you’re comfortable with
Set up your project in ways that help all team members create accessible content

That being said, it is also not inherently accessible — and not every headless CMS gives you the same degree of freedom — so choose wisely. Luckily, there are things you can do to make your content more accessible and set your team up for success.

How Can I Make My CMS As Accessible As Possible?

As always, there is no one-size-fits-all approach here. But there are many things you can do, both when working with a headless CMS as well as when working with a custom theme in a monolithic approach. Let’s have a closer look at how you can implement more accessibility in your project:

Education Is Key

Make accessibility part of every discussion and educate each other on an ongoing basis. The more we talk about the things we learn, we can improve as a team. Provide resources and time to make sure web accessibility is not an afterthought in your project.

Semantic HTML

Start by ensuring semantic structure in your components — double check the HTML elements you are using and whether there might be more suitable ones that can give (screen reader) users context. Also, extend this to your CMS: when creating new Content Types or Pages, keep the HTML structure in mind when allowing specific components to these pages. Ensure you have only one <main> element, watch out for the headline hierarchy and ensure the right use of landmarks, for example.

In a headless CMS, the idea is to fully decouple the frontend from the content structure. That’s also why it’s strongly advisable to prevent people from writing markup in the content fields — it’s prone to error and difficult to maintain, making it less accessible in the long run. All your code should live in your codebase — where it can easily be tested and maintained.

Visual Context

Provide as much context as you can for people who are visually impaired. This could mean, for example:

Making alternative texts a requirement for image fields
Including an option for increasing Zoom to up to 200%
Work with an accessible color palette and limit the use of colors to predefined brand colors with sufficient contrast.

Also, make sure to alert users to changes not only by color cues (e.g., when hovering or clicking a button, not only the color changes but the size changes, or there is another effect).

Create A Coherent Structure

Having consistency not only enforces your brand’s visual identity across your page but it also helps people navigate it — especially folks who are neurodivergent. This could, for example, mean using dedicated styles for specific CTAs or improving your UI to make it as easy as possible to find information in different ways. Reflect on the importance of topics in style and size, and stay away from flashy or very distracting animations.

To ensure everybody keeps these brand guidelines in mind, include descriptions and notes for editors. These friendly reminders will help people comply with accessibility requirements and understand why it’s important.

Extend Your Experience

In many headless systems, you are able to add any kind of field you need — and you can make these fields a requirement for accessibility purposes. Like in this example showing how to set up an accessible iframe with a required title field. Setting fields as ‘required’ will make it a lot easier to ensure that they will not be forgotten when things get hectic in day-to-day life.

Besides creating your own field types, you can also easily extend the content management system by connecting any kind of tool you need to your headless architecture or even creating your own extensions and plugins. This could also include your own solutions to specific accessibility needs. One example could be an extension to run an accessibility check to flag any issues before publication. While it will be difficult to cover all potential issues, it might be a good addition to automated and manual testing.

Wrapping Up

When it comes to finding the right CMS, there is no cookie cutter answer — as always, it depends. It depends on your requirements, the accessibility needs you are aiming to fulfill, and how much time and resources you have. Neither a monolithic nor a headless system are inherently 100% accessible — but there are many things you can do to improve that.

While there might be some already predefined tools in monolithic CMS’ to help you out, you also heavily rely on other people not making false claims. With headless CMS, on the other hand, there is a lot more freedom and flexibility in setting your project up to be as accessible as possible. And that’s exactly how a content management system should be, right? Enabling you to focus on the tasks at hand and making it as easy as possible to meet your accessibility goals.

Feeling adventurous?Give it a go and see how quickly you can put together a headless project with your favorite tech stack.

Regardless of which system you choose, always remember: 10% done is better than nothing in the case of accessibility — every little step towards a more inclusive web counts.

Useful Resources

“Creating An Accessible Website With Storyblok,” Christian Zoppi
“The Complete Guide To Accessibility For WordPress Websites,” Ross Johnson
“Accessibility In The Age Of The Headless CMS,” Rian Rietveld
“Beware: WordPress Accessibility Plugins Can Make Your Site LESS Accessible,” Lindsay L.
CMS And Accessibility
Automated Accessibility Audits by axe Dev Tools or Lighthouse Accessibility Scoring

July 15, 2022

CMS, CRM, and ERP – What Is It and Why?

CMS, CRM, and ERP are the three main software solutions to automate core processes in business. They assist in managing day-to-day operations, the company’s interactions with customers, handling data, reducing redundant tasks, prioritizing leads, running a website, and much more. CMS, CRM, and ERP offer powerful tools to boost profitability and increase sales. However, the core components and the work principles are not the same, especially regarding CMS.

What Is a CMS Software?

Answering what CMS means in business, we come to the next definition. Content Management System (CMS) is computer software to build a web page on. It is used to publish, add, easy to replace, and manage digital content – design, text, and graphics. It provides an interface for working with content, handling both the back-end and front-end of a website to modify online business without technical knowledge or background. It is a convenient option for someone who is not technically minded to deliver content and build a dynamic website without getting into the code. For example, to write or to update a page. CMS platforms provide a variety of pre-designed templates to create a simple yet well-designed page. Templates visualize future websites. Thus, they can be used as a starting point for small businesses.

May 5, 2022

Resilience, Flexibility And Immediacy: Working With Headless Systems

In the last couple of years, our industry has figured out how to make use of cloud infrastructure and flexible deployments in the best way possible. We use services that give us continuous integration without headaches and serve static files without us managing anything. And adding the right framework to the mix, those services blur the line between static files, dynamic updates, and serverless APIs.

In all of this, one fundamental piece is often left out: storing data. This raises the question, “Where does our content come from?” Well, a headless content management system might just be what you need.

The Mighty Monolith And Opinions

In order to understand why we get so many benefits out of architectures that involve headless systems, we need to understand how things worked with a more traditional approach: monolithic architectures.

Not so long ago, monolithic content management systems were the jack-of-all-trades for your web content delivery concerns. They came along with:

a database (or required a very specific one),
the logic to read, change, and store data,
user interfaces for content administration,
logic to render all your content in deliverable formats such as HTML or JSON,
the ability to upload, store, and deliver assets like images and static files,
sometimes even an editor for design,
a routing logic to map readable URLs to actual data in your system.

That’s a lot of tasks! Furthermore, a monolithic CMS more often than not was very opinionated in its choice of tools and flavors. For example, if you were lucky, you got a template engine to define the markup you wanted to produce and had absolute control over it. It might not have been as featureful as you wanted it to be, but it at least was better than mixing PHP code with HTML tags.

Being this opinionated left you as a developer with two choices:

Submit to the system.
Learn all its intricacies inside out, become an expert, and don’t deviate from the standard. Treat a CMS as a framework with all the benefits and downsides that come with them. Be super productive if you follow the rules. Avoid anything that doesn’t play well with the opinions of your tool of choice. This can go well for a long time. But you become very inflexible if there are changes in requirements. Not only if you need a different front-end to deploy that is to be designed differently than your tool allows, but also if you end up needing to scale out your servers because of increased traffic, or you need to establish stricter security because of new attack vectors you can’t mitigate. Don’t get me wrong, people who produce and develop monolithic CMS know about those challenges and work on them. It’s still not your choice if you want change.
Work around the system.
This is arguably worse than following a framework blindly. If you work around a system, try to integrate functionality via plug-ins, shift responsibility to attached systems on the side, try to hack something in the core to get things done your way (yes, this happens as well), you end up frankensteining your solution until it’s unrecognizable anymore. While this gives you flexibility when your product managers want to crank out features, it will fall back on you sometime in the future. Don’t do this.

None of these choices is something we want to have. And it all happens because we mix responsibilities in one single solution: How we define, maintain, and store content is mixed with the creation of views.

The following chart shows what happens if we want to see content produced by a traditional, server-side rendered system.

A client, maybe a browser, requests a website from a server via a URL;
A router resolves the URL and maps it to some input parameters that the system can understand;
It asks a rendering component to render content based on said input parameters;
Then, in return, it needs to ask the data storage if this content is available;
One pierce through the layer cake, and you get your content back;
The renderer renders it into HTML;
The routing layer can send a response to the client.

Every communication between the components of this layered architecture is subject to the opinions of its creator. In monolithic architectures, these are the content management system’s opinions. If you want to change them, you have to go the extra mile.

The Promise Of Headless Architectures

And this is exactly where headless content management systems come in. A headless CMS gives you easy reading access to the data. Everything else can be designed according to your opinions.

You decide how to resolve routing. On the client? On a web proxy? In a Node.js server? Your choice. You decide how and where to render content. Again, on the client? With blade templates in PHP on the server? A serverless function on AWS Lambda written in Go that spits out JSON? Your choice.

Chopping of the head gives you as a developer the freedom to decide what is the right technology for your situation. From a single page application to a traditional server-side rendered website or pre-built sites in continuous integration.

Suddenly you also get the freedom to update “the head” as many times as you like and as often as you need. You can deploy it to different servers with different scaling possibilities. Remix, Nuxt, Laravel, 11ty… They couldn’t be more different in how they work, and how they’re supposed to be deployed. Your CMS stays the same.

Headless CMS not only solve the technology lock-in problem, but they are also a chance to raise the availability and stability of your website. With a traditional, monolithic architecture, everything is tightly coupled.

An unknown error in your render logic might cause the same kind of problems as if your database has no room to write anymore. By attaching a headless content management system moves a potential source of problems away from others. Suddenly, the boundary becomes clearer — and we can even go further.

What if we cannot only define the error boundary much better? What if we can react to potential errors much better because of all the ways we are able to consume data?

Jamstack And Static Sites

Jamstack means publishing static sites. It’s the opposite of a pull architecture, where each request means fresh content from the database, instead, we push out all our content at once, pre-rendered, in static files, ready to be served.

This comes with a ton of benefits. Jamstack sites are easy to deploy. All your web server needs to be able to do is serve static files. Web servers are really good at serving static sites! Security-wise, Jamstack pages are a fortress. You actively cut all ties to systems that require authentication or handle sensitive data. Web servers serve in read-only mode. Some setups from popular providers even create an immutable copy of your site. No possibility to change anything on this disk.

All you need is a static site generator, and if you want to scale, a build server. Services like Netlify and Vercel build static sites for you. Content updates happen at build time. The static site generator pulls the entire necessary content from a headless CMS once.

See this example with Storyblok and Next.js:

import {
  useStoryblokApi,
  StoryblokComponent,
} from '@storyblok/react';

export default function Home({ story }) {
  // Let's show what we got.
  return <StoryblokComponent blok={story.content} />;
}

export async function getStaticProps({ preview = false }) {
  // Here, we are loading all data for static generation.
  const storyblokApi = useStoryblokApi();
  let { data } = await storyblokApi.get(`cdn/stories/react`, {
    version: 'draft',
  });


  return {
    props: {
      story: data ? data.story : false,
      preview,
    },
  };
}

Once the website is done building, all ties are cut. Your website runs without any connection to a content management system. From an operations point of view, this is fantastic. Not only did we introduce an error boundary and reduced channels to other systems, but we also cut off communication entirely because we don’t need it anymore.

Updates to your content require a rebuild. A CMS like Storyblok offers you to call a webhook once the publish button has been pressed. Thankfully, hosts like Vercel offer to create webhooks that rebuild your site.

It’s not all hunky-dory, though. While Jamstack sites have undeniable benefits, they also come with some problems. The bigger your site is, the slower your builds can be. If you have to have mission-critical updates, and some companies do, it might be unacceptable to wait a couple of minutes until you see an update. Heck, I’ve seen projects taking up to 30 minutes to publish new content. This is way too long if you need to react quickly.

Deployment Free Updates

If we think back to how monolithic content management systems dealt with retrieving content, we see that there was just one spot where the content was actually queried. Thanks to a headless CMS that gives you APIs to fetch data, we can now fetch content from multiple places.

We can use this to maneuver around some limitations we get when using Jamstack when we need to wait for a build to get an update. We can see the deployed static files as a robust, available baseline to serve our content from. For critical parts of our website, where real-time updates are of essence, we fetch data dynamically from our CMS.

This can be parts of your website, but also the entire content of an entire page. The following example shows how this can be done using Storyblok and Next.js:

import {
  useStoryblok,
  useStoryblokApi,
  StoryblokComponent,
} from '@storyblok/react';

export default function Home({ story: initialStory }) {
  // We are fetching new data from our CMS.
  let story = useStoryblok("react", { version: "draft" });

  // If data isn't available, yet, we show the original static data.
  if (!story.content) {
    story = initialStory;
  }

  return <StoryblokComponent blok={story.content} />;
}

export async function getStaticProps({ preview = false }) {
  // Here, we are loading all data for static generation.
  const storyblokApi = useStoryblokApi();
  let { data } = await storyblokApi.get(`cdn/stories/react`, {
    version: 'draft',
  });


  return {
    props: {
      story: data ? data.story : false,
      preview,
    },
  };
}

Next.js ergonomic APIs allow us to pinpoint the exact locations where we want to have data dynamically with a static fallback. And we increase our data accessing points.

Press releases, news articles, and everything that needs to be published within a certain time frame can be done dynamically on the client-side — without losing the benefits of static site generation. You still can redeploy your website, but publishing at an exact point in time becomes an afterthought. Let the build run as long as it needs.

Not only do you get fast updates. If the connection to your CMS breaks for whatever reason, users are still able to see the old content. There’s no arguing that this is definitely better than seeing no content at all.

There are many more use cases for a model like this. Updates on time-critical pages are one thing but think of different modes for your site. You publish statically generated pages fetching all recent data at once at build time. You have a preview mode for your content creators and editors to see what they’re currently working on hosted someplace else.

import {
  useStoryblok,
  useStoryblokApi,
  StoryblokComponent,
} from '@storyblok/react';

export default function Home({ story: initialStory, preview }) {
  if (preview) {
    // Load draft articles in preview mode.
    let story = useStoryblok("react", { version: "draft" });
    return <StoryblokComponent blok={story.content} />;
  }

  return <StoryblokComponent blok={initialStory.content} />;
}

export async function getStaticProps({ preview = false }) {
  // Load published data in build mode.
  const storyblokApi = useStoryblokApi();
  let { data } = await storyblokApi.get(`cdn/stories/react`, {
    version: 'published',
  });


  return {
    props: {
      story: data ? data.story : false,
      preview,
    },
  };
}

Nice! Give your editors some taste of what they’re actually working on!

Incremental Static Updates

Fetching time-sensitive data on the client-side is one idea to update your page without a full rebuild. It’s great if you want to have fast updates, but you might see a huge switch between the pre-built. If your hosting solution allows it, tools like Next.js allow you to incrementally update content after a certain retention period.

This article on Smashing Magazine by Lee Robinson goes into incremental static regeneration in full detail. The story in a nutshell: The web server serves statically generated content. You define how long this content is supposed to be valid. If at the time of serving this period has elapsed, Next.js triggers a serverless function that renders the desired page new and overwrites the original page with the newly generated HTML. Quite a task, for you it’s just one line of code you need to add.

import {
  useStoryblok,
  useStoryblokApi,
  StoryblokComponent,
} from '@storyblok/react';

export default function Home({ story: initialStory }) {
  // We are fetching new data from our CMS.
  let story = useStoryblok("react", { version: "draft" });

  // If data isn't available, yet, we show the original static data.
  if (!story.content) {
    story = initialStory;
  }

  return <StoryblokComponent blok={story.content} />;
}

export async function getStaticProps({ preview = false }) {
  // Here, we are loading all data for static generation.
  const storyblokApi = useStoryblokApi();
  let { data } = await storyblokApi.get(`cdn/stories/react`, {
    version: 'draft',
  });


  return {
    props: {
      story: data ? data.story : false,
      preview,
    },
    revalidate: 3600 // Check back after 1 hour if there's new content.
  };
}

Now we have three points where we access our headless CMS from:

Once a build for all available content.
For time-sensitive data on the client-side. Fallback to the original content.
In a serverless function for every page we want to update incrementally.

Soft Coupling

All three connection points work for different time frames.

Real-time client-side data fetching has the shortest life span and gives you the most recent content.
Incrementally generated static pages have a longer life span and give you content that is of a certain age.
Build-time generated static pages have the longest life span and are as recent as you configure them. Their life span is significantly shorter if you rebuild on every content update, it’s longer if you only rebuild at code changes.

But by adding all the connection points to our CMS, something else has changed. We coupled ourselves more often to an external system than before, but every connection is allowed to fail.

If a real-time update on the client-side fails for whatever reason, we still see the content of the incrementally generated page. If this connection didn’t work, we see what we generated on build time.

Note: The examples above use Next.js mostly because Next.js allows us to get all that benefit with very little to do for us developers. Especially with the hooks from Storyblok data fetching becomes a single line of code. The same principles of soft coupling can be applied to other sites and frameworks as well.

Let’s say you generate all your content on the server-side using Express.js. The following route would fetch content with every request to the server:

app.get('/*', function (req, res) {
  var path = url.parse(req.url).pathname;
  console.log(path);
  path = path == '/' ? 'home' : path;

  Storyblok.get(`cdn/stories${path}`, {
    version: 'draft',
  })
    .then((response) => {
      // Render content to HTML.
      res.render({
        story: response.data.story,
      });
    })
    .catch((error) => {
      res.send(error);
    });
});

If the bridge to our CMS fails, so does delivering our content. Adding another connection point serves cached content first and does updates in the background.

app.get('/*', function (req, res) {
  var path = url.parse(req.url).pathname;
  console.log(path);
  path = path == '/' ? 'home' : path;

  // Loading the cached content.
  let content = contentMap.get(path);
  if (content) {
    Storyblok.get(`cdn/stories${path}`, {
      version: 'draft',
    }).then((response) => {
      // Update in the background.
      contentMap.set(path, response);
    });

    return res.send(content);
  }

  // Fetching the real content.
  Storyblok.get(`cdn/stories${path}`, {
    version: 'draft',
  })
    .then((response) => {
      contentMap.set(path, response);
      res.send({
        story: response.data.story,
      });
    })
    .catch((error) => {
      res.send(error);
    });
});

And with some added metadata on revalidation, we can even check for updates after a certain period of time:

app.get('/*', function (req, res) {
  var path = url.parse(req.url).pathname;
  console.log(path);
  path = path == '/' ? 'home' : path;

  // Loading the cached content.
  let content = contentMap.get(path);
  if (content) {
    // Check if the revalidation window has elapsed.
    if (content.fetchedDate + content.revalidate < Date.now())
      Storyblok.get(`cdn/stories${path}`, {
        version: 'draft',
      }).then((response) => {
        contentMap.set(path, {
          response,
          fetchedDate: content.fetchedDate,
          revalidate: content.revalidate,
        });
      });

    return res.send(content.response);
  }

  // Fetching the real content.
  Storyblok.get(`cdn/stories${path}`, {
    version: 'draft',
  })
    .then((response) => {
      // Store with some metadata for revalidation.
      contentMap.set(path, {
        response,
        fetchedDate: Date.now(),
        revalidate: 3600000, //in ms
      });
      res.send({
        story: response.data.story,
      });
    })
    .catch((error) => {
      res.send(error);
    });
});

Add this with some client-side caching using stale-while-revalidate to add an extra fallback for your revisiting users.

Bottom Line

Headless content management systems allow you to add a clear boundary between the content you deliver and the content that is being maintained by others. This clear separation lets a CMS focus on content management again, instead of blurring the line between content and its design.

But it’s not only that. When deploying websites, there’s rarely a one-size-fits-all solution. Some websites benefit from server-rendered pages, some prefer statically generating content upfront. A headless CMS works with all approaches, allowing you to mix and match depending on your needs.

We just played through one possibility of adding a headless CMS to our stack and connecting it from various sources to make our site more resilient without losing the flexibility to deliver time-relevant content. And that’s just one of many.

January 31, 2022February 14, 2022

Get Started With Bloomreach Headless Experience Manager (Part 1)

Bloomreach Headless Experience Manager is a headless content management system with the APIs and flexibility to power any front end while retaining powerful personalization and authoring capabilities.

This guide helps new developers get started with the platform. With a step-by-step series of milestones, you’ll learn the first steps of developing websites using Headless Experience Manager:

January 9, 2022

WordPress Market Share: Usage Stats, Facts, & Research (2022)

Recently one of our readers asked us to share some WordPress market share data, usage stats, and research to help convince their boss on why they should use WordPress.

Even though WordPress is the most popular website builder in the world, sometimes popularity alone is not enough for users to make up their mind.

In this article, we have compiled an ultimate list of WordPress usage stats, market share research, and other data that will help you convince others to start using WordPress.

WordPress Market Share Research and Stats

The Basics: What is WordPress?

WordPress is an open source software that allows users to make a website. It is available for download as a free software and can be installed on any WordPress hosting company.

It’s important not to confuse WordPress (the software) with WordPress.com which is a hosted solution. To learn more, see the difference between WordPress.com vs WordPress.org in our side-by-side comparison.

It all started when two users of a blogging software called b2/cafelog decided to take the software in a new direction. The idea was coined by Matt Mullenweg who was then joined by Mark Little and together they released the first version of WordPress on May 27, 2003.

Post editor in the first release of WordPress

Since then, WordPress has evolved from a simple blogging software to a CMS, website builder, eCommerce platform, and more.

To learn more, see our article about the history of WordPress.

WordPress is a community software and thousands of users from all over the world have contributed to it by submitting code, fixing bugs, translating, testing, and helping others use it.

Let’s take a look at some WordPress stats and facts to see how WordPress is helping people do great things on the internet.

How Popular is WordPress?

WordPress is immensely popular and is used by millions of people all over the world. Here are some numbers to put things in perspective.

WordPress powers more than 43% of all websites on the internet.
It also holds nearly 65% of CMS market share. No other website builder software comes close.
WordPress powers websites for big name brands including Disney, Sony, Facebook, and more.
38% of top 10,000 Websites are powered by WordPress.
More than 22% of all new domain names in the United States are running WordPress.
Each day more than 1000 new WordPress sites join the top 10 million websites tracked by W3Techs.com.

While these are impressive stats, the only way to truly understand the popularity of WordPress is to look at it relative to other popular content management systems.

For example Shopify is the second popular, but it’s only 1/10th the size of WordPress since it powers about 4.4% of all sites vs WordPress 43.2%.

Wix spends tens of millions in marketing, but it only powers 1.9% of all websites. Meaning WordPress is 22x more popular than Wix.

Other popular CMS all have under 2% market share each such as Squarespace (1.8%), Joomla (1.7%), Drupal (1.3%), Blogger (1%), and Magento at just 0.6%.

When it comes to popularity, there’s no comparison to WordPress. According to the usage statistics, WordPress market share is 3x larger than the usage of other 9 popular website builders and blogging platforms combined.

WordPress Plugins

The biggest reason behind WordPress’ popularity is its large plugin & extensions ecosystem.

Plugins are like apps for your WordPress website. You can install them to add new features to your site and extend its functionality. To learn more, see our guide on what are WordPress plugins and how do they work?.

Here are some mind-blowing facts about WordPress plugins, which show just how massive the WordPress ecosystem is.

There are more than 59,000 free WordPress plugins on WordPress.org plugin directory alone.
9 of those plugins are installed on 5 million+ websites.
61 top WordPress plugins are installed on more than 1 million websites.
The most popular eCommerce plugin, WooCommerce is installed on more than 5 million websites as per the WordPress plugin directory since it shows all count above that as 5 million +. According to W3Techs, WooCommerce market share is 8.8% of all websites making it more popular than Shopify for online stores and eCommerce sites.
The popular WordPress form plugin, WPForms, is also installed on more than 5 million websites. According to Builtwith, it’s used by over 1.6% of the top 1 million websites. It’s the fastest growing form builder on the entire internet.

Our plugins stats are from the official WordPress.org plugin directory alone. Many plugin developers sell premium versions of their plugins from their own websites.

With a healthy plugins ecosystem, it means that you can add custom functionality to your website at a fraction of the cost of custom development.

There are free WordPress plugins available for just about every type of website functionality including contact forms, selling memberships, landing page builder, SEO optimization, and more.

WordPress Themes

Themes control the appearance of a WordPress website. These are WordPress specific website design templates that you can install on your website to change its look.

There are thousands of free and paid WordPress themes available offering WordPress users an endless combination of design, layout, color schemes, and features.

Themes were first introduced with WordPress 1.5 back in 2005, with the first new default WordPress theme called Kubrick
Just like plugins, there are both free and paid WordPress themes that you can install.
WordPress.org’s free theme directory has more than 9,100 free WordPress themes.
According to Builtwith, Divi by Elegant Themes is the most popular theme used by 6% of websites analyzed by their service.
Thousands of themes are sold by commercial WordPress theme shops with an average price of $40 per theme.

WordPress Hosting

WordPress is a self-hosted website building software. In other words, you need to have a web hosting provider to create a website with WordPress.

Due to it’s popularity, many hosting companies have added specialized WordPress hosting services to make it easier for small business owners to get started with WordPress.

Here are some popular WordPress hosting companies based on market share:

Newfold Digital Group (4.9%) – this is a hosting conglomerate that includes brands like Bluehost, HostGator, Domain.com, and more.
GoDaddy Group (4.2%) – this includes brands like GoDaddy, Media Temple, Pagely, and many more.
WP Engine (2.3%) – one of the leading managed WordPress hosting companies on the planet.
SiteGround (2.0%) – a premium WordPress hosting company that users love because of their top notch support. We use SiteGround to host WPBeginner site.
Hostinger (1.2%) – an affordable WordPress hosting company that’s growing in international markets due to it’s cheap web hosting prices.

The data above is from W3Techs report and excludes other platforms like Amazon (AWS), Google Cloud, NameCheap, Automattic, and others. Our list above is representative of the reader polls on WPBeginner for popular web hosting.

WordPress Security

WordPress is the most commonly used CMS software in the world, which also makes it a common target of hacking attempts, DDOS attacks, malware, and trojans.

According to Sucuri, a leading website security company, 83% of all CMS based websites that were hacked in 2017 were running WordPress. This number isn’t surprising considering that WordPress holds 65% of CMS market share.
Sucuri also reported that 39% of hacked WordPress websites were using an outdated version of the software. That’s why you should always use the latest version of WordPress on your website.
Nearly 50% WordPress sites are affected by a security vulnerability caused by an outdated or poorly coded WordPress plugin or theme
Around 8% of WordPress sites were hacked due to a weak password.

You can make your WordPress site as secure as possible by following some basic security best practices. To learn more, see our complete WordPress security guide for step by step instructions.

Often the stats above cause WordPress to get a bad reputation, but the reality is that WordPress itself is not insecure. WordPress core goes through rigorous security audits, and it’s more secure than many other platforms out there.

The only fault WordPress has is that it’s popular which leads to stats like above.

WordPress Community

WordPress has a massive user base spread across all over the world. It is used by not just businesses, but also governments, schools and colleges, non-profits, and more.

As an open source project, WordPress is driven by a global community of users. This means that anyone can contribute to the project in many different ways.

WordPress translation community has it fully translated into 56 languages, partially translated in dozens more.
In 2017, WordPress communities around the world organized 128 WordCamp events, in 48 countries, and sold 39,625 tickets.
In 2017, Local WordPress communities organized 4,379 meetups in 73 countries
There are dozens of WordPress groups on Facebook, with WPBeginner Engage being the largest WordPress Facebook group with over 81,500 members.

If you want to contribute to WordPress, then see our guide on how to get involved with WordPress project.

The WordPress Economy

WordPress has a thriving multi-billion dollar ecosystem that creates thousands of jobs all over the world. This also includes freelancers, developers, and companies that sell WordPress related products and services.

At the time of writing this article, freelancer.com website alone had 680,743 WordPress jobs posted out of these 700 were open.
Thousands of WordPress jobs are currently open on many popular freelancing websites. You can always visit our Careers page to find WordPress jobs.
Average hourly rate for WordPress developers can be anywhere between $20-$100 per hour depending on their expertise and job at hand.
A custom WordPress theme with its own unique design and plugins can cost $10,000 and it may increase depending on project’s requirements.
There are hundreds of small and large businesses, agencies, and developers selling WordPress related products. See our list of the most influential WordPress businesses and companies and what they do.

We hope this article helped you discover some new WordPress stats, facts, and interesting research. You may also want to see our article on the best domain registrar and best business phone services for small business.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post WordPress Market Share: Usage Stats, Facts, & Research (2022) first appeared on WPBeginner.

November 5, 2021

Using the Notion API to Build a Content Management System

At Appsmith, we use Notion to manage our content calendar. We also work with a few external agencies and freelancers for some of our content. It is impossible to create granular access control and develop a workflow on Notion to run the process smoothly and thus, as soon as Notion released their API, we decided to build an application that helps us manage our entire content management in one place while giving our collaborators the necessary access only.

Our application uses our Notion (mock) Table as a data source and lets you plant, submit, and edit articles on the application, while at the same time having a provision for integrating with an email service of your choice (we use SendGrid here) to send reminder emails or updates to people in the project.

September 28, 2021

How To Become a White-Label WordPress Hosting Reseller

Becoming a WordPress hosting reseller is not only quick and easy — but can also be very profitable. In addition to your usual web developer fees, you can generate Monthly Recurring Revenue (MRR) reselling products and services (like ours!)

In this post we’ll show you how to set up your own hosting business that will benefit you and your clients in terms of pricing, site management, and ease of use. Keeping it all under your brand or company name means it’s yours to sell. (And your secret is safe with us. We won’t mention that we’re doing all the heavy lifting for you on the backend of your services. ; )

Oh, and it won’t cost you anything to get set up and going! Read on…

This article will walk you through the essentials of becoming a WordPress hosting reseller. We’ll be covering:

There’s a lot to reselling, but you’ll see how easy it is to manage, run, and maintain a WordPress hosting reselling business once implemented.

Hosting Reselling — The Quick, Easy, and Profitable Way to Increase Revenue

Why You Should Be a Reseller For Web Hosting

You already know that WordPress is the world’s leading CMS platform, but have you thought about the opportunity to provide managed WordPress hosting under your own brand and significantly boost your revenue without any additional effort?

If you’re an agency or just taking on freelance clients, hosting can provide continuous revenue after initially setting up. You can generate subscriptions, charge for maintenance, and ensure that a client’s hosting is always up and running.

Adding hosting is just another package to include, and it often is just a matter of mentioning to your clients that you can host their sites as part of your services.

Even though it’s us behind the scenes, with everything white-labeled, your clients won’t know that you’re a reseller. It will be your hosting services without the mention of WPMU DEV anywhere.

Best of all, getting your clients set up is easy as ever with The Hub. Everything you need is there, making hosting reselling organized, convenient, and simple. And, of course, profitable.

Benefits of Reselling Managed WordPress Hosting

I’ve already touched on a lot of perks of reselling hosting. However, to put it into perspective here’s a quick rundown of several reasons why hosting reselling is beneficial:

MRR is a great way to build additional income
The hosting is optimized for your clients.
You will build value by offering the total service packages (bundle hosting with website development, or sell separately).
Hosting reselling is much better than affiliate marketing because we don’t charge commissions or fees for selling our hosting services.
Everything is done for you in the backend. We manage it all for you, leaving you to build relationships with your new and existing clients.

So now, the question is:

Are You Ready to Resell?

As you can see, it’s quick (add a service for new customers), easy (all done in The Hub), and profitable (subscriptions = recurring payments).

Let’s get into the nitty-gritty now of what it takes to become a WordPress hosting reseller.

White Label Hosting and Make It Your Own

White labeling is the foundation for creating a hosting reseller, so it’s important to touch on it first. After all, if you are selling hosting, it needs to be your own.

We won’t get into too many details here, considering we wrote a whole article about white labeling our hosting.

Still, this is where you start. And it begins with…

The Hub Client Plugin

The first thing you’ll need to do is install and activate The Hub Client Plugin. This plugin was made so that you can replace our branding with yours and provides the perfect place to manage your hosted sites. It’s a complete CRM for your hosting business.

Keep in mind that you need to be a current WPMU DEV member to use The Hub Client plugin. Not a member? Try us free for seven days to get a sense of what we’ll be covering in this article.

Customize and Brand Your Hub

Once you have The Hub Client installed, you will customize and brand your Hub the way you want it.

This includes giving your Hub:

Custom Branding and Colors
Custom Navigation Menu and Hub Client Page
Manage Users and Roles
Terms of Service and Privacy Policy Pages
Help Button and Live Chat Support

Example of a branded login page. — Example of using my branding on the login page.

This will be down the road a bit, but you’ll also invite your clients to view their site, manage your client’s users & roles, create custom client roles, invite new users, and more! All of this will be done from your customized Hub (or whatever you’d like to name it).

Your clients will get an invite to log in to their new site, where they can view, edit, or use however you set up their roles for the site (including paying their hosting invoice in a safe a secure checkout).

Now that you have your essential business established with The Hub Client plugin, you’re ready to move onto…

Creating Sites with Free Templates and Cloning

You have a new client. Great! AND they want to host a new site with you and have you set it up for them. So, how do you go about getting a new hosted site quickly and easily?

The fastest way is with Custom Templates. Our templates offer a variety of options (e.g. business, freelancer, charity, etc.), that provide quick and instant setup.

Keep in mind, you can also migrate or create a new site that will be hosted with us, too. However, our custom templates are a quick solution. It starts by selecting Clone from the options when creating a new site.

The clone option. — Cloning is the quickest way to develop a site.

To implement this, instead of cloning from a site, you select the Clone From a Template option.

Where you click to clone from a template. — Click the Clone From Template button to get started.

You can create your templates or use one of our premade templates directly from The Hub.

All of the premade templates available. — There are plenty of premade templates to choose from or create your own.

Templates are a quick and easy way to clone a site for a hosted site and get your client set up to your specifications.

Read more in this article about how to set templates up and implement templates in detail.

Cloning From an Existing Site

Already have a site set up that fits the bill for your client? Along with using a template, you can also clone from an existing site!

Our cloning tool duplicates a WordPress site’s files and database. It then recreates them in a new installation, making for a new site with a new domain. Just simply go to Clone From My Sites, where a dropdown will appear of all the sites you have hosted with us.

where you clone from an existing site. — Choose what site you’d like to clone from.

The cloning consists of a precise copy of a WordPress site, including plugins, themes, site settings, and content.

So, whether you use a template or clone from an existing site, cloning streamlines the process of duplicating a site like never before, considering how easy it is from The Hub. Get more information about cloning here.

ANY site you create with us will be hosted with us, which means you can sell that hosting service to the client.

Manage Different Reseller Sites with The Hub and Configs

What comes next is to applying configurations to new sites built with a template or existing sites with Configs. Configs will instantly tweak and build WordPress sites, all while eliminating precise manual adjustments for individual sites.

It’s a set-it-and-forget-it when it comes to applying your preferred WPMU DEV plugins and uptime settings to unlimited sites. So, you can easily implement a TON of our plugins and settings directly to a client’s website instantly.

They’re easy to set up and implement. Be sure to read this complete guide on using Configs. Plus, check out the video below.

Run Your Reselling Business with Client Billing

Here’s the bulk of your operation. You have a new site created for a client. The layout, plugins, uptime settings, and design are done. You’re ready to handle business matters. Essentially, how do you charge and manage all of this?

Thankfully, with The Hub’s Client Billing portal, you can create and sell services packages and products, plus manage all your billing. This is the mecca of reselling hosting; with automated subscriptions, branded invoices & emails, a secure client checkout — and more!

It’s a cinch to access Client Billing and get started from The Hub. Clicking on the Client Billing button on the upper right part of the Hosting screen under a website. From there, it’s just a matter of clicking Set Up Client Billing.

Where you set up Client Billing. — It will immediately tell you if Client Billing is set up or not.

Client Billing works in conjunction with Stripe. If you already have your account set up with Stripe, you’ll get a notification that it’s connected.

The indication that your Stripe account is connected. — The green means it’s ready to go!

It features a Client Billing Overview. This is where you can quickly access and view anything about clients and billing, including revenue, clients, products & services, and configurations.

The Client Billing overview. — There’s a lot you can do in the Client Billing Overview.

The Overview gives you a 360-degree view of what your hosting reselling business is looking like.

Setting Up Your Hosting Service

From the Products & Services tab, you can view all of your products, see whether they’re active, the number of pricing plans for each product, and more.

This is also where you’ll add your hosting service as a New Product. The New Product button gets you started. You can also click Add Product or Service from the Product & Services section in the Overview.

Where you add new product. — Add any new product that you’d like.

Once you click New Product, create the hosting service plan of your choice. You’ll give it a Product Name, Billing Type (recurring vs one-time), Price, decide how often billing occurs, and can even include a Billing Cycle.

Where you create product and services. — Include a product image as well, if you’d like.

And it’s worth this reminder, you sell the hosting we provide for the sites you set up for clients!

Choose your own price, whether to have reoccurring payment plans and billing cycles. After all, this is your business.

When clicking on individual products or services, it will open up an area with General Information about the product, including name, status, pricing plans, and an option to upload a product image.

Change anything in this area that you’d like.

Clicking on the ellipsis gives you the option of editing, duplicating, and archiving the plan.

General info ellipsis. — There’s an ellipsis for each plan.

This makes keeping tabs on your products, plans, and pricing as efficient as possible.

Invoices

Since your plan is set up, when it comes to your invoices, you can manage them all from the Invoices tab.

Create a new invoice from the Bill Client button. From there, you will pick your client from the dropdown. Plus, you’ll include the services to charge for, quantity, amount, and more.

The bill client section. — Add any amount of services you want.

Once you preview and confirm your invoice, you can send it on its way to your client (without a stamp). When they receive it, they’ll have an option to pay it right from their own dashboard!

Clicking on Invoices will show you all of the individual invoices. From here, you can see the past due invoices in detail, paid invoices, and drafts. The invoices that are due are in red and say Payment Due by them, and the paid ones are marked in green and say Paid.

Plus, you can see the date, invoice number, amount, client, and website.

An overview of all of the invoices. — You can see two are paid, one is a draft, and one is past due.

Click on an individual invoice to get more specific information, including invoice amount, any notes on the account, and more.

Click anywhere on the line of the invoice to open.

Need a PDF of the invoice? You can do that as well by clicking PDF Invoice.

The button you click to download a pdf of the invoice. — You’re one click away from a PDF.

And that will immediately download a PDF of the invoice.

Preview of invoice. — As you can see, this one is paid.

Have a client that’s old school and likes to mail you a check (yes, with a stamp)? You can mark an invoice PAID manually. Our hosting reselling doesn’t require that everything is paid within the system.

Organizing your clients’ invoices is manageable like never before. Invoices allow clients to pay instantly, manage cash flow, and offer a secure checkout for clients’ in their dashboard.

Revenue

Now that you’re up and running, how much did you bring in this month? Or last? The Revenue section breaks down your cash flow in an easy-to-understand layout.

It shows your Monthly Recurring Revenue, Active Subscriptions, and New Billing.

The revenue area. — As you can see, I have a monthly recurring revenue of $225 and net billing of $575.

This section is a great quick glimpse of where your revenues stand.

Clients

The Clients area is where you can view clients, manage them, see the average billing per client, and more.

You can see all of your clients by clicking on View All. This will open up an area with a Clients tab.

List of clients. — I’ve got three award-winning clients so far.

Click on individual clients to view and edit information. Here, you can see how many active subscriptions a client is on, the average billing per site, and the number of websites attached to them.

Plus, you can edit their name, email address, User Roles, and more.

Easily add a client by clicking on the New Client button.

Where you add a new client. — Need to add a new client?

On top of that, you can edit clients at any time by clicking the ellipsis button next to their name and information. From this, you have the options to Manage Client, Invite Client, and Delete Client.

And as clients build up (you’re a hosting reseller rockstar, you know they will), effortlessly search clients in the Search Bar to access them quickly.

Where you search for clients. — Get to a client fast by typing their name or email.

As I mentioned, clients’ can also pay and edit their information once a role has been established to access billing. This makes for a safe and secure checkout and effortless payment issues on their end! Find out more about allowing clients to access billing in our documentation.

As you can see, there’s a lot that can be done in the Clients area to ensure your clients are up-to-date, invoices are paid, and to manage your clientele efficiently.

Plus, this makes it easy for your clients to be in the know on invoices, their services, and keeping their information up to date (and payments paid on time).

Client Billing is a game changer when it comes to running your reselling hosting. It handles staying on top of your billing for you! Plus, provides all the tools you need to start a service, charge customers, organize clients, and more!

For more information on the Client Billing and a detailed look, be sure to check out this overview.

Here’s Toasting to Reselling Hosting!

This was your hosting reselling roadmap. Simply go through and implement everything we covered, and you’ll be doing some toasting to reselling hosting!

Instead of needing a ton of software and resources, it’s all right here, in one place. It really can’t get any simpler.

As you can see, it’s just a matter of marketing your services and implementing it all from The Hub. All the tools are at your disposal — everything from templates to client billing. Toss in our award-winning plugins and 24-7 support, and you’re totally covered.

And the best part? It doesn’t cost you a thing to get started! If you’re already a WPMU DEV member, you’re all set! If you’re not a member yet, use our 7-day free membership trial to start reselling ~~our~~ your new hosting services today.

Plus, that’s not all. There’s always more coming. Be sure to follow our Product Roadmap to see what’s ahead on the horizon for hosting reselling and all other new developments.

Here’s to a new source of steady recurring income and happier clients with our completely white-labeled hosting reselling!

July 22, 2021

Using Google Drive as a CMS

We’re going to walk through the technical process of hooking into Google Drive’s API to source content on a website. We’ll examine the step-by-step implementation, as well as how to utilize server-side caching to avoid the major pitfalls to avoid such as API usage limits and image hotlinking. A ready-to-use npm package, Git repo, and Docker image are provided throughout the article.

But… why?

At some point in the development of a website, a crossroads is reached: how is content managed when the person managing it isn’t technically savvy? If the content is managed by developers indefinitely, pure HTML and CSS will suffice — but this prevents wider team collaboration; besides, no developer wants to be on the hook for content updates in perpetuity.

So what happens when a new non-technical partner needs to gain edit access? This could be a designer, a product manager, a marketing person, a company executive, or even an end customer.

That’s what a good content management system is for, right? Maybe something like WordPress. But this comes with its own set up of disadvantages: it’s a new platform for your team to juggle, a new interface to learn, and a new vector for potential attackers. It requires creating templates, a format with its own syntax and idiosyncrasies. Custom or third-party plugins may need to be to vetted, installed, and configured for unique use cases — and each of these is yet another source of complexity, friction, technical debt, and risk. The bloat of all this setup may end up cramping your tech in a way which is counterproductive to the actual purpose of the website.

What if we could pull content from where it already is? That’s what we’re getting at here. Many of the places where I have worked use Google Drive to organize and share files, and that includes things like blog and landing page content drafts. Could we utilize Google Drive’s API to import a Google Doc directly into a site as raw HTML, with a simple REST request?

Of course we can! Here’s how we did it where I work.

What you’ll need

Just a few things you may want to check out as we get started:

Authenticating with the Google Drive API

The first step is to establish a connection to Google Drive’s API, and for that, we will need to do some kind of authentication. That’s a requirement to use the Drive API even if the files in question are publicly shared (with “link sharing” turned on). Google supports several methods of doing this. The most common is OAuth, which prompts the user with a Google-branded screen saying, “[So-and-so app] wants to access your Google Drive” and waits for user consent — not exactly what we need here, since we’d like to access files in a single central drive, rather than the user’s drive. Plus, it’s a bit tricky to provide access to only particular files or folders. The https://www.googleapis.com/auth/drive.readonly scope we might use is described as:

See and download all your Google Drive files.

That’s exactly what it says on the consent screen. This is potentially alarming for a user, and more to the point, it is a potential security weakness on any central developer/admin Google account that manages the website content; anything they can access is exposed through the site’s CMS back end, including their own documents and anything shared with them. Not good!

Enter the “Service account”

Instead, we can make use of a slightly less common authentication method: a Google service account. Think of a service account like a dummy Google account used exclusively by APIs and bots. However, it behaves like a first-class Google account; it has its own email address, its own tokens for authentication, and its own permissions. The big win here is that we make files available to this dummy service account just like any other user — by sharing the file with the service account’s email address, which looks something like this:

google-drive-cms-example@npm-drive-cms.iam.gserviceaccount.com

When we go to display a doc or sheet on the website, we simply hit the “Share” button and paste in that email address. Now the service account can see only the files or folders we’ve explicitly shared with it, and that access can be modified or revoked at any time. Perfect!

Creating a service account

A service account can be created (for free) from the Google Cloud Platform Console. That process is well documented in Google’s developer resources, and in addition it’s described in step-by-step detail in the companion repo of this article on GitHub. For the sake of brevity, let’s fast-forward to immediately after a successful authentication of a service account.

The Google Drive API

Now that we’re in, we’re ready to start tinkering with what the Drive API is capable of. We can start from a modified version of the Node.js quickstart sample, adjusted to use our new service account instead of client OAuth. That’s handled in the first several methods of the driveAPI.js we are constructing to handle all of our interactions with the API. The key difference from Google’s sample is in the authorize() method, where we use an instance of jwtClient rather than the oauthClient used in Google’s sample:

authorize(credentials, callback) {
  const { client_email, private_key } = credentials;

  const jwtClient = new google.auth.JWT(client_email, null, private_key, SCOPES)

  // Check if we have previously stored a token.
  fs.readFile(TOKEN_PATH, (err, token) => {
    if (err) return this.getAccessToken(jwtClient, callback);
    jwtClient.setCredentials(JSON.parse(token.toString()));
    console.log('Token loaded from file');
    callback(jwtClient);
  });
}

Node.js vs. client-side

One more note about the setup here — this code is intended to be called from server-side Node.js code. That’s because the client credentials for the service account must be kept secret, and not exposed to users of our website. They are kept in a credentials.json file on the server, and loaded via fs.readFile inside of Node.js. It’s also listed in the .gitignore to keep the sensitive keys out of source control.

Fetching a doc

After the stage is set, loading raw HTML from a Google Doc becomes fairly simple. A method like this returns a Promise of an HTML string:

getDoc(id, skipCache = false) {
  return new Promise((resolve, reject) => {
    this.drive.files.export({
      fileId: id,
      mimeType: "text/html",
      fields: "data",
    }, (err, res) => {
      if (err) return reject('The API returned an error: ' + err);
      resolve({ html: this.rewriteToCachedImages(res.data) });
      // Cache images
      this.cacheImages(res.data);
    });
  });
}

The Drive.Files.export endpoint does all the work for us here. The id we’re passing in is just what shows up in your browsers address bar when you open the doc, which is shown immediately after https://docs.google.com/document/d/.

Also notice the two lines about caching images — this is a special consideration we’ll skip over for now, and revisit in detail in the next section.

Here’s an example of a Google document displayed externally as HTML using this method.

Fetching a sheet

Fetching Google Sheets is almost as easy using Spreadsheets.values.get. We adjust the response object just a little bit to convert it to a simplified JSON array, labeled with column headers from the first row of the sheet.

getSheet(id, range) {
  return new Promise((resolve, reject) => {
    this.sheets.spreadsheets.values.get({
      spreadsheetId: id,
    range: range,
  }, (err, res) => {
    if (err) reject('The API returned an error: ' + err);
    // console.log(res.data.values);
    const keys = res.data.values[0];
    const transformed = [];
    res.data.values.forEach((row, i) => {
      if(i === 0) return;
      const item = {};
      row.forEach((cell, index) => {
        item[keys[index]] = cell;
      });
       transformed.push(item);
      });
      resolve(transformed);
    });
  });
}

The id parameter is the same as for a doc, and the new range parameter here refers to a range of cells to fetch values from, in Sheets A1 notation.

Example: this Sheet is read and parsed in order to render custom HTML on this page.

…and more!

These two endpoints already get you very far, and forms the backbone of a custom CMS for a website. But, in fact, it only taps the surface of Drive’s potential for content management. It’s also capable of:

listing all files in a given folder and display them in a menu,
importing complex media from a Google Slides presentation, and
downloading and caching custom files.

The only limits here are your creativity, and the constraints of the full Drive API documented here.

Caching

As you’re playing with the various kinds of queries that the Drive API supports, you may end up receiving a “User Rate Limit Exceeded” error message . It’s fairly easy to hit this limit through repeated trial-and-error testing during the development phase, and at first glance, it seems as if it would represent a hard blocker for our Google Drive-CMS strategy.

This is where caching comes in — every time we fetch a new version of any file on Drive, we cache it locally (aka server-side, within the Node.js process). Once we do that, we only need to check the version of every file. If our cache is out of date, we fetch the newest version of the corresponding file, but that request only happens once per file version, rather than once per user request. Instead of scaling by the number of people who use the website, we can now scale by the number of updates/edits on Google Drive as our limiting factor. Under the current Drive usage limits on a free-tier account, we could support up to 300 API requests per minute. Caching should keep us well within this limit, and it could be optimized even further by batching multiple requests.

Handling images

The same caching method is applied to images embedded inside Google Docs. The getDoc method parses the HTML response for any image URLs, and makes a secondary request to download them (or fetches them directly from cache if they’re already there). Then it rewrites the original URL in the HTML. The result is that static HTML; we never use hotlinks to Google image CDNs. By the time it gets to the browser, the images have already been pre-cached.

Respectful and responsive

Caching ensures two things: first, that we are being respectful of Google’s API usage limits, and truly utilize Google Drive as a front end for editing and file management (what the tool is intended for), rather than leaching off of it for free bandwidth and storage space. It keeps our website’s interaction with Google’s APIs to the bare minimum necessary to refresh the cache as needed.

The other benefit is one that the users of our website will enjoy: a responsive website with minimal load times. Since cached Google Docs are stored as static HTML on our own server, we can fetch them immediately without waiting for a third-party REST request to complete, keeping website load times to a minimum.

Wrapping in Express

Since all this tinkering has been in server-side Node.js, we need a way for our client pages to interact with the APIs. By wrapping the DriveAPI into its own REST service, we can create a middleman/proxy service which abstracts away all the logic of caching/fetching new versions, while keeping the sensitive authentication credentials safe on the server side.

A series of express routes, or the equivalent in your favorite web server, will do the trick, with a series of routes like this:

const driveAPI = new (require('./driveAPI'))();
const express = require('express');
const API_VERSION = 1;
const router = express.Router();

router.route('/getDoc')
.get((req, res) => {
  console.log('GET /getDoc', req.query.id);
  driveAPI.getDoc(req.query.id)
  .then(data => res.json(data))
  .catch(error => {
    console.error(error);
    res.sendStatus(500);
  });
});

// Other routes included here (getSheet, getImage, listFiles, etc)...

app.use(`/api/v${API_VERSION}`, router);

See the full express.js file in the companion repo.

Bonus: Docker Deployment

For deployment to production, we can can run the Express server alongside your existing static web server. Or, if it’s convenient, we could easily wrap it in a Docker image:

FROM node:8
# Create app directory
WORKDIR /usr/src/app
# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package*.json ./
RUN npm install
# If you are building your code for production
# RUN npm ci --only=production
# Bundle app source
COPY . .
CMD [ "node", "express.js" ]

…or use this pre-built image published on Docker Hub.

Bonus 2: NGINX Google OAuth

If your website is public-facing (accessible by anyone on the internet), then we’re done! But for our purposes where I work at Motorola, we are publishing an internal-only documentation site that needs additional security. That means Link Sharing is turned off on all our Google Docs (they also happened to be stored in an isolated and dedicated Google Team Drive separated from all other company content).

We handled this additional layer of security as early as possible at the server level, using NGINX to intercept and reverse-proxy all requests before they even make it to the Express server or any static content hosted by the website. For this, we use Cloudflare’s excellent Docker image to present a Google sign-on screen to all employees accessing any website resources or endpoints (both the Drive API Express server and the static content alongside it). It seamlessly integrates with the corporate Google account and single-sign-on they already have — no extra account needed!

Conclusion

Everything we just covered in this article is exactly what we’ve done where I work. It’s a lightweight, flexible, and decentralized content management architecture, in which the raw data lives where Google Drive, where our team already works, using a UI that’s already familiar to everyone. It all gets tied together into the website’s front end which retains the full flexibility of pure HTML and CSS in terms of control over presentation, and with minimal architectural constraints. A little extra legwork from you, the developer, creates a virtually seamless experience for both your non-dev collaborators and your end users alike.

Will this sort of thing work for everyone? Of course not. Different sites have different needs. But if I were to put together a list of use cases for when to use Google Drive as a CMS, it would look something like this:

An internal site with between a few hundred to a few thousand daily users — If this had been the front page of the global company website, even a single request for file version metadata per user might approach that Drive API usage limit. Further techniques could help mitigate that — but it’s the best fit for small to medium-size websites.
A single-page app — This setup has allowed us to query the version numbers of every data source in a single REST request, one time per session, rather than one time per page. A non-single-page app could use the same approach, perhaps even making use of cookies or local storage to accomplish the same “once per visit” version query, but again, it would take a little extra legwork.
A team that’s already using Google Drive — Perhaps most important of all, our collaborators were pleasantly surprised that they could contribute to the website using an account and workflow they already had access to and were comfortable using, including all of the refinements of Google’s WYSIWYG experience, powerful access management, and the rest.

The post Using Google Drive as a CMS appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

July 13, 2021

How to Add a Custom Login URL in WordPress (Step by Step)

Do you want to add a custom login URL in WordPress?

Adding a custom login URL in WordPress can help improve your WordPress security and offer your visitors a better experience.

In this article, we’ll show you how to add a custom login URL in WordPress, step by step.

Why Add a Custom Login URL in WordPress?

WordPress is the most popular CMS platform and powers over 40% of websites. Because it’s so popular, it’s often a target of hackers who use techniques like brute force attacks to try to log in to your dashboard.

Bots and hackers trying to get into your site know the common login URLs like wp-admin and wp-login and will try to get access to your site using these URLs first.

By changing the WordPress login page URL, you improve your site’s security and make it more difficult for hackers to get access to your WordPress website.

Another reason to add a custom login link in WordPress is to offer a better user experience. You can customize the URL and design of your login page so it matches your branding and existing WordPress theme.

With that said, let’s show you how to add a custom login URL in WordPress in just a few simple steps.

How to Add a Custom Login URL in WordPress Using SeedProd

The simplest way to add a custom login URL in WordPress is by using a WordPress plugin. This lets you simply change your WordPress login URL without editing any core WordPress files.

We recommend using the SeedProd plugin. It’s the best drag and drop WordPress page builder used by over 1 million sites. With this plugin, you can easily customize your SeedProd login page and change the URL.

The first thing you need to do is install and activate the plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Note: There is a free version of SeedProd, but we’ll be using the premium version for this tutorial since it has the login page templates we need.

Upon activation, first you’ll need to go to SeedProd » Settings and enter your product license key.

You can find your product license key under your account information on the SeedProd website.

After that, navigate to SeedProd » Pages and click the ‘Set up a Login Page’ button.

Then, you’ll be taken to a screen that has all of the login page templates.

You can choose one of the pre-made professional templates or select the ‘Blank’ template to build a login page from scratch.

For this tutorial, we’ll choose the ‘Geo Login Page’ template.

Simply hover over the template you want to use and click the check icon.

This brings up a popup where you can name your new login page and enter a custom login page URL.

Next, click the ‘Save and Start Editing the Page’ button.

This will take you to the page editor screen.

You can customize every element of the page with the drag and drop builder.

The left side has blocks and sections you can add to the page, and the right side shows a real time preview of what it looks like.

When you click on any page element, it will bring up a menu to customize it further.

You can customize your login page as much as you want, but we’ll leave the default settings for this tutorial.

For more details on all the customization options, see our ultimate guide on how to create a custom WordPress login page.

Next, you need to click the arrow next to the ‘Save’ box and select ‘Publish’ from the drop down.

Now, it’s time to change the default login URL to your new login page.

First, click the ‘Page Settings’ menu option at the top of the page.

Then, scroll down the page until you see the ‘Redirect the Default Login Page’ option. Simply click the ‘Enable’ toggle, and you’ll see it turn orange.

This will redirect the default WordPress login page to the new page you just created.

Don’t forget to click the ‘Save’ button again to make sure all of your changes are now live.

Change WordPress Login Page URL with a Free Plugin

We recommend using the SeedProd plugin above because it also lets you easily customize your login page to match the design of your site.

However, some users will want to keep the default WordPress login page and only change the login page URL.

To do this, you can use the free plugin called WPS Hide Login. This plugin lets you simply change the login URL without customizing the page.

Once the plugin is installed and activated, navigate to Settings » WPS Hide Login.

Then, add your new login page URL in the ‘Login url’ box.

You can also add a redirect URL in the ’Redirection url’ box.

This will redirect people to another page on your WordPress blog when they try to access the default wp-login.php page, and they aren’t logged in.

After that, click ‘Save Changes’.

Now, all visitors will automatically be sent to your new login page URL.

We hope this article helped you learn how to add a custom login URL in WordPress. You may also want to see our guide on how to choose the best web design software, and our list of the best email marketing services for small businesses.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add a Custom Login URL in WordPress (Step by Step) appeared first on WPBeginner.

June 28, 2021

Scaling Organizations Should Consider Building a Website Backed by a CRM Platform

To make some terminology clear here:

CMS = Content Management System
CRM = Customer Relationship Management

Both are essentially database-backed systems for managing data. HubSpot is both, and much more. Where a CMS might be very focused on content and the metadata around making content useful, a CRM is focused on leads and making communicating with current and potential customers easier.

They can be brothers-in-arms. We’ll get to that.

Say a CRM is set up for people. You run a Lexus dealership. There is a quote form on the website. People fill it out and enter the CRM. That lead can go to your sales team for taking care of that customer.

But a CRM could be based on other things. Say instead of people it’s based on real estate listings. Each main entry is a property, with essentially metadata like photos, address, square footage, # of bedrooms/baths, etc. Leads can be associated with properties.

That would be a nice CRM setup for a real estate agency, but the data that is in that CRM might be awfully nice for literally building a website around those property listings. Why not tap into that CRM data as literal data to build website pages from?

That’s what I mean by a CRM and CMS being brothers-in-arms. Use them both! That’s why HubSpot can be an ideal home for websites like this.

To keep that tornado of synergy going, HubSpot can also help with marketing, customer service, and integrations. So there is a lot of power packed into one platform.

And with that power, also a lot of comfort and flexibility.

You’re still developing locally.
You’re still using Git.
You can use whatever framework or site-building tools you want.
You’ve got a CLI to control things.
There is a VS Code Extension for super useful auto-complete of your data.
There is a staging environment.

And the feature just keep coming. HubSpot really has a robust set of tools to make sure you can do what you need to do.

Need serverless functions? They got ’em.
Where do you keep files? The file manager.
Is there a generic database for data? Yes.
Does the site need to support multiple languages? That’s a first-class feature.
What about auth? One better, they give you SSO.
Do you have to use some third-party thing for search? Nope, they got it.

As developer-rich as this all is, it doesn’t mean that it’s developer-only. There are loads of tools for working with the website you build that require no coding at all. Dashboard for content management, data wrangling, style control, and even literal drag-and-drop page builders.

It’s all part of a very learnable system.

Themes, templates, modules, and fields are the objects you’ll work with most in HubSpot CMS as a developer. Using these different objects effectively lets you give content creators the freedom to work and iterate on websites independently while staying inside style and layout guardrails you set.

Get Started with HubSpot CMS

The post Scaling Organizations Should Consider Building a Website Backed by a CRM Platform appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Why Use a WordPress CRM Plugin?

1. HubSpot

2. FunnelKit Automations

3. Freshsales CRM

4. Brevo (Formerly Sendinblue)

5. Pipedrive CRM

6. GreenRope CRM

7. FluentCRM

8. WP-CRM System

What Is the Best WordPress CRM Plugin?

FAQs About CRM Plugins for WordPress

Expert WordPress Guides for Customer Service

Using CDN For Caching And WebP For Lighter File Sizes

Tackling The Largest Contentful Paint (LCP)

In Progress: Implementing srcset

References

Sanity.io (via their iframe plugin)

Clear Communication

Engineering Issues In Web3

Wallet Recovery Without Compromising Security

Interoperability Between Different Blockchains

Financial Off-ramps

Communication And Education Issues In Web3

Marketing And Communications

Simplifying Transactions

Adobe Connect Compared

About Adobe Connect

Adobe Connect Products and Services

Adobe Connect Health and Stability

Adobe Connect Pricing

Adobe Connect Pricing Structure

Adobe Connect Pricing Comparison

Adobe Connect Trials and Guarantees

Adobe Connect Webinar Software Review

What Makes Adobe Connect Webinar Software Great

Where Adobe Connect Webinar Software Falls Short

Adobe Connect Webinar Software Compared

Adobe Connect Content Management System Review

What Makes Adobe Connect Content Management System Great

Where Adobe Connect Content Management System Falls Short

Adobe Connect Content Management System Compared

Adobe Connect Digital Asset Management Software Review

What Makes Adobe Connect Digital Asset Management Software Great

Where Adobe Connect Digital Asset Management Software Falls Short

Adobe Connect Digital Asset Management Software Compared

Adobe Connect Electronic Signature Software Review

What Makes Adobe Connect Electronic Signature Software Great

Where Adobe Connect Electronic Signature Software Falls Short

Adobe Connect Electronic Signature Software Compared

Adobe Connect HTML Editor Review

HTML Editors Compared

Adobe Connect VoIP Call Recording Software Review

What Makes Adobe Connect VoIP Call Recording Software Great

Where Adobe Connect VoIP Call Recording Software Falls Short

Adobe Connect VoIP Call Recording Software Compared

Adobe Connect Web Design Software Review

Web Design Software Compared

Adobe Connect Social Media Scheduling Tools Review

Social Media Scheduling Tools Compared

Adobe Connect PDF Editor Review

What Makes Adobe Connect PDF Editor Great

Where Adobe Connect PDF Editor Falls Short

Adobe Connect PDF Editor Compared

Final Verdict

What is Headless WordPress?

How Headless WordPress Works?

What Are the Advantages of Using Headless WordPress?

What Are the Disadvantages of a Headless WordPress Website?

Should You Use a Headless WordPress Website?

How to Make a Headless WordPress Website?

CMS Popularity and Market Share Report 2022

CMS Usage Statistics

CMS Market Share

Content Management System Market Value

WordPress Market Share

eCommerce CMS Platforms Market Share

Wix Market Share

Squarespace Market Share

GoDaddy Market Share

Joomla CMS Market Share

In Progress: Implementing `srcset`