Dr J's Binding Protocol — Document 11

Website Development Standards

E-commerce platform requirements, performance benchmarks, SEO best practices, and consumer psychology principles.

Version 1.0 February 2026 Research-backed · Actionable · Measurable

Part 1 — E-Commerce Platform Standards

1.1 Google Shopping / Google Merchant Center
1.2 Amazon Marketplace
1.3 Walmart Marketplace
1.4 Facebook / Meta Commerce
1.5 Pinterest Shopping
1.6 Microsoft / Bing Shopping
1.7 Cross-Platform Standards (Images, Alt Text, Formats)

Part 2 — Web Performance Standards

2.1 Core Web Vitals (LCP, INP, CLS)
2.2 Google Lighthouse Scoring
2.3 GTmetrix & WebPageTest
2.4 Page Load & Server Response Targets
2.5 Image Optimization
2.6 CSS, JavaScript & Font Optimization
2.7 Caching & Compression
2.8 Mobile Performance
2.9 Accessibility (WCAG 2.1 AA)

Part 3 — SEO Standards

3.1 On-Page SEO (Title, Meta, Headings, URLs, Images)
3.2 Technical SEO (Sitemap, Robots, SSL, Schema, Open Graph)
3.3 E-Commerce Specific SEO
3.4 Content SEO
3.5 Local SEO
3.6 SEO Tools & Metrics

Part 4 — Consumer Psychology

4.1 Visual Psychology & First Impressions
4.2 Trust & Credibility Signals
4.3 Conversion Psychology
4.4 Product Presentation
4.5 Cognitive Load & UX
4.6 Mobile Psychology
4.7 Emotional Design & Brand Storytelling

Appendices

A. Quick Reference: Critical Thresholds
B. Pre-Launch Checklist
C. Sources & References

Part 1: E-Commerce Platform Standards

These standards ensure products can be listed, discovered, and sold across major e-commerce platforms. Each platform has specific technical requirements for product data, images, and page markup. Meeting the strictest requirements guarantees compatibility everywhere.

1.1 Google Shopping / Google Merchant Center

Product Feed Required Attributes

Attribute	Requirement	Limits
`id`	Unique product identifier	Max 50 characters
`title`	Product name	Max 150 characters (~70 display in ads)
`description`	Product description	Max 5,000 characters
`link`	Product landing page URL	Must match verified domain
`image_link`	Main product image URL	Must be crawlable, no placeholders
`price`	Product price with currency	Must match landing page price
`availability`	Stock status	`in_stock`, `out_of_stock`, `preorder`
`brand`	Brand name	Required for all branded products
`condition`	Product condition	`new`, `refurbished`, `used`

Image Specifications

Spec	Non-Apparel	Apparel
Minimum dimensions	100 x 100 px	250 x 250 px
Recommended	800 x 800 px+	800 x 800 px+
Max file size	16 MB	16 MB
Formats	JPEG, PNG, WebP	JPEG, PNG, WebP
Background	Pure white (#FFFFFF) strongly recommended
Product coverage	75-90% of image frame
Prohibited	Promotional text, watermarks, logos, borders on main image

Structured Data Requirements

Google requires JSON-LD structured data on product pages for rich results. Must be in server-rendered HTML (not client-side JavaScript injected).

Critical: Products with missing or incorrect GTINs have limited visibility. Custom/handmade products must set identifier_exists to false. As of October 2025, misleading pricing triggers immediate warnings or account suspension.

1.2 Amazon Marketplace

Product Title

Spec	Value
Maximum length	200 characters (including spaces)
Recommended	80 characters or fewer for mobile
Structure	Brand + Product Line + Material/Feature + Type + Color + Size
Prohibited	! $ ? _ { } ^ ~ \| — ALL CAPS — promotional phrases

Product Images

Spec	Main Image	Additional Images
Minimum	1,000 px longest side	1,000 px longest side
Recommended	2,000 x 2,000 px	2,000 x 2,000 px
Background	Pure white (RGB 255,255,255) — mandatory	Any (lifestyle allowed)
Product fill	85%+ of frame	No requirement
Max file size	10 MB	10 MB
Formats	JPEG, PNG, TIFF	JPEG, PNG, TIFF
Max count	1	8 (9 total)
WebP	Not supported

A+ Content Alt Text

Mandatory: Amazon A+ Content submissions are rejected without alt text. Limit: 100 characters per image. Must be unique per image. Amazon crawls A+ alt text for indexing — it directly affects discoverability.

Backend Keywords

Spec	Value
Standard limit	500 bytes (not characters)
Exceeding the limit	Amazon de-indexes the entire field
Separator	Spaces only (not commas or semicolons)

1.3 Walmart Marketplace

Listing Quality Score (LQS)

Walmart uses a 0-100% score across four pillars: Content & Discoverability, Offer, Ratings & Reviews, Post-Purchase Quality.

Target	Score
Minimum viable	50-60%
Competitive	80%+
Buy Box / Walmart Connect eligible	90%+

Key Requirements

Element	Specification
Product title	50-75 characters recommended; truncated beyond ~75
Images minimum	4 images required, at least 1 lifestyle/in-use
Image dimensions	1,000 x 1,000 px minimum; 2,000 x 2,000 px recommended
Image background	Pure white (RGB 255,255,255) for main image
Description	150+ words minimum
Formats	JPEG, PNG, BMP (no GIF)

1.4 Facebook / Meta Commerce

Element	Specification
Image minimum	500 x 500 px
Image recommended	1,024 x 1,024 px
Display format	1:1 (square) in Shops and ads
OG image for sharing	1,200 x 630 px minimum
Required OG tags	`og:title`, `og:type`, `og:image`, `og:url`
Meta Pixel events	`ViewContent`, `AddToCart`, `Purchase`, `InitiateCheckout`

1.5 Pinterest Shopping

Element	Specification
Rich Pins	Requires Open Graph or Schema.org Product markup
Optimal image	1,000 x 1,500 px (2:3 vertical — 67% more engagement)
Feed minimum image	75 x 75 px (800 x 800 px recommended)
Title max	500 characters
Description max	10,000 characters

1.6 Microsoft / Bing Shopping

Element	Specification
Feed format	Accepts Google Shopping format directly
Image minimum	220 x 220 px
UET Tag	Required on all pages; 50+ events needed for verification
Feed processing	Up to 3 business days (slower than Google)

1.7 Cross-Platform Standards

Universal Image Standard

Master Image Specification: Produce all product images at 2,000 x 2,000 px, JPEG format, pure white background (#FFFFFF). This satisfies the strictest requirements (Amazon, Walmart) and can be downscaled for every platform.

Image Format Compatibility

Format	Google	Amazon	Walmart	Meta	Pinterest	Bing
JPEG	Yes	Yes	Yes	Yes	Yes	Yes
PNG	Yes	Yes	Yes	Yes	Yes	Yes
WebP	Yes	No	No	No	No	No

Safest universal format: JPEG for photographs, PNG for graphics with transparency.

Alt Text Standards (All Platforms)

Platform	Character Limit	Notes
Amazon A+ Content	100 characters (mandatory)	Submissions rejected without it
Google / Bing (on-page)	80-125 characters	Affects Image Search ranking
General best practice	Under 125 characters	Screen reader attention limit

Alt Text Rules

Be specific and descriptive: "Patriot Chassis heavy duty axle truss for GM 14-bolt rear" — not "product image"
Include product-relevant keywords naturally, without stuffing
Write unique alt text for each image
Do NOT start with "Image of..." or "Picture of..." (screen readers announce it)
File names: Use hyphen-separated, lowercase, descriptive names (e.g., heavy-duty-axle-truss-gm-14-bolt.jpg)

Part 2: Web Performance Standards

Performance directly impacts search rankings, user experience, and conversions. A 0.1-second speed improvement yields an 8.4% increase in e-commerce conversions. These standards define measurable targets for every performance tool.

2.1 Core Web Vitals (Google Ranking Signal)

Core Web Vitals Thresholds (2025-2026)

Metric	Good	Needs Improvement	Poor
LCP (Largest Contentful Paint)	≤ 2.5 seconds	2.5 - 4.0 s	> 4.0 s
INP (Interaction to Next Paint)	≤ 200 ms	200 - 500 ms	> 500 ms
CLS (Cumulative Layout Shift)	≤ 0.1	0.1 - 0.25	> 0.25

INP replaced FID in March 2024. To pass: 75th percentile (p75) of visits must meet "Good" for all three metrics. Mobile scores are the primary ranking signal.

2.2 Google Lighthouse Scoring

Performance Score Weights

Metric	Weight	Good Threshold
Total Blocking Time (TBT)	30%	< 200 ms
Largest Contentful Paint (LCP)	25%	≤ 2.5 s
Cumulative Layout Shift (CLS)	25%	≤ 0.1
First Contentful Paint (FCP)	10%	≤ 1.8 s
Speed Index	10%	≤ 3.4 s

Score Ranges

Range	Rating	Target
90-100	Good (green)	Our standard
50-89	Needs Improvement (orange)	Minimum acceptable for launch
0-49	Poor (red)	Must not launch

Lighthouse SEO Audit (14 Checks)

Has <title> element
Has meta description
Images have [alt] attributes
Descriptive link text (not "click here")
Not blocked from indexing
Valid robots.txt
Valid rel=canonical
Valid hreflang
Successful HTTP status code
Has viewport meta tag
Legible font sizes (≥ 12px for ≥ 60% of text)
Tap targets ≥ 48x48 px with ≥ 8px spacing
Valid structured data
Crawlable links (<a> with href)

2.3 GTmetrix & WebPageTest

GTmetrix Grading

Grade = 70% Performance Score + 30% Structure Score. Target: Grade A (90-100).

Key Page Load Targets

Metric	Target	Acceptable	Poor
Full page load	< 2 seconds	2-3 seconds	> 3 seconds
First Contentful Paint	< 1.8 seconds	1.8-3.0 s	> 3.0 s
Time to Interactive	< 3.8 seconds	3.8-7.3 s	> 7.3 s
TTFB (Time to First Byte)	≤ 800 ms	800-1,800 ms	> 1,800 ms
Server response time	< 200 ms	200-600 ms	> 600 ms

2.4 Page Weight & Request Budgets

Budget	Target
Total page weight (ideal)	≤ 365 KB
Total page weight (practical)	< 1.5 MB
HTTP requests (excellent)	< 25
HTTP requests (good)	< 50
Mobile images total	< 500 KB

2.5 Image Optimization

Format Selection

Format	Use Case	Size vs JPEG	Browser Support
AVIF	Photos, complex images	50% smaller	93.8%
WebP	General purpose	25-35% smaller	95.3%
JPEG	Fallback	Baseline	100%
PNG	Transparency	Larger for photos	100%
SVG	Icons, logos	Resolution-independent	100%

Responsive Image Implementation

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" loading="lazy" decoding="async"
       width="800" height="600"
       srcset="image-480w.jpg 480w, image-768w.jpg 768w, image-1280w.jpg 1280w"
       sizes="(max-width: 768px) 100vw, 50vw">
</picture>

Lazy Loading Rules

DO lazy-load: below-the-fold images, galleries, blog images
DO NOT lazy-load: LCP image, above-the-fold visuals, critical UI icons
Always set explicit width and height to prevent CLS

2.6 CSS, JavaScript & Font Optimization

Technique	Purpose	Impact
Minification	Remove whitespace, comments	20-40% file size reduction
Critical CSS inlining	Inline above-fold CSS in `<head>`	Faster FCP/LCP
Defer/async JS	Non-blocking script loading	Reduces TBT
`font-display: swap`	Show system font, swap when loaded	Prevents FOIT
Preload critical fonts	`<link rel="preload">`	Faster text rendering
WOFF2 format	Best font compression	~30% smaller than WOFF
Self-host fonts	Avoid third-party latency	Eliminates DNS + connection time

2.7 Caching & Compression

Cache Headers

Resource Type	Cache-Control Header
Static assets (CSS, JS, images)	`public, max-age=31536000, immutable`
HTML documents	`no-cache` + ETag
API responses	`private, no-cache, max-age=0`

Compression

Algorithm	Compression	Use
Brotli	~70% reduction	Static assets (preferred)
Gzip	~65% reduction	Fallback / dynamic content

2.8 Mobile Performance

Responsive Breakpoints

Category	Range
Mobile	320px - 599px
Tablet	600px - 1023px
Desktop	1024px - 1919px
Large desktop	1920px+

Touch & Viewport Standards

Standard	Requirement
Touch target minimum	48 x 48 px with ≥ 8px spacing
Viewport meta tag	`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
Font size minimum	≥ 12px for ≥ 60% of text
Do NOT use	`maximum-scale=1.0` or `user-scalable=no` (blocks zooming)

2.9 Accessibility (WCAG 2.1 AA)

Color Contrast

Element	Minimum Ratio (AA)
Normal text (< 24px)	4.5:1
Large text (≥ 24px or ≥ 18.66px bold)	3:1
UI components, icons, borders	3:1
Focus indicators	3:1 against adjacent colors

Core Requirements

Keyboard navigation: All functionality available via keyboard; no keyboard traps
Semantic HTML: Use <nav>, <main>, <header>, <footer>, proper heading hierarchy
Alt text: Every <img> must have alt (empty for decorative images)
Form labels: All inputs must have associated <label> elements
Focus visible: Visible focus indicators on all interactive elements
Language: <html lang="en"> declared
Skip navigation: "Skip to main content" as first focusable element
Text resizing: Content readable at 200% zoom without horizontal scroll

Part 3: SEO Standards

3.1 On-Page SEO

Title Tag

Spec	Standard
Character limit	50-60 characters (~580px)
Keyword placement	Primary keyword in first 3-5 words
Format	`Primary Keyword - Secondary \| Brand Name`
Uniqueness	Every page must have a unique title

Meta Description

Spec	Standard
Desktop limit	150-160 characters (~920px)
Mobile safe zone	Front-load key info in first 120 characters
CTA inclusion	Include call-to-action ("Shop now", "Free shipping")
Uniqueness	Every page must have a unique description

Heading Hierarchy

Rule	Standard
H1 per page	Exactly 1, includes primary keyword
Hierarchy	H1 > H2 > H3 — never skip levels
H2s	Major sections / subtopics
H3s	Sub-sections within H2 blocks

URL Structure

Spec	Standard
Slug length	3-5 words (25-30 characters)
Total URL length	Under 60 characters
Separator	Hyphens only (never underscores)
Case	Always lowercase
Stop words	Remove "and", "the", "of"

Image SEO

Element	Standard
Alt text	Under 125 characters, descriptive, keyword in 1-2 per page
File names	Hyphen-separated, lowercase (e.g., `axle-truss-gm-14-bolt.jpg`)
Keyword stuffing	Only 1-2 images per page with target keyword in alt

Internal Linking

Spec	Standard
Link density	5-10 internal links per 2,000 words
Click depth	Important pages within 2-3 clicks from homepage
Anchor text	Descriptive, relevant to destination; avoid "click here"

3.2 Technical SEO

XML Sitemap

Spec	Standard
Max URLs per sitemap	50,000
Max file size	50 MB (uncompressed)
Required tags	`<urlset>`, `<url>`, `<loc>`
Include only	Indexable, canonical URLs (no noindex, no redirects)
Location	Referenced in `robots.txt`

robots.txt Template

User-agent: *
Allow: /
Disallow: /cart/
Disallow: /checkout/
Disallow: /account/
Disallow: /search?
Disallow: /admin/
Disallow: /*?sort=
Disallow: /*?filter=

Sitemap: https://example.com/sitemap.xml

SSL / HTTPS

Mandatory. HTTPS is a confirmed Google ranking signal. All pages, all subdomains. 301 redirect all HTTP to HTTPS. Zero mixed content tolerance.

Structured Data (Schema.org / JSON-LD)

Product Page Schema (Required)

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Product Name",
  "image": ["https://example.com/product.jpg"],
  "description": "Product description",
  "sku": "ABC123",
  "brand": { "@type": "Brand", "name": "Patriot Chassis" },
  "offers": {
    "@type": "Offer",
    "priceCurrency": "USD",
    "price": "99.99",
    "availability": "https://schema.org/InStock"
  }
}

Organization Schema (Homepage)

Include: name, url, logo, sameAs (social profiles), telephone, email, address.

BreadcrumbList Schema (All Product & Category Pages)

Sequential position numbers starting from 1. Absolute URLs. Breadcrumbs increase CTR by up to 30%.

LocalBusiness Schema (Business with Physical Location)

Include: address, geo coordinates, opening hours, phone, email, sameAs. Described as "no longer optional" in 2026.

Open Graph & Twitter Cards

<!-- Open Graph -->
<meta property="og:title" content="Product Name | Brand">
<meta property="og:description" content="Description under 200 chars">
<meta property="og:image" content="https://example.com/product.jpg">
<meta property="og:url" content="https://example.com/product/">
<meta property="og:type" content="product">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Product Name | Brand">
<meta name="twitter:image" content="https://example.com/product.jpg">

OG image: 1,200 x 630 px, JPEG or PNG, under 5 MB. Unique per page.

Canonical Tags

Every page gets a self-referencing canonical: <link rel="canonical" href="...">
Always use absolute URLs with protocol
One canonical per page only
Must point to a live, non-redirecting URL

301 Redirects & Site Migration

Rule	Standard
Link equity passed	90-99% via 301
Maximum chain length	2 hops
Keep redirects active	At least 1 year post-migration
Internal links	Update to new URLs directly

3.3 E-Commerce Specific SEO

Product Page Requirements

Product schema markup (JSON-LD) on every product page
Visible breadcrumb navigation with schema
Unique product description (300+ words for standard products)
Do NOT use Product schema on category pages

Category Page Requirements

One H1 with primary category keyword
150-300 words unique descriptive text
BreadcrumbList schema (not Product schema)
Internal links to subcategories and top products

Product Description Minimums

Product Type	Minimum Words
Simple / low-cost	125+
Standard	300+
Complex / high-cost	500+
Educational / comparison-needed	800-1,500

3.4 Content SEO

Element	Standard
Keyword density	1-2% (never above 3%)
Duplicate content	Every page must have substantially unique content
Long-tail keywords	Target 3+ word phrases (~70% of all searches)
User intent	Match content to intent: informational, commercial, transactional

3.5 Local SEO

NAP Consistency

95%+ consistency required across website, Google Business Profile, social profiles, directories, and schema markup. Even "St." vs "Street" can cause ranking demotions. Businesses with 95%+ NAP consistency rank 3.2 positions higher in Local Pack.

Google Business Profile

Complete every field
Choose most specific primary category
Upload 10+ high-quality photos (updated regularly)
Respond to ALL reviews
Post updates weekly

3.6 SEO Tools & Metrics

Google Analytics 4 — Key E-Commerce Events

Event	Trigger
`view_item_list`	User views category / product list
`view_item`	User views product detail page
`add_to_cart`	User adds product to cart
`begin_checkout`	User starts checkout
`purchase`	User completes purchase

Google Search Console — Monitor

Impressions, clicks, CTR, average position
Index coverage (pages indexed vs excluded)
Core Web Vitals (real user data)
Structured data validation errors
Crawl errors (404s, 500s)

Part 4: Consumer Psychology

Research-backed principles that drive purchase decisions, trust, and engagement. Every standard in this section is supported by published research.

4.1 Visual Psychology & First Impressions

The 50ms Rule: Users form credibility judgments about a website in 50 milliseconds (Lindgaard et al., 2006). 75% of credibility judgments are based on visual design alone (Stanford Web Credibility Project). Every page must pass this test.

Eye-Scanning Patterns

Pattern	When It Applies	Design Implication
F-Pattern	Text-heavy pages	Place key info in first 2 lines; front-load paragraphs
Z-Pattern	Visual/minimal pages	Logo top-left → CTA top-right → content bottom-left → CTA bottom-right

Color Psychology

Color	Association	Use
Blue	Trust, stability, professionalism	Headers, backgrounds, trust elements
Red	Urgency, energy, passion	CTAs, sale badges, accent color
Black	Luxury, power, premium	Premium brands, dark themes
Green	Safety, growth, eco-friendly	Success states, trust badges
White	Cleanliness, simplicity	White space for premium perception

White Space

White space around products and text increases perceived value by up to 300% (Iseki, 2025). Luxury brands use 40%+ white space. White space improves reading comprehension by 20% and directs attention to key elements.

4.2 Trust & Credibility Signals

Stanford Web Credibility Guidelines

Make it easy to verify information accuracy
Show real people behind the organization (photos, bios)
Highlight expertise and credentials
Show contact information on every page
Professional design quality correlates directly with trust
Keep content current (46% lose trust from outdated/incorrect info)

Trust Signals Implementation

Signal	Impact	Placement
Customer reviews	Up to 270% conversion increase	Product pages, near CTAs
Trust badges (SSL, guarantees)	Up to 32% sales increase	Near checkout/payment areas
Phone number visible	Significant trust increase	Header, footer, contact page
Physical address	Required for credibility	Footer, about page, schema
Partner/association logos	Authority by association	Homepage, about page
"Made in USA" messaging	52% consider important; 45% pay 5%+ premium	Homepage, product pages

4.3 Conversion Psychology

Hick's Law

More choices = slower decisions = fewer conversions. Jam study: 6 options → 30% conversion vs. 24 options → 3% conversion. Standard: 5-7 navigation items, 3-6 featured products per section, 3-5 checkout steps.

CTA (Call-to-Action) Standards

Element	Standard	Research
Placement	Above the fold, centered	Above-fold CTAs outperform by 304%. Centered gets 682% more clicks.
Color	High-contrast accent color	Must be most visually prominent element in section
Size	≥ 44px tall (mobile), 48-56px desktop	Larger buttons = up to 90% more clicks
Text	Action verb, benefit-focused	"Get a Free Quote" > "Submit". First-person ("Start My...") outperforms.
Per viewport	One primary CTA	Multiple competing CTAs dilute effectiveness

Price Transparency

Hidden pricing drives users away. When prices are hidden ("Contact for Price"), users leave and go to competitors who display prices (Nielsen Norman Group). If exact pricing is impossible, show "Starting at $X" or a price range. An instant quote tool — even approximate — is better than none.

Key Psychological Principles

Principle	Application
Loss aversion	Frame benefits as avoiding losses. Losses felt 2x stronger than gains.
Anchoring	Show original price alongside sale price. First number seen anchors perception.
Scarcity	"Limited stock", "Only 3 left" increases urgency and conversions.
Reciprocity	Offer value first (guides, calculators) before asking for action.
Zeigarnik effect	Progress indicators in multi-step processes increase completion 15-30%.

4.4 Product Presentation

Product Image Standards

Standard	Research
5-8 images per product	0→1 image doubles conversion; 1→2 doubles again (eBay study)
Include lifestyle/context shot	9% conversion increase with larger, multiple photos (Zalando)
Include detail close-ups	Shoppers 3x more likely to convert with high-quality + zoom
Include scale/dimension shot	Reduces returns by setting accurate expectations

Recommended Image Sequence

Hero/lifestyle — product in context
Primary view — clean, well-lit
Alternate angle — rear/side view
Detail close-up #1 — key feature, craftsmanship
Detail close-up #2 — secondary feature
Scale/dimension — with reference or measurements
In-use/application — real-world context

360-Degree Views & Video

360-degree views increase conversion by 10-50%
Product video increases add-to-cart by 37%
360-degree views reduce returns by 15-50%

Product Description Psychology

Benefits over features: "Resists corrosion for decades" > "Stainless steel construction"
Storytelling: Can increase perceived value by up to 2,706% (Significant Objects project)
Sensory language: "precision-welded 12-gauge steel" > "high-quality materials"
Structure: Benefit headline → Feature detail → Application context
Dual audience: Headlines + bullets for scanners, full description for readers

4.5 Cognitive Load & UX

Miller's Law (7 ± 2)

Element	Maximum
Main navigation items	5-7
Checkout steps	3-5
Form fields per visible step	5-7
Products in comparison	4-5

Progressive Disclosure

Show essential information first, details on demand (tabs, accordions)
Maximum 2 disclosure levels — more causes usability problems
Never hide pricing, availability, or primary CTA behind disclosure

Typography Standards

Element	Standard
Body text minimum	16px (1rem), ideally 18px for long-form
Line height	1.5-1.75x font size
Line length	50-75 characters per line
H1 size	At least 2x body size

4.6 Mobile Psychology

Thumb Zone

80%+ of users operate smartphones one-handed
Place primary CTAs in the lower third of the viewport (natural thumb zone)
Sticky bottom CTA bars keep actions in the thumb zone
Thumb-zone optimization yields 35-55% conversion improvement

Mobile Attention

Average attention span: 8.25 seconds (2025)
Users spend 1.7 seconds on average before deciding to engage or leave
53% abandon sites that take over 3 seconds to load
Design for scanners: headlines, bullets, icons, images

4.7 Emotional Design & Brand Storytelling

Don Norman's Three Levels of Design

Level	Focus	Application
Visceral	Appearance (50ms)	Visual design quality, color, imagery, typography
Behavioral	Usability	Navigation, checkout flow, page speed, forms
Reflective	Self-image / meaning	Brand prestige, "Made in USA", premium positioning

All three must be addressed. A beautiful site with terrible usability fails. A functional but ugly site fails. A site that works and looks good but has no brand story fails.

Aesthetic-Usability Effect

Users perceive attractive products as more usable (Kurosu & Kashimura, 1995). Beautiful design creates a halo effect: users tolerate minor usability issues on attractive sites. Visual polish is not optional — it directly impacts perceived usability and trust.

Brand Storytelling Standards

Tell the founding story (why, not just what)
Connect products to customer identity and aspirations
Use real customer stories as case studies
Heritage storytelling is powerful for manufacturing brands
Maintain narrative consistency across all touchpoints

Appendix A: Quick Reference

Critical Thresholds at a Glance

Element	Threshold
LCP (Largest Contentful Paint)	≤ 2.5 seconds
INP (Interaction to Next Paint)	≤ 200 milliseconds
CLS (Cumulative Layout Shift)	≤ 0.1
TTFB (Time to First Byte)	≤ 800 ms (target < 200 ms)
Full page load	< 2 seconds
Page weight	< 1.5 MB
HTTP requests	< 50
Title tag	50-60 characters
Meta description	150-160 characters
Alt text	Under 125 characters
H1 per page	Exactly 1
URL slug	3-5 words, under 60 chars total
Text contrast (AA)	4.5:1 normal / 3:1 large
Touch target size	≥ 48 x 48 px, ≥ 8px spacing
Product images	2,000 x 2,000 px master, JPEG, white bg
OG image	1,200 x 630 px
Keyword density	1-2% (never > 3%)
Product description	300+ words minimum
Navigation items	5-7 maximum
Product images per product	5-8
NAP consistency	95%+ across all citations

Appendix B: Pre-Launch Checklist

Performance

Lighthouse Performance score ≥ 90
LCP ≤ 2.5 seconds on mobile
CLS ≤ 0.1
Total page weight < 1.5 MB
Images optimized (WebP with JPEG fallback, lazy loading below fold)
CSS/JS minified
Fonts preloaded, WOFF2 format, font-display: swap
Brotli/gzip compression enabled
Cache headers configured for static assets

SEO

Every page has unique title tag (50-60 chars)
Every page has unique meta description (150-160 chars)
Exactly one H1 per page with primary keyword
All images have descriptive alt text (under 125 chars)
XML sitemap created and submitted
robots.txt configured correctly
Self-referencing canonical tag on every page
SSL/HTTPS on all pages, zero mixed content
Open Graph tags on every page
Twitter Card meta tags on every page
Product pages have JSON-LD Product schema
Homepage has Organization schema
Breadcrumb navigation with BreadcrumbList schema
LocalBusiness schema (if physical location)
Google Search Console configured
Google Analytics 4 with e-commerce events

Accessibility

Lighthouse Accessibility score ≥ 90
Color contrast passes WCAG AA (4.5:1 normal text)
All interactive elements keyboard accessible
Focus indicators visible on all interactive elements
HTML lang attribute set
Semantic HTML (nav, main, header, footer)
Skip navigation link
Form inputs have associated labels

E-Commerce Platform Readiness

Product images at 2,000 x 2,000 px, JPEG, white background
Alt text on all product images (under 100 chars for Amazon)
Product descriptions 300+ words, unique per product
Schema.org Product markup with price, availability, SKU, brand
Prices displayed transparently (or "Starting at $X")
Product data exportable as feed (CSV/XML)

Psychology & UX

Clean, professional design (passes 50ms test)
5-7 main navigation items maximum
Primary CTA above the fold, high contrast, centered
Phone number and address visible on every page
Trust signals near CTAs and checkout areas
5-8 product images per product (various angles)
Benefits-first product descriptions with sensory language
Touch targets ≥ 48 x 48 px on mobile
Mobile page loads in < 3 seconds
About page with real people/story

Appendix C: Sources & References

E-Commerce Platforms

Web Performance

SEO

Consumer Psychology

DominionPort Website Development Standards

Version 1.0 — February 2026

This document serves as the binding protocol for all website development projects.

Website Development Standards

Table of Contents

Part 1 — E-Commerce Platform Standards

Part 2 — Web Performance Standards

Part 3 — SEO Standards

Part 4 — Consumer Psychology

Appendices

Part 1: E-Commerce Platform Standards

1.1 Google Shopping / Google Merchant Center

Product Feed Required Attributes

Image Specifications

Structured Data Requirements

1.2 Amazon Marketplace

Product Title

Product Images

A+ Content Alt Text

Backend Keywords

1.3 Walmart Marketplace

Listing Quality Score (LQS)

Key Requirements

1.4 Facebook / Meta Commerce

1.5 Pinterest Shopping

1.6 Microsoft / Bing Shopping

1.7 Cross-Platform Standards

Universal Image Standard

Image Format Compatibility

Alt Text Standards (All Platforms)

Alt Text Rules

Part 2: Web Performance Standards

2.1 Core Web Vitals (Google Ranking Signal)

Core Web Vitals Thresholds (2025-2026)

2.2 Google Lighthouse Scoring

Performance Score Weights

Score Ranges

Lighthouse SEO Audit (14 Checks)

2.3 GTmetrix & WebPageTest

GTmetrix Grading

Key Page Load Targets

2.4 Page Weight & Request Budgets

2.5 Image Optimization

Format Selection

Responsive Image Implementation

Lazy Loading Rules

2.6 CSS, JavaScript & Font Optimization

2.7 Caching & Compression

Cache Headers

Compression

2.8 Mobile Performance

Responsive Breakpoints

Touch & Viewport Standards

2.9 Accessibility (WCAG 2.1 AA)

Color Contrast

Core Requirements

Part 3: SEO Standards

3.1 On-Page SEO

Title Tag

Meta Description

Heading Hierarchy

URL Structure

Image SEO

Internal Linking

3.2 Technical SEO

XML Sitemap

robots.txt Template

SSL / HTTPS

Structured Data (Schema.org / JSON-LD)

Product Page Schema (Required)

Organization Schema (Homepage)

BreadcrumbList Schema (All Product & Category Pages)

LocalBusiness Schema (Business with Physical Location)

Open Graph & Twitter Cards

Canonical Tags

301 Redirects & Site Migration

3.3 E-Commerce Specific SEO

Product Page Requirements

Category Page Requirements

Product Description Minimums

3.4 Content SEO

3.5 Local SEO

NAP Consistency