Magento Core Responsive Theme
Overview
In late 2013, Magento contracted Classy Llama, together with the consultation of Brendan Falkowski, to build the new responsive theme in Magento Enterprise 1.14 and Community 1.9.
I led and contributed to the development of the project and was responsible for theme architecture and technical decisions.
Challenge
The Magento theme had been forked into two completely separate copies (one for Community, one for Enterprise), requiring double effort for ongoing maintenance. In addition, both the Community and Enterprise themes had mobile override themes, nearly doubling maintenance efforts again.
All four themes, comprising nearly 750 template files and 10,000 lines of CSS had to be consolidated into Community and Enterprise responsive themes. These themes also had to be widely compatible and easier to maintain going forward.
Due to be released at Imagine in early May 2014, the project was also under an extremely aggressive time line.
Strategy
To consolidate the four disparate themes, the two mobile themes were discarded — their functionality is superseded by the increased capability of responsive web design.
In addition, the Enterprise theme was refactored to fall back through the Community theme instead of being a fork of the Community theme. All design and functionality that was not Enterprise-specific was standardized in the Community theme, reducing the Enterprise theme to only include Enterprise-specific new functionality. By reorganizing in this way, 90% of the development effort could be reduced to and focused on a single theme — not to mention the huge potential to streamline ongoing maintenance in the future.
Browser Support
Due to the magnitude of this project, browser support was a critical decision as minor changes in requirements could have huge impacts on cost and time line. Given the forward-thinking nature of this project as the Magento base theme for the foreseeable future, the decision was made to drop 100% support for older browsers and, instead, require graceful degradation. In particular, IE6-8 would no longer be considered first class browsers – they must still be able to complete a purchase, but the ROI for their support was not sufficient for them to enjoy a pixel-perfect experience.
This decision allowed developers to take advantage of CSS3 and HTML5 standards, which in turn greatly increased their efficiency and visual effectiveness while reducing the code footprint, again improving the efficiency of ongoing development and maintenance.
SASS/Compass
Rather than author the theme in vanilla CSS, we chose SASS/Compass to allow developers to work efficiently and to reduce boilerplate styling. The increased organization capabilities of the SASS syntax also permitted efficient refactoring of styles while reducing the chance for regression–critical in such a massive undertaking with such a constrained time line.
Also, to accommodate such a huge project in a flexible and robust manner, a sophisticated SASS/Compass style architecture was adopted. The project was divided into modules, allowing exceptional organization and parallel development both during the lifetime of this project as well as potentially improving efficiency for ongoing development.
With the target browser support in mind and given the overhaul of the technologies and architecture of the new theme, all styles would be written from scratch – unless particularly easy to port, the old styles would be discarded. This significantly reduced the “cruft” that had built up in the old themes over the last several years and ensured there would be a clean, modern base to maintain going forward.
Breakpoints / Responsive
In order to future-proof the new base theme as much as possible, all breakpoints were based around content – not specific devices. This technique results in a better experience on current devices and ensures that future devices with unforeseen resolutions and aspect ratios will not require excessive ongoing maintenance.
Theme Implementation Accessibility
The frontend development landscape is a very different place than when Magento first launched in 2008. Therefore, the design decisions and architecture used in the old base themes are increasingly becoming a barrier to development.
In order to improve development accessibility, jQuery was added as a core javascript library. jQuery has become the de facto base library for frontend development, while the Prototype library previously included with Magento has become more and more obscure. This change decreases the ramp up time for new frontend developers by allowing them to base development on the most widely understood and supported javascript library.
Magento’s old base theme design itself was also an increasing barrier to entry. Designed with heavy visual elements such as drop shadows, bevels, background gradients, etc common in 2008 UX and excessively deep DOM structure, the old themes required significant work to simply revert to a clean slate on which to begin actual theme development. The new theme, on the other hand, is intentionally wireframe-like.
By eliminating arbitrary visual clutter, frontend development can go straight to new development rather than having to clean up the theme first. While the entire DOM structure was not rewritten, areas modified reduced the excessively deep and element-dependant DOM structure, and styles were intentionally targeted at shallow selectors (for example, buttons are styled directly, rather than styling the spans inside them). This approach reduces the overall size of the frontend, reducing ramp up time, allowing more efficient development, and reducing the footprint for bugs.
Results
The four old base themes were consolidated in a Community theme which comprised nearly all the functionality and a thin layer Enterprise theme which added Enterprise-specific functionality. This reduced the number of duplicated Enterprise templates by 53% and reduced the duplicated Enterprise styles by 98%. Overall, the number of styles required was reduced by 67%.
In spite of the significant reduction of codebase footprint, all target features were successfully reimplemented and are responsive and compatible with all the target browsers, ensuring Magento retained sufficient feature parity with previous versions.
The project was successfully completed by the aggressive deadline, allowing Magento to release, for the first time ever, both Enterprise and Community editions at the same time during the Imagine 2014 conference.
