I’ve worked in several website content management systems, most recently Sitecore XP and Sitecore XM Cloud. As my work has transitioned from traditional web design to headless web design (where the content data and the presentation of the content are separated), I’ve worked to find ways to make these time-consuming projects as efficient as possible. Some of my best tips have come from lessons learned in the kitchen.
Know your audience
Restaurants know who they’re aiming to please. Some are high-end steakhouses. Others cater to families with children. Some offer inclusive meal options and others don’t. Ideally, the restaurant’s menu and marketing make it clear who they are intending to serve, and the patrons don’t expect the restaurant to be anything else. You wouldn’t go to a pizza house and ask for a lobster.
Websites should have an audience in mind from the beginning. Who is this website aiming to serve? What do they need and what content are they looking for? How are they accessing the website. Your website does not need to serve everyone, but it does need to make sure it’s appropriately serving the needs of those in the intended audience.
Start with a menu
If you were planning a fancy dinner party, a special event or even just a tailgate, you’d likely start with a menu. You’d need an entrée, some side dishes, maybe an appetizer and a dessert.
Planning a website is no different. You need to make sure you’ve covered the key elements: the meat and potatoes of your content designed to meet your goals and your audience key needs. But you also need to flesh out your content so that there’s something for everyone (well, everyone in your target audience) and that no one leaves hungry.
Have a content plan. This can be as formal or as informal as is needed for your team. I’ve found an outline in Word, or a spreadsheet works just fine. List out the pages you need and make notes of the content each will include.
Bonus points if you’re thinking ahead to how you’ll serve the meal: What types of assets (e.g., images, video, PDFs) will you need?
Make it a potluck
Remember: some of the best meals are a collaborative effort! You don’t necessarily need to do all the cooking yourself, even if you’re the one planning the menu. Just like you’d assign a family member to bring the sweet potatoes or the pie at Thanksgiving, you can delegate content creation.
Take your content plan and figure out where others on your team can pitch in. Who can help draft content? Source photos? Who will be an editor? Does anyone need to approve the content? Assign roles and delegate tasks.
Don’t have a team? Consider generative AI. Use it as a brainstorming partner, to outline content based on ideas your input, or even to draft content. Just be sure to closely review anything it has generated, fact check, edit and rework the content so it is in your brand voice and style.
Use recipes
Unless you have the most fabulously stocked pantry or live in a grocery store, you can’t expect to cook a meal efficiently and successfully without ensuring that you have the right ingredients at hand and without having a plan for cooking. Inevitably, you’ll be missing a key ingredient and need to improvise (which, okay, can be fine – but it can also be a disaster!). Or nothing will be ready at the same time and your sides will be cold by the time your turkey comes out of the oven.
To avoid this when cooking, you use recipes. You make a list of ingredients you’ll need. You go to the store to get what you’re missing. You calculate how much time you’ll need to prep and cook each dish, and when you’ll need to start each course to get them to the table on time.
This same approach applies to web design. Things will go much more smoothly if you’ve considered what each page on your website will need to contain, where you’ll source that content, who will do the work, and when it needs to be started to finish on time. One approach to creating a “recipe” for a webpage would be to use wireframes or thumbnail sketches. Draw boxes for where you’ll put an image and where you’ll have text.
Prep your ingredients
Mise en place is a French culinary phrase referring to having all your ingredients ready to go before starting to cook. Produce has been washed and diced. Spices are measured out. Ingredients that need additional prep, such as browning the ground beef, are ready to go. Each ingredient is pre-portioned into small bowls and arranged in the order needed for cooking, within arm’s reach of the chef. Following this approach does create a lot more dishes to wash, but it also ensures that a cook is able to efficiently prepare dishes. Have you ever realized that you’re supposed to be constantly stirring one pot while adding ingredients to another – but those ingredients aren’t ready to go in? Mise en place prevents that issue.
Prepping ingredients ahead of time can help make building a webpage more efficient, particularly with headless web design. In headless web development, the data is separate from the presentation. This means that the content (e.g., headers, body text paragraphs, images) lives in a database part of a content management system. The layout is developed using placeholders (i.e., components) that point to the appropriate data sources.
By knowing exactly which components and content blocks you’ll need (based on your recipe) and preparing those in the data side of the content management system, you’ll save yourself the time of going back and forth between the data system and the presentation layer. Those seconds of system load time add up!
Consider Person A: They approach a new blank webpage in their content management system and think, “Okay, I need a hero banner and a headline.” They toggle to the data system, wait for it to load, create those components, return to the layout and place them. Then they think, “Now I need intro text…” And back and forth they go.
Meanwhile, their colleague starts in the data side of the system, references their wireframes and creates a hero banner, a headline block, a couple subheader components, three images (sized appropriately and compressed for web), two body text blocks and a footer. Then they toggle to the presentation layer, place them all on the page, and they’re done. Which approach would be faster?
Batch cook to save time
If you really want to turbo charge the efficiency of your cooking, you might consider meal prep. This can mean creating all your lunches or dinners for the week on Sunday. It can also mean preparing ingredients that can be combined in different ways to create different meals throughout the week, giving you more time to do other things when you don’t feel like cooking. A big batch of beans can go in a salad for lunch one day and be added to tacos for dinner the next night.
With web design, you can take this same batch approach by grouping like tasks. For example:
- Are you creating a new website with a lot of written content? Consider drafting everything in a word processor. This makes it easy for colleagues to collaborate, offer feedback, and provide edits. Use a spreadsheet to track the page document status (e.g., drafting, in editing, awaiting approval, ready to build).
- Will your new website require a lot of images? Make a list of what you’ll need (reference those recipes again!), then crop, size, and compress all the images at once. Use a good naming convention or reference your images to your wires in order to keep them straight.
Clean as you go
One of the best ways to avoid having your kitchen become a disaster zone while preparing a meal is to clean as you go. Fill the sink with water and toss in items to soak. Wash up between tasks, where it makes sense. Put things in the dishwasher and keep the counter clean.
This same approach can make your quality assurance (QA) review of your website run more smoothly. Consider small tasks you can do while you’re building out pages and keep a checklist handy. Some ideas: Compress every image for web. Add alt text to every image. Set the link browser settings to open appropriately in a new or same window, as needed.
Inevitably, there will be items you’ll need to return to. Perhaps you will notice a bug impacting a component or you’re missing a graphic that a colleague hasn’t yet approved. Keep a running list of the page link and the edits needed so you can easily return to make these finishing touches.
Enjoy it!
Cooking can be fun. And so can website design! I hope these tips help you to reduce some of the tediousness of website projects by creating efficient workflows that lead to a quality product your audience loves.