AAA Blind Factory
AAA Blind is a local window covering company based in Bonita Springs, FL. Rick DuJardin and his staff provide a wide variety of different coverings including plantation shutters, solar shades, roman shades and more. They have a wide variety of different brands including Hunter Douglas, Comfortex and Horizons. They have also won the Best of Bonita Springs for Window Treatments the past 21 consecutive years.
01. Approach
The previous website had been done almost a 6 years previously and had a separate mobile page. So we were looking for both a refresh and a site that utilized responsive design. After discussions and a review of the Analytics it was clear that many elements of the old website were still very productive. So we decided to move forward with a similar look and feel but to update the techology on the site. The content created over the years had centered on many different high quality videos so we wanted to make this a focal point of the new site. The biggest goal was to meet our technology objectives and increase website conversions.
02. Design
We already had all of the content to be used from the previous site so we continued to use the logo and a similar color scheme from the previous site. We used beach colors because of SWFL and how close it is to the beach. We did this by using a couple of different blues and a sand colored background. The font choices were meant to be modern and readable. We went with Montserrat for the body and Oswald Light for the headings and menu. Animations were created on hover to add some additional flare to different elements of the website. TWe designed a search friendly site with schema.org markup along with HTML5 to properly guide search engines.
#00aedb
#004a5f
#e0cfaa
#00789a
Montserrat
03. Technology
The AAA Blind Factory 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 Visual Studio 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 Visual Studio Code, 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
- AlpineJS
- JSON
- Schema.org markup
