Complete Nutrition
Gerri Kier, founder of Complete Nutrition Alliance. She is a Certified Natural Health Provider (CNHP) and a Certified Loomis Digestive Health Specialist and her business is located in Lafayette, CO. Nutrition is the foundation of optimal health and without the proper digestion of the foods one ingests; the absorption, transportation, utilization, and excretion processes will be impaired. This can then create nutrition deficiencies and deficiencies can lead to disease.
01. Approach
This project had a few wants but for the most part I was left to my own to design and develop the website. Gerri had previously published her site on an old software that wasn't responsive and was difficult to maintain. Gerri loves upbeat, whimsical and colorful that is her personality and she is her business so we wanted to make sure that got across visually in the site. She also loves her logo and branding so she wanted to use it muliple times on the site. Other important areas of the site included a newsletter sign up and then to create a membership section for the future as her practice grew.
02. Design
Gerri already had a logo that she loved and she loved the color scheme that accompanied the logo. So we made here 3 vibrant colors the focal point of the site because color was very important on this build. We also used variations of the main colors by using a site called Paletton to extend our color palette. Modern was another feel that we wanted to get across so we used sans-serif fonts for both the head and the body of the site. We used PT Sans for headers and menu. We used Monserrat for the body of the pages. One of main challenges was the menu section because her logo had white stripes at the bottom of the verbiage so we had to come up with a way to make that background image to be responsive to different browser sizes.
#d84127
#a6cd38
#21a7df
#f6e358
Montserrat
03. Technology
The Complete Nutrition 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. Gerri 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. 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 bogged down a little and averages about 2 - 2.2 seconds per page due to lack of lazy loading. CSS and javascript animation was created by using the following libraries Animate.css, Hover.css & T-Scroll.css. 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
