If you designed a web page that is supposed to be used as a part of Content Management System, than you should already be familiar with the difficulties and limitations of those designs. There are many variables you should think of when designing for Content Management Systems — what are the maximum image sizes, which kind of users will be using CMS, how much HTML do they know, will the page validate after the users input their text etc.
It is easy when you design a static page, but there are many obstacles, difficulties and limitations when you design for Content Management Systems. This is like a coin — it has two sides. I personally love the challenge that this kind of work puts in front of me, but nevertheless it is exhausting and sometimes painful.
In this article I will try to show you how to overcome some of the difficulties that will eventually come up when you design a page that is supposed to be edited by different people with different level of HTML knowledge.
There are two kinds of users
First, there are users that don’t know anything of web design, HTML and CSS. Those users didn’t hear about validation and it means nothing to them — just the opposite — they don’t understand why the validation is important and how this helps them (but this is not an article about validation :-). They may also like green text on white background. Tough one.
Second type of users is those who know what to do. They may or may not know the HTML, but if you give them opportunity to explore, they could ruin your masterpiece.
Validation errors
We could talk about how validation is important, but I will not discuss it here in this article. I love validation and I think it is very useful both when developing web site and later when you use it. So, how to prevent the page from not validating?
It is not an easy task if your page is maintained by users who don’t understand code syntax. The solution is rather easy to implement. You should use WYSIWYG editors in your administration whenever possible. It is also a good idea to disable all non essential options in the editor.
It is the habit of your users to use as many options as available, so limit the options to most common ones (headings, paragraphs, bold, italic, underline, lists, tables). If you allow them to input images into the editor, you should limit the image width to the maximum width of the layout DIV the image will go into.
Remember to use an editor that will create a code that validates. One of the best editors out there is TinyMCE and it’s free.
Page doesn’t look so nice anymore
OK, you used WYSIWYG editor on your CMS administration, and now what? You got pages that are all messed up, floats are not working correctly, and everything is upside down. First of all, use fixed width DIVS and overflow:hidden whenever possible for layout. This way you prevent your page from falling apart in cases like when your users upload very big images, or create tables that just don’t fit in. This is better than scrambled page.
The next thing you can do is to define maximum sizes of images and tables in your CSS (i.e. #content img { width:200px } — this piece of CSS resizes the image within #content DIV). This works well for images (browser will resize the image to fit proportions defined in CSS), but you should know that CSS cannot resize the image using constrain proportions, unless the size of the image is strictly defined and you can define smaller proportions with CSS (i.e. #content img { width:160px; height:120px; } — this will create a resized image from 800x600px). This won’t work for tables though, because browser renders table with the data there is already present. So if there is many data in the table, it will go beyond your desired and predicted space.
Remember to style the code
Because of CSS, there are many possibilities to style the code once the browser requests the page. Remember to style the code and you could even differently style the headings, paragraphs, images or tables in the section that is edited by others via CMS.
This way you can recreate a “static view” of the page that is not manually edited, and make a page look more professional.
Leave a Reply