Skip to main content
🠘 Back to all blog posts

Lessons learned from a speedy website relaunch

In web development, realistic timelines are critical, as are tools that streamline critical processes.

- By Megan Moeller - Oct 14, 2024 Website Redesign

Website relaunches are a huge undertaking, and recently we were faced with pulling off one in just two months as part as our rebrand. In addition to completely new graphics and page designs, we needed to add new pages, consolidate old ones, and completely revamp our navigation. 

It was an ambitious project, and one that I walked away from with lots of lessons learned. And, since just about every web developer goes through a relaunch at one time or another, here are my takeaways from the experience.  

Tip #1: Set clear goals (and anticipate delays) 

It sounds obvious, but having a rock-solid plan is everything. Right from the start, you’ll want to establish your primary objectives and prioritize your tasks. In our project, things kicked off in mid-May with designers and copy editors diving into their work, but actual development didn’t start until July. We set a goal of rebuilding 80-90 pages and adding 90 more with updated designs, all within two months.  

With such a large scope, it was crucial to establish a clear, prioritized task list. We started by identifying the most important pages to tackle first. As is the case for most businesses, our homepage was the page with the highest traffic and often the first spot visitors landed, so naturally we prioritized building the new homepage components (sections that can be used on multiple pages) first. Once those were complete, we used an Excel document to list the next most-viewed pages, like the Get in Touch page, along with the necessary components for each.  

This method helped us stay organized, and with around 14 new components to create, it was a relief that many of them could be reused across multiple pages, streamlining the process. But as with any major project, delays crept in (particularly around design revisions), which meant we had just one month to hit our launch date. This is where anticipating delays and building flexibility into our timeline saved us from crunch-time chaos. 

With so many moving parts — new components with backend collaboration and needing to make sure everything functioned smoothly within the CMS — constant adaptation and quick thinking were essential. And we pulled it off: In the end, the project felt more challenging-but-rewarding than it did anxiety-inducing. 

Tip #2: Build accessibility in from the ground up 

Accessibility isn’t just a “nice-to-have” anymore — it’s a must. From day one, accessibility was a cornerstone of our relaunch. We used Siteimprove’s Accessibility Checker, which made it easy to check all the key components for robust digital governance like color contrast and font sizes, and testing to ensure our design was compliant with major accessibility standards. 

One of the bigger tasks was building an accessible carousel and tab module from scratch using HTML, CSS, and JavaScript. After testing several options, we chose splide.js for its built-in accessibility features, like keyboard navigation, aria labels, and screen reader compatibility. With so much built-in, it didn’t need too much customization to meet our accessibility standards. The goal was to make sure everything was optimized for keyboard navigation and screen reader compatibility, and this thorough approach saved us from backtracking later on.  

As any developer will tell you, tools that save you from re-doing work are worth their figurative weight in gold. The Accessibility Checker helped us spot and address potential accessibility issues on the fly, which could be as critical as making sure our buttons and links were an accessible size. Alerts like these can ultimately save you from hundreds of hours of backtracking. 

Tip #3: Leverage tools for efficiency 

With a compressed timeline, you need every efficiency boost you can get. Siteimprove has an Accessibility Browser Extension that was absolutely essential during development. The browser extension provided us with instant feedback on whether we were meeting accessibility standards. This allowed us to test quickly and continuously, staying on track and avoiding the time-consuming task of revisiting completed work. 

Siteimprove also offers tools like SEO Advanced to identify technical issues like broken links, missing metadata, and alt tags, which can be easily overlooked during a rush and Content Optimization, which can significantly speed up the content creation and optimization process.  

These tools flag issues that might otherwise go unnoticed until post-launch, helping you address them early and save hours — if not days — of manual checks and revisions. 

Tip #4: Ensure design translates to performance 

It’s not enough for a site to just look good — it must perform well, too. Responsive design is now a crucial standard for dev projects, which ensures the site functions seamlessly across all devices.  

Our process began with receiving visuals from our designers within Figma, then exporting images and icons, and uploading them to our test server CMS. Using Visual Studio Code, we developed components locally and worked on a dedicated Github branch to create new components in HTML, CSS, and JavaScript. These components were rigorously tested on the CMS, and any changes made were pushed back to the branch. 

One of the key challenges was ensuring accessibility, and as mentioned we settled on splide.js to ensure our carousels met those standards. Once the frontend code was finalized, it was converted into C# code (cshtml files) by the backend developer, who then created the components and added them to the CMS. The frontend developer then used these new components to build pages efficiently. 

Before launch, the Prepublish Checks tool was a game-changer. It helped us catch critical issues like missing alt tags, broken links, and other common performance killers. After launching, we use the Performance platform to keep an eye on our performance score, which looks at competitor benchmarks, average visitor loading experiences and event asset location maps. 

Tip #5: Emphasize feedback and testing (and testing again) 

Testing and feedback loops are vital to catching last-minute issues before they escalate. Our approach integrated Siteimprove’s Accessibility and SEO Browser Extensions, which allowed us to run through multiple quality assurance checks during development. This wasn’t just limited to accessibility or SEO — it helped us find missing metadata, broken links, and even misspellings and inconsistencies that we might have otherwise missed. 

Combining manual QA with Siteimprove’s automated checks helped us spot problems early, which gave us the breathing room to address any last-minute surprises. It’s always a good idea to have multiple feedback loops in place, and Siteimproves’s collaboration features allow different team members to add comments and flag issues, keeping communication smooth and efficient. 

Go forth, and develop 

When it comes to development, the most valuable tool is time. But since time is often in short supply, the next best thing is having tools that streamline processes, saving you from having to fix things later. 

Looking back at this two-month sprint, the key takeaway from this project was the importance of communication and planning. We faced some unforeseen challenges, like late-breaking design changes and a team member on leave, which put pressure on our already tight timeline. We were able to accommodate those challenges because we planned ahead. 

Siteimprove’s tools were a lifesaver because we could focus on accessibility and SEO even when time was limited. They helped us stay on track and ensure that we delivered a high-quality, accessible website on schedule. It’s a reminder that when time is short, the right tools can make all the difference.