Rebuilding with Intent: A Technical Journey to Performance and Flexibility

When a Rebuild Isn’t a Redesign

We were tasked with rebuilding a client’s site—not redesigning, not rebranding, but faithfully recreating it on a better, faster platform. The goal: preserve the existing design while improving performance, maintainability, scalability, and crucially, optimising for mobile responsiveness.

We chose a modern block-based stack: GeneratePress paired with GenerateBlocks. This setup gave us semantic HTML, fine-grained control over styles, and a performance-first foundation. Everything looked promising. We managed to replicate about 50% of the site on desktop, keeping the door open for bigger future changes while ensuring a clear strategy for mobile compatibility from the outset.

Optimising Responsiveness: A Strategic Decision

Mobile responsiveness was central to our project strategy from the very start. Our initial focus on achieving precise visual fidelity and enhancing performance went hand-in-hand with ensuring seamless responsiveness across all screen sizes. Our desktop-first development stage provided an ideal foundation, carefully structured to transition effortlessly into mobile.

This strategic planning wasn’t merely about UX best practices; it was also about leveraging responsive design principles effectively to maintain a consistent, high-quality user experience across devices.

The Fork in the Road: Template System vs Manual Rework

With mobile responsiveness as a key requirement from day one, we explored two paths to achieve our responsive design goals:

1. Adopt a pre-designed, fully responsive template system.

   The allure? Faster delivery. Templates came equipped with global design tokens—predefined colours, fonts, and button styles—making CI alignment easy.

2. Continue the custom build and refine responsiveness with targeted enhancements.

   This approach promised greater design fidelity and responsiveness customisation, but required meticulous tuning and testing.

We initially tested the first option.

The Reality of Templates: When Efficiency Clashes with Content

On paper, templates sounded ideal. But they quickly revealed their limitations.

Templates work best when content adapts to layout—not the other way around. Our project wasn’t like that. The existing site had bespoke content flows crafted around messaging, not modular design. Slotting that into rigid template layouts compromised the structure and diluted the client’s narrative.

Yes, we could easily apply colours and fonts. But changing container layouts? Adjusting spacing logic? Not so much. The site became a battlefield between predefined systems and real-world content.

Worse still, the client had never requested a redesign. They simply wanted the same site—but modernised and made faster.

So, we pivoted.

Rebuilding Responsively: Where Reusability Meets Flexibility

Returning to our strategically planned custom build, we focused on a smarter, more scalable solution. Rather than manually adjusting every container, we harnessed two powerful features in GenerateBlocks: Patterns and Global Styles.

GenerateBlocks Patterns

Patterns offered reusable layout blueprints—perfect for repeated sections like testimonials or pricing cards. You could update the pattern at source, and every instance would follow suit. Great in theory, but in practice, patterns lacked partial overrides. Adjusting margins or paddings per use case became tricky without affecting all instances.

Enter Global Styles

Global Styles provided a better balance. We could save specific styling rules (e.g. padding, border radius, background colours) applied to any block and reuse them site-wide. Critically, content and layout could vary independently from the style.

This aligned beautifully with atomic design principles:

• Structure and content were defined at the block level.
• Styling was abstracted into reusable rules.
• Consistency improved, but so did flexibility.

It also streamlined the process of optimising for mobile responsiveness. Once styles were mobile-optimised, they could be efficiently applied to containers throughout the site without repetition.

Final Thoughts

What began as a straightforward rebuild quickly became a case study in strategic planning, modular design, performance optimisation, and responsive, user-centred thinking.

Templates are powerful tools—but only when they don’t fight the content. In our case, the winning combination was a custom build strategically supported by Patterns for layout consistency and Global Styles for scalable, responsive design rules.

We didn’t just rebuild a website—we laid the groundwork for a more maintainable, flexible, and seamlessly responsive future.

Frequently Asked Questions

What are the main benefits of using GeneratePress for website rebuilding?

GeneratePress offers semantic HTML, precise style control, and a performance-first foundation. It’s particularly effective when paired with GenerateBlocks, providing a modern block-based stack that enhances site speed, maintainability, and scalability while maintaining design fidelity.

How do Global Styles differ from Patterns in GenerateBlocks?

Global Styles allow you to save and reuse specific styling rules (like padding, border radius, and colors) site-wide while maintaining content flexibility. Patterns, while useful for reusable layout blueprints, lack partial override capabilities and are less flexible when adjustments are needed for individual instances.

Why might templates not be the best choice for a website rebuild?

Templates can be limiting when dealing with bespoke content flows and specific messaging requirements. They work best when content can adapt to layout, but may compromise structure and narrative if the existing site has unique content arrangements that don’t fit template constraints.

How can you maintain design fidelity while improving website performance?

By using a strategic combination of custom builds, Global Styles for consistent styling, and Patterns for layout consistency where appropriate. This approach allows you to preserve existing design elements while optimizing for speed and responsiveness across all devices.

What role does mobile responsiveness play in website rebuilding?

Mobile responsiveness should be a central consideration from the project’s start. A well-planned desktop-first development approach, combined with strategic use of responsive design principles and Global Styles, ensures seamless user experience across all screen sizes while maintaining design integrity.