GTA High Glass | TYFSADIK

Home Projects Web Development GTA High Glass

2023 Web Development GitHub ↗

Overview

GTA High Glass is a professional multi-page website built for a glass and glazing contractor serving the Greater Toronto Area. The site communicates the company's range of services — residential window installation, commercial glazing, and emergency glass repair — through a structured services showcase, a filterable project gallery, and a quote request form that routes enquiries directly to the business inbox. The design system uses a corporate palette of blues and cool greys to evoke the precision and clarity associated with the glass trade. Both desktop and mobile users are fully supported through a mobile-first responsive layout, with particular attention paid to consistent gallery image proportions and hero section rendering on mobile Safari. The project demonstrates a complete brief-to-deployment workflow for a trade business with a strong local service area.

Architecture

graph TD subgraph Pages["Pages"] A["index.html
Hero · Services Summary · CTA"] B["gallery.html
Project Photo Gallery"] C["contact.html
Quote Request Form"] end subgraph Styles["Stylesheets"] D["style.css
Custom Properties · Components"] E["Responsive Breakpoints
@media min-width: 480 · 768 · 1024px"] end subgraph Assets["Static Assets"] F["Images — WebP + JPEG fallback
loading=lazy · aspect-ratio locked"] G["Icons — inline SVG"] end A --> D B --> D C --> D D --> E A --> F B --> F A --> G style A fill:#1a1a2e,stroke:#00d4ff,color:#e0e0e0 style B fill:#1a1a2e,stroke:#00d4ff,color:#e0e0e0 style C fill:#1a1a2e,stroke:#00d4ff,color:#e0e0e0 style D fill:#181818,stroke:#1e1e1e,color:#888 style E fill:#181818,stroke:#1e1e1e,color:#888 style F fill:#181818,stroke:#1e1e1e,color:#888 style G fill:#181818,stroke:#1e1e1e,color:#888

Tech Stack

HTML5 — Semantic elements including <article> for service cards, <figure>/<figcaption> for gallery images; loading="lazy" on all gallery <img> tags
CSS3 — CSS custom properties for the full design system; CSS Grid with auto-fill and minmax() for the gallery; Flexbox for navigation and service card rows
CSS aspect-ratio — Enforces uniform image proportions in the gallery grid across all viewport widths without JavaScript
Responsive Design — Mobile-first layout with breakpoints at 480 px, 768 px, and 1024 px; Safari-specific hero background fix via @media (hover: none)
Image Optimisation — Images compressed in Squoosh and served as WebP with <picture> + JPEG fallback for full browser compatibility

Build Process

Client Brief & Competitor Analysis

Documented services offered (residential glazing, commercial storefronts, emergency board-up, glass repair), identified the target audience (homeowners and commercial property managers in the GTA), and analysed three competitor sites to benchmark navigation patterns, service presentation hierarchy, and quote form placements before writing a single line of code.

Design System & Corporate Colour Palette

Selected a palette evoking glass and precision construction — slate blue for primary interactive elements, steel grey for surfaces, and white for content areas. All tokens were encoded as CSS custom properties so the three pages remain visually consistent without duplicated rules.

:root {
  --color-primary:   #1565c0;  /* corporate blue */
  --color-secondary: #546e7a;  /* steel grey */
  --color-surface:   #f5f7fa;
  --color-text:      #1c2a35;
  --font-heading:    'Roboto Condensed', sans-serif;
  --font-body:       'Roboto', sans-serif;
  --radius-card:     6px;
  --space-md:        1.5rem;
  --space-lg:        3rem;
}

Semantic HTML Structure

Service cards on index.html use <article class="service-card"> with an SVG icon, heading, and description — giving screen readers meaningful document structure. The gallery page uses <ul class="gallery-grid"> with <li><figure><img><figcaption> for full accessibility and image SEO. Explicit width and height attributes on every <img> prevent layout shift (CLS) during lazy load.

CSS Grid Gallery & Flexbox Navigation

The gallery uses auto-fill with minmax() so the column count responds to the viewport naturally — no breakpoints needed for the grid itself. Images use aspect-ratio: 4 / 3 with object-fit: cover to lock proportions regardless of source dimensions.

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.gallery-grid figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-card);
}

Image Optimisation & Lazy Loading

All images were compressed using Squoosh and exported as WebP. The <picture> element with a JPEG fallback ensures the optimised format is served to modern browsers while older ones receive a compatible file. The loading="lazy" attribute defers off-screen images, reducing initial page weight significantly.

<picture>
  <source srcset="images/project-01.webp" type="image/webp">
  <img src="images/project-01.jpg"
       alt="Commercial storefront glazing installation, GTA"
       loading="lazy" width="800" height="600">
</picture>

Quote Request Form & Deployment

The contact form collects name, phone, email, service type (select dropdown), and project description. HTML5 built-in validation attributes — required, type="email", pattern — provide a client-side validation layer before the form is submitted. A mailto: action opens the user's email client pre-populated. The finished site was deployed to GitHub Pages from the main branch.

Visitor Journey Flow

flowchart LR A["Visitor Arrives\nLanding Page"] --> B["Hero + Services\nOverview"] B --> C{"Visitor Intent"} C -->|"View past work"| D["gallery.html\nProject Photos"] C -->|"Learn about services"| E["Services Section\nDetailed Listings"] C -->|"Ready to enquire"| F["contact.html\nQuote Form"] D --> F E --> F F --> G["HTML5 Validation\nPasses"] G --> H["mailto: Opens\nEmail Client Pre-Filled"] H --> I["Quote Email\nDelivered to Business"] style A fill:#1a1a2e,stroke:#00d4ff,color:#e0e0e0 style B fill:#181818,stroke:#1e1e1e,color:#888 style C fill:#1a1a2e,stroke:#00d4ff,color:#e0e0e0 style D fill:#181818,stroke:#1e1e1e,color:#888 style E fill:#181818,stroke:#1e1e1e,color:#888 style F fill:#1a1a2e,stroke:#00d4ff,color:#e0e0e0 style G fill:#181818,stroke:#1e1e1e,color:#888 style H fill:#181818,stroke:#1e1e1e,color:#888 style I fill:#1a1a2e,stroke:#00ff88,color:#e0e0e0

Challenges & Solutions

Gallery Image Aspect Ratio Inconsistency. Client-supplied photos arrived in mixed portrait, landscape, and square orientations, making the gallery grid look ragged. The CSS aspect-ratio: 4 / 3 property combined with object-fit: cover enforced uniform cell dimensions without distorting any image. This modern one-property solution replaced a fragile padding-top percentage hack and required no JavaScript.

Hero Background on Mobile Safari. The hero section used background-attachment: fixed for a parallax effect — a known render bug on iOS Safari causes the image to appear blank or mispositioned. The fix uses a @media (hover: none) query to target touch devices and switches the attachment to scroll with background-size: cover; background-position: center, preserving the visual intent while eliminating the Safari issue entirely.

What I Learned

CSS Grid auto-fill with minmax() produces genuinely responsive layouts that require no media queries on the grid itself
The aspect-ratio CSS property is the correct modern solution for locking image dimensions — cleaner than padding-top hacks
background-attachment: fixed must be conditionally disabled on touch devices to avoid a long-standing iOS Safari rendering bug
Providing explicit width and height attributes on every <img> prevents cumulative layout shift even when images are lazy-loaded
The <picture> element with WebP source and JPEG fallback is the correct pattern for progressive image format adoption
A structured brief and competitor analysis phase surfaces content and layout requirements before implementation begins, reducing rework

HTML5 CSS3 Grid Flexbox Responsive Business Website