Exemplary Painting
Exemplary Painting is a local and family-owned business, and we know the importance of the family home. You’ll have a team of experts working together to ensure your satisfaction, and that your home’s interior and exterior painting project is done right the first time!
01. Approach
This project had a logo already created so that wasn't a stumbling block. I worked with the owner Bruce and he wanted something fresh because the old site was built on Wordpress with poor image resolution and poor site optimization so it wasn't performing that well. We wanted to make sure that we highlighted the excellent work that the company did so we need to use high resolution images. Bruce was also looking for "Clean" so we wanted to make sure white was used liberally as a background color. One of the issues is the company used Calendly and Call Rail for call tracking these scripts had a tendency to slow down load so that was something we had to watch.
02. Design
Bruche wanted to make sure we kept the colors matching the logo so we used the same color scheme of the logo with the lone exception being calls to action were bright orange to get the users attention. While going through the initial foundation process it was clear that Bruce really like ovalized edges so we tried to incorporate this styling throughout the site. The font choice was unique as we went with GT America Compressed for the headings which is an traditional sans-serif font choice. The heading font choice was offset by using Optimal LT standard which is a strong 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.
#cccccc
#1a9347
#f35100
Optimal LT Standard
GT America Compressed
03. Technology
The Exemplary Painting 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.5 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
