Template Development

Technical Description

The base template was crafted using semantic HTML5 structure combined with modern design practices. It includes:

• Semantic elements: <header>, <main>, <footer>, and <section>
• Responsive navigation bar using Flexbox for alignment and mobile-first media queries for layout adjustments
• Mobile menu toggle implemented via JavaScript and controlled with CSS visibility logic
• Glassmorphism effects applied to the header and footer using backdrop-filter and rgba() transparency
• Scroll-to-top feature with smooth scrolling and animated icon interaction
• Custom font integration via Google Fonts and @font-face (e.g., "Astro" and "Helvetica Neue")

Accessibility

Accessibility considerations included:

• ARIA labels applied to interactive buttons (e.g., scroll-to-top)
• Keyboard-accessible navigation through proper HTML structure
• Clear visual hierarchy using semantic tags and contrasting text colors
• Font sizes and spacing optimized for readability across screen sizes

Validation & Page Links

Validation Report | View Template Page

Home Page

Technical Description

The home page was designed to create a modern, immersive user experience centered around climate action. It includes the following implementations:

• Hero section with full-screen autoplay background video using <video> and object-fit: cover
• Animated title and subtitle with text shadows and linear-gradient effects via -webkit-background-clip
• Fixed-position SDG badge image placed with precision using absolute positioning
• Dynamic call-to-action bar with blurred background and soft drop shadows for a glassmorphism effect
• “About SDG 13” section with responsive two-column layout using CSS Grid and embedded YouTube video in a styled container
• Mission block styled with custom typography and centered layout inside a reusable .block-section component
• Quote-style callout with centered content and thematic colors
• Content Hub with 4 interactive cards using hover overlays, animated fade-in (via Intersection Observer), and responsive design

Accessibility

Accessibility practices included:

• Meaningful alt text for all images and decorative elements
• Text contrast and font sizes compliant with WCAG 2.1 AA guidelines
• Keyboard focusability and smooth navigation through sections
• ARIA label on the scroll-to-top button for assistive technologies

Validation & Page Links

Validation Report | View Home Page

Table Page

Technical Description

The climate data page presents an interactive and accessible data table visualizing key environmental metrics across multiple countries. This implementation includes:

• Scrollable responsive table built inside a flex container with overflow-x: auto for horizontal navigation on smaller devices
• Sticky headers and sticky first column using position: sticky for enhanced readability during horizontal scrolling
• Glassmorphism effects applied to the scroll container and table cells using backdrop-filter and semi-transparent backgrounds
• Alternating row styling with nth-child(even) and hover highlights for better UX
• Flag images with country names inside a flexbox layout for visual clarity
• Table links styled with different states (hover, visited, active) and external data source citation
• Custom call-to-action section below the table encouraging user participation

Accessibility

Accessibility features ensured that the table and surrounding layout are user-friendly and compliant:

• ARIA labels on the scroll area and the table to improve screen reader compatibility
• Descriptive alt text on all country flags
• Clear visual contrast for header and cell content to meet WCAG 2.1 AA color contrast standards
• Semantic <table>, <thead>, and <tbody> structure with appropriate <th> usage

Validation & Page Links

Validation Report | View Table Page

Content Page

Technical Description

The content page delivers structured climate insights using responsive sections, media, and interactive elements. It features:

• Hero section with heading and responsive image
• Fixed sidebar for anchor-based navigation
• Embedded YouTube video and image grid
• Typography with custom fonts like Helvetica Neue, Roboto

Accessibility & Responsiveness

• Alt text, semantic tags, and WCAG-compliant contrast
• Scroll-to-top button with aria-label
• Responsive grid layout with mobile-first design
• Table has responsive design on small screens

Validation & Page Links

Validation Report | View Content Page

Challenges & Lessons Learned

Challenges Faced

• Responsive Layout Issues: Ensuring consistency across all devices was tricky, especially with sidebars and videos.
  Solved using media queries, CSS Grid/Flexbox, and wrapper containers.
• Sticky Sidebar Navigation: The sidebar overlapped content and broke anchor navigation.
  Fixed with position: sticky setting it sticky.
• Glassmorphism Compatibility: Some browsers didn’t render backdrop-filter correctly.
  Added fallback styles and -webkit-backdrop-filter prefixes.
• Table Overflow on Mobile: Tables stretched beyond screen width on small devices.
  Solved using overflow-x: auto inside a responsive wrapper.

Lessons Learned

• Mobile-first design simplifies responsive adjustments later.
• CSS Grid and Flexbox provide clean, scalable layout structures.
• Accessibility (alt text, contrast, semantic tags) enhances user experience.
• Testing across browsers and devices catches layout bugs early.

Compliance

The pages adhere to Janet web publishing standards, focusing on accessibility, privacy, and responsible content delivery.

• Semantic HTML, alt text, keyboard support, and responsive design ensure WCAG 2.1 accessibility alignment.
• No personal data is collected, maintaining GDPR compliance and respecting user privacy.
• All content is educational and suitable for public academic contexts per Janet’s Acceptable Use Policy.
• Secure code practices avoid risky scripts and third-party tracking tools.
• Fonts, icons, and media are sourced with proper licensing via official CDNs.

References