Elevation Plumbing & Heating
Elevation Plumbing & Heating is a local and family-owned plumber and HVAC technician. You will have a team of expert technicians working together to ensure your satisfaction, and that your plumbing and HVAC repairs/ installations are completed with the highest quality.
01. Approach
This project had a logo already created so that wasn't a stumbling block. I worked with the owner Guy and he wanted something that looked nice but performed well from a conversion perspecitve because the old site was built on Wordpress and wasn bogging down. We wanted to make sure that we highlighted the broad amount of different work that the company did so we made sure to include all of the different service pages necessary. Guy wanted to convey the depth of knowledge that this company had and that they were a trusted partner so we made sure to include trust elements throughout the site. One of the issues with this site is it wasn't image heave due to the nature of the business so we had do to do some legwork and use stock photos to complete the job.
02. Design
Guy wanted to make sure we kept the colors matching the logo so we used the same color scheme of the logo. While going through the initial foundation process it was clear that Guy really liked red and although red is a color that generally doesn't work on many sites we feel like we used it as the correct amount of an accent color. The font choice we went with was Oswald for the headings which is an traditional sans-serif font choice. The main body font choice was offset by using Poppins which is a unique modern sans-serif font. Animations were created on scroll down to draw attention to different elements of the website without being overly distracting. The website had been ranking fairly well so we wanted to make sure that the site changes didn't impact rankings. We also included schema.org and JSON-LD markup along with HTML5 to help the site signals to Google and other search engines.
#e61600
#2679bd
#393838
Oswald
Poppins
03. Technology
The Elevation Plumbing & Heating 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 Reset.css. We don't utilize templates so all coding was done by hand using the Brackets code editor. The management 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 (with the exception being images are lazy loaded, Alpine JS and scripts are optimized which dramatically improve page speed but cause issues with W3C validation). 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 load speed is smokin' fast at approximately 1.6 seconds per page. CSS and javascript animation was created by using the following libraries Animate.css, Hover.css & T-Scroll. Other code and libraries used include Modernizr, Alpine JS, Akismet FlickIty, Vanilla Lazy Load (Verlock) and Google Analytics. Software utilized to create this project included Brackets, Photoshop, Perch CMS, VectorMagic.com and Tinyimage.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
