Resurrection Roofing is a company located in Texas. He had contacted us because his company had neither a logo or a website, and had wanted to expand.

WordPress Mockup Process

I enjoyed working with his client immensely. The mockup process went very smoothly. I adhered to the new strategy of providing one mockup to the client instead of multiples and we had another case study where the client didn’t get overwhelmed or confused in the process.

The design we settled on was a simple one. We used the same philosophy as Mid Kansas Exteriors and tied his biggest selling services into the buttons located in the first fold. We later found out from a sales rep that placing these buttons in this position actually helped to “hook” people into clicking on them.

We avoided a slider this time around and decided to go with a simple static image for the background. We decided to try something unique with the icons below the about section and planned on making them animated SVG icons.

Because the client did not have a prior website, we were a bit low on content and proposed emphasizing the products and manufacturers he uses in a section near the bottom. Below that, we added a testimonial section.

These were the final mockups:

WordPress Website Design Process

resurrection roofing homepageThe development process for this particular website was fun. I got to experiment a bit with the SVG animated icons as well as further develop the Get Found Fast starter theme we had developed.

While building the site, we also decided to incorporate some fading functions to the imagery in the product/manufacturing section. Originally we had a Facebook like box in the footer but opted to replace it with an image because of the performance impact. We also avoided the embedded Google Map for the same reason.

Overall developing the mockup into a full-fledged WordPress site was pretty fast for this project. We avoided adding too many scripts, optimized every single image we could and even incorporated a special function to defer the javascript generated by the youtube video embedded in the about section.

Later on, we noticed an issue with the mobile site where the menu had become too big because of the logo. We added a chunk of javascript to fade it out on scroll and fixed the issue pretty easily.

Conclusion & Optimization Report

Attempting to optimize this site was a bit of a pain when dealing with the scripts and the youtube video. We managed to defer the video while minimizing the impact of the scripts and keeping the design intact. Despite it’s current load time, the website is still decently optimized.

In conclusion, it was fun to be able to work with the animated icons as well as find new ways to optimize websites.

« | »