Epic Lawn Pro
Epic Lawn Pro strives to provide personalized service of the highest quality and best value. Using our 15 years of experience, we have revamped residential lawn care. This new type of lawn care provides one lawn pro for each customer. This allows for better communication and more of your expectations met.
01. Approach
This project had a logo already created along with a brand sheet to go off of which included fonts and colors as well. I worked with one the owners Russ and he wanted something fresh because the old site was built on Godaddy with poor image resolution and poor site optimization so it wasn't performing that well. The old site also didn't project the image that they wanted to give to potential customers. We wanted to make sure that we highlighted the excellent work that the company did so we need to use high resolution images. Evan and Russ also wanted to provide enough information to differentiate themselves from the competition but the didn't want to overwhelm new users.
02. Design
Russ liked a modern sleek look and gravitated towards angles and futuristic look that went with the logo and fonts in the brand specs. We utilized all of the same colors on the brand spec sheet to make sure that all branding flowed together and followed the same theme. The website was ranking fairly well but had some limitations due to the fact that website builders like Godaddy do a terrible job at helping a companies SEO. We also included schema.org and JSON-LD markup along with HTML5 to help the site signals to Google and other search engines.
#8cc63f
#000000
#29ac4a
Gotham
Megatron
03. Technology
The Epic Lawn Pro project is a totally responsive design based on CSS Grid Layout. 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
