Total Garage
Total Garage Concepts is a local garage organization company located in Naples, FL. From the ceiling to your floor, Total Garage Concepts covers your entire garage when it comes to organization solutions. They provide garage cabinetry, slat wall storage, overhead ceiling storage as well as garage floor coatings. If you are ready to turn your garage into a functionally amazing space that can store everything and allow you to park your cars please give them a ring.
01. Approach
This project had a wide open canvas to start with. The company already had a logo and a color scheme but I had full input on the layout as long as the site converted. The owner H.L. Burkley had been using a website I had created 5 years previously and it was performing well but had gotten a little long in the tooth and it wasn't responsive. We wanted to create a strong and elegant website that showed off some of the companies great work. The goal of most local websites is to convince local lookers to become local buyers and this site was no different as it was trying to differentiate itself from a multitude of players in the SWFL market. We wanted to make sure clients were able to see the glitzy pictures of awesome garages but we needed to make sure we didn't scare off smaller customers as well so we wanted to make sure financing options were prominently displayed. We also wanted potential clients to understand just how painless and easy it was to work with Total Garage Concepts along with all of the awards the company has won throughout the years.
02. Design
We definnitely wanted to get across elegant and that made black a staple color because it has a connotation of elegance. We also wanted to make sure people were aware of the strength that these solutions provided so we used a carbon fiber backgrond to give off that feeling. Other colors included a steel blue and a lighter gray. The font choice was Lato which is an elegant font and easy to read we used this sans-serif font for both headings and the body. The site had ranked well for quite along time but we wanted to take the next step by making sure we could grow our territory and rank well outside of the Naples area. We added different service areas and we researched relevant keywords and built a site optimized for search. This included schema.org and JSON-LD markup along with HTML5 to guide search engines.
#ff0000
#2559a6
#202020
#008000
Lato
03. Technology
The Total Garage Concepts 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 Total Garage Concepts 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 Cloudflare script optimization which are both done to enhance the page load speed of the site. 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 just smokin' fast clocking in at about 1.2 - 1.4 seconds per page and that includes a Page Speed that makes this website load faster than over 90% of all websites on the Interwebz. 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, Google Fonts, MagnificPop, Vanilla Lazy Load (Verlock), Cloudflare 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
