The Making of SPIF.in: Building a Leaner Public Health Platform

Adostrophe is primarily a Matterport 3D scanning agency, but we also handle digital platform engineering and technical SEO. Recently, we completed a rebuild of the website for the Suicide Prevention India Foundation (SPIF). Because the platform provides critical public health resources—frequently accessed via mobile devices on varying network speeds—the architecture required a specific, lightweight approach. This post documents the technical decisions we made to improve the site's speed, reliability, and accessibility.

Transitioning to a Static Architecture

The previous site ran on a content management system. While CMS platforms are standard and useful for many organizations, they rely on a request cycle: a visitor arrives, the server queries a database, runs backend code, and returns the HTML. On shared hosting, this process takes time and introduces blocking. When a user needs immediate access to a helpline or resource, any delay is counterproductive.

We replaced the CMS with a static architecture. The site now runs strictly on HTML, CSS, and vanilla JavaScript. We pre-build the files and deploy them directly to Azure Static Web Apps, using credits provided through the Microsoft Founders Hub.

Without a database to query or backend code to execute, the server simply hands the browser a finished file. Total Blocking Time is effectively eliminated. The static approach also narrows the security surface area by removing administration panels and plugins.

Building for Mobile Networks

A significant portion of web traffic in India occurs on mobile networks, where speeds can drop depending on location or building structure. A site that only performs well on a broadband connection is not fully accessible.

We wrote the CSS using a mobile-first approach. The layout for smaller screens is written as the default baseline, and adjustments for desktop screens are added via min-width media queries. This prevents mobile browsers from wasting processing power parsing desktop rules that they will immediately have to override.

We also decoupled the HTML, CSS, and JavaScript. The HTML contains the core content and structure. If a user's network connection drops a JavaScript file, the site remains functional. The navigation, the text, and the contact numbers are fully accessible without relying on scripts to execute. Assets are optimized to conserve bandwidth: images use WebP formatting, off-screen images use lazy loading, and critical assets are fetched early in the page load.

System-Aware Dark Mode

If someone is searching for support late at night, a bright white screen can be visually jarring. We wanted the site to respect the user's environment automatically.

We included a small inline script in the document head that checks the operating system's color scheme preference and localStorage. If dark mode is preferred, the script updates the CSS variables before the page renders. The background shifts to a dark charcoal, text becomes off-white, and the accent colors adjust for legibility. There is no bright flash while the page loads, and the user does not have to search for a toggle switch.

Analytics via Cloudflare Zaraz

We needed to retain Google Analytics 4 (GA4) for reporting, but loading the standard tracking scripts in the browser impacts performance and consumes bandwidth.

We moved the tracking to Cloudflare Zaraz, which handles analytics processing at the network edge. Instead of downloading a heavy JavaScript library from Google, the user's device sends a small signal to Cloudflare, and Cloudflare passes the data to GA4. This keeps the client-side code light, speeds up the page, and improves privacy since user IP addresses are not forwarded directly.

Supporting Google Ad Grants and SEO

SPIF.in utilizes a Google Ad Grant to ensure their resources appear prominently in search results. Google requires fast, secure landing pages to maintain grant compliance. The static architecture and edge delivery help ensure the site consistently meets these technical requirements.

The site also carries a long history of backlinks from news articles and reference sites. To ensure these links continued to function, we mapped the old URLs and set up a declarative redirect matrix in Azure's configuration file. Redirects are processed at the server level, preserving the SEO value of the links without relying on application-level plugins.

Updating Visuals and Document Formats

We replaced the existing stock photography with vector illustrations. Using custom vectors prevents search engines from flagging images as duplicate content, and it provides a consistent, neutral visual tone that scales without losing quality.

We also converted several clinical toolkits from PDFs into HTML pages. PDFs are difficult to navigate on mobile phones and are not easily indexed by search engines. The new HTML pages are fully responsive and accessible to screen readers. For users who need a physical document, we added a CSS print stylesheet so the page can be printed or saved cleanly, without the site navigation.

Integrating Razorpay

To streamline the donation process, we will be integrating the Razorpay API directly into the site. The entire transaction remains on the SPIF domain, supporting UPI, cards, and wallets. Keeping the process native reduces friction for users who wish to contribute.

Ongoing Platform Management

Web development requires steady maintenance. We are continuing to work with the SPIF team to publish updates, monitor analytics, and manage their Ad Grant campaigns. The practices we used here—static hosting, mobile-first CSS, and edge delivery—provide a solid baseline for any organization where reliable access to information is the priority.