The PAWS New England dog rescue website is responsive, but the Petfinder widget they were using to display the dogs they have available for adoption was not.
Last month, I built them a custom solution using the Petfinder API. Today, I wanted to talk about my experience implementing it.
Working with a Grid #
Adopting a dog is both a logical decision (size, energy level, etc.) and an emotional one (this dog is cute/manly/awesome). I wanted to tap into both sides of the decision-making process by displaying big, beautiful photos of dogs alongside key information.
One of the things I love about working with responsive grids like Kraken (which powers the PAWS website) is how flexible they are. Building a responsive showcase for PAWS dogs was as simple as tying into the existing grid.
Potential adopters can search for their new best friend on any device with an internet connection.
Cached for Faster Loading #
APIs can be slow, and Petfinder’s is no exception.
The biggest factor impacting Petfinder API performance was the number of animals you were requesting information for. PAWS saves hundreds of animals each year, and we obviously want people to see all of the dogs they have available.
The API was taking upwards of 60 seconds to load, and because their site is powered by WordPress and generated on-demand, nothing would display until the API was finished rendering. Not good.
The solution to this was really simple.
The PAWS website already uses the Quick Cache plugin to increase site performance. The plugin pre-builds the dog list page once an hour and serves that, eliminating the need to ping to the API every time someone wants to see a list of dogs.
Client-Side Filtering #
There are a lot of different things you might look for when adopting a dog.
Puppy or older dog? Small, large, or somewhere in between? Male or female? How are they with other dogs? With cats? Only interested in certain breeds?
I wrote a simple jQuery script that allows for real-time, client-side filtering.
Rather than rebuilding the page each time someone changes criteria, everyone gets the same HTML (which allows us to take advantage of the cache plugin I mentioned earlier). Each dog is assigned classes for various things: gender, age, breed and so on. When you toggle one of the filters, the jQuery script looks for dogs who match that class and hides or shows them based on your criteria.
Very lightweight. Very fast.
Progressively Enhanced #
The list of PAWS dogs starts as a simple grid with photos of dogs and basic info. Clicking on a dog takes you to their Petfinder listing.
A little help #
I have to give major kudos to Bridget Wessel and her Petfinder Listings plugin. While my solution forgoes the plugin, her PHP was instrumental in getting the API data into WordPress.
Definitely give her work a look.
The Petfinder API for WordPress Toolkit #
To help other developers who may be looking to do something similar, I open sourced my code. Check out the Petfinder API for WordPress Toolkit on GitHub.
And if you’re looking to adopt an awesome dog (or just want to see a whole bunch of cuteness), check out PAWS New England.
- More articles on...
- Design & UX