Built on the Foundation framework and adapted for WordPress, this website is designed to increase customer discovery and retention. Release the Hounds has been a fantastic partner and we’ve been working together for most of my career as a developer. They’ve been due for some new development for a while, and we tried out some new things in preparation for it. Recently implemented is a postal code lookup so that customers can find specific information about services in their local area, and this made it into the new site as well. Direct interaction happens via a web-to-lead form that pipes into Salesforce CRM.
I had been avoiding SVG graphics for a while since browser support is a bit spotty for some techniques, but since there were a lot of icons in the design I moved ahead with a sprite-based icon system. After exporting all of the icons from Adobe Illustrator, they were compressed and put into one document which is included in the HTML. Specific icons are called with a hash link, which is really handy for organization and ease of use.
For smaller icons of different shapes and colours, I leveraged a different technique to include SVG information directly in the CSS. For this to work for my purposes, I trimmed the data and included the fill colour as well. Finally, the data is run through a URL encoder to make it url-safe and ensure it displays in all browsers. The result satisfyingly eliminates a bunch of HTTP requests and is beautifully scalable and compact.
