RoyalLePage.ca
Royal LePage, one of Canada's biggest real estate franchiser, had recently commissioned a redesign for their consumer site. Royal LePage approached Alaia to implement this design.
what i didAs lead front-end developer I worked as part of a 3 person team to develop an implementation strategy for the project. My role involved translating the provided PDF mockups into tangible front end code. Our team also developed new patterns to encapsulate much of Royal LePages legacy javascript code, while still being able to implement new features using revealing module patterns.
Royal LePages new website was also our first use of BEM as a CSS naming convention to delineate reusable modules and chunks in our CSS code. This was also the first time we used a custom and semi-automated svg icon system to translate the designed PDF assets into ready-to-use SVG assets.
One of the biggest challenges in this redesign was handling the large set of menus and submenus that Royal LePage has. The problem was particularly prevalent at tablet and small-screen laptop sizes where there was still available space for some menu items. We wanted to avoid relying solely on the "hamburger" menu to hide all our menu items, at least on devices where we had space to utilize. The solution we decided to go with was a "priority plus" style menu system where we would show as many top-level menu items as would comfortably fit on screen, slotting the rest under a "more" (or +) sub-menu. We made sure to throttle these calculations on window resize, so it wouldn't impact performance too much.
This project was a great chance for me to put into practice much of what we had learned internally about BEM naming conventions and ITCSS file structures. The Royal LePage redesign was also the first time I had developed an SVG only icon system which I found to be highly modular and easy to extend with new icons quickly. However I still feel it has some drawbacks, the biggest being the need to include the SVG code on every page it is used in.