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.

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.

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.

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.

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.

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.

I’m pleased to announce the release of Zhong Framework 3.0.0; all
templates in the gallery have been updated.

This release adds only few new features to the templates, however the whole PHP core has been rewritten using a more solid structure. This huge enhancement brings many positive factors, such as: modularization of the code, enhanced code maintainability, easy re-use of certain functions, easy bug fixing, easy user overrides of the framework core code, gained independence from the parent platform.

On top of this, all CSS has been migrated to Compass (SASS), bringing more flexibility to the code; also, all JS code has been modularized and improved in performance. Moreover, Grunt has been used to combine and minify all stylesheets and scripts in order to improve the front-end performance even more.

Also, the HTML structure of the outputted page has been refined in order to enhance performance and independence from other extensions and the parent platform.

Other improvements are: better support for RTL languages, selectable default layout and graphic mode, improved advanced style customization options, improved mobile compatibility, CSS3 flexbox used for handling the grouped modules layout (with a fallback for older browsers), improved semantic structure of the page (now also using new aria and region attributes), plus many other minor improvements.

This is a major release, this means that all orders made previously to this release will be frozen to the latest stable version of the 2.x.x cycle. The customers who wish to upgrade their templates to the new 3.x.x cycle should renew their orders.

If you have any questions about this new major release, feel free to contact me.

Please note, if you need to upgrade a template from version 2.x.x to 3.x.x follow these steps.

The subscription type for the updates downloads has been changed from
time based to version based. This means that the updates will not be limited to 6 months any more, from now on they will be available for
the whole major release's life cycle. For example, if a customer
purchases a template based on Zhong 2.x.x the updates will be
available until the next major release is published, in this case 3.0.0.
I decided to switch to a version based subscription because this type
will be more beneficial to customers and allows me to deliver releases
less frequently but more quality focused.

All subscriptions have changed and now all customers can download the
latest stable release: 2.3.1.
In the past, some customers may have paid additional money to renew
their 6 months subscription. Some others may purchase version 2.3.1 just before the release of Zhong 3.0.0. If this is your case and you feel it is
unfair after this change, feel free to contact me. I will evaluate the
case and I am willing to offer a free update subscription to the next Zhong
major release (3.0.0).

Zhong Framework 3 is under development

Version 2.3.1 has showed to be a very stable version and this will
probably be one of the latest (if not the last) release of the 2.x.x
cycle. I have started working on Zhong Framework 3, this new major release will
not bring many new features, however the PHP framework core has been almost
completely rewritten.

For any enquiries about your subscription or about the development of the
Zhong Framework feel free to contact me.

We are happy to announce the release of the version 2.3.1 of the Zhong Framework, all templates have been updated.

If you are our customer and you are still eligible, you can download the new version of the template from the customer area of our website: login, then click on "My orders", select your order and download the template from the download link.
If you want to update your template to this version please read carefully our guide (section: template update).
Note: this a minor release so the update process shouldn't bring any problem. This means all configuration options will be preserved.
You are welcome to contact us if you are experiencing difficulties with the update process.

2.3.1 Improvements

[Fixed] Social icons module activation bug

[Fixed] current-menu icon line-height

[Fixed] accessible slideshow module panel minor bug

[Fixed] Fixed minor bug on cookies (custom layout width)

[Improved] JS tooltips

[Improved] Session handler parameters

[Improved] Joomla 3.3.x compatibility

[Improved] Mobile layout

[Improved] Full-access layout and compatibility

[Improved] Language template support

[Improved] ipad accessibility

[Improved] tablets compatibility

[Improved] Custom layout width

[Improved] Crossbrowser compatibility

[Added] Included alternative stylesheet for bootstrap that validates for CSS3