How to Build a Great Editorial Experience with Umbraco

Umbraco is a flexible and developer friendly CMS. Here you will find tips on how to optimize an editor experience. It also offers a smooth editorial flow customization, which allows developers to set it up depending on the project needs. While being a great strength, this feature could become a weakness, if you do not know how to use it right. In this case, you have to know when to select Umbraco CMS for your project and then start discovering all available opportunities.

Below there are advice and best practices gathered by me and my colleagues on how editor mode should be configured and what plugins to set up to make the Umbraco experience rocking. All plugins listed in this article are available here. Enjoy!

Edit mode

New Page as a Configurable Template

An editor will not require a developer help every time he needs to create a new page if pages are configurable.

Page Elements Simple Selection

It should be easy to change the block position on the page. Create a new one or delete redundant.

Bellow, there are two the most popular approaches:

Nested content

The nested content element is one of the most powerful components in Umbraco. It can be used for almost everything. The only limitation is that you can’t reuse and share blocks between pages.

This approach is also better for page speed since all content can be read with one step.

Blocks

Approach with blocks is often used when components could be reused or shared between pages.

Content Items Structure Should Follow the Menu Structure

Content items in Edit mode should repeat page positions in the menu.

Fields Order in Edit mode

Fields order in Admin should be in the same order as they are displayed on the website.

Notes in the Field’s Logic

Put informational notes for editors under each content field:

• Comments to describe the behaviour.

• Image Pickers should describe the recommended picture dimensions.

• Checkbox logic behaviour should be described.

Brandbook colours

Blocks and buttons colours should be configurable. Take a set of suggested colours from a brand book.  

Rich Text Editor

RTE should support H1, H2, H3 headings and button styles.

Deactivate the elements you do not use and give proper styling to elements you operate with on public pages.

Email Templates

When web application has emails which should be sent to users It is handy when an editor can change an email template in Umbraco without asking a developer.

There are some fields like user first name and last name that are individual for each template. This can be handled through a string replace method in a code (ask a developer to set it up)

Superb Forms Builder Plugin

Forms Builder plugin allows creating forms that work well for both desktop and mobile devices.

SEO

There is a set of SEO plugins recommended to installation for Umbraco to support Google Search Engine Optimization best practises.

SEO Fields

Each page should have SEO fields which allow changing default SEO behaviour.

Below there is an inferior limit of fields recommended for a SEO support

• Page title
• Meta description
• Canonical node
• NoIndex/NoFollow
• Open Graph title
• Open Graph description
• Open Graph image

Redirect Plugin

301Redirect plugin tracks page relocations. It renames and set up redirects automatically.

Robots.txt Editor plugin

Robots.txt editor plugin gives editors access to the robots.txt file.

Page Not Found Manager plugin

Page Not Found Manager plugins that allow processing page not found case

SiteMap tuning

It is not a plugin but a code snipped for SiteMap tuning

Basic Rules for Document Type Structure (advanced)

Here are some tips for editors who like to define page structure for developers. Luckily it is very easy in Umbraco and doesn’t require technical skills.

Set a Base Type for All Pages on a Website

Thus each page will have some common fields like SEO and Sitemap settings. Also, it should be easy to add a new field for all document types in the future.

Plugins for developers (advanced)

The plugins listed below are popular among developers. However, editors with a technical background will also find it handy.

Config Tree Plugin

Config Tree plugin allows you to access configuration files. It is not a best practise to change them (as apparently files will be rewritten during next release), but it gives you a chance to experiment with settings making quick changes.

uLogs Plugin

uLogs plugin allows you to look through and filter Umbraco logs. If you see strange behaviour you can check logs to find its reason.

Umbraco 8 has own pre-installed component for viewing logs.

uSync Plugin

uSync plugin prevents fields loss during the code migration from a development machine to production.

Summary

Umbraco CMS has plenty of capabilities. Its wide potential is quite beneficial and helps to customize a great experience for an editor based on the workflow goals and routines. But consider an experienced developer's support to set it up in a proper way. 

If you want to learn more about our exceptional Umbraco development services, check it out here.