Soumissions Pavage is a French-language website managed under Oolong Media in Canada, designed to help users request and compare paving service quotations. I was subcontracted as the developer to transform a fully designed PSD layout into a functional, responsive WordPress website. The project involved setting up a custom WordPress environment using a child theme, integrating dynamic forms, and ensuring the final site accurately reflected the original design while maintaining performance and usability.
Problem
The client had a finalized PSD design but required: Conversion into a fully functional WordPress website Consistent implementation of design elements across all pages A scalable structure using a child theme for future updates Integration of advanced form functionality for lead generation Clean, responsive behavior across devices Additionally, since the site is in French, attention to layout spacing and text expansion was critical during development.
Solution
I converted the provided PSD design into a fully functional WordPress website using a Pindol child theme. The layout was built to closely match the original design while keeping the structure clean and easy to update. I developed reusable templates for consistency across pages and ensured the site works smoothly on all screen sizes. Gravity Forms was integrated for the quote request feature, with styling adjusted to match the design. I also made sure the French content displayed properly in terms of spacing and readability. The final result is a responsive, maintainable website that follows the original design and meets the client’s requirements.
Project Setup
Initialized WordPress with Pindol Theme and configured a custom child theme for scalability
PSD Analysis
Reviewed and broke down PSD design into reusable components and layout structures
Page Development
Converted PSD sections into responsive WordPress templates using clean HTML, CSS, and PHP
Gravity Forms Integration
Implemented and customized Gravity Forms for quote request functionality
Responsive Optimization
Ensured pixel-perfect responsiveness across desktop, tablet, and mobile devices
Content Integration
Added French content and validated layout consistency with real text
Testing & Deployment
Performed cross-browser testing and deployed the website to a live environment
