"Brant Lake Paddle Tours"
Website Case Study
Overview
Description
The project involved the design and development of a ten-page customized WordPress website for "Brant Lake Paddle Tours," a fictitious paddle tour business on Brant Lake, New York in the Adirondacks.
Goals
Develop a small business website that incorporates a more simplified version of an enterprise WordPress architecture which involves template rendering. This project mainly established a workflow which uses the Twig Template Rendering Engine with the Timber plugin for more efficient data retrieval through Advanced Custom Fields (ACF) For this website, I am incorporated a design system that utilizes Foundation for the grid system and many UI components, a custom utilities layer for spacing and padding based on Tailwind-style syntax (ie. u-py-4, u-m-3) and Alpine.js and light jQuery being used for interactivity.
Use of Generative AI
Many generative AI tools were used to help assist with the creation of content throughout this project. A substantial portion of the images were developed with Adobe Firefly using reference images from my own personal photography of Brant Lake. Most of the text was created using multiple LLMs such as ChatGPT and Microsoft CoPilot.
Project Scope
Desktop/Mobile Website, Branding
Key Features
- Customized WordPress theme using Twig template rendering engine
- Foundation 6 responsive grid system
- Custom utility CSS layer inspired by Tailwind syntax
- Alpine.js powered UI interactions
- jQuery-based scrolling animations and interactions
- Optimized image loading with loading="lazy"
- Structured data schema (JSON-LD) for AI search optimization
Role
Web Developer (Front-End Design/Programming)
(Lifelike images that were created using Adobe Firefly, an AI image generator, which appear on the media wall section of the "Brant Lake Paddle Tours" website.)
AI Search Optimization
This project also included the use of Answer Engine Optimization (AEO) which involves structuring and formatting content for AI-based tools. A structured data schema was implemented in JSON-LD format (JavaScript Object Notation for Linked Data) to help LLM-based chatbots (ChatGPT, Gemin, Copilot), as well as voice assistants (Apple Siri, Amazon Alexa, Google Assistant) better understand and respond to user queries about information regarding Brant Lake Paddle Tours.
Information Architecture (Sitemap)
Prior to development, a conceptual diagram was created in Figma of the content hierarchy of the "Brant Lake Paddle Tours" website.
Design Process
Logo/Typography
A custom logo for "Brant Lake Paddle Tours" was created entirely manually in Adobe Illustrator CC.
Color Palette
#1e1e1e
#061e2e
#035559
#155868
#1f8388
#00b7aa
#fdfdeb
During testing, the text-to-background color contrast ratios met AAA conformance levels, the highest rating under the Web Content Accessibility Guidelines 2.1 (WCAG 2.1) criteria which is often used to determine ADA compliance.
User Interface Design
(The home page layout of the "Brant Lake Paddle Tours" website in both dark and light modes which displays based on the settings of the user's operating system.)
Challenge
Since the late 2010s, many modern WordPress sites have been built using drag-and-drop visual page builders, such as Elementor, Divi, WPBakery and the native Gutenberg block library. While page builders may be appropriate in certain circumstances, such as rapid prototyping, they often are slow, overbloated and can be difficult to maintain. Furthermore, page builders usually place substantial limitations on front-end developers who must design interfaces around the various constraints of the specific builder being used.
Solution
This project demonstrates the advantages of implementing Twig Template Rendering in a WordPress environment with its more
modular approach that separates the front-end presentation layer from the back-end architecture. By using Twig, a staple of many advanced CMS platforms
such as Drupal, I was able to make an almost pixel-perfect translation of my static “Brant Lake Paddle Tours” hand-coded prototype to WordPress.
In addition, Twig’s efficient data retrieval approach allowed for me to create a series of standardized fields using the Advanced Custom Fields (ACF) plugin
without having to write a single line of PHP code.
To further enhance performance, the “Brant Lake Paddle Tours” website uses a more traditional WordPress client-side editing approach which combines the
Classic Editor with data entry fields that are designated in ACF. This method allows users to modify content in a more comfortable and familiar
Microsoft Word-style setting without having to worry about breaking pages and other site content in a complicated visual page builder.
Results
This project produced a modular and highly customizable WordPress small business site that avoids the bloat and overhead of many of the most popular visual page builders.
View ProjectVideo Presentation
Appendix
The formatted JSON-LD schema organizes structured data for Brant Lake Paddle Tours (ie. hours, location, phone, email, description, FAQ) to help AI-based tools develop direct responses to queries.
{
"@context": "https://schema.org",
"@graph": [
{
"@id": "https://www.colinneal.com/brantLakePaddleTours/#organization",
"@type": "Organization",
"name": "Brant Lake Paddle Tours",
"url": "https://www.colinneal.com/brantLakePaddleTours/",
"logo": "https://www.colinneal.com/brantLakePaddleTours/assets/images/logo.png",
"sameAs": [
"https://www.facebook.com/brantlakepaddletours",
"https://www.instagram.com/brantlakepaddletours",
"https://www.x.com/brantlakepaddletours",
"https://www.tiktok.com/@brantlakepaddletours",
"https://brantlakepaddletours.bsky.social"
]
},
{
"@id": "https://www.colinneal.com/brantLakePaddleTours/#localbusiness",
"@type": "KayakRentalToursBusiness",
"name": "Brant Lake Paddle Tours",
"description": "Located in Brant Lake, New York, our kayak and canoe tours offer a relaxed,
immersive way to connect with nature. Discover the quiet beauty of Brant Lake
from a new perspective.",
"image": "https://www.colinneal.com/brantLakePaddleTours/assets/images/logo.png",
"logo": "https://www.colinneal.com/brantLakePaddleTours/assets/images/logo.png",
"url": "https://www.colinneal.com/brantLakePaddleTours/",
"telephone": "518-761-5555",
"email": "hello@brantlakepaddletours.com",
"priceRange": "$$",
"knowsAbout": [
"Kayaking",
"Paddleboarding",
"Water Sports",
"Nature Tours",
"Outdoor Adventures",
"Scenic Tours",
"Adirondack Tours"
],
"brand": {
"@id": "https://www.colinneal.com/brantLakePaddleTours/#organization"
},
"contactPoint": {
"@type": "ContactPoint",
"telephone": "518-494-5555",
"contactType": "Reservations",
"availableLanguage": "English"
},
"areaServed": [
{
"@type": "Town",
"name": "Brant Lake"
},
{
"@type": "Town",
"name": "Horicon"
},
{
"@type": "AdministrativeArea",
"name": "Warren County"
}
],
"geo": {
"@type": "GeoCoordinates",
"latitude": "43.6989",
"longitude": "-73.7205"
},
"openingHoursSpecification": [
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday"
],
"opens": "09:00",
"closes": "20:00"
},
],
"address": {
"@type": "PostalAddress",
"streetAddress": "Brant Lake Paddle Tours",
"addressLocality": "Brant Lake",
"addressRegion": "NY",
"postalCode": "12810",
"addressCountry": "US"
},
"hasOfferCatalog": {
"@type": "OfferCatalog",
"name": "Kayak and Canoe Tours",
"itemListElement": [
{
"@type": "Offer",
"itemOffered": {
"@id": "https://www.colinneal.com/brantLakePaddleTours/sunrise-serenity-tour.html#service"
}
},
{
"@type": "Offer",
"itemOffered": {
"@id": "https://www.colinneal.com/brantLakePaddleTours/morning-calm-tour.html#service"
}
},
{
"@type": "Offer",
"itemOffered": {
"@id": "https://www.colinneal.com/brantLakePaddleTours/afternoon-explorer-tour.html#service"
}
},
{
"@type": "Offer",
"itemOffered": {
"@id": "https://www.colinneal.com/brantLakePaddleTours/sunset-paddle-tour.html#service"
}
},
{
"@type": "Offer",
"itemOffered": {
"@id": "https://www.colinneal.com/brantLakePaddleTours/twilight-glow-tour.html#service"
}
}
]
}
},
{
"@id": "https://www.colinneal.com/brantLakePaddleTours/sunrise-serenity-tour.html#service",
"@type": "Service",
"name": "Sunrise Serenity Tour",
"serviceType": "Kayak Tour",
"description": "Watch the Adirondacks wake with the first light of day.",
"provider": {
"@id": "https://www.colinneal.com/brantLakePaddleTours/#localbusiness"
},
"url": "https://www.colinneal.com/brantLakePaddleTours/sunrise-serenity-tour.html"
},
{
"@id": "https://www.colinneal.com/brantLakePaddleTours/morning-calm-tour.html#service",
"@type": "Service",
"name": "Morning Calm Tour",
"serviceType": "Kayak Tour",
"description": "A gentle, refreshing paddle for all ages.",
"provider": {
"@id": "https://www.colinneal.com/brantLakePaddleTours/#localbusiness"
},
"url": "https://www.colinneal.com/brantLakePaddleTours/morning-calm-tour.html"
},
{
"@id": "https://www.colinneal.com/brantLakePaddleTours/afternoon-explorer-tour.html#service",
"@type": "Service",
"name": "Afternoon Explorer Tour",
"serviceType": "Kayak Tour",
"description": "Adventure, scenery and Adirondack discovery.",
"provider": {
"@id": "https://www.colinneal.com/brantLakePaddleTours/#localbusiness"
},
"url": "https://www.colinneal.com/brantLakePaddleTours/afternoon-explorer-tour.html"
},
{
"@id": "https://www.colinneal.com/brantLakePaddleTours/sunset-paddle-tour.html#service",
"@type": "Service",
"name": "Sunset Paddle Tour",
"serviceType": "Kayak Tour",
"description": "Golden-hour magic on Brant Lake.",
"provider": {
"@id": "https://www.colinneal.com/brantLakePaddleTours/#localbusiness"
},
"url": "https://www.colinneal.com/brantLakePaddleTours/sunset-paddle-tour.html"
},
{
"@id": "https://www.colinneal.com/brantLakePaddleTours/twilight-glow-tour.html#service",
"@type": "Service",
"name": "Twilight Glow Tour",
"serviceType": "Kayak Tour",
"description": "A peaceful, dreamlike padle as day fades into night.",
"provider": {
"@id": "https://www.colinneal.com/brantLakePaddleTours/#localbusiness"
},
"url": "https://www.colinneal.com/brantLakePaddleTours/twilight-glow-tour.html"
},
{
"@id": "https://www.colinneal.com/brantLakePaddleTours/#website",
"@type": "WebSite",
"url": "https://www.colinneal.com/brantLakePaddleTours",
"name": "Brant Lake Paddle Tours - Brant Lake, New York",
"publisher": {
"@id": "https://www.colinneal.com/brantLakePaddleTours/#organization"
}
},
{
"@id": "https://www.colinneal.com/brantLakePaddleTours/#webpage",
"@type": "WebPage",
"url": "https://www.colinneal.com/brantLakePaddleTours/",
"name": "Brant Lake Paddle Tours - Brant Lake, New York",
"isPartOf": {
"@id": "https://www.colinneal.com/brantLakePaddleTours/#website"
},
"mainEntity": {
"@id": "https://www.colinneal.com/brantLakePaddleTours/#localbusiness"
}
},
{
"@id": "https://www.colinneal.com/brantLakePaddleTours/#faq",
"@type": "FAQPage",
"isPartOf": {
"@id": "https://www.colinneal.com/brantLakePaddleTours/#webpage"
},
"mainEntity": [
{
"@type": "Question",
"name": "What should I bring?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Comfortable clothing, closed-toe shoes, and a sense of
adventure. We provide all necessary safety equipment."
}
},
{
"@type": "Question",
"name": "Does Brant Lake Paddle Tours provide equipment?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes, we provide all necessary safety equipment
including life jackets, paddles, and boats."
}
},
{
"@type": "Question",
"name": "Do your paddle tours operate in all weather conditions?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Paddle tours operate in most weather conditions, but
safety is our top priority. We may adjust schedules or cancel tours
in extreme weather."
}
}
]
}
]
}