Revamping My Agency Website: A Journey in Design and Functionality
After five years of operating my agency’s website, I felt it was time for a fresh look and a complete overhaul of my branding. I’m excited to share the results of this redesign, which not only reflects my agency’s identity but also embraces modern web standards.
The new site was built using HTML and CSS in conjunction with the Eleventy (11ty) static site generator, achieving an impressive 100/100 score for page speed. Check out the site here: Oak Harbor Web Designs.
One of the highlights of the redesign is the integration of a dark mode feature. When activated, this mode includes a delightful Easter egg—a captivating animation that plays in the hero section after an eight-second wait on desktop. The service cards come alive in dark mode too—hovering over them transforms the icon into a glowing moon, with the background transitioning into a starry night sky complete with shooting stars.
Additionally, the call-to-action section at the bottom of the page transforms into a dynamic, illuminated billboard that captivates attention, utilizing playful flickering animations when toggling dark mode. This attention to detail enhances user experience and engagement.
In this redesign, I focused on content that resonates with the aspirations and needs of small business owners. Headings now emphasize themes like “never worry about your website again” and “get the website you’ve always wanted.” The homepage serves primarily as a conversion tool, while the subpages are optimized for SEO, targeting specialized services and geographic locations. For instance, take a look at this page: SEO Services in Hammond.
To bolster my online presence, my SEO consultant will be creating additional location and service-specific pages. A useful tip I discovered is that having a nested URL structure (like /location/service) performs better in search engine rankings than a flat structure (like /service). By aligning my URLs with specific services in targeted areas, I can enhance my site’s visibility.
This website uses the Eleventy static site generator alongside Decap CMS, allowing me to manage blog content effectively from a user-friendly dashboard. The homepage dynamically updates to feature the three most recent posts, ensuring fresh content is always displayed.
Keeping the hero section recognizable was important, so I maintained its signature style, only updating the background to a flat dark blue—my new brand color
