TLC Medical
TLC Medical is a primary care physician in Tampa Florida. They understand the importance of the doctor/patient relationship. They want to be your doctor, be available when you are ill, and help to prevent illness while maintaining your health. TLC Medical welcomes the opportunity to be your doctor and treat you with respect as a patient while providing the medical care you need in the most efficient and cost effective way possible.
01. Approach
This project had a logo and color choices already made so we were tasked with laying out the site and finding fonts that fit the style of the client. The owner Charlie had a website that had been hacked and was unrecoverable as a result therefore he wanted a solution that was easier to use and preferably less hackable. We did utilize the main colors on the logo but we also found colors that were in the same family but lighter using Paletton.com. This helped us lighten up some of the bolder colors on the logo. The website had been down for over a year so there was virtually no SEO presense. Which meant they had little to no online leads being generated. We needed to build credibility and trust in the site so we wanted to include testimonials to bolster the trust for the practice. Online scheduling was a requirement to integrate into the internal practice management software.
02. Design
The big thing for colors is we wanted to avoid using red much it isn't a good color to generally use in websites but definitely not for medical sites. The logo included red so we couldn't ignore it but we wanted to down play it. The main color we used was blue and light blue. The font choices were a serif font for the body "EB Garamond" and a sans-serif font for the heading was "Avenir". We used SVG background images to give the site some different flare. Animations were created on scroll down to draw attention to different elements of the website without being overly distracting. We researched relevant keywords including long tail keywords because competition is fierce in Tampa. We optimized the individual pages for these keywords and included schema.org and JSON-LD markup along with HTML5 to guide search engines.
#23272d
#2b549d
#e91934
#ffb90b
Eb garamond
03. Technology
The TLC Medical 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 Normalize.css. We don't utilize templates so all coding was done by hand using the Brackets code editor. The TLC Medical 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 utilizing lazy loading and Cloudflare script enhancements. 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 is approximately 1.5 - 1.8 seconds with an excellent Page Speed Score . 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, Lazy Load (Verlok), Google Fonts 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
