Optimized paid search site mantel

Much like Paid Search Landing Page, the client wanted to apply a refreshed look to a different set of products. They also wanted these landing pages to be optimized for better paid search rankings.

Lighthouse performance report
Screenshot of the web site’s Lighthouse scores for mobile: 100 performance, 100 accessibility, 93 best practices (thanks to a cross-site link), and 100 SEO

This project did not require a lot of JavaScript, as it was created in Laravel 8 using Jetstream & Livewire. Components native to that implementation allowed for an easy form submission and freed up time to work on custom routing and styles.

Custom routing image
Screenshot of code in the routes/web.php file from the Laravel install, with some custom routing functions and a fallback for the contact form submission

One of the most custom portions is the controller, which implements a model that utilizes accessors and mutators for actual and computed properties so that values can be easily retrieved and set.

Controller instance for one site
Screenshot of controller code, showcasing an srcset and a custom accessor/mutator for a model property

The styling leverages SASS compilation with Laravel Mix. And the styling was achieved with mixins so that future sites added to the project will have a baseline to work from.

SASS mixins for a button and screen reader text
Screenshot of code for SASS (really SCSS) mixins defining a standard button and screen reader text styles

Since the goal of the site is to get the customer to call, the “mobile” version of the web site prominently features the call button without sacrificing the hero image or call-to-action copy.

Small device view
Screenshot of the web site from a mobile device, showing that the call button is prominent