Efficiency and consistency are key to web development. At Imarc, we achieve this by implementing a modular approach to each project from the beginning.

What is a modular approach?

This was a fairly new concept for Imarc just a few years ago, and we’ve now fully adopted the idea. Rather than creating entire pages, we create individual modules that make up the page. The modules can be rearranged and reused with minor modifications. It’s also referred to as Atomic Design.

How we do it

Then, the creative team takes these components and translates them into designs, frontend engineers implement them on the site, and backend engineers hook them up to the Content Management System (CMS). Each component can be as simple as a button or as complex as a 2-up feature block with an offset image (visual example below of a 2-up feature block).

Communication is important as the project goes through each phase. We want to be sure we’re all referring to the components with the same terminology. This way, when someone makes a request to update the “callout block” we know exactly which block they’re referring to.

From a frontend perspective, we consider each piece individually and start thinking about how we’ll organize our code. We look at each module and ask ourselves if it will be re-used on its own, or as part of a certain component. At first, it can seem daunting to categorize every little piece, but we quickly got used to it. We’ve also stopped worrying about where to put certain elements because we can always move the folder later on without too much disruption to the process.

Baked-in best practices

We have a Core UX initiative at Imarc with a goal of creating reusable components that have accessibility best practices baked-in. As we continue to build out our component library, accessibility is top-of-mind as more and more clients are requesting some level of WCAG compliance. Accessibility and responsiveness are both covered when we reuse pre-built components. It ultimately saves us time and allows us to focus more on the fun, custom aspects of a project. If you’re interested in learning more about web accessibility check out two of our recent blogs: What is Web Accessibility and why is it important? And How-to guide: Making your website accessible.

Translating to the CMS

Not only does Imarc benefit from a modular approach, but our clients do as well. It allows us to build “content blocks” in the CMS, giving website administrators more flexibility when creating pages. Gone are the days of creating a specific template for every page on a site. Instead, we build what we call a “content designer.” It includes the components we’ve built out and gives our clients flexibility in the CMS to build out pages on the fly using only the components they need. Frontend really shines here as we do extensive testing to make sure all the blocks work together in different orders and orientations.

How it’s helped

The new approach makes us more efficient in many ways – from communicating with our team to writing code and building out a CMS. We’re planning and designing more reusable elements, which in turn allows us to write reusable code. We’re more consistent which makes code easier to maintain and pass off to other engineers. And finally, we have a library of components that already include best practices and accessibility concerns to support our Core UX initiative.

Interested in learning more about how user experience translates to a better website experience? Let’s talk!