Parcel Details is a public service offered by Kitsap County that allows anyone to look up information on a
parcel of land using a tax account, street address, or parcel ID number. Originally this application built
over a period of about a year by a single developer. As part of my role with the County I took over as the
maintainer of this web app in February of 2018.
In the gallery above you can see the current release of Parcel Details that I created over the past couple of
months. In the gallery below you can see what the public release of this web app looked like when I took it
There are some really clear differences between these two versions of the app, but for me, the biggest
difference is adding responsive design in the current build. Before the current release, Parcel Details was
a fixed width web app; now it scales from phones to 21:9 desktop monitors. This is all thanks to scaffolding
Bootstrap 3.3 over the top of the custom UI elements provided by a company called Telerik.
Integrating Responsive Design
The creator of Parcel Details built it using rapid application development or RAD tools from Telerik. These
tools are drag and drop UI elements made available through a Visual Studio extension and a licensing fee.
The database connections are made using Table Adapters and then the application sits on top of ASP.NET and
.NET 4.0. In the current iteration you’ll see that it’s been upgraded to the latest 4.7.x release of .NET.
If you use Chrome’s inspect tool you’ll see that the pages are structured as a series of tables nested inside
of other tables. At times this nesting is up to four layers deep. This complicated the process of applying
bootstrap to this project and required me to spend some time removing unnecessary table nesting on the
master page and in the views which when present either broke Bootstrap’s container system or signaled for
line break elements where they weren’t necessary.
Another wrinkle to this process was trying to understand how Telerik’s RAD UI elements were styled. Simply
referencing an element by its class tag in CSS resulted in no changes. The styling profile that Telerik was
providing as a linked script was overriding those changes. To disable the default UI style I had to go
element by element and table by table to add a flag to disable the built-in styling and give the element the
tags it need to get styled by Bootstrap. Needless to say, this was a time-intensive trial and error prone
Trial and Error
The menu structure for this application is also unusual in that the nav button elements are generated by a
loop at runtime that iterates through an XML list of parent and child navigation nodes. For web apps I’m
used to seeing navigation elements defined as part of a static list rather generated through a loop, so this
was rather confusing for me. Once I realized what was going on it was only a matter of finding the
navigation generation class and having it assign each node a CSS class that Bootstrap could style like "btn
Finally, there was a lot of trial and error in tuning of this UX. Because I was going through and modifying
the elements individually there were a number of times when I found a new page in Parcel Details that had
unstyled or incorrectly styled elements. Additionally working through and controlling how the menu elements
reflowed at different window widths is a process that requires a fair bit of experimentation.
With those major issues worked out I overrode the Bootstrap’s primary color with the County’s shade of blue,
implemented a header bar with the logo, and added the footer from the main website. The purpose of these
changes was to give Parcel Detail’s a look and feel that was consistent with the rest of the County’s online
Adding Telemetry and Logging
The last step was to take advantage of the free services that Microsoft offers through its Azure platform and
add Application Insights to this project. This tool handles all the logging and profiling that this app
previously used a custom service to handle and dumps it into a nicely styled dashboard on my Azure account
that I can share with my coworkers.
I can also use the telemetry it provides to trigger custom events like email blasts tied to downtime events.
The catch is that you can only log up to a 1 GB of data per month per app before Azure will bill your
account. This is a cap that was fine for testing and development but was surpassed in production. Luckily my
account is credited with $50 a month thanks to my MSDN subscription which is more than enough to cover the
$0.30 Azure is charging me.
For my purposes, Application Insights is a perfect fit and it has really streamlined my process for dealing
with logs and troubleshooting exceptions. Often times I’m able to identify a service interruption or broken
page using Application Insights before the help desk starts getting reports.
A Roadmap for the Future
With this mobile friendly conversion of the front-end of Parcel Details the next steps are to improve the
page load performance of the application, improve the stability of this app’s server infrastructure,
modernize the deployment model, and build out a suite of unit tests to prevent regressions. I call this a
user-first application improvement roadmap. I’m starting with the changes that will have the biggest impact
on the public’s perception of the application first, and then moving toward the items that will improve my
perception of the application’s quality.