Try Now
More in this section
Blogs RSS feed

Sitefinity 4.0 CTP – Avoid HTML Mode with Layouts

by Gabe Sumner

Sitefinity uses Telerik’s RadEditor to bring a Word-like text editing experience to the web browser.  RadEditor allows content editors to easily style and format text .  However, RadEditor also contains an HTML mode that can be used to directly inject HTML into the content. 

Because HTML mode allows raw HTML to be injected into the content, this feature can be used by savvy editors to create very advanced content layouts.  However, in my opinion, it is inappropriate to toggle into RadEditor’s HTML mode and create HTML formatting.  This should never be done in Sitefinity.  Not even by highly technical editors.  In fact, RadEditor’s HTML mode fundamentally defeats the purpose of having a WCMS.

To understand why I think this is a bad practice we need re-visit what life was like before web content management systems.  Many years ago, webmasters created web content using raw HTML and then published this content using FTP.

 Notepad with HTML.  The days before WCMS

This had several disadvantages:

  1. Non-technical people could not manage the content 
  2. Updating content became a complex and error prone task, even for technical editors 
  3. The web site experience (presentation) became inconsistent 
  4. It was very difficult (months later) to modify the web site experience

These old problems are resurrected when editors resort to injecting raw HTML into a WCMS. 

OK, but what about…

There are plenty of one-off examples where toggling into HTML mode seems to make short-term sense.  Heck, I do it too.  However, frequent use of HTML mode represents a fundamental problem that should be addressed through…

  1. Additional Templates – If new HTML layouts are needed, create additional templates
  2. Custom widgets that encapsulate whatever functionality (and formatting) is needed
  3. Improvements to Sitefinity by Telerik.

Unfortunately, all of these solutions require content editors to contact others (developers, designers, Telerik) to accomplish their immediate content management objective, thus interrupting their workflow.  This might be appropriate if substantial new functionality is required, but often the editor’s objective is much less substantial (for example, adding a new column to a page).  

We want content editors to feel empowered to do their job.  Furthermore, developers or designers shouldn’t be required to accomplish trivial tasks (for example, adding a new column to a page).

Making it easy to tweak the layout

In my experience, people often use RadEditor’s HTML mode for page-specific layout tweaks.  For example, adding a new 3-column layout:

3-column layout example

This looks like a simple task, but accomplishing this quickly becomes complex.  Tables could be used to create this layout in RadEditor, but using tables for layout is frowned upon.  To avoid tables we need to inject raw HTML into RadEditor or create a brand new template.  Either path becomes a hassle.

To address this challenge, Sitefinity 4.0 includes a new Layout Editor.  The Layout Editor makes this task effortless by allowing editors to simply drag & drop a new 3-column layout onto the page:

A drag & drop 3-column layout in Sitefinity 4.0

Once in place, widgets can be placed (just like normal) into any of these new placeholders.   Furthermore, the layout toolbox is fully extensible.  This combines the best of both worlds. 

  1. Content editors are empowered to quickly & easily make layout tweaks.
  2. Layouts are managed by developers and designers to ensure compliance (technical, design, standards).

Try it for yourself

To use Sitefinity 4.0’s new layout editor download the Sitefinity 4.0 CTP.

1.  Create a new Sitefinity page.

2.  Click the Layout button

Use the Layout button to toggle into Sitefinity 4.0 Layout Mode

3.  Drag & drop new layouts. 

4.  When finished, toggle back into Content mode

As always, we welcome your feedback in the Sitefinity 4.0 Forums


Leave a comment
  1. Josh May 24, 2010
    One thing I have found limited in the RadEditor is support for definition lists (dl, dt dd) it's not an easy thing to explain to content writers, so I end up changing their entries in the code.

    so the html editor isn't ENTIRELY un-useful :)
  2. Gabe Sumner May 24, 2010
    :)  Thanks Josh.

    My blog post was purposely throwing down the gauntlet in an attempt to solicit this kind of feedback.  I'm very interested in hearing what scenarios can only be addressed through HTML mode.

    Personally, I would love to see a day where HTML mode is disabled entirely and no one notices.  Understanding why it gets used will help us get there.  
  3. Steve May 24, 2010
    Here's the thing...the RadEditor confuses itself sometimes :)  So you need HTML mode in order to get yourself out of a <p> tag...or perhaps you're caught inside of an H3 even though you're on the next line (visually).

    Any heavy user of it knows how frustrating it can be sometimes...I HOPE you guys are friendly enough with the asp.net ajax team where you can improve upon it since it's your bread and butter...

  4. Jean May 25, 2010
    Hi Gabe,

    I agree with Steve. There are many times the editor nests tags and get confused. Our end users often complain when using the paragraph style drop down that the editor does not remove the styling e.g you select your text, apply say heading 1, then want to undo the style by selecting normal. The editor just does not apply the second request, or even sometimes nest tags. With these issues I can't see that HTML view would go away soon.
  5. Gabe Sumner May 25, 2010
    Hey everyone,

    I created a new thread in the Sitefinity 4.0 forums to gather examples of situations that cause RadEditor to produce unexpected HTML or exhibit unexpected behavior.  If you have specific examples, please give us your feedback.

    Thanks everyone!
  6. David May 26, 2010
    Hi Gabe,

       I agree if you find yourself going to html mode, you might need a new template or control.  Most of my clients don't know html to use that mode. 

      I am excited about Sitefinity 4.0 layout method, that feature will cut down the number of templates I need for my site.
  7. Neil May 28, 2010
    Four releases a year and never resolved during version 3.x, looks like version 4 will also require new and inherited work around. What happened to quality assurance.
  8. Gabe Sumner May 28, 2010
    Hi Neil,

    Can you supply some details about what you're referring to?  A big reason for the pre-release of 4.0 is so we can eliminate the need for workarounds.  If you can help us understand the issue then it is unlikely this issue will exist in the final release.  Thanks for your help!
  9. Pavel Donchev Jun 03, 2010
    Hi, Gabe!
    While I absolutelly agree with you, some of the non-technical people (or at least those who are not expected to be quite tech savvy) have the feeling that they are left in the dark when the Html view is hidden.

    They feel that if something goes wrong with the editor they can't do anything when no Html view is available.
    On the other hand we (I mean the developers and the front-end developers) cannot identify all the problems the above people have as they seem to sometimes find workaround using the Html view and not rising the problem for review.

    The best approach to me would be to show / hide the Html view based on certain role. So the people who are not supposed to work with the Html will send their problems to the people who are for fast Html fix (designers / front-end developers). They will fix it in the Html and will make a note that there is a problem that can't be solved in the Design view. I think in most cases those "problems" will appear to be some specific business needs that can be easilly addressed by the rich radEditor API.

    Pavel Donchev,

    Leave a comment