Akeeba Ltd is excited to present testing versions of its flagship backup and security software bearing a new interface design. The new, developed wholly in-house, design is called Akeeba Front-End Framework (FEF) and will be implemented in all of our products in the coming months. We kindly ask for your help to put the new design through its paces and send us your feedback if something's broken. You can find the beta releases on our Downloads page.
Why did we implement a new design
Our software currently uses Bootstrap 2 or Bootstrap 3 for its interface. Bootstrap has a few shortcomings in this context such as incompatible markup between versions, over-reliance to JavaScript and the assumption that it's the one and only CSS framework used on the page. That's on top of some more technical and finer points such as using float to implement its grid.
On top of that, the requirement to run inside different CMSs and their version families (WordPress, Joomla! 2.x / 3.x / 4.x) complicates implementation of a Bootstrap-based interface. WordPress and Joomla! 2.5 come without Bootstrap at all. Joomla! 3 is stuck with a stripped down Bootstrap 2 distribution. Joomla! 4 will be released with Bootstrap 4. We have traditionally solved this by creating our own namespaced Bootstrap distribution and include it with our software. This does create a few issues, mostly arising from the fact that Bootstrap is reliant on JavaScript which doesn't play very well with others, or with namespaced versions of Bootstrap.
The number of issues with Bootstrap (and with any generic CSS framework) has led us to seek a better alternative to building a beautiful interface for our software. We decided to create our own, to our exacting specifications. This work started over a year ago and was only possible to complete in late 2017 due to us using leading edge CSS features.
About the design
Akeeba Front-End Framework (FEF) is a CSS framework designed to our specifications by our UX consultant and front-end developer, Crystal Harris. It does have some unique advantages over Bootstrap and other CMS-specific CSS frameworks.
Modern CSS. FEF uses the CSS Grid Layout instead of floats. The main advantage is that we can provide semantic markup which displays correctly on differently sized displays without resorting to JavaScript or a clumsy pile-up of CSS classes.
Non-conflicting. FEF is designed to live entirely under its own namespace and has a prefix on all of its CSS classes. It's also explicitly designed to be able to work inside a page which already uses a different CSS framework, such as Bootstrap.
Virtually no JavaScript. Thanks to modern CSS we can implement virtually all of its features without using any JavaScript at all. We only use JavaScript for tabs and advanced tooltips. Even then, the JavaScript we use has zero dependencies (it doesn't use jQuery, mooTools etc).
FEF also has features common with other existing CSS frameworks.
Responsive. It's 2018. We use all sorts of devices, from legacy smartphones with tiny 4" displays to desktops with 27" 4K (or even higher resolution) monitors. FEF is designed to scale seamlessly.
Clean, flat design. We made sure that the interface is clean and readable as a feature, rather than as an afterthought. The use of whitespace, the flat design and the careful selection of colors allows our FEF-based software to blend in with your sites.
Icon fonts. We are moving away from the use of bitmaps (images) from our software, replacing everything with beautiful, scalable icon fonts. FEF comes with a mix of IonIcons and our own icon set. The result is faster loading, clean-looking pages.
We need your help!
Converting software to use a new CSS framework is no walk in the park. Every single page, every single case, every single line of JavaScript has to be scrutinized, evaluated and converted to match the new markup. At the same time we have to test the result with different versions of Joomla! and WordPress on different browsers and operating systems. In case you're wondering, automated testing does not help one bit since it only tells us if the generated markup is what we tell it to expect, not if the end result looks good.
We are experienced and thorough but the fact remains that we are only humans. As the old adage goes: to err is human, to beta test divine - or something like that! We need your help, dear users and clients, to put the new interface to its paces. This should be safe -the backend code is stable and we are crazy enough to eat our own dog food on our production sites- but we would like to ask you to only try on development and test sites, not your production sites. If you find bugs, please report them and we will fix them.
We expect to release 2-3 beta versions and 1-2 release candidates for Akeeba Backup for Joomla!, Akeeba Backup for WordPress, Akeeba Solo and Admin Tools spaced about two to three weeks apart. Please do test and do report bugs. We swear we don't put bugs intentionally; also, they'll only ever be fixed if a user -that's you!- reports them to us. Hopefully our collaboration will result in a stable version being released before Easter i.e. sometime before April 1st. Thank you!
Intended browser compatibility and known issues
Akeeba FEF is meant to have the following browser compatibility:
- Full compatibility: any recent (less than one year old) version of Google Chrome, Mozilla Firefox, Microsoft Edge, Opera, Safari and their mobile equivalents. For mobile devices iOS 11 and Android 6 (Marshmallow) or later are supported. If you're using Microsoft Edge you may have to upgrade to Windows 10 Fall Creator's Update for proper display of some elements.
- Partial compatibility: Internet Explorer 11. Things may look a bit uglier / blockier or otherwise degrade gracefully. For example, tabs are rendered as accordions on IE11. Please note that bugs regarding IE11 will be considered low priority and that our software is dropping support for this very old browser.
- Not compatible: Internet Explorer 10 or lower, older versions of browsers. The reason is that none of them correctly supports CSS Grid Layout per the current specification.
Please do not report issues for unsupported browsers or ask us to add support for them. In short, old browsers lack proper support for the CSS Grid Layout. We could have build a CSS framework using floats, like Bootstrap, but we'd end up with the same long term issues as Bootstrap with regards to responsiveness and compatibility with the third party CSS included in popular CMS (either built in or applied by other extensions / plugins). The goal of FEF is to provide a user interface framework to carry us to the next 5-10 years, not an exercise in repeating mistakes other people have done 5-10 years ago.
Known issues
Before reporting an issue please check the following list (updated every time we spot / fix something).
Tabs display as sliders on IE11. This is by design. The CSS Grid support in IE11 lacks some features necessary to correctly render tabs.
More white space is shown on IE11 than any other browser. Won't fix. Well, let's just say there is a reason Microsoft threw the whole Internet Explorer code base to the trash and wrote Microsoft Edge from scratch.
Thank you all in advance!