Building components in Umbraco

It's true: no editor wants to call the web service provider or open a ticket for every change on the website or in the online shop, no matter how small. As the web service provider and partner at our customers' side, we therefore aim to design a backend in such a way that our customers' content editors can work independently and intuitively in the backend.

19.08.2024

Umbraco

3 Principles for Designing a Backend

1. Modularity and Reusability

A clearly structured backend in Umbraco is based on modular components. We divide content into small, reusable elements that can be used in different parts of the website or shop. In close collaboration with our customers, we determine which modules are needed. We usually work together on a long-term basis and add further modules over time, or we adapt existing modules to meet changing requirements.

Editors do not have to maintain content twice

Time saving thanks to reusable building blocks

Uniform appearance across the entire website

2. Intuitive User Interface

An intuitive user interface in Umbraco ensures that content editors can navigate easily and complete their tasks quickly and without technical hurdles. This also includes the clear naming of fields and modules, the use of drag-and-drop functions and a logical and flat content structure.

Editors can quickly navigate the backend

Fewer errors thanks to clear and comprehensible interfaces

Low need for support with daily tasks

3. Flexibility and Customisability

A clean backend in Umbraco gives content editors the flexibility to customise content without technical support. This means that frequently changeable content such as text, images or banners are easily accessible and customisable. We also design the backend so that it is tailored to the individual needs of the customer and has exactly the functions that the customer needs.

Content can be updated quickly

Editors have control over website content

The backend is customised to meet specific customer requirements

Umbraco 14 and Web Components

Umbraco 14 introduces Web Components with some modernisations, replacing AngularJS. AngularJS was a widely used JavaScript framework solution, but it is now obsolete and has no longer been officially supported by Google since the end of 2021. By replacing it with more modern technologies, Umbraco will be more secure and better equipped for the future.

What It Looks Like

Designing a Table in Front and Back End.

Our customer wanted a table with information on tenders. It was important to have numerous fields that could be customised in the backend.

Table fields for filling in the backend

Table view in the frontend

Product Blocks in Umbraco

Our customer needed a layout for their three core products. In the backend preview in Umbraco, content editors can see directly how it will look later in the frontend.

Edit box contents in the backend

Preview of the boxes in the backend

Frontend view of the product boxes

Development

Louay Jebran

Louay is passionate about developing with ASP.NET and has already worked as a developer in his home country, Syria. After arriving in Germany, Louay began his three-year training as an IT specialist for application development at byte5 and and has been part of the team ever since.

The slim .NET CMS

What is Umbraco?

Less complexity – more flexibility. It integrates itself seemlessly into your existing infrastructure following the best-of-breed approach.

Umbraco 14

Experience a new era of the backoffice with Umbraco 14. Discover the Management API, the modern extension-first UI and more. Read what our .NET team lead Dennis thinks about it.

The official Umbraco conference

Codegarden 2024

Codegarden, the official conference of Umbraco, takes place every year. Jonathan, Louay and Lisa from the byte5 team attended this year for the very first time. Read more about their experience.

Start your Umbraco project.

As an Umbraco gold partner, we will be happy to advise you on your options.