Parts diagrams were an important part of the old Brownells site. Originally displayed using JPGs with area maps they were tedious to maintain, low resolution, and did not scale well.
For the updated Brownells site I suggested redrawing them in vector and saving them as SVGs. This scalable format brought advantages like looking crisp at both small mobile and large desktop displays and even when printed. SVGs also allow for Javascript interactivity to assign CSS styles to individual parts or groups of parts highlighting.
Below is the initial proof of concept test diagram.
Here’s how they have been incorporated into the pages with products shoppable once a part has been selected. In total 19 diagrams have been redrawn so far. Try it on brownells.com here.
