How to Build a Great Editorial Experience with Umbraco
Content of the article
Umbraco is flexible and developer friendly CMS. Here you will find tips on how to optimize an editor experience.
Umbraco offers a quite flexible editorial flow customisation, so a developer can 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.
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.
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:
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.
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.
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.
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.
There is a set of SEO plugins recommended to installation for Umbraco to support Google Search Engine Optimization best practises.
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
- Open Graph title
- Open Graph description
- Open Graph image
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
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 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 prevents fields loss during the code migration from a development machine to production.
Umbraco CMS has plenty of capabilities. Its wide potential is quite beneficial and helps to customise 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.