Bad Practices when working with the Text / HTML module
| Introduction and pasting content from Word | Using font tags | Adding tables | Recommendations and Conclusion |  | Using font tags - formatting using the text font, colour, size and highlight options
The first thing most users reach for when adding text to the Text/HTML module is the font drop down list.
This is bad practice because it adds masses of <font> tags to your page.
The key rule of thumb for today’s web design is to separate the content from the presentation styles.
You should aim to place all of the text styles that you require within your skin.css file as separate classes.
You should set up a main default font size for the text, so that for the majority of the
This will reduce the size of your pages, improve page load time for the visitors to your website, reduce your bandwidth costs...
content, all you enter is text within the Text/HTML module, and when you click on update it is presented in the correct size. (This is usually set using the Normal class.) (We walked through this in the previous skinning tutorials from issues 5 & 6 and issue 7.)
If you require additional text styles such as text for quotes or code examples, add these styles to the skin.css file and then call the class from the Text/HTML module, as you can see in the example below.
This will reduce the size of your pages, improve page load time for the visitors to your website, reduce your bandwidth costs, and also allow for easily making alterations to the style of your website at a later date.
For instance, supposing you have styled quotes across your entire website using <font> tags. When it is time for you to change the look of your website, you will have to manually edit every single page to change the style of the quotes. Whereas if you have specified a class for each of your quotes, all you have to do is change the styles of the quote class in your skin.css file and it changes the styles for all of the quotes across your entire website.
So for any text styles you need, take the time to create them as different text styles within your skin.css file. It will save you weeks of work when you want to change the style of your website at a later date. |
|
|