Version 4.0.0 Released

Dear Customers,

I am pleased to announce the release of Zhong Framework version 4.0.0.

A new approach

With version 4, the Zhong Framework aims to tackle accessibility requirements with a different approach compared to versions 3 and 2. This approach is known as Universal Design (or Inclusive Design). Further information about this topic is in this post.

What's new in this release?

Version 4.0.0 brings many important changes regarding performance, mobile compatibility, and, most importantly, accessibility and usability.

These are some of the most important improvements:

  • Cleaner interface: One of the main goals of this release is to improve the overall interface usability, therefore much effort was put into polishing and simplifying the layout: The top-bar was removed and it was replaced by a section besides the main menu. This section groups important site utilities into panels, such as the site search and the login form. Also, the breadcrumbs was moved on top of the main area as recommended by many usability guidelines.
  • Better mobile experience: The mobile layout has been merged into the default layout so that only media queries are used to serve the mobile site. Previously a separate layout was served and a mechanism of device detection was used for this purpose. This mechanism and any other device detection have now been removed. This improvement also allows the use of page caching techniques, which are used to speed up the website.
  • Better interaction usability: Old versions 2 and 3 used different code for handling the activation of elements. For example, sub-menus would open on hover if a mouse is used, or on touch if it is on a mobile device, or by using a hidden button if a keyboard is used. This approach wasn't very flexible and it was buggy on certain touch devices. In version 4 the interaction with menus and panels has been unified (on-click) so that the same code can handle multiple navigation types: touch, mouse, keyboard and screenreader. This approach was also tested and recommended by screenreader users.
  • Improved keyboard and sreenreader navigation: The HTML5 semantic structure has been improved and simplified. The "skip links" have been reduced and improved for a better keyboard-based navigation. Menus use an improved solution with aria attributes.
  • Improved performance: The JavaScript and PHP code performance has been improved.
  • Simplified administration interface: Fewer tabs and fewer options for the template's administration page.
  • Improved visual accessibility: Bigger font-size is now used by default, and all templates' elements now pass the WCAG AAA contrast level.
  • Live updates: Joomla will automatically check our servers for the latest update and alert you if any is available.

Free update for everyone

Version 2 and 3 are now considered obsolete and they will no longer be supported. Also, since this release brings many important changes and improvements, the update is provided free of charge. This means that you can download now the updated template from your orders without having to purchase a new template.

Further information about how to update your template can be found here: Zhong updates

Before you update

Both updates from versions 3.x.x and 2.x.x should go smoothly, however note that version 4 brings some changes in the site-layout, so be sure to check the preview in our gallery so that you are aware of what's changed.


If you are having difficulties with the update process, or if you have any questions about this new release, don't hesitate to contact me.

A new approach

With version 4, the Zhong Framework brings numerous improvements and changes. The most notable one is the shift from focusing on accessibility to the broader concept of Universal Design (which inherently includes accessibility). This post explains the "journey" that led to this important decision.

The origins

Originally Zhong was born with the goal of including advanced accessibility features in a theme that would be pleasant to use and customize. In order to do so, the "accessibility panel" was created. The aim of this panel was to host controls that could be used by users with special needs to customize the site presentation. The controls could also activate "alternate layouts", for example the high-contrast layout (optimized for low-vision users), or the full-access layout (optimized for screenreader users). Together with the panel, a rigid semantic strucuture of the page was created, using hidden headings and HTML5 tags.
The implementation of these features was done after a lot of researching on W3C documentation, online resources and forums, testing, user feedback and analyzing how other websites approach the accessibility challenge.

A complex solution is a bad solution

Although I've been receiving (mostly) positive feedback regarding the template and its accessibility features, I started to realize that the whole implementation was too complex and confusing, both for site users (with and without special needs) and for webmasters. In fact, the implementation of the accessibility features was so strict that it was common for webmasters to break the accessibility requirements. For example, loading a specific Joomla module in the wrong position would break the semantic structure of the page. Another example is, applying a custom CSS would break the high-contrast layout and would make the content illegible. Also, many Joomla plugins would just break on the "alternative layouts".
On the user side, some users without special needs found the controls difficult to understand. As for users with special needs, although some of them found the controls useful, they already have ways to personalize the look of web pages. This led to the conclusion that some of the accessibility controls were useful only in limited cases, or when the user didn't have access to his/her personalized environment (for example from a public device).

Universal Design

After a lot of research for a better solution, I found the answer on Universal Design, which is a set of principles for creating products that can be used by a vast category of users. It has to be noted that these principles are broader than those of accessible design, therefore products are inherently accessible to older people, people without disabilities, and people with disabilities.

Universal Design made me re-think Zhong by shifting the focus from accessibility to three key concepts: usability, simplicity and universality.

What's changed

Top-bar removed

The first step I took was to align the layout to usability standards and to make it as clean and simple as possible.
This led to the removal of the top bar: The top-bar was originally included to host the accessibility panel and the breadcrumbs in order to give them visual priority. My idea was to create an interface that emulates a software window with a toolbar, however this paradigm doesn't really work for websites, so I decided to fall back to the classic header/main-content/footer paradigm.
In order to make the layout as simple as possible, I decided to group tools under panels. These tools are: the site-search, login form, the readability controls and, on small screens, the main menu. This would remove clutter from the overall layout, giving more priority to the content.

Readability controls

As explained before, versions 3 and 2 provided a solution that includes multiple layouts and specific controls for users with special needs. On many forums and discussions online there is an intense debate whether these controls are actually useful or not. I personally think that some users (such as an elderly audience) could benefit from it as long as: they work with external plugins or customizations made by webmasters, they don't break the layout by causing unexpected changes, they are not too complex and they are served with a simple interface. So following the principle of "universality", I decided to remove the old features and leave three controls that could be actually useful to all users, and not only to users with special needs. By default the font-resizer is enabled, a font-family switcher and a theme switcher can be enabled depending on the website requirements.

Universality

The goal of making Zhong "universal" was to make a single interface work for as many devices and input methods as possible and for the widest audience. On top of that, it had to be flexible enough to be compatible with thrid party plugins and sustain customizations from webmasters.

The first step in this direction was to remove the separate mobile layout (generated by PHP) and use only CSS media-queries.

An important change was the improvement of how sub-menus and panels interact. Old versions 2 and 3 used different code for handling the activation of elements. For example, sub-menus would open on hover if a mouse is used, or on touch if it is on a mobile device, or by using a hidden button if a keyboard is used. This approach wasn't very flexible and it was buggy on certain touch devices. In version 4 the interaction with menus and panels has been unified (on-click) so that the same code can handle multiple device types: touch, mouse, keyboard and screenreader. Also, this approach was coupled with a better usage of aria-attributes in order to improve accessibility.

I reduced and simplified the usage of languages snippets. I also focused on providing a solid interface for RTL languages.

I tested the compatibility with older browsers and mobile-browsers on a slow connection (such as Opera mini on extreme mode).

Also, as already explained, I worked hard on making the readability controls work in any situation. For example, the font resizer actually checks for external stylesheets using absolute font-sizes and converts them in em. The theme-switcher applies low brightness only to known elements belonging to Zhong, and the inverted-theme uses CSS filters (older versions of Zhong used a forced CSS override that would likely break third-party plugins).

Accessibility tweaks

Version 4 aims to guarantee accessibility by providing a highly flexible and universal interface, however certain specific accessibility features are kept and improved:
The semantic structure of the page has been significantly simplified so that webmasters don't have to worry about loading modules in the wrong position. Many hidden headings for screenreader and "skip links" are removed and only few are kept. Highlighted outline is now enabled only during keyboard navigation. There is better usage of aria attributes for pop-up menus and tool panels. Bigger font-size is now used by default, and all templates' elements now pass the WCAG AAA contrast level.

Conclusions

Ultimately, accessibility must not be seen as the aim, or as an enforced feature in the system, but as an "invisible" layer that is gracefully integrated with all the other parts. The design and the implementation of a web interface should consider usability and code standards first, then accessibility will come naturally with only few specific adaptations.

Shop is back online

After a long pause, we restored the purchase system with a new version of our themes available.

Zhong Framework 3.3.0 Released

Dear Users,

I am pleased to announce the release of Zhong Framework 3.3.0. All templates have been updated.

This is an important release, it brings many changes to the accessibility features of the framework. I suggest all users to update your templates to this latest release by following the update process.

Major changes

  • "Full Access" layout and "Night mode" are now deprecated and disabled by default. They will be removed in a future release.
  • "Best Legibility" mode now applies only minor overrides to the template style and no color overrides.
  • "Fixed layout width" has been removed.
  • "Low brightness" has been added as part of the legibility options
  • The accessibility panel has been added to the mobile layout

Other improvements

  • The top-bar mobile link is, by default, visible only if the device is detected as mobile
  • Bigger font-size for all templates for better readability
  • Improved font-color contrast for all templates so that, by default, at least WCAG AA level is met
  • High contrast "Dark on bright" is disabled by default.
  • The "Layout width" menu in the accessibility panel gets hidden if the device screen is too small to be subject to any change.
  • "overrides.css" is now included only in default and mobile layouts, not high-contrast. A new file, "overrides_high-contrast.css", has been added for this purpose.
  • Improved screenreader accessibility for the default and mobile layouts.
  • Improved screenreader accessibility for dynamic sub-menus.
  • Added serif/sans-serif/bold choice as part of the legibility options.
  • Added cache-busting to CSS/JS assets.
  • Added Czech language.
  • Added slideshow pause-button and minor accessibility improvements.
  • More organized template administration page in the Joomla backend.

Zhong Framework 3.2.0 Released

Dear Users,

I am pleased to announce the release of Zhong Framework 3.2.0. All templates have been updated.

This is an important release, it brings some relevant improvements to the accessibility features of the framework.

Important additions and improvements:

  • Added "Text Resize" tool in the high-contrast layout.
  • Removed all "!important" CSS rules in high-contrast, nigh-mode and best-legibility modes in order to provide more compatibility with third-party extensions.
  • Only 3 numeric accesskeys are kept, this will prevent conflicts with combinations of key-strokes in certain operating systems and screenreaders.
  • Improved layout and colors for best-legibility mode and high-contrast layout.
  • Now the hidden screenreader message is showed only once.
  • Minor improvements to the aria attributes of the accessible slideshow.
  • Improvements to the "text relativizer" script.

If you need to upgrade your template to version 3.2.0 follow these steps.

Zhong Framework 3.1.0 Released

Dear Users,

I’m pleased to announce the release of Zhong Framework 3.1.0. All templates have been updated.

Important additions:

  • Added "Alerts panel" component (with a new position "alerts-panel"). This component is useful to alert your clients of the use of cookies in your website (mandatory in most countries of EU). To learn how to create such alert, read the section The Alerts Panel Module in our installation guide, you will also find further information about the European Cookie Policy.
  • Replaced custom logo height/width with a single value: min-width. Improved logo/title/subtitle positioning system.
  • Added new position: "site-banner".
  • Removed render-blocking JavaScripts (faster page rendering).
  • Added "aria-haspopup" and "aria-expanded" to toolbox buttons (accessibility improvement).
  • Added font-size relativizer. This JavaScript will automatically detect any element with absolute font-size (expressed in "px") and convert it into "rem" (relative font-size). Not compatible with IE8 and below.
  • Added Google Analytics Anonymization. This feature offers more privacy to your visitors (deletion of the last octet of the IP-address prior to storage). It is designed to help site owners comply with their own privacy policies or, in some countries, recommendations from local data protection authorities.

Other improvements

  • Decoupled skin styles from core styles.
  • Added Joomla page-class-suffix to the body classes.
  • Added PHP helper-vars: footer-incline-scripts-top/-bottom, enabled reveal framework PHP helper, improved views helpers.
  • Added "mixins" concept to the framework JavaScripts.
  • Moved text-resize value from the body tag to the html tag (root element, useful for "rem" values).

If you need to upgrade your template to version 3.1.0 follow these steps.

Joomla 3.4 + Zhong Framework 3.0.1 Released

Joomla 3.4 has been released. If you are using a template based on Zhong Framework 3.0.0 it is advised to update to version 3.0.1 in order to get full compatibility with version 3.4. Customers can login to their accounts and download the latest template version. For more information about the update process, follow our guide, solution 2.

Zhong Framework 2.3.1 CSS patch

If you are using a template based on Zhong Framework 2.3.1 you can use this CSS patch in order to improve the compatibility with Joomla 3.4. Copy the content of the CSS code and paste it into JOOMLA_ROOT_DIR/templates/TEMPLATE_NAME/assets/custom-overrides/css/overrides.css.

Accessible Slideshow Update

Version 1.3.0 of the Accessible Slideshow module has been released. If you wish to upgrade your slideshow mind that an error "Module XML data not available" could happen. If after the update you see this error then you will have to remove the previous version and reinstall the module. This error happens because Joomla 3.4 has updated the way modules are installed and the previous versions of the accessible slideshow are not compatible with it.