Introduction
This is Editorial, a modification of a related design: Gazetteer. As you can see, the major difference between this version and the original is that there is only one column of text, accompanied by a sidebar. This makes it easier to input text; you don't have to worry about balancing columns as you do with Gazetteer.
As with the original, this template is marked up in XHTML 1.0 Strict and styled with CSS. The design does not use any tables resulting in greater design flexibility and cleaner code. Editorial has been tested in Gecko (Mozilla Firefox 0.10.1), Opera (7.01) and Internet Explorer (6.0) for consistent appearance.
“Editorial has been tested… for consistent appearance”
I hope you like this template. You are free to use this design for any purpose you wish — personal, commercial or otherwise — without any obligation. This template is donated to the public domain (ie: no rights reserved) and, as such, does not come with any express support, guarantee or limitation.
Modifications
Modifications to the original Gazetteer template are listed below:
- Cascading alternative stylesheets
- Some of the alternative stylesheets from Gazetteer have been simplified by employing a technique known as cascading. This means that these stylesheets (Crimson, Larger Fonts and Left Sidebar) are “linked” to the Default stylesheet (default.css), such that certain changes made to the Default stylesheet propagate to the cascading stylesheets automatically.
- New alternative stylesheet
- A new alternative stylesheet has been added to Editorial: Left Sidebar. This stylesheet, unsurprisingly, renders the sidebar (seen on the right in the Default stylesheet) on the left of the page.
- Use of :target pseudo-class
- The :target pseudo-class, a feature of CSS3, has been used. When you use the “This Page” menu items (in the sidebar) to jump to a specific part of the page, the corresponding heading is highlighted for easier visualisation. NB: this feature only works in CSS3-compliant browsers (essentially only Gecko-based browsers).
- Removal of Print Preview alternative stylesheet
- The separate Print Preview stylesheet has been removed from Editorial. Instead, the print media stylesheet is used directly to provide a print preview.
- Use of an image file
- A small (122 bytes) PNG file is used in this template to render the dotted lines in the side bar. An image was chosen instead of CSS’s border-style: dotted property because Internet Explorer (6.0) doesn't draw the (1px) dotted line properly. It instead draws a dashed line, which doesn't look nice to me!
Old Features
Below is a repeat of the features of Gazetteer that are also found in Editorial.
Alternative stylesheets. This template contains alternative stylesheets, which allow you to view different layouts of the page. The alternative stylesheets are: Compact (for viewing the page on handhelds), Crimson (a different colour scheme), Larger Fonts (for improved accessibility), Left Sidebar (to view the sidebar on the left) and Print Preview (to see what the page looks like when printed).
To view the alternative stylesheets in Gecko, look in the use style submenu under the view menu (for Mozilla), or use the stylesheet switcher in the bottom-right corner of the browser’s window (for Firefox).
If you are using a different browser, you’ll need to download this template, rename one of the stylesheet files (they end in .css) to default.css, and open/refresh the HTML file.
Accessibility. This design incorporates accessibility features for people with impaired vision. The template tentatively conforms to the WCAG double A rating and § 508 guidelines for web content accessibility.
The relative simplicity of the template’s underlying markup ensures that your page can be easily transformed for rendering in aural, tactile (braille) and other non-visual user agents.
Additionally, the majority of document metrics (widths, lengths and spacings) are font-size relative. This means that a user can increase the default font size of your page (using their browser) without compromising it’s layout.