In our website redesign proposals and SOWs, we talk about modules and page templates and primary pages, and how they’re all built on WordPress using Advanced Custom Fields. That’s all fine and good, but clients new to either (or both!) don’t always know what we’re going on about until they get access to their new site and start playing around. Then there’s a real a-ha moment: Oh, this is what you meant when you said “straightforward and easy to use.”
That’s our goal. That when you’re using your CMS, you’ll think things like:
- “This is hard to break. I just fill in the blanks and everything looks like it should look.”
- “I don’t need to know ‘how to design’ to put together a great page. Everything fits together and looks like it’s supposed to.”
- “I have all the right pieces to build the experience I want.”
Here’s a quick tour of how we make that happen.
What are Advanced Custom Fields?
For a long time, WordPress had a bad rep for simply being one giant blank box that you plop your content into. We don’t like that giant box either. There are a lot of downsides. Everything is in html. If you’re updating, you have to go in and hand-code each little piece. One stray backslash and your entire page is suddenly all styled as an H3.
Website builders like Squarespace and Wix and Elementor fixed some of the problems of that big blank box by replacing it with drag and drop elements. But that flexibility comes with its own set of problems. Picking from hundreds of elements, then styling each one of them, is just as overwhelming as hand-coding — and can leave you with a page that just doesn’t look great.
WordPress introduced Advanced Custom Fields, and it’s the Goldilocks in between the super-limited single box and the overwhelming flexibility of site builders. We use it to create a set of pre-styled components that will fit the needs of your content, and then like LEGOS, can be mixed and matched to create any number of new templates and layouts.
This is the main reason we don’t get too freaked out by sites with a ton of pages. We’re never redesigning 500 or 5,000 or 10,000 pages. We’re redesigning the components that make up those pages, then using that library to create page templates — and there are only so many of those on any given site. This type of design is also known as atomic design.
HOW WE GET FROM COMPONENT TO PAGE
Component, aka module, aka a set of fields (as in “advanced custom”). The most basic building block. Could be as simple as a button, a paragraph, or an image gallery — or more complex like a hero image with a headline, or a content card consisting of an image, a title, and a caption, or a product listing.
Template. A combination of some of the modules that will form the layout of the page.
Page. Specific templates that are populated with real content — think home page, product page, FAQ page. Pages are the ultimate test of the design system we create: Do the templates work?
How we approach your website’s module library and templates
We create page templates out of individual modules we design to meet the needs of your website and your specific content. We do this for two reasons. 1. To ensure that we’re not throwing a bunch of modules at you that may or may not apply. And 2. So the right modules are being created to best display your unique content.
We design and build the right number of modules
Not every site is going to need a rotating carousel of customer testimonials. Some do, so we design one. Others don’t, so we don’t. Same goes for an accordion that opens and closes to reveal more content, or a text card that flips over when you click on it.
It’s easier (and cheaper) to build only what you need. More importantly, it’s easier to use and maintain. When you only have a small number of modules, not 100 or 1,000, you can pick the right one quickly. Your pages will automatically be beautifully cohesive with the rest of the site. It’s like a capsule wardrobe: mix-and-match with no misses (and a lot less laundry).
We accomplish this by articulating what the site needs during discovery, then designing your core site experiences.
Using those modules, we create templates and populate pages
Even though we’re thinking about your site in modules, when we show you a design, it’s going to be a full-out page — rarely are you going to give feedback or sign off on an individual module out of context. We design and build all the primary pages on your site. Essentially, we create a LEGO set, then use the pieces to put together your site’s LEGO starship and LEGO castle and so on.
If you want to add a second starship to your site after it’s launched, that template already exists. You can populate it with new content and not call us to design the page for you. And if you discover down the road that you want your site to have a skyscraper, you have the full library of individual LEGO pieces you can use to build it yourself. Pretty nifty.
You can edit and update pages quickly and fearlessly
Each module is built into WordPress with defined fields that are all pre-styled. For example, an image card might have a field for the Image, Title, Caption, Date. All you have to do is fill in the blank fields and the content will be consistently styled on the site. For an easy example, consider the Date. In your WordPress admin panel, you might add the date with a date selector. Choose the right day and year on the calendar and ta da! That’s it. Every date on your site will look the same — you won’t have some Dec. 9, 2022, some 12/9/2022, and some 9/12/22 from your teammates in the EU. It’s phenomenally hard to mess this up.
Some modules will have fields you don’t use in every instance, or have variants you can toggle on/off — maybe some of the image cards on your site don’t need show a date. This is another way we keep our module libraries manageable. We combine very similar components and think smartly about modules that can be repurposed throughout the site. We want very few single-use tools in the kitchen. It makes for sound design, sound development, and a really easy admin experience.
And, when you want to update the design, it’ll be easy
One of the biggest benefits of modularity is that a single module can evolve or change independently. If you want to change how something looks in the future, everything is already pre-categorized and ready to go. You won’t have to go through and update each and every slideshow on each and every page; you can simply adjust how the slideshow module works.
Our POV: We think, design, and build modularly
At Bilberrry, we think in patterns. Our content strategists think about content patterns, our designers are primarily thinking about display patterns, and our front-end developers are responsible for bringing the two together. Using those patterns, we build systems of modules. Like LEGO bricks, those modules are easy to connect into templates and pages in a CMS that’s approachable and really hard to break. The end result: a cohesive, beautiful, and future-proof site.
