I built this site for a process server in Columbia, South Carolina who wants customers to look up prices based upon a ZIP code. Recently I updated the design and I included a widget for looking up his prices by county and matching them up to the ZIP code entered. That last bit was a little tricky, but Google came to the rescue.
He doesn’t have much content, so he just wanted a simple one-pager with no real navigation. It worked out well, but I wanted to improve it a bit. It needed to be responsive, and it needed a better way to look up prices. If you just want to look at it, then you can just click here. But if you’re curious about the how and why of it, I’ll go into some more detail below.
The Old Version
The previous version of the site had its charms, but it wasn’t built in HTML5 and the techniques it used were a bit outdated. It was in need of an update, but the client liked the general look and feel.
The header was a single image, with a couple of z-indexed containers shooting off to the sides. (The right container had a background image to match the header so the lines would continue past the site container.)
The shadows were just another background image, with a matching one for the footer, and the content was a bit blah. And if you think the tag line looks a bit like navigation, then you’re correct. That’s what it used to be. All things considered, not something I want to slap my name on when I’m out looking for work.
The New Version
The screenshot below is from the site’s current version. I simplified the logo a bit, and made the whole thing responsive. It’s built with Twitter’s Bootstrap, which gives me plenty of tools to play with. Of course, the first thing you want to do is edit your LESS files to eliminate whatever you’re not using. A full-sized copy of Bootstrap is a bit hefty, especially if you plan to override instead of editing the LESS files directly. Of course, the star of the show isn’t the CSS. It’s the price lookup widget. More about that below.
The client charges by county, so I had to build a vector map of South Carolina for him. Whenever he changes his price in some county, I just open Illustrator and change the color for that county. That worked for a while, but eventually he asked for some kind of widget that people could use to get prices for a specific county. He also has a particular customer who charges by ZIP code, so he needed to match up the two.
jQuery Deferred Objects and Google’s Geocode API
My first bright idea was to use Google to look up the ZIP code and just pull the county name from the JSON they send back. It worked so well at first that I wrote a blog post about it. Things were just peachy while I was punching in ZIPs for testingthemightycribb but eventually I ran out of luck.
The problem showed up when I tested this ZIP code. You’ll notice that the JSON object has the city and state, but no county. You can compare it to this one to see the difference. Richland County appears in the second one, but we don’t see Dorchester County in the first. That pretty much kills the Geocode API as a resource for looking up counties.
The sad thing is that I had everything built and working before I discovered the problem. Since I couldn’t rely upon the presence of a county in the data, I was left with an unreliable widget.
I had to look for another data source. Fortunately, Google has another source for ZIP code information: Fusion Tables.
With a few adjustments, I could download a CSV and make the necessary adjustments in Excel to add the client’s prices. Then I exported it as an XML file, converted to JSON and started happily programming. I could have just worked with the XML, of course, but JSON is a little better.
So instead of a small JSON file with county names and prices which are compared to the result of an AJAX call, I had to use a larger JSON file which included all of the ZIP codes in South Carolina. It took a jump from a 2K file to a 65K file. But on the bright side, it’s just one file on page load with no other AJAX going on. Once it’s in, the resulting object can be used as much as needed.
At the end of the day, it’s a nice little widget on a nice little one-page site. It helps the client with pricing, it can be easily updated by adjusting the data file, and there’s even some error messaging. And it looks pretty good on an iPhone.