Matthew Boyles Media Website Design Hollidaysurg, Altoona PA Logo

About the
Project

The Build: Static HTML with Custom CSS and Bootstrap 4 Grid

This website was built with a responsive grid layout based on a Bootstrap 4 CSS Grid system and eatures a minimalistic design with the focus on typography. I created custom card components with unique animations that highlight areas of the website that we wanted out the minimalistic layout and focus on the typography. PHP mailer is used for the contact forms. Custom job application multi-step forms. Custom age verification js popup. Detailed custom pull page navigation overlay with click to call and business hours.

  • Client
    Suger Run Brewing Company
  • Website
Sugar Run Brewing Company Website Design Matthew Boyles Media Website Design Altoona PA Website Design Duncansville PA Website Design Hollidaysbrug PA

Built for speed: No database and custom CMS to update content.

Built for SEO: Menu pages are hardcoded and help with searches.

The Purpose

The purpose of this website is to facilitate walk in traffic from prospective searches online for the appropriate types of food and drinks that Sugar Run Offers. To accomplish this, the website was built as a static website that will load extremely fast on mobile and desktop browsers. Each page is completely maximized for SEO with extra special attention paid to the meta tags, keywords, and clean error free code. SEO is only focusing on local searches and the website is set up optimized for Sugar Run Brewing Company to capitalize on with their local marketing efforts.

Once a user lands on the website they are funneled to the food and drink menus and then to the location page where they have access to quick contact info and a map that can be clicked to instantly get directions to the new brewpub. This website is designed to give the user the exact info they need and access to quickly contact the business. The minimalistic design enhanced the process and will benefit the user experience by keeping clear of slow loading and distracting layouts often seen on brewery websites across the country.

I used a Sass customized Bootstrap 4 for the base css components and grid , and built on top of that with my own css variables and components. Bootstrap 4 is still my go to CSS for static front facing sites (unless there are specific features of bootstrap 5 that I need for a project). With the minimalistic design there were not many additional components added.

The navigation is a mobile only version that overlays the entire view when opened. 2 separate panels are used, one is 3/4 of the page and contains the nav links and a click to call button. The the other side slides in from the opposite end and is more transparent covering the remaining 1/4 page and contains a custo designed hours of operation card.