Benefitting From CSS-Based Design

Introduction

When creating content for the Web, adhering to Web accessibility guidelines is becoming increasingly important. While accessibility is mainly concerned with making the content available to anyone, regardless of any disabilities, using the recommended methods often yield benefits that go above and beyond that.

Content is accessible to all users, including people with disabilities.

• Uniform appearance across the Web site.
• Flexible solution, separating layout details from content.
• Easier maintenance without redundancy, as style information is centralized.
• High degree of visual and structural control of elements.

Some of the benefits gained stem from using cascading style sheets (CSS) for layout and positioning, while some require a correct usage of mark-up elements in the content you create. Combining the two will result in structurally meaningful content that can also be visually formatted in great detail.

EPiServer offers a number of tools to facilitate the correct use of CSS rules and element mark-up; for instance when formatting text, inserting images and working with tables. Configuration of the available tools can usually be performed by an administrator or your EPiServer partner, to ensure that they match your Web site requirements. Using them to create the best possible content is part of the editor’s responsibilities.

EPiServer and CSS-Based Design

Strive to let your editors create simple content, without applying detailed visual editing (such as white spaces, line height, font size, colour, etc). By limiting the number of tools available to editors, and customizing the behaviour of the tools you wish to be used, the editors’ task becomes easier and more focused on the content, rather than the presentation of the content.

Some of EPiServer’s built-in editor tools, such as the B (bold/strong), I (italics/emphasis) and Format Paragraph tools can create HTML that is semantically meaningful as well as visually formatted. Other tools, such as U (underline) and the Font picker offer strictly visual formatting, and should be avoided unless specifically needed. Also, using detailed settings such as border and background colours to visually format tables and table cells is rarely the best solution. Instead, it is preferable to determine a set of predefined CSS-based options that the editors can choose from when creating the content – whether they want to format text, images or tables.

With knowledge of CSS syntax, and access to the style sheet file used by the Web site, configuration is easy. By simply adding the attribute EditMenuName to a CSS rule, EPiServer is made aware of the rule and will incorporate it into a suitable editor tool. In EPiServer version 4.60, such rules can show up in drop-down menus when formatting text, inserting images or working with tables and table cells – all depending on how the CSS rule is defined.

Example 1: Dashed image border

This style will be available from Image Properties, due to the rule being defined for img elements and containing the EditMenuName attribute. The result will display a dashed border around the image.

Example 2: Quotes

This style will be available from the Format Paragraph drop-down list, and allows editors to mark text as a quote (inserting <q> and </q> HTML tags around the selected text).

Similarly, rules created for tables and cells (such as table.classic or td.highlighted in the CSS file) will show up in the CSS class list inside the relevant screens.

Summary

Using correct CSS-based formatting and layout offers a number of benefits in your Web site. Not only will the information be more accessible to those that may rely on technical aids to browse the Web; you will also simplify both editorial and administrative tasks.

Editors will select predefined styles to tag and format recurring types of content (such as headings, quotes, tables and images), which is a quick and easy way of working. Doing so will also result in a uniform appearance across the Web site, with similar elements being formatted the same. When a carefully selected set of CSS rules are used consistently, the “look” of the Web site can be modified with minimal effort, meaning easier customizations and maintenance when the appearance may need a face-lift at some point.

Resources

›› http://www.w3.org/WAI/ - Accessibility Initiative (WAI)
›› http://www.w3.org/Style/CSS/ - Cascading Style Sheets home page

Comments