Colorado SEO Design Accredidations
Colorado SEO Design Accredidations

Tri County Heating & Cooling

Tri County Heating and Cooling is a local HVAC company based in Longmont, CO.  Knowledge, reliability, and competitive rates set them apart from other heating and cooling service providers. Their first priority is to listen to your problem and diagnose a solution that fits your needs, not ours.  They don't use high-pressure sales tactics.  Unlike many larger furnace & AC repair companies that pay their technicians on commission.  Tri County's business is solely focused on creating HVAC customers for life. 

Tri county Website design

01. Approach

This project had a wide open canvas to start with as there was only a logo to work with.  The owner's Harvey and Barb trusted me to make the final call on the layout of the project and just asked me to use the color scheme that went with the logo which was a dark green and orange color.  For me the goal of the project was simple make it fast and easy for potential clients to contact Tri County.  Give the potential customer a great experience and make them confident enough to call Barb.  They also requested that the phone number was front and center so we made that option avaialable on every page even though it can potentially lower the CTR that is calculated.  We needed to build trust and credibility so we wanted to include the satisfaction guaranty and the testimonials to improve the trust factor of the site. 

02. Design

I took the logo which was poor quality and I recreated it so I could make it sharper and higher resolution.  This also allowed us to create an SVG file which improved page load speed.  The colors were already chosen because they went with the logo.  We utilized angles in the design because the logo had angles included so this was a design element used throughout the site.  We used Steelfish for the headings and menu which is a strong slender sans-seriff font and we paired it with Baskerville for the body.  Animations were created on scroll down to draw attention to different elements of the website without being overly distracting.  The HVAC industry is notoriously competitive so we need to improve all elements of SEO and page speed to keep up.  We had ranked fairly well in the past so we maintained the same keywords but added schema.org and JSON-LD markup along with HTML5 to guide search engines.

#0e4c28
#0e4c28
#333333
#333333
#f66201
#f66201
Baskerville
Baskerville
Steelfish Rg
Steelfish Rg
slider 1 slider 2 slider 3 slider 4 slider 5

03. Technology

The Tri County Heating & Cooling project is a totally responsive design based on CSS Grid Layout with a Flexbox fallback.  That means the project is not reliant on an outside library of code to be fully responsive.  The starting point was HTML5 Boilerplate to make sure the project was utilizing current best practices and most browser based styling was reset using Normalize.css.  We don't utilize templates so all coding was done by hand using the Brackets code editor.  The Tri county Heating & Cooling team is also able to add blog articles, maintain the verbiage and images on the site by utlizing Perch as the content management system.  Every page in the project was validated and confirmed to be W3C compliant.  All css files are modular in nature so Gulp was used to combine and condense all CSS files in the final project build in order to make the page load speed better.  The final page is about 1 - 1.2 seconds which is ridiculously fast and the page speed index is also ridiculous and has this site ranked in the top 2% of all sites online.  CSS and javascript animation was created by using the following libraries Animate.css, Hover.css & T-Scroll.  Other code and libraries used include Modernizr, jQuery, Akismet, Vanilla Lazy Load (Verlok), Cloudlfare CDN and Google Analytics.  Software utilized to create this project included Brackets, Photoshop, Perch CMS, VectorMagic.com and CompressPNG.com. 

The coding and software skills used by Colorado SEO Design to make this project take off included:

  • Photoshop
  • PHP
  • HTML5
  • CSS3
  • Javascript
  • JSON
  • Schema.org markup
The Website Technology that we use