Search code examples
cssxhtmlaccessibilitysitecoresemantic-markup

How to give option to add css classes/IDs to content to in CMS's WYSIWYG content builder/editor to non-technical client?

  • How to give option to add css classes/IDs to content to in CMS's content WYSIWYG builder/editor to non- technical client who doesn't know html, css but knows MS Word.

some time to make content according to design XHTML tags not enough. use of css classes needed.

  • Should we give only css .classes to user or #Id can be given also?
  • and how we should write classes name for ease of client?

In semantic way or like border4px, light-text and pretty-background ? Which method will be good for non-technical client to choose and remember appropriate classes?

  • How popular CMS given this option to client ? What is best method according usability?
Solution

  • Most Rich HTML online editors bring a "styles" drop down that allows the user to pick styles. See e.g. here for how it's solved in FCKEditor.

    As for what styles to put in there, that depends totally on your client IMO. If they have design guidelines, you will want to put styles there that match the corporate font / colouring / design. You could also make this customizable by the user, there are several online CSS Editors around - they're not really for non-technical people, though.

    As for whether to use IDs or classes: Absolutely and definitely classes. It's hard to prevent IDs from being assigned multiple times in a WYSIWYG editor, which is a total no-no.

    The naming of classes is up to you, really. I like human-readable formats that at the same time are a class name:

    • HeadingBig
    • HeadingMedium

    • HeadingSmall

    • ProductCategory

    • ProductDeclaration

    • Quote

    • TipOfTheDay

    those class names are obviously displayed to the user when selecting the class, so there is no need to keep separate, human-readable class names.