Building for the Liberian citizen, not the average user.

Enforce WebP format for all imagesCritical

For security reasons, we want to minimize the use of plugin-based image optimization. We recommend using Tinify image compression before uploading images to WordPress. WebP format as it is 25–35% smaller than JPEG. If MUST use plugin, install Imagify or ShortPixel to auto-convert on upload. Never accept raw PNGs or uncompressed JPEGs.

Set a maximum image dimension policy: 800 px wide

No decorative banners wider than 800 px. Government information sites don't need large hero images. Size images to their display dimensions, not beyond.

Enable lazy loading on all images in Bricks

Every Image element → set the Loading attribute to Lazy in the Bricks panel. This is native in Bricks and defers off-screen images until needed.

Add explicit width and height to every image element

Prevents Cumulative Layout Shift (CLS). Set in the Bricks Image element settings. Required for passing Core Web Vitals — without it, the page jumps as images load.

Write descriptive alt text for every imageCritical

Required for WCAG 2.1 AA. In Bricks Image element, always fill the Alt Text field. Decorative images that convey no information should use empty alt="".

Replace decorative images with CSS where possible

Solid colour backgrounds, borders, and dividers — use Bricks styling panels, not image files. Each avoided image saves KBs and a network request.

Remove auto-playing or background video entirelyCritical

Background video can add 3–10 MB. On a 3G connection where citizens pay per MB, this is a direct exclusion mechanism. Banned on all citizen-facing pages.

Design all layouts starting from mobile (320 px)Critical

In Bricks, start every template at the mobile breakpoint first. 87% of Liberian internet users are on mobile. Desktop is the enhancement, not the starting point.

Set minimum tap target size to 44×44 pxCritical

All buttons, links, and nav items must meet 44×44 px minimum. Set min-height:44px in Bricks styling. Required for WCAG 2.5.5 and essential for low-cost touchscreens.

Use single-column vertical card layouts on mobile

No side-by-side columns on viewports under 600 px. Set Bricks container direction to Column at the mobile breakpoint. Horizontal layouts require thumb-stretch or horizontal scroll.

Remove all hover-only interactions

Dropdown menus triggered only on :hover are inaccessible on touch devices. Replace with Bricks click/toggle interactions. Touch devices have no hover state.

Set body text minimum font size to 16 pxCritical

16 px prevents iOS Safari from auto-zooming on input focus. Set in Bricks Global Settings → Default Typography. Smaller text is also harder to read on low-resolution screens.

Verify no horizontal scroll at 320 px viewport width

Test every template at 320 px in Chrome DevTools. Fix overflow using overflow:hidden on containers in Bricks where needed. Horizontal scrolling is a critical failure on small phones.

Use system fonts or a single WOFF2-subsetted fontCritical

A system font stack costs 0 KB. If using a custom font, subset to Latin characters only and use WOFF2 format. Load maximum one custom font family — not two.

Test with Chrome DevTools Slow 3G throttling before publishing

Primary content must load within 3 seconds on Slow 3G. This is the publish gate. If it fails this test, it fails most Liberian citizens. Run a Lighthouse audit after every major change.

Colour contrast ratio minimum 4.5:1 for body textCritical

Use the WebAIM Contrast Checker. Test all text/background combinations set in Bricks Global Typography and any custom brand colours used on the site.

Colour contrast ratio minimum 3:1 for large text and UI components

Buttons, icons, and borders must achieve 3:1 against their background. Check all government brand colours — red and blue are common contrast failures.

Add a visible keyboard focus style to all interactive elementsCritical

In Bricks Global CSS, define a :focus-visible outline (e.g., 3px solid #002868). Never set outline:none without providing a visible replacement. Keyboard users are entirely excluded without this.

All form fields must have a visible, persistent label

Placeholder text disappears when the user types. Use Bricks Form element's Label field. Every input requires a persistent label that remains visible at all times.

Set the page language attribute to 'en'

Set site language in WordPress General Settings. Bricks renders <html lang="en"> automatically. Screen readers require this to apply correct pronunciation rules.

Enforce a correct heading hierarchy — H1 → H2 → H3, no skipping

One H1 per page. In Bricks, set the HTML tag explicitly in the heading element dropdown — do not rely on visual size to determine hierarchy. Skipping levels breaks screen reader navigation.

Add a skip-to-main-content link as the first focusable element

Add a hidden "Skip to main content" anchor at the top of the Bricks header template. Visible on keyboard focus. Required for keyboard and screen reader users navigating through the header repeatedly.

All icon-only buttons must have an aria-labelCritical

In Bricks, use the Accessibility panel on icon buttons to add an aria-label. An icon with no text label is completely invisible to screen reader users.

Test every page template with a screen reader

Use NVDA + Firefox on Windows or VoiceOver on iOS. Verify reading order matches visual order. Run this test before launch and after major template changes — not once at the end of the project.

Adopt a plain language content policy: Grade 5 reading levelCritical

Test all copy with the Hemingway Editor. No sentence over 20 words. No jargon without immediate explanation. Adult English literacy in Liberia is 48% — complex language is an exclusion mechanism.

Show a visible "Last updated" date on every content page

Add a dynamic date field in Bricks using {post:modified}. Absent or stale dates are the fastest way to collapse citizen trust in a government site. Transparency is a design requirement.

Present service steps as numbered visual sequences, not paragraphs

Use Bricks List or custom step containers with numbers and icons. Citizens follow sequential steps; they do not read dense paragraphs looking for action items.

Place the primary action (phone number, service link) above the fold

Citizens on limited data cannot afford to scroll. The phone number or primary CTA must be visible without scrolling on a 320 px screen. A page that buries the contact number has failed the user.

Write all link text descriptively — no "Click here" or "Read more"

Required for WCAG 2.4.6. Screen reader users navigate by scanning links in isolation. "Download birth certificate form (PDF, 120 KB)" communicates; "Click here" communicates nothing.

Add a visible site-wide search function in the global header

Low-literacy users and first-time visitors depend on search to navigate. Place it in the global Bricks header template so it is consistently accessible from every page.

Show a persistent government identity banner on every pageCritical

Include the Liberian flag, "An official website of [Ministry Name]", and the .gov.lr domain in a Bricks global header template. Liberia ranks 177/193 on the UN E-Government Index — trust must be actively earned.

Enforce HTTPS sitewide and verify the SSL certificate is active

Ensure SSL is active and redirect all HTTP to HTTPS. Set both WordPress URL fields in General Settings to https://. A browser security warning on a government site destroys credibility instantly.

Add a collapsible "How to know this is official" disclosure

A small expandable banner explaining the .gov.lr domain as the trusted source. Many first-time users have never seen an official government site and cannot distinguish it from an unofficial one.

Display ministry contact information in the global footerCritical

Physical address, phone number, and official email — visible in the Bricks global footer on every page. Never hide or omit contact information on a government service site.

Remove all third-party trackers and social sharing scripts

Facebook Pixel, Google Analytics GA4, and social sharing plugins each add 50–300 KB and a third-party DNS lookup. Remove all that are not actively used and audited.

Display minister or director name and role on the About page

Named accountability builds credibility in a low-trust environment. Avoid anonymous institutional language — "The Ministry states…" without a named, accountable official signals opacity, not authority.

Disable Font Awesome if not usedCritical

Font Awesome adds approximately 500 KB. In Bricks Settings → Builder → Icons, disable it. Use inline SVGs from a free set (Heroicons, Phosphor) instead. This single change can halve a page's total weight.

Use Bricks Query Loop for all dynamic content

Query Loops pull from Custom Post Types without additional plugins. Use for news, jobs, publications, and service listings. Avoids heavy third-party plugin overhead for repeating content patterns.

Create global templates for Header, Footer, and Page layouts

Government design consistency requires that navigation, branding, and contact information are identical across all ministry pages. Global templates make site-wide updates instant and error-proof.

Set content container max-width to 720 px

Narrow line lengths significantly improve readability on both mobile and desktop. Long line lengths (full-width on a 1440 px screen) require greater eye tracking effort and reduce comprehension.

Verify Bricks builder scripts are excluded from the production frontend

Bricks loads builder-interface scripts on the frontend in development mode. Confirm these are not loading on the live site. Check Network tab in DevTools for bricks-builder JS files.

Assign all design values to Bricks Global Variables

In Bricks → Global Settings → Variables, define all brand colours, spacing values, and typography scales. Changing a brand colour should update the entire site from one place — not require hunting through 80 templates.

Disable Bricks' built-in lightbox if not using a gallery

If the site has no image gallery or lightbox feature, disable this in Bricks Settings. The lightbox JS loads on every page by default whether or not any page actually uses it.

Run a Lighthouse audit and fix all issues before launch

Target scores: Performance 90+, Accessibility 100, Best Practices 100, SEO 90+. In Chrome DevTools → Lighthouse, run in mobile mode with simulated throttling. This is the final gate before any page goes live.