The Pickleball Clinic
What they needed:
Coincidentally hailing from all the way across the country but simultaneously very close to my hometown, The Pickleball Clinic is the worlds’s largest online pickleball community, and they host a robust newsletter publication with a prolific reach. They needed a brand new website with tons of customizations. They wanted to import their newsletters as a blog, incorporate custom animations, and they had a pixel-perfect idea of exactly how they wanted it to look. They were also curious about continuous maintenance to keep all their newsletters up to date in their blog.
Client: The Pickleball Clinic | Industry: Education and Editorial
What we did:
This site has some of the most custom code I’ve ever built into one place, so much so that it doesn’t even look like a Squarespace site anymore! It took loads of custom code to make it look and work just so. Starting at the top, we’ve got a custom two-layer navigation menu including a search icon with pop up branded search bar (surprisingly not a native feature in the nav menu), a hero section of scrolling articles leading to their respective newsletter posts, a live count-up animation to feature their social stats, and some branded hover effects, just to name a few.
Scroll the Home page
Go ahead, you can really scroll right here in this box. 👇🏼
Best laid plans
Originally they were hoping their newsletter would be easily (and automatically) embedded from their current email marketing provider, but that integration wasn’t available, so after moving many mountains regarding the scope of the project (it went from a 7 page site to a 19 page site, with about 35 more to go if we build out their full archive), I built it out fresh as a blog, tagging and categorizing each article for easy searchability by your favorite pickleball pros.
Scroll the Newsletter Archives
Peep the Pros Page
See the Live Site Tour in Action
All courtesy of our good friends in the custom code family, including JavaScript, CSS, iFrames with embedded HTML, really all kinds of bells and whistles. Give it a click to watch, this one’s a video. 👇🏼
And one of my favorite parts: the mobile nav menu
One of my favorite touches on an almost-done website lately has been styling up the mobile navigation menu. You know, the little menu that pops up with all your page options when you click the hamburger icon up in the top corner? This is often an afterthought but it makes such a difference when you open it up and everything just looks *good.* Here’s a before and after of no styling at all vs. a little customization using a bit of CSS code.
In this case, the x button was off due to some previous code needed to add the search icon (again, not a native feature in the nav menu) and the space this took up shrunk the logo down teeny tiny. And also pushed it off-center! A little CSS and we've got everything centered and balanced, added a little dimension to make the mobile nav menu hover above the previous screen, and of course, full functionality of all links for easy navigation. All in all a really smart looking mobile nav menu.
