Mike's Plumbing of Southwest Florida
Mike's Plumbing has been in business since the late 90's, setting the standard for local plumbers in Naples and Southwest Florida. What differentiates this family owned business is they are master plumbers. They don't do inexperienced new guys and they only send out highly trained professionals to your job. Second generation owner Jeremy Bohall has built a reputation of honesty, integrity and the highest quality work. It was important that we built a site that would reflect the same high standards that they provide to their customers.
01. Approach
This project didn't have any major time rush or soul crushing must have requirements. We were essentially given carte blanche to create the best performing site we could. Requirements included that we wanted to integrate the site so people could email pictures directly to bid off this was accomplished throught the contact form. Jeremy also wanted to include SMS.options for quick contact that could be stored within the CRM system. We were able to include the SMS but we weren't able to get it to work right with the external CRM system so we scrapped the implementation. During a couple of conversations with Jeremy it was clear that we needed differentiate the company based on experience, cleanliness and timeliness. We didn't want to get into a price to the bottom bidding were so high quality was the main focus. Building trust quickly and showing why we are the best option with visitors was imperative because there are many plumbers in the area that can be used to do a job.
02. Design
The logo was already done, so in order to keep the branding similar we utilized the main colors of the logo as the two starter colors. Then we used complimentary lighter shades of the main colors for background filler colors to differentiate one section from another. The font choice was "Rubik" and we utilized this for both the headings and the body of the text for the entire site. It is a strong easy to read sans serif font. The logo was fairly long so that impacted how we layed out the design and the menu. We also wanted to include service areas to show potential customers the local communities that Mike's Plumbing services.
#070707
#f60515
#423f40
#970004
Rubik
03. Technology
This project was a fully custom coded, non-templated, responsive layout based on CSS Grid with a Flexbox fallback for older browsers. Therefore, this project is not reliant on outside libraries or Javascript to be fully responsive. As per usual the starting point was HTML5 Boilerplate and Reset.css, to follow current best practices and reset default browser styling. The Mike's Plumbing team will be able to maintain the verbiage, add articles and change images on the site by utlizing Perch as the content management system. Every page in the project was tested and confirmed to be W3C compliant with the exception of lazy loaded images and Cloudflare's Rocket Loader feature. All css and other element files are modular in nature. In order to improve page speed up loading Gulp was used to combine and condense all CSS files. This project included Modernizr as a feature library, but it didn't include any jQuery as all javascript was vanilla javascript so not to require the dependency. This help increase speed due to less code and the ability to combine all vanilla javascript files. The slowest loading web page according to GTMetrix.com was approximately 1.5 seconds with most pages average loading times being less than 1.2 seconds. The major obstacle to speed was use of an external scheduling script which slightly bogged down loading. We attempted to offset this by using Cloudflare caching, CDN and Argo services. CSS and javascript animation were created by using the following libraries: Animate.css; Hover.css; & T-Scroll. Other code and libraries used include HTML5 Boilerplate, Reset.css, Modernizr, Easy Responsive Tabs and Google Analytics. Software utilized to create this project included Brackets, Photoshop, Perch CMS, Akismet, VectorMagic.com and CompressPNG.com.
The coding skills used to make this project fly included:
- PHP
- HTML5
- CSS3
- Javascript
- JSON
