We kicked off the new year with a new website launch for Chaput Rootmaster, Inc, is a Denver-based plumbing, heating and cooling company.  They’ve been in business for 65 years and are very well-respected in their community.  They had an existing website, but it was unsatisfactory for many reasons: aesthetically lacking, technologically out of date, and difficult to maintain.  Realizing this, they approached us to give their site a top-to-bottom redesign.

Chaput Rootmaster's existing website homepage

We started off by analyzing Chaput’s marketing objectives for their website. Who was their target audience? What are their needs? What should their target audience know about Chaput Rootmaster? When visitors come to the Chaput website, what is their desired action?  After discussing this with the Chaput Rootmaster employees, we analyzed and refined the site’s information architecture to align the site content with their marketing objectives. We also planned out wireframe layouts for each page, determining what content needed to be on each page, and where it would be placed.

Our wireframe for the redesigned site's homepage

After we had the site structure and page layouts determined, we worked on the site’s graphic design and look-and-feel.  We decided upon a silver, blue and orange color scheme, with extensive use of brushed-metal texture, to fit the semi-industrial image of the website’s subject matter.  We also placed prominent calls to action on every page of the site, with a prominent phone number and a link to an online appointment-scheduling form in the header of each page, and with an additional appointment-scheduling form placed on the right side of all the body pages of the site.

The website's page headers, showing the blue and brushed-metal color scheme, and the prominent calls to action

We coded the site on a custom content management system based on SilverStripe technology. This allows the Chaput Rootmaster employees to easily update and manage the site content themselves, rather than having to manipulate HTML code or outsource site maintenance elsewhere. We also coded the website to be extremely flexible, with the page menus and interface designed to handle a page hierarchy up to four levels deep.

As we coded the site, we made extensive use of jQuery functionality.  This is most immediately obvious on the homepage, where we used a heavily customized version of the jQuery cycle plugin to create the “Featured Services” slideshow at the top of the page.  We also used jQuery in more subtle ways as well, such as auto-formatting date fields and form validation on the input forms on the site.

jQuery auto-formatting for this form's date input field

jQuery form validation alerts the user if they forgot to fill out a required field on a page form

One particular challenge in development was displaying a map with an overlay showing Chaput’s service area in the Denver metro area.  We wanted to use Google Maps to accomplish this, but we were limited by their terms of service: you are allowed to display screenshots from Google maps, but are not allowed to alter that screenshot in any way.  What we ended up doing was creating the map and the service area overlay as two separate images, with the service area overlay positioned to lie on top of the Google Map screenshot.  Thus we could still visually illustrate Chaput Rootmaster’s service area without violating the Google Maps terms of service.

The Google Map screenshot and the separate overlay image layered on top of each other in the web page

We launched Chaput Rootmaster’s new website on January 5th.  Since then, both us and the client have received a lot of very positive feedback.  Several people have told us that it’s “the best-looking plumbing company’s website [they've] ever seen.”  We’re glad to hear all the positive responses to the new website and we’re happy to have the opportunity to help out this well-respected company.  We’d like to congratulate Chaput Rootmaster on their first 65 years in business, and we hope their newly-launched website will be a great asset for their business both now and into the future.

To see Chaput Rootmaster’s full website, please visit www.ChaputRootmaster.com.

As we’ve been building websites here at Chris Strom, LLC, we’ve been building up a small collection of handy cut-and-paste pre-made HTML snippets.  After awhile, we figured they weren’t doing much good just sitting on their hard drive between projects, so we’ve built a site to put them onto the web and share them with the world: HTML-Assets.com

We’ve got pre-made code for various HTML dropdown menus like selecting one’s age, selecting US states, selecting countries, selecting time zones, and so on — I mean, who really wants to type out all 200+ countries of the world by hand into an HTML select box?  We’ve also got a selection of HTML Lorem Ipsum text pre-cut into various paragraph and list formats, pre-made HTML markup for CSS dropdown menus, and Javascript code snippets.

We also have a pre-built HTML “skeleton page” that we use as the starting point for every web page we build.  It comes with a 960 pixel fixed-width canvas that aut0-centers in the web browser and automatically stretches vertically to fill the browser screen regardless of how much content it is filled with.  It also comes with a pre-made <ul> footer menu that auto-sticks to the bottom of the browser screen.

We’ll continue to add to this site over time, so be sure to visit every now and then to see what’s new.  Also, if you’ve got ideas on additional time-saving code snippets to add, leave us a comment below or drop us a line and let us know!

Our finished Cavendish Scott website redesign

Cavendish Scott is a Denver-based company that specializes in ISO management system consulting, auditing and training.  They have a large client base and offer a wide range of business services, and needed a correspondingly large website overhaul to match the scope of their business activities.  Their previous website had become very dated both visually and technologically, and years of hodgepodge maintenance by many different people had left it in need of a comprehensive restart.  When we took on this project, the first thing we did was plan out an overhaul of the site’s information architecture, breaking it down into four categories:

• Our Services
• Our Company
• About ISO
• Contact Us

As we were planning the information architecture, we noticed that most of the current site’s content focused mostly on talking about the company itself, with little written about how they could help the customer.  So we made sure to boost the amount of content in the Our Services section as well, to increase the focus on serving the customers’ needs.  The “Our Services” section was further divided down into three separate categories, based on the company’s three main areas of business: ISO consulting, ISO auditing and ISO Training.

After we had the site’s new information architecture planned out, our redesign process followed our standard web design workflow: Visual design, followed by XHTML/CSS template construction, followed by development and implementation.  We focused heavily on the homepage during the visual design page.  It would be fairly content-heavy: there would be a company introduction, a recent news section, a newsletter signup form, a Featured Services area, and more.  We worked heavily on taking this information and presenting it in a visually effective manner, with a clear hierarchy of information — something that would draw the site visitors in to learn more, rather than overwhelming them and turning them away.  We made an eye-catching introductory paragraph and accompanying graphic at the top of the page, along with a prominent portion of screen real estate dedicated to Cavendish Scott’s current featured services.  We focused heavily on featuring strong calls to action — a large percentage of the page’s prime real estate is dedicated to quick-links to featured areas of the site.

Strong calls to action on the site's homepage

Another key consideration during the visual development phase was the appropriate use of color: we focused on achieving the right balance between using enough color to balance out the site’s text-heavy content, without making it look excessively bright and loud — this was a professional business-to-business site, not the Cartoon Network.

Effective use of color livens up the text-heavy content

The site’s development and implementation was similarly involved, with the site needing a good amount of custom functionality.  The homepage’s newsletter signup form was programmed to plug directly into the client’s iContact.com newsletter software API, with built-in form validation and confirmation emails to the client.  The website’s News section is powered by a WordPress engine, with a custom homepage script to pull and display headlines from the several most recent postings.  In addition, we built custom functionality into the training schedule page, so that users could quick-link from every class listed on the training schedule right to either its accompanying class registration form or to an appropriately auto-completed contact form to request more information.  On the training registration form, we used AJAX functionality in order to dynamically update the available course dates as users changed between the different training courses offered.

Quick-links to the appropriate auto-completed signup and contact forms

AJAX functionality powers dynamically updated input fields

The finished project was a resounding success and a huge upgrade to the company’s website presence.  We were pleased to be able to work with Cavendish Scott on such a seminal project for their company, and look forward to continuing to work with them in the future.

You can see the finished site here:

www.CavendishScott.com