Blocks, grids, style: Best practices for Episerver Designers

Designing a new website using a CMS you’re not familiar with can be a daunting task. Unknown rules, structures and outcomes make it a gamble. Here’s what’s worth keeping in mind when you design for Episerver.

Blocks and components

The most important thing to know about page layout in Episerver is its reliance on blocks and reusable components. In essence, much of the content is created in the form of individual blocks that are then aligned along the grid that spans the page. The blocks are created independently of the pages and can then be inserted into as many pages as you want, making it extremely easy to reuse content and designs. Make sure to reuse them whenever you can.

When working on designing apps and websites, most blocks on the screens are components. A component can be anything that uses at least a few elements. Things like cards, hero banners and text blocks are traditional examples of components. However, they do not necessarily have to look modular.

UI Framework

For those who want to work with UI grids, it’s important to know which UI framework fits you best early on. Episerver can easily be configured with any grid system, whether it’s custom-built, or open-source ones such as Bootstrap, Foundation or Susy. When selecting or developing a UI framework, it’s important to know what the restrictions are and that your design needs can be met.

The grid of each page is made up of two main parts – columns and gutters. Columns are the happy place where your design elements and blocks can begin and end, while the gutter is a dangerous chasm you want to avoid.

You can customize the number of columns you have on your UI grid, which is dependent on the UI framework that you are going to use. For example, if you are using Bootstrap, your grid will consist of 12 columns and your page designs will have to work with this. An article page with a sidebar, for example in Bootstrap, could be displayed using 8/12 for the main content and 4/12 for the sidebar. A text block could be divided into two parts, displaying 6/12 for each section.

>>> Read more on the benefits of UI/UX design. 

Color

Unsurprisingly, color is one of the most important parts of your website’s design. It can give your site more individuality and make it more recognizable. Selecting a color palette helps developers to maintain a color repository, which can be exposed to the rich text editor in Episerver or as a selection when choosing background colors for blocks and pages on the site. Here are some things to keep in mind when you choose what colors to use for your site:

• Use RGB colors

• Choose colors that go with your branding

• Create a color

Fonts

Using interesting fonts can give your designs something new, fresh and unexpected. Font embedding services like Google Web Fonts or Typekit have a lot of fonts for you to choose from and are very easy to use. Just make sure to:

• Choose fonts that are easy to read

• Provide the developers with the .otf or .tff files for the web fonts

• Choose fonts that are compatible with the client’s style guide

• Use a font with a delivery mechanism that is aligned with the overall performance strategy (Since a font is an extra resource to download when navigating to a site, it could easily impact performance).

Readability

Since we’re talking about keeping it easy to read, you should also make sure that the text you use is neither too narrow nor too wide. For the best reading experience, you should go for a text body with around 60 character per line.

Icons

Icons for use on your site should be provided to developers as SVG files or as an icon font (eg FontAwesome).

Buttons/forms/alerts

You can design a set of button/alert styles that your authors can choose from when adding content, which is fully supported in Episerver through the use of blocks. Some example button styles you can design for are:

• Primary button (use primary branding color)

• Secondary / informational button (use secondary color)

• Warning button (use a warning color)

• Link button (text link styles)

The same concept can be applied to alerts, forms and other components.

Images and graphics

Images are some of the largest elements you will use on your site and will account for a large chunk of loading times. Therefore, they should always be optimized before use. Remember to:

• Use different image sizes for different devices. There is no need to show a high-resolution image meant for a retina screen to a user with a small mobile device

• Use vector-based images or font icons whenever you can

• Use an image compression strategy (lossy vs. lossless)

• Deliver images in next-gen formats (ie WebP, JPEG2000)

Keep a style guide

It will not always be the same designer working on your site. That’s why having a style guide page to consult is absolutely essential.

A style guide is a collection of pre-designed elements, color palettes, fonts and more. It should also include rules for designers and developers to follow. This ensures separate pieces of your website remain consistent with each other and your site offers a cohesive experience from start to finish.

Design administration

Communication between the design team and the developers is vital in order to create a consistent site.

Designers should make sure to provide their designs in sketch or PSD format (with JPG). The development team and the design team should also collaborate using a tool like Envision or Figma. This allows a smooth flow of information between the teams.

Wanna upgrade your Episerver design game? Contact Niteco now and we'll make it happen!