Armour Roofing
Armour Roofing is a local roofing company based in Sarasota Florida. They subcontract on roofs of new housing and also serve as the contractor on re-roofs of existing homes. One of the things that sets Armour Roofing apart from other roofing companies is that the owner takes the time to meet with and provide in person estimates. This attention to detail ensures that your home gets a full and complete bid. Also all jobs are have a satisfaction guarantee because they stand behind there work and are confident in their results.
01. Approach
Gino Barone is the owner of Armour Roofing and he was doing preliminary marketing research for a friend that was going to start an Armour Roofing franchise in Colorado. After looking at multiple websites he really liked a roofing website that I had created for another client. He gave my information to Greg Holstein and after completion of the Colorado website Gino liked it so much that he asked me to update the Sarasota location. I was given a fairly wide berth to work with, but the colors needed to go with the choice of the logo. Armour Roofing had been in business over 20 years with 1,000's of satisfied clients so we wanted the website to add this element of trust. Florida has a large volume of strong storms and these storms can create havoc on a local homes roof. Gino wanted to make sure that people were aware of the pitfalls of using a storm chaser to do your re-roof project.
02. Design
We used the original logo of the company so we used the same color scheme of red gray and black. However we added a sliver of bright color with a vibrant Baby Blue to add a little pop to the darker colors of the site. We used choices that were strong solid to help describe the company. After looking at a variety of different sites to get an idea of project direction we decided that it was best to utilize bold headlines with Kenyan Coffe font and an easy to read neutral "Limerick" font for the body. Animations were created on scroll down to draw attention to different elements of the website without being overly distracting. A great website can only be great if your potential customers find it so we made sure to do research and optimize specific pages for different keywords. To help search engine optimize the site we included schema.org and JSON-LD markup along with HTML5 to guide search engines about the layout of the site and what was on each page.
#7fcdff
#e03837
#1e1e1e
#908e8e
Limerick Serial
03. Technology
The Armour Roofing 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 like Bootstrap 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 Armour Roofing 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 of lazy loaded images and script enhancements that make the site load faster. 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 averages less than 1.8 seconds per page due and is helped by utilizing the free version of Cloudflare as a CDN and site optimization. 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 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
