Crain needed a way to quickly and efficiently apply responsive web design and strengthen brand consistency for several publication websites to reach a growing mobile readership.
Vokal developed a frontend platform for rapid responsive design and layout application across Crain's many sites and email newsletters. Our centralized Pattern Library displayed key modules visually and produced code that integrated with Crain’s CMS and backend for quick implementation. By being able to see layouts clearly before implementation, we ensured a consistent brand experience across the many sites. After transitioning to responsive web designs, Crain can now serve the content their readers trust on whichever device their readers prefer.
We sat down with the editorial staff of several Crain publications to understand the distinct and shared needs of each. Through these discussions, it became clear that access to content and strategic advertising placement were important for both desktop and mobile traffic. We used these discussions and user insights to design eight website layouts with email templates which reinforced the Crain brand while retaining the individuality the readers love of their publications.
Our idea was that seeing a responsive layout design and engineering a layout design could be more streamlined. Why couldn’t sketch also lay the coding framework for quick customization? With that in mind, we developed a pattern library with interchangeable modules that would display a site prototype that responds to scale. We took Crain’s eight publications and built individual templates to demonstrate and provide the code for their rapid responsive redesign.
Whether a brand has multiple sites or a single site in need of an adaptable layout for mobile displays, we figured there had to be a better way to designing and prototyping layouts for quicker implementation. The resulting web app we developed helps our designers and frontend developers put all the pieces together while testing display for many device sizes, all in one place.