This project came together with the Jays Grille & Bar website, but ended up becoming a bit more complex in design and functionality.  Justin Abrams, the owner of both restaurants was very happy with the end result.

WordPress Website Design

The original design for Great Scotts Eatery didn’t really embody the 1950s theme that the owner, Justin Abrams, was looking for, so before we even began on conceptualizing the website design, we had a pretty good idea of a theme.

An added function that Justin requested was the split of the website into separate sections for each of his restaurants. This made things a bit more complex.

With the header design, I combined a number of images using the CSS background property. Considering since CSS3 allows you to stack background images, this helped a bit when I needed to revise the design and keep the elements consistent when the site switched to mobile.

great scotts website header

The images include a sunburst, a vector jukebox, a setting for the logo and three thin chrome bars all designed and manipulated within Photoshop. I also added a photo of a Cadillac to follow the restaurant’s retro theme.

As for the menu, I tried to put together a design that is reminiscent of the chrome detailing found on Cadillacs.

great scotts website menu

The rest of the visuals included a retro pattern for the background on both the home page and the sub-pages, and a few changes to the website’s CSS to alter the color scheme.

Since the website is using the Bones framework starter theme, perfecting the design was a bit more complex because the theme doesn’t rely on the customizer options offered for other themes.  I ended up having to arrange some of the elements using CSS so that the aesthetics looked right.

great scotts website landing page

WordPress Website Functions

Since the site needed to be split and the Bones theme doesn’t come with a built-in mobile menu, I had to create both of these functions.

Using a few PHP functions, I was able to make it so the site would use different visuals and menus depending on which section the visitor was on.

With the mobile menu, I managed to piece together a working model without using a plugin. The website also required an extensive application form for potential job applicants. I built this using Contact Form 7.

Conclusion & Optimization Report

This project saw some bumps in the road especially in attempting to figure out how to use PHP to change the visuals depending on the section someone was browsing, but it was good to be able to dig back into PHP and resolve the issue.

Optimizing the site wasn’t too much of a challenge. Because the Bones theme is very bare in terms of WordPress function, it was just a matter of making the script usage more efficient. We also ran the site through Cloudflare and ended up with a “B” pagespeed score. Though that’s not exactly where we want to be, the site still runs at 88%, making it only 2% away from an “A” in pagespeed.

GTmetrix-report-greatscottseatery.com-20160215T073527-x6DjKaLU

« | »