Harper’s Tire is a premium tire service provider with three different locations in Calgary
Project In Focus
Harper’s Tire has a long history of being in business as a premium tire service provider with three different locations in Calgary . I was tasked with giving the website a modern and responsive look that incorporated their branding elements.
Design
This was the first project where I collaborated in depth with a designer to design and build a website. By the time I did any web work, the designer had prepared all the design work in Photoshop (typography, colors, images, dimensions) and handed it off to me to convert into HTML. In total there were about 23 pages that I had to sift through and code.
Code Conversion
Despite there being over 20 pages, a lot of the pages contained the similar layout structures which made it easy to reuse the layouts and change the content. There were still a few pages that maintained unique layouts. I found the main heading typography a bit tricky to deal with in CSS; I had to use various text-shadow methods to get the design effect and also be mindful of its responsiveness.
Notable Features
The history portion was quite long and needed to be more visually appealing . I decided to use the Vertical Timeline tutorial from Cody House to add some flare to the timeline. There were additional components that I had to custom code and integrate into the theme such as:
- A flex slider on the testimonial section
- A j-carousel slider on the tire brands on the Home page
- Menu showing the wheel and sign upon scrolling
- Animating form behaviors
Delivery
After numerous occasions of testing, fixing bugs and enhancing the website, it was finally launched. The clients were very happy with the final product as it not only gave them newer and modern look but it also maintained their identity and branding. The live site can be viewed here: harperstire.com
On this project, I was able to enhance my front-end skills by utilizing a few open source projects. I also learned that time and budget shouldn’t dictate and compromise on creativity.
