Designing for Content Management Systems

15 February 2017

Designing and indeed front-end development for a website that will have content edited by non-technical users poses some problems over and above those you will encounter when developing a site where you have full control over the output mark-up.

Nonetheless, a lot of clients these days wish to be able to manage their own content, so most developers will discover that designing some, otherwise all, of their layouts end up as themes in some type of CMS.

By considering the CMS as you layout, you can maintain much more control over the final outcome. If your styles will certainly be executed and also integrated right into the CMS by a designer, then taking control at the design stage will assist you to maintain control over the style in contrast to leaving decisions to the developer or the web content editors.

Know your enemy

Web content Monitoring Equipment differ significantly in what does it cost? Control they provide the developer and the content editors. As a developer, you must initially learn what does it cost? Control over the templating system of your selected CMS you have.

Control could differ from simply having the ability to modify the existing templates to being able to form the CMS totally around your designs.

In some older CMS items you might find that you have little control over the designing that is put into the web pages. Where the web content editors are concerned you must discover:

  • Will the editors be able to place any kind of HTML tags right into material locations, either through a WYSIWYG editor or directly?
  • Is material simply large blocks of marked up content put by the editor or does the CMS utilize any sort of structured content?

Designing for Content Management Systems

If users of the CMS will have the ability to put their very own HTML, then you need to think about how your design will stand up when that occurs.

The suitable circumstance for designing is where the user has limited capability to enter their very own mark-up and the CMS utilizes blocks of structured material to direct them right into including content in properly that could after that be marked up correctly by the design templates.

The more liberty an individual has, the a lot more defensively you should create. Maintain it constant However flexible your CMS is, it is necessary to consider the uniformity in your design themes.

Educating content editors is much easier if the elements that they have to work with correspond throughout all pages of the website. If working with any kind of kind of organized content in your design (for example a post listing that presents a list of titles and passages from write-ups on the website), consider each area as a duplicating block.

With CSS3 we can more easily target every other item, or the last thing, but this is not offered for older browsers and it may not be feasible to edit the back-end code of the CMS to include a class to every other item or the last product.

Make sure that the style will certainly hold up if each repeating block is the sameYou could constantly include added skill for those internet browsers that do support CSS3.

When dealing with locations that are basically big blocks of content where the individual has control over the mark-up, do not presume the individual will certainly bear in mind to add lots of various classes to the mark-up to activate the CSS impacts you imagined.Either keep points basic or make use of CSS3 selectors to target areas of the style.

Do not presume content size or height of blocks

On the internet it is never a smart idea to think you know how high something will be - as also where you have control of the content, message resizing could blow your thought elevations right out of the water and cause overlaps or text escaping history photos.

When developing for a CMS, you have the extra problem of more or less message being added to a location that you imagined. If developing the first styles in Photoshop or comparable, consider exactly how each box and the surrounding content will react to a greater or lesser amount of content.

If supplying PSD files to another person to construct, guarantee that any type of background images on these boxes are given with instructions on just what takes place if the box is taller. As an example do we show extra history or matt onto a level shade?

Designing for Content Management Systems

Grid type layouts of boxes could be a certain problem in this situation. An usual style may have numerous boxes with header locations. They look lovely and neat in the PSD compensation with routine lengths of lorem ipsum.

Nevertheless, once the web content editors have included material, we find that some headings get on one line, some on 2 as well as the boxes are wildly varying elevations leaving the cool grid looking rather messy.

Considering this at the layout stage may have determined a various design here. If you are turning over to a front-end developer, thinking through these circumstances keeps the control on your side. Choose exactly how you desire it to look and describe to the developer just how it must respond to text resizing, additional content and more and also you don't risk of leaving these choices to people without an eye for style.

Stay clear of using picture substitute for message

It is feasible to produce photos on the server side utilizing PHP and also other languages, nonetheless your CMS is unlikely to supply this capability as a standard feature.Consequently you need to take into consideration exactly how any non-standard typefaces will be consisted of in your layouts if that message should be taken care of by the CMS.

The situation with font styles is becoming much simpler as there are currently a number of solutions that enable you to utilize fonts that are not set up on your customer's computer yet that would certainly otherwise be hard or difficult to license to consist of on your web site.

Designing for Content Management Systems

If you need a certain font style you might be fortunate and discover that a person of the below solutions have it readily available, or they may have something available which is close enough to obtain the aesthetic result you want.

Consider the CMS when designing navigating

The CMS that you are making use of is likely to determine the navigating to some extent, so discover by inspecting the paperwork or speaking with the developers what will be feasible.It serves to understand exactly what control content editors have over navigating.

Designing for Content Management Systems

If they can include components to the main navigating as an example, it may be that you are best to prevent a cool row of tabs at the top of the website as additional tabs added by individuals might cover.

Design and also create CSS policies for all possible HTML aspects

In your design as well as dummy material you could only make use of 2 levels of going and also never ever add an ordered listing or blockquote, However, if these elements can be added in the CMS, after that eventually somebody will certainly use them.

If you have actually made use of a CSS reset stylesheet you may not have actually styles specified for these elements in any way - which will certainly indicate they look instead odd when utilized. Make sure that you have actually produced CSS for all HTML elements in the material areas of your website.

I discover it handy to begin my stylesheet with the default designing for all components as this then functions as a backup if I do not include certain policies for styles later in the file. I can constantly overwrite this CSS to earn degree 2 headings look various when they are in the major material location to when they are the going of a sidebar box, yet if I don't include any type of certain CSS then the customer includes these aspects, they do have some idea put into them.

Think HTML elements can be stacked in any kind of order When developing your design, it is easy to presume that the material will certainly look very much like your structured sample content. The h1 will be complied with by a few paragraphs, never ever stacking headings and so forth.

The truth will certainly be various once content editors obtain their practical the layout, so check the elements in various combinations.

Ask yourself questions such as:

  • Does the layout still hold with each other well with stacked headings? Exists suitable spacing in between them?
  • Exactly what occurs if a going is made use of inside a checklist thing?
  • Exactly what happens if various listing kinds are nested? Is the spacing appropriate below each list?
  • If the customer can put and also line up a picture, what will then occur to the text around that picture?
  • Will there be a margin or will the text run right up against it?
  • Exactly what happens if they put an image inside a checklist item?

Usage CSS to implement the design overview and also semantics

This is something we tend to see when customers end up being comfy with their CMS: they start to understand that, for instance, an h1 heading provides huge vibrant message.You then start to find h1 headings in all sort of odd places - anywhere the customer believes something needs to be noted as extremely important.

Designing for Content Management Systems

This could include half of the content of some pages. In the first circumstances all of us need to try and enlighten our users as well as offer them with a designing guide to assist them recognize the relevance of semiotics and also right usage of mark-up yet the person you originally train will probably not be the individual that takes care of the material for life and also inevitably you will find individuals being imaginative with their mark-up.

A thought about use CSS could avoid this from happening.

For instance, we usually only desire one h1 per web page. If the major web page going is in a container, then you can utilize CSS selectors just to target that h1 with the major heading styling as well as reset the browser defaults on all other h1 headings to the same as the text duplicate.

This implies the individual has no benefit to making use of h1 in a non-semantic way. The advanced selectors found in CSS3 could be extremely useful right here.

Test with real material

Once your designing has been turned into (X) HTML as well as CSS, examination your presumptions in terms of how the material will certainly act. I discover it helpful to do this prior to the design templates are integrated into the CMS. Indicate examination:

  • Take each headline or little box in the layout Place in 3 times the amount of material you would certainly anticipate it to have. Just how does it look?
  • Does the box increase nicely or do you run off the background photo or overlap an additional element?
  • Order a portion of HTML from anywhere - simply Sight Source on some site as well as get a lot of content full with HTML tags.
  • Paste it into your main content location in the template. Exactly how does it look? If making use of organized mark-up to display an event or similar - does the design hold up if certain items are eliminated or do you wind up with clearly empty locations such as words "Tel:" with no telephone number after it if a telephone number was not gone into for a get in touch with?

Help your content editors to maintain the design. If you turn over the CMS with little direction for your individuals, after that you cannot truly expect them to read your mind and also preserve the style as you would such as.

Even if your preliminary material editor is extensively trained on the best ways to edit the website, as time passes by they may forget, or determine to obtain a little imaginative, or the first editor may leave and somebody else takes control of with little training.At the end of the job, keep control over the designing by aiding your editor to do points the right way.


The WYSIWYG editor in your CMS could by default give the customer the capacity to include all type of designing, also adding inline CSS.

Nevertheless, with lots of editors it is possible to bring down the toolbars to simply offer a minimal part of symbols as well as consequently capability that is exposed to the individual.

If you can bring down the editor to just offer the capability to include standard HTML components, you will certainly have much less issues to take care of.


If material editors have access to a WYSIWYG editor when editing material, add the CSS policies utilized on the website to the editor CSS. By doing this, editors can see just how their modifications to the material will in fact look.

In mix with making use of CSS to impose the design overview, this could help users to preserve the uniformity on the site.


Consist of a style overview for the website as component of your handover documentation. It is simple to just handover designing paperwork on just how the CMS features and fail to remember to additionally explain to content editors which components they must be using when including their material. This is particularly crucial if editors have a lot of control over the mark-up which they go into.

By considering just how material will certainly be modified on your site and the feasible methods which, over time, that web content will certainly expand and also alter, you could keep even more control over a CMS internet site compared to you could think.