Keep it simple and content editors will reach for you. ;-) [Optimization and simplification of the content editor]
The original publication is available here.
http://www.vladsun.com/cms/detail.php?ID=567
One of the important stages of website design is the analysis and clarification of how end users should work with it. To make a template, develop and integrate software modules into it, distribute access rights and launch a website is only half the work, the latter.
The site should be designed and organized so that it is as convenient for end users to use it. In short - this is called Usability (in Russian - usability and work (UIR)).
Now we will talk about one of the aspects of site optimization - simplifying and speeding up the content editor of the site.
')
If the site is just being developed, then at the design stage of the site design it is necessary to divide the styles used into 2 groups:
1. Styles used in site design.
This is the design of the text and page titles, image styles, indentation parameters, positioning. These elements are permanent, rarely modified (except for cases of complete redesign). A content editor with such elements works very rarely. Here you can give full play to the creative imagination of the designer.
2. Styles used for materials.
Title, announcement, full text of news, theses, notes, text highlighting, etc. That is, with what the content editor is constantly working. Here, all design delights must be approached very critically: use standard fonts, refuse special effects that do not work in all browsers, etc.
But even if the site already exists, you can sort the existing styles.
For the first group, unique style names are specified and, as a rule, they are not available for use by the content editor.
For the second group, styles for html tags are redefined (paragraph, list, etc.). If not all html-heading tags are used (h2, h3, h4), then they can be used to highlight abstracts, notes, etc. You can also create new classes, but they should be as small as possible and only if you cannot do without them. For example, for the same abstracts, notes, etc. Also in the first group there should not be redefined html-tags, all classes should be with unique names, otherwise the styles of the first group can "crawl", if for html-tags of the second style group will change the design options.
An example of a CSS-style file, divided into 2 groups:
- / * Styles used in the design * /
.headline {
padding-left: 20px;
padding-right: 20px;
}
………………….
.menu {
margin-left: 30px;
margin-top: 30px;
}
/ * Note that all classes here have their own unique names. The html tags in this section are not overridden. * /
/ * Styles, for content editor * /
p {
font-family: Verdana, Arial, Helvetica;
font-size: large;
}
………………….
ol {
font-weight: bold;
color: # CCFF00;
}
………………….
.attention {
color: # FF0000;
font-weight: bold;
}
/ * Note that html tags are overridden here. * /
- Further, as an example, use the CMS-system Bitrix. The following are the main html tags used in the default visual editor:
1. h1, h2, etc. - for the title;
2. p, i, strong, u - for paragraphs of the announcement and the full text and selection of the text in them;
3. a - for references;
4. ol, ul, li - numbered and unnumbered lists;
5. table, tr, td - when using tables;
6. Etc.
First we override the styles for these html tags in accordance with the site design. We also connect (it is assumed that you have completed the basic training courses on “1C-Bitrix”) new styles 2 groups for notes, theses and other things to the drop-down list of styles of the visual editor.
The bottom line: the work of the content editor is greatly simplified. It will be enough for him to paste text from the clipboard, clearing it from Word-garbage, or to type it from scratch. Next, go through the text, put down here and there lists, links, highlight notes or theses with the use of connected styles. Formatting will be applied automatically.
With this approach, we get relatively “clean” content that contains standard html tags, is minimally littered with additional styles and almost always without “cleaning” can be integrated into a new design or transferred to another CMS engine.
Acting by analogy, all of the above can be applied to other CMS-systems. You just need to check which html tags are used there in the existing visual editor, redefine them in the CMS styles file of the CMS and specify how you can add additional styles for the content editor in it.
Suggestions and comments are welcome.
ICQ: 778818
E-Mail: jalart@vladsun.com
URL: http://www.vladsun.com/cms/
Vladimir.
http://www.vladsun.com/cms/detail.php?ID=567
One of the important stages of website design is the analysis and clarification of how end users should work with it. To make a template, develop and integrate software modules into it, distribute access rights and launch a website is only half the work, the latter.
The site should be designed and organized so that it is as convenient for end users to use it. In short - this is called Usability (in Russian - usability and work (UIR)).
Now we will talk about one of the aspects of site optimization - simplifying and speeding up the content editor of the site.
')
If the site is just being developed, then at the design stage of the site design it is necessary to divide the styles used into 2 groups:
1. Styles used in site design.
This is the design of the text and page titles, image styles, indentation parameters, positioning. These elements are permanent, rarely modified (except for cases of complete redesign). A content editor with such elements works very rarely. Here you can give full play to the creative imagination of the designer.
2. Styles used for materials.
Title, announcement, full text of news, theses, notes, text highlighting, etc. That is, with what the content editor is constantly working. Here, all design delights must be approached very critically: use standard fonts, refuse special effects that do not work in all browsers, etc.
But even if the site already exists, you can sort the existing styles.
For the first group, unique style names are specified and, as a rule, they are not available for use by the content editor.
For the second group, styles for html tags are redefined (paragraph, list, etc.). If not all html-heading tags are used (h2, h3, h4), then they can be used to highlight abstracts, notes, etc. You can also create new classes, but they should be as small as possible and only if you cannot do without them. For example, for the same abstracts, notes, etc. Also in the first group there should not be redefined html-tags, all classes should be with unique names, otherwise the styles of the first group can "crawl", if for html-tags of the second style group will change the design options.
An example of a CSS-style file, divided into 2 groups:
- / * Styles used in the design * /
.headline {
padding-left: 20px;
padding-right: 20px;
}
………………….
.menu {
margin-left: 30px;
margin-top: 30px;
}
/ * Note that all classes here have their own unique names. The html tags in this section are not overridden. * /
/ * Styles, for content editor * /
p {
font-family: Verdana, Arial, Helvetica;
font-size: large;
}
………………….
ol {
font-weight: bold;
color: # CCFF00;
}
………………….
.attention {
color: # FF0000;
font-weight: bold;
}
/ * Note that html tags are overridden here. * /
- Further, as an example, use the CMS-system Bitrix. The following are the main html tags used in the default visual editor:
1. h1, h2, etc. - for the title;
2. p, i, strong, u - for paragraphs of the announcement and the full text and selection of the text in them;
3. a - for references;
4. ol, ul, li - numbered and unnumbered lists;
5. table, tr, td - when using tables;
6. Etc.
First we override the styles for these html tags in accordance with the site design. We also connect (it is assumed that you have completed the basic training courses on “1C-Bitrix”) new styles 2 groups for notes, theses and other things to the drop-down list of styles of the visual editor.
The bottom line: the work of the content editor is greatly simplified. It will be enough for him to paste text from the clipboard, clearing it from Word-garbage, or to type it from scratch. Next, go through the text, put down here and there lists, links, highlight notes or theses with the use of connected styles. Formatting will be applied automatically.
With this approach, we get relatively “clean” content that contains standard html tags, is minimally littered with additional styles and almost always without “cleaning” can be integrated into a new design or transferred to another CMS engine.
Acting by analogy, all of the above can be applied to other CMS-systems. You just need to check which html tags are used there in the existing visual editor, redefine them in the CMS styles file of the CMS and specify how you can add additional styles for the content editor in it.
Suggestions and comments are welcome.
ICQ: 778818
E-Mail: jalart@vladsun.com
URL: http://www.vladsun.com/cms/
Vladimir.
Source: https://habr.com/ru/post/48528/
All Articles