The Beez Template

Thank you for your contribution: 

written by Angie Radtke

A template usually contains more than you see at first sight.

The term template is usually connected with the visual appearance of a website. But in addition to the design, it is distinguished by the way of the technical implementation. It determines where the content is located within the flow of documents, when and where certain modules can be switched on and disappear, whether custom error pages are used and what markup - version of HTML should be used.

Some users will certainly be familiar with the Beez template in Joomla! 1.5. Both, beez_20  and beez5 are visually very different from the design of the previous version. For the design I used a neutral grey for the elementary components of the template, such as the menu to provide a solution that harmonizes with many colours.

Even at that time, I wanted to develop a standard compliant, easily accessible and adaptable template. I consciously had chosen the colour purple, in the hope that many designers would take the code, modify it and make it freely available. I had hoped for a variety of many new free templates. This has unfortunately not occurred.

Another mistake was probably that I did not communicate clearly enough what the real aim was. The output was structured in a way so that almost any design could be implement in a simple and straightforward manner, with only slight modifications in the CSS. I kept this principle in the new versions of Beez. Additionally, there is a more accessible JavaScript and in beez5 a small portion of HTML5. Beez_20 does not require template overrides. Layout tables are finally not in use anymore in Joomla!. The new HTML-based output follows the structure of the old Beez template.

The CSS class names have been renamed and unified for a better understanding. This is a tremendous advantage for template designers. The HTML output from the Joomla! Standard is clean and well-formed. You do not need to use template overrides anymore to generate clean, standard-compliant code. The technical capabilities of both Beez templates are almost identical. They differ only in their graphic design. The Beez5 version is also designed for the use of HTML5.

The main features

  • Accessibility
  • Configurable position of the navigation
  • WAI-ARIA Roles Landmark
  • Automatic representation of the modules in accessible tabs
  • Fade in and out of collapsible modules
  • Fade in and out of collapsible column
  • In beez_ 20 you can choose between two forms: natural or human
  • In beez 5 HTML5 is usable

General Accessibility

For most people the Internet has become the norm. Information from around the world are ready for retrieval and perhaps, more importantly, also the special offers at the local hardware store, the opening times of the registration office or the phone book are available on your home screen. Annoying phone calls or library visits are unnecessary, you just look on the net.
But not everybody benefits from this development. Those people, with any physical or mental disability have difficulties to participate fully in society, even though they could benefit enormously from communications technology. But they often fail because of barriers that obstruct their access to information or make it even impossible. Many of these barriers can be overcome, if the offers are designed accordingly.

Operators of online shops or banks which provide Internet banking, should be aware of that not so small target group.

Accessible web design aims at making content and interactions on the Internet accessible for all user groups and devices, if possible.

Approx. 8% of the German population have a physical limitation that makes it difficult for them to access information from the Internet. Commonly the term “accessibility” in web design is identified with Internet for blind people. I want to emphasize that this is not all - indeed, this is only the smallest part. I've often wondered why this is so. Probably the reason is that the monitor has become the classic symbol for the computer, and someone who sees nothing, cannot use it. In my daily work, I have noticed that even blind people cope much better than people with other types of disabilities.

Blind are people whose residual vision is only a few percent of the average value. The number of blind people in Germany lies between 150,000 to 200,000. Some of them can decipher just texts through the computer font size and customized colour settings, while others depend on acoustic information or read by touching the Braille display.

Significantly greater is the proportion of people with severe visual impairment.

About a quarter of the population in working age complains of various degrees of ametropia. Later on, the percentage is much higher. Some of these problems can be compensated by glasses quite well, others with limitations only. Certain eye diseases such as cataract or glaucoma can be resolved or at least mitigated through surgery. Some, like retinitis pigmentosa or diabetic retinopathy, lead to a steady deterioration of vision and ultimately often lead to complete loss of vision. "In the so-called" tunnel vision, the visual field of the affected people is extremely limited - sometimes to the size of a two-Euro coin, which is held at arm length from the eyes.

About 10% of the male population is affected by mild forms of colour blindness – which usually means that some reds and greens cannot be distinguished from each other. Blind to other colours, complete colour blindness or red-green colour blindness in women are very rare.

One other potential group of users has problems with the usual input technology - not everyone can use a mouse or a standard keyboard.

There can be many reasons: arms and fingers are immobile or move spontaneously and are difficult to control. Others have even no arms and no hands or are paralyzed from the neck down after a stroke on one side. As long as a human being is capable to send a controlled binary signal - the famous 0 or 1 – he can learn to operate a computer and its functions with appropriate software.

There are about 60,000 to 100,000 people in Germany with extremely limited ability to hear. Several thousand of these were disabled in learning the German language so that they know it only imperfectly (at the level 4th to 6th grade). This makes the demand for more understandable texts clear.

To communicate with each other, but also for the reception of foreign or sophisticated content they prefer the German sign language - this is an idiom on its own, independent of the spoken language based on a system of signs and gestures.

Attention

Not only people with low hearing abilities surf the Internet without or with speakers turned off! It is not sufficient, for example, to give acoustic warning signals only - they must always be accompanied by a clearly interpretable visual notice.

The more the Internet conquered all areas of life, the more situational disabilities are visible: slow connections in the hotel, uncontrollable lighting conditions in the moving train, arranged waiver of sound in the workplace.

All people benefit from accessible websites. It is not about meeting all the rules to the fullest extent, which governmental institutions are required to comply to. Even small steps toward accessibility can significantly improve the usability of a website.
Due to its high penetration, Joomla! has the ability to influence a lot. With the standard template beez it is now relatively easy, to create websites which are accessible and usable for many.

As in beez 1.5 all those things that are necessary for the design of accessible templates are implemented also in beez_20 and beez5. The most important are:

  • Separation of content and layout
  • Semantically logical structure
  • Anchors links
  • Keyboard navigability
  • Sufficient colour contrasts

Separation of Content and Layout

The first and most important rule for developers is the possible complete separation of content and layout:

  • Clean and pure HTML for the content
  • No unnecessary layout tables
  • Formatting exclusively with CSS
  • A logical semantic structure
  • Anchor links

The linearisable issue of content and formatting via CSS only is one of the most important conditions for convenient accessibility.

Only then assistive technology has the option to recycle the contents at will, while the visual presentation can be completely ignored. The outsourcing of the presentation in style sheets give, for example, visually impaired users, the possibility to define own style sheets in their browser and adapt that the pages exactly fit his/her needs. A linear presentation of content and an adequate semantic structure is particularly important for users of screen readers.

Screen readers grasp the content of a site from top to bottom, that means linear. The use of extensive layout tables hinders linearisation.

Behind the term Semantic Web probably most of the people can imagine only very little. You probably associate language lessons, but it also plays a special role in writing Web content. For example, screen readers offer their users to jump from heading to heading or from list to list, to get a quick overview of the overall document. If a Web document has no headers, this functionality is not available.

The formal structure of a web document should largely correspond to the content structure. Depending on the Web project the choice of the corresponding heading hierarchy can be quite a challenge.

Today, this concept can be found not only in the templates, but in the entire Joomla! Standard output. In the development of Joomla! 1.6, this was a central part of the development work. Reasons were, in addition to better usability in assistive technologies, also search engine optimization and better usability in mobile devices. Well-structured code not only helps people with disabilities better navigate within a site, even Google feels better with such a well-structured site.

Anchor Links

Linear presentation of content has a big drawback: You may have to travel a very long way, in order to access "in the back lying" areas of content.
On the screen, a three-column layout allows that a number of areas begin “above" and the eye can jump right to it, where it, supported by visual aids, suspects interesting information.

Remedy offers the concept of anchors. It is, in fact, a non-visual counterpart to the graphical layout and allows the user of linear playback devices to identify key content areas at the beginning of the page and then immediately jump to the area where he/she believes the information of his/her interest lies.

Practically, the use of anchors means, to set up an additional menu at the top of each page for internal navigation of the page. In most cases it will be useful to hide this menu from the graphical layout. It's irritating for users, that can see, to click a link, but nothing (apparently) is happening, because the link target is already visible in the viewport.

In any case, the "anchor links menu" should be not too long and built in a very well thought-through manner, because it extends and complicates, due to the linearisation itself, the path of perception. In general, it's advisable to offer the main content as the first target jump, then regular visitors, who know the site and handle the navigation specifically, have the shortest way to where they actually want to go to.

At least here it becomes clear that, particularly websites with more complex content pages do not only need a graphical layout, but also a content design that aims to arrange the content in a form that it contains no unnecessary barriers for the users of linearising clients.

Example:

<ul class="skiplinks">
  <li><a href="#main" class="u2">Skip to content</a></li>
  <li><a href="#nav" class="u2">Jump to main navigation and login</a></li>
</ul>

The Colour Choice

The colour choice is, in the context of accessibility, of particular importance because even people with impaired colour vision should be able to use your website fully.

If you convert to a layout into shades of gray, you gain an approximate idea of what colour-blind people can see. However, the perception is very individual and depending on the severity of different degrees of ametropia. Many colour-blind people, however, have learned during their life, what colours are represented by what they see. They know, for example, that grass is green, and they can identify by comparison and other shades of green.

Much more widespread than the total colour blindness is the so-called red-green colour blindness. Affected by a genetic anomaly, people are not able to distinguish the colours red and green. Mixed colours that contain these colour components are blurred for them.

Contrasts

Colours also play an important role in various other types of visual impairment, not only because of the colour itself, but also a significant colour contrast can be helpful in the use of a web page.

Foreground and background colour within the text elements should form a distinct contrast, though it is not possible to select the colour and contrast settings, which can meet all requirements. Black text on white background achieves a maximum colour contrast. To avoid disturbing glare effects, a slight tinge of the background can be useful. Some visually impaired people will need very strong contrasts to separate the individual elements of content in a page from each other. For them, colour combinations such as white text on a bright, contrasting orange background are not rich enough. In contrast, other strong contrasts act as a radiation - the content is difficult to read.

beez_20: Design Choice

In the Beez 2.0-Template, you can choose between personal and nature design. The implementation of the files nature.css and personal.css via the template parameters as well as the structure of the used CSS files are the basis for this method.

cocoate.com/node/8049Beez

Figure 1: Choose the Style

There are two more files which are responsible for the colour scheme.The position.css  and the layout.css are responsible for the overall positioning and spacing.

Would you like to change later only the colours of the template, you can simply modify the files personal.css or nature.css as desired. The positioning of the content remains the same, as they are defined in other files.

All style templates are still arbitrarily modifiable and can be amended by template developers to include additional templates.
In the design of the source code I have taken into account to offer the maximum possible creative variations by modifying the CSS files. I'm telling you that very, very quietly, but in their own way, the Beez templates are something like frameworks and save you a lot of working steps.

Position of the Navigation

For aesthetic reasons or to improve the search engine friendliness and accessibility, it may be necessary to position the navigation before or after the content. Both versions of the Beez templates let you choose between two options in the backend.

cocoate.com/node/8049Beez

Figure 2: Select position of the navigation

The navigation is visually and semantically positioned before or after the content and formatted by use of CSS.
If you open the index.php of beez_20 or the template you have already modified, you can find around line 27 the following assignment:

$navposition = $this->params->get('navposition');

The variable $navposition is assigned to the currently selected value in the backend. The variable expels the value left or center. Left represents the position before the content, center stands for the positioning after the content.

The term center seems to be a little confusing here, it would be logically better to say it is right. But depending on how you design the CSS, you can place the navigation in three-column view in the middle.

JavaScript and WAI ARIA

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) is a technical specification of the Web Accessibility Initiative (http://en.wikipedia.org/wiki/Web_Accessibility_Initiative), which will facilitate the participation for people with disabilities in today's increasingly complex and interactive web services. This technique is particularly helpful in designing dynamic content presentations and user interfaces. The technique is based on the use of JavaScript, Ajax, HTML, and CSS.

Especially blind people often lose orientation when visiting a site where content is suddenly displayed or hidden. People, that can see, can sense this change with the eyes, blind people can understand it only when the focus is placed on the item.

To focus means nothing else than to place the cursor in the appropriate place to make the positioned content accessible.

In HTML and XHTML we did not had the opportunity to focus on all elements. Only the interaction elements such as links, buttons or input fields were focusable. This has changed with the use of WAI ARIA and HTML5.

The used scripts within the Beez templates rely on this technique to make the template accessible to people with disabilities.

WAI ARIA - Landmark Roles: First Aid for the Orientation

Landmark Roles are intended to facilitate the orientation on a website by describing page areas and their exact function within the page. The navigation has the role navigation, search has the role search, the main content has the role main. The implementation is quite simple. The element is extended only to the appropriate role attribute. Thus, users of modern screen readers will be informed of this role.

<div id="main" role="main">

Inside the Beez template, this is done automatically by using javascript (javascript/hide.js). The approval of the Wai-Aria technology is still pending and with the direct implementation into the source code the website would fail doing the validation test.

A complete overview of the landmark roles can be found at http://www.w3.org/TR/wai-aria/roles#landmark_roles.

If you later use the Beez template as the basis for your own template and modify the structure of page areas, you should adapt the script accordingly.

Collapsible Modules and Sidebars

The activation and deactivation of certain areas can be helpful for the user, especially on pages with a lot of content. Both Beez templates provide two different ways. First, the column with additional information can be fully switched on and off, on the other hand, the modules can be collapsed up to their headlines.

Hide Column

To test this functionality, you have to place a module in the column for additional information. The module positions position-6, position-8 and position-3 are available. No matter whether the navigation is before or after the content, whenever this column is displayed, a link appears right above with the text "close info".

cocoate.com/node/8049Beez

Figure 3: Hide Column

By activating this link, the column is hidden, the link text will change to "open info" and the column will be re-activated by clicking.

This functionality is controlled by JavaScript. All the scripts mentioned here are based on the supplied Mootools JavaScript framework that diminishes our work in many areas.

The file hide.js in the JavaScript folder of the template is responsible for showing and hiding the column.

In the index.php of the template, around line 194, you will find the necessary HTML code.

<div id="close">
 <a href="#" onclick="auf('right')">
  <span id="bild">
   <?php echo JText::_('TPL_BEEZ2_TEXTRIGHTCLOSE'); ?>
  </span>
 </a>
</div>

The textual contents of the JavaScript variables are controlled with the Joomla language strings.

Show and Hide Modules

One of the biggest challenges in designing a website is the clear structuring of the content. Especially on the homepage, you often need to place a variety of information without cluttering the page.

cocoate.com/node/8049Beez

Figure 4: beez-Slider

Both Beez templates have the opportunity to present modules in the form of sliders.

Here, the first output is the title of the module. By clicking on the plus sign next to the heading, the module opens and its contents will be visible. Then, the plus sign replaced by a minus sign and the module can be folded back. Even with this method I have used the WAI ARIA technology.

In order to use modules as described, they should be integrated in the template by using the command

<jdoc:include type="modules" name="position-8" style="beezHide" headerLevel="3" state="0" />

By using the style = "beezHide" all modules that are loaded at this position are shown as sliders.

You may have noticed that the command includes the attribute “state”, which controls whether the module is expanded or collapsed.
If you choose the value 0, it is closed when it first loads, select the value 1, it is opened by default and can be closed by the user.

Accessible Tabs

The presentation of content in so-called Tabs is becoming increasingly popular. There are already modules that Joomla! extends with this functionality. But none of the offered modules fulfilled the requirements of accessibility.

cocoate.com/node/8049Beez

Figure 5: BeezTabs

The integrated solution in Beez is based on the WAI-ARIA techniques to ensure accessibility. To represent the modules in tabs, they are integrated as follows.

<jdoc:include type="modules" name="position-5" style="beezTabs" headerLevel="2" id="1" />

All on the position-5 placed modules are arranged automatically in the form of tabs. You control the HTML output via the Style beezTabs. The use of the attribute id = "3" is mandatory. The reason lies in the structure of the used JavaScripts. Imagine, you want to integrate modules at different places into your template. The JavaScript function requires a unique information about where which tabs should be opened and closed. If this information is missing, the script will not work as desired. Please use at this point numbers only for the id.

Adjust Font Size

In the top head of the layout the user is able to change the font size. The technical basis for this function can be found in the JavaScript file templates/your_name/JavaScript/md_stylechanger.js. Within the index.php you include a div container with id="fontsize" .

This area is initially empty and will then be filled dynamically with content using JavaScript. If your visitors should have turned off JavaScript, this function is not available.

Some might be asking, why this function is still necessary, as every browser has a feature to increase font size. Especially for older people this technique is often of particular importance, since most of them have a more or less impaired vision. However, particularly older people often know very little about the functionality of web browsers and look forward to an apparent offer.

beez5: use HTML5

The Beez5 template is hardly different from beez_20, apart from some design aspects. The features offered are largely identical.

The only difference: beez5 allows the use of HTML5. If you take a look at the template parameters of beez5, you see that you can choose between HTML5 and XHTML code output. This is based on the HTML5 template overrides, which you find in the HTML folder of your template.

HTML5 provides a variety of new possibilities and will bring a number of changes and easements in the future, but it is still not yet an approved standard (March 2011). Many of the options offered are currently not reliably applicable, but others can already be used without difficulties.

A very important part, which already works, are the new structuring elements. HTML4 and XHTML had low semantic weight. This has improved significantly with HTML5.

We have now really practical elements to structure the page.

With the elements

  • header
  • footer
  • aside
  • nav

you can structure a wonderful page.
Elements such as

  • section
  • article
  • hgroup

help you to assign more importance to the actual content.

The HTML5 code in Beez5 uses only the elements that are reliable right now. Only the Internet Explorer Version 8 has some problems, as always.

In the top of the page a script is inserted, which integrates the unknown elements in the existing document structure.

<!--[if lt IE 9]>
<script type="text/JavaScript" src="<?php echo $this->baseurl ?>/ templates/beez5/JavaScript/html5.js"></script>
<![endif]-->

Basis for the integration of HTML5 in Joomla! are the template overrides and the response to the selected markup language via the template parameter in the index.php. Because the template allows the use of two different markup languages, you have to approach this possibility in the index.php.

Clearly said: The construction of the index.php is quite complicated, because depending on the selected markup language another HTML code is generated.
It starts with defining the type of document.

When you open the index.php of Beez5 templates, you can instantly see what I mean.

<?php if(!$templateparams->get('html5', 0)): ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><?php else: ?> 
<?php echo '<!DOCTYPE html>'; ?> 
<?php endif; ?>

This concept is carried through the whole page and the HTML5 elements can only be issued if HTML5 was also selected in the backend.

If you later want to build your own template in HTML 5, it would be better you remove all the queries and XHTML elements and output directly the HTML 5 code.