Where Is My WYSIWYG Page Builder? — Part 2

Don't let a WYSIWYG limit your creative writing. Discover why you should use semantics and Kentico Cloud to create content for multiple channels.

Avatar fallback - no photo

Ondrej SirockaPublished on Mar 12, 2019

In my previous article, we talked about WYSIWYG editors, their typical use and why it’s not a good idea to work with them in the context of omnichannel content publishing. As promised, in this sequel I would like to show you how you can keep the same level of control over the content representation while staying fully focused on the creative writing and having the option to distribute your content over multiple channels.

As a quick recap, let’s go through the use cases that we have discovered behind the WYSIWYG editors/page builders:

  • Create content and build pages while having a visual and content context. That means users know WHERE exactly content goes, HOW it looks, and WHAT the surrounding content is.
  • Edit or fix errors on the spot, i.e., directly on the web page (no need for searching for the content in the content inventory).
  • Build custom pages, new layouts, and templates without developers and to speed up the whole process.

Write for Content and Meaning, Not the Visual

Before we get to the scenarios one-by-one, I would like to start with some mind-shifting motivation that I find extremely helpful when speaking about creative writing and omnichannel content production.

There are two ways you can think about the content representation. You can either work directly with the visual your readers will see, or you can think in semantics—the meaning behind the visual representation of your content. Sounds difficult or unfamiliar? Let me explain it through these few examples:

  • Imagine you format some words in your Word document to be red. That's visual representation. Now try to think why you did that and what message this kind of formatting is supposed to communicate towards your readers. This always depends on context, but in this case, it can be something like "important" or "emphasized." Now we're talking about semantics.
  • Let's say that for every blog post, you can decide whether the background color of the main headline will be navy, violet or white. In other words, you can choose the visual. When you ask your authors based on what rule they pick the colors, they will tell you that navy is for serious/factual articles, violet is for evoking a playful or joyful mood and white is used for simplistic impression. That's the underlying essence of the colors, therefore semantics.
  • In your content writing guidelines, you might have defined two ways editors can align images with the text. They can either place all the pictures on the left and text on the right, or they can alternate images with the text on the left or right (i.e. they work with the visual). The reason behind this kind of content distribution is that while having all images on the left put stress on the graphics, having them aligned alternatively equally distributes readers attention between written words and the images (that's semantic interpretation).

I hope that these examples gave you a better idea of the two approaches. Now let's take a look at why I personally like semantics so much and why I think they should be your go to strategy too.

But Why Semantics?

Preparing an interesting article that will catch readers attention is not an easy task and requires a lot of focus. The more I talk to content authors about their creative flow, the more I can see one simple pattern in their answers—the less distraction they have in the editing environment, the better. That's why so many of them prefer just a white paper or Word document when composing their stories.

And this gets me to the difference between visual and semantic content editing. Just take a look at this comparison of a WYSIWYG page builder and Kentico Cloud.

WYSIWYG displays the content as it'll look on your website, but at what cost?

  • You suffer from tons of options to format and position your content, which is only a distraction to your creative process. 
  • The visual representation you build is only compatible with the channel it's designed for (mostly web). If you plan to reuse your content, the visual tweaking will be most likely useless for other channels like mobile applications, print or an email newsletter.
  • The way your readers will see the content might not be the best way for you and the content authoring process. I believe there is a big difference between how we consume content and how we tend to prepare it—those are two diverse tasks with different goals. That's why it doesn't make much sense to share one environment for both (which is the case of WYSIWYG) and we need separate user experiences.

On the contrary, when you write content with semantics on your mind, you get the following:

  • Simplistic and easy-to-use content authoring environment supporting your creativity.
  • Semantics are universal. They can be transformed to visual representation however it's best for the consuming platform—be it web, mobile application or print.
  • Both content authors and consumers will get the best experience tailored to their needs.

So far, I've been quite prejudiced in favor of semantics and haven't said anything nice or positive about its rival. Therefore it might surprise you when I say that with Kentico Cloud, we fully understand that having control over the output and representation is still vital and plays important role in the content production process. We just don't think WYSIWYG is the right way to do it. Let me now show you what we've done to combine the best of the two worlds, so that you can have the visual under control while experiencing seamless editing and omnichannel content distribution.

Create Content and Build Pages While Having Visual and Content Context

First of all, Kentico Cloud offers a slick and user-friendly editor with essential text formatting such as bullet lists, bold text or multiple headline levels. Based on our research, we have found out there are still some formatting options missing (superscript, subscript or code block), so we already plan to address them soon. Everything else is done through semantics. You don't have to think what color or alignment to use, you simply pick the right meaning for your content ("important," "playful" and so on) and let the consuming application do the rest. In practice it means that your content is usually accompanied by a set of semantic metadata, which is filled through elements like text fields, check-boxes or drop-down menus (whatever works best for the particular situation). The benefit? You can focus purely on content creation and your content can be displayed on any channel. Thanks to the fact that you are not defining the visual, but rather semantics, the target device can decide how it's going to represent that information.

Very often, your work is a composition of multiple items, that are already reused across various articles, landing pages or anything else. As an example you can think of a blog post containing:

  • Digest information about one of your products.
  • Customer testimonial.
  • CTA for your e-shop. 

All those pieces have been already prepared in the past and are being displayed in context of some other pages (i.e. they are reusable). When putting together such content, it's essential to know the context of the linked items and have all the important information in one place. No one wants to break their flow by opening a new browser tab just because they need to look at contents of the referenced product. For this reason, some time ago, we introduced the ability to review linked items in one place. Thanks to that, you can expand the linked content items one after another, and review all content directly in the parent content item. For a similar reason, users can also use components, which I'll talk about later on in this article.

And finally, once you are all set, just before hitting the publish button, you can use the preview functionality to see how your content will look on the web. For many authors, the web is still the primary marketing channel and we understand that final review with all the visuals can be useful.

Edit or Fix Errors on the Spot

Very often when reviewing your content on the web, you can spot a typo or a small error and need to fix it right away. It's really easy with WYSIWYG editors (since you are editing content directly on the web), but Kentico Cloud has an answer for that too. Almost a year ago, we introduced the website preview edit button that allows you to add a button (or buttons) to the website preview, which redirects editors straight to the particular content item in Kentico Cloud. Thanks to that, editors don't need to search for the desired content in the inventory and can make the adjustments to their content right away.

Build Custom Pages, New Layouts, and Templates without Developers

Building new web pages has always been straightforward with drag&drop WYSIWYG page builders. You just drag around various elements you want to use and directly fill them with content. It's relatively easy to change an element's position and sometimes even styling.

What if I told you that you could do that with Kentico Cloud too? In this article, I've already mentioned components. They act as content blocks, widgets or modules, that can be embedded and edited together with your content. There is no limit for how many of them you use within one page so that you can combine multiple components of different types to build your perfect page. Components can be headline blocks, customer testimonials, product teasers, related articles sections... you name it. You can work with them like in a drag&drop editor, but instead of positioning visual elements, you use the content blocks.

And the cherry on the top? The cross-platform reusability applies to components too! Since, apart from semantics, components don't care about the presentation, they can be displayed not only on the web but also at any other channel your organization uses.

There's More

We are fully committed to becoming the best way to work with content, period. Even though we've been receiving lots of positive feedback recently, we realize there is always a room for improvement and that our work is not done yet. That's why you can look forward to other great features and improvements like a new interface for better authoring, limit content access for a specific section and much, much more!

Do you have any feedback or ideas on how to make Kentico Cloud even better? Make sure you share your opinion in the comment section!

Avatar fallback - no photo
Written by

Ondrej Sirocka