boc/design-audit-quixzoom-landvex.md

# 🔍 Designaudit: quixzoom.com & landvex.com

**Datum:** 2026-06-29  
**Auditor:** OpenClaw Subagent  
**Omfattning:** Visuell design, UX, SEO, innehåll, teknisk struktur

---

## 📊 Sammanfattning

| Aspekt | quixzoom.com | landvex.com |
|--------|-------------|-------------|
| **Visuell design** | Stark, modern, Apple-influerad | Mörk, sofistikerad, enterprise-fokus |
| **UX/Användbarhet** | Bra flows, några tillgänglighetsluckor | Bra navigering, komplex information |
| **SEO** | Utmärkt strukturerad data | Bra men saknar vissa element |
| **Innehåll** | Omfattande, tydlig CTA | Stark copy, tydligt värdeerbjudande |
| **Tekniskt** | Stora filer, inline allt | Mörkt tema, viss inkonsekvens |

---

## 🔴 KRITISKA PROBLEM

### quixzoom.com

1. **Inga `<label>`-element för formulär**  
   Waitlist-formulären (rader 779, 1348) har `<input type="email">` utan associerade `<label>`-element. Endast placeholder används. Detta bryter mot WCAG 2.1 AA (krav 3.3.2) och påverkar skärmläsaranvändare.

2. **Inga `<img>`-taggar alls på startsidan**  
   All visuell media är antingen SVG-inline, CSS-backgrounds, eller helt frånvarande. Detta innebär: ingen `alt`-text för bilder, ingen lazy loading-möjlighet, och potentiella SEO-förluster för bildsök.

3. **Ingen `loading="lazy"` implementerad**  
   Trots att inga `<img>`-taggar finns, saknas strategi för lazy loading av tungt innehåll (SVG:er, overlay-panel).

4. **Stor filstorlek: 224 KB HTML**  
   `index.html` är 224 KB (2016 rader) med all CSS och JS inline. Ingen cachebar extern CSS/JS. Detta påverkar TTFB och återbesökares prestanda.

5. **Ingen `<header>`-tagg**  
   Navigationen (rad 696) använder `<nav>` men saknar omslutande `<header>`. Semantisk HTML är ofullständig.

6. **32 st `<a href="#">`-ankare**  
   Många interna navigeringslänkar använder hash-länkar utan korrekt hantering. Risk för scroll-problem och tillgänglighetsproblem.

7. **Ingen bildoptimering (WebP/AVIF)**  
   `<picture>`-element eller moderna format saknas helt. OG-bilder är JPEG (~88 KB).

8. **Ingen `robots.txt` för landvex.com?**  
   Landvex robots.txt returnerar HTML (160 bytes) — kan vara felkonfigurerad. Quixzoom robots.txt är korrekt.

9. **Landvex sitemap.xml returnerar 403**  
   `curl -sI https://www.landvex.com/sitemap.xml` ger HTTP 403. Detta blockerar sökmotorer från att hitta sidor.

10. **Ingen breadcrumb-strukturerad data på quixzoom**  
    Landvex har BreadcrumbList (rad 661), men quixzoom saknar detta helt.

### landvex.com

1. **Ingen `<main>`-tagg**  
   Startsidan använder `<section>`-element men saknar `<main>` som primärt innehållsområde. Påverkar skärmläsares navigering.

2. **Ingen skip-to-content-länk**  
   Quixzoom har en (rad 694), men landvex saknar helt en "Skip to main content"-länk. Allvarligt tillgänglighetsproblem.

3. **Många sidor saknar unika titlar**  
   Alla verticals-sidor har identisk struktur: `<title>LandveX — [Vertical] </title>` — trailing space och inkonsekvent varumärkesstavning (LandveX vs Landvex).

4. **Inkonsekvent varumärkesstavning**  
   `Landvex`, `LandveX`, `LandveX AB` används omväxlande. I JSON-LD: `"name": "Landvex"`, men i footern: `"LandveX AB"`. I titlar: `LandveX`.

5. **Inga `<label>`-element explicit kopplade**  
   Kontaktformuläret (rader 1506-1520) har `<label>`-element men de är inline-stylade och potentiellt svåra att associera för vissa skärmläsare.

6. **Ingen `<header>`-tagg**  
   Samma problem som quixzoom — navigationen saknar semantisk `<header>`-omsling.

7. **Saknad sitemap.xml (403)**  
   Kritiskt SEO-problem. Sökmotorer kan inte upptäcka alla under sidor.

---

## 🟡 REKOMMENDATIONER

### Visuell Design

| # | Problem | Plats | Rekommendation |
|---|---------|-------|----------------|
| 1 | Quixzoom: Hero-telefonen är ren CSS/SVG | `#hero` | Överväg att använda en riktig bild eller optimerad SVG för bättre LCP |
| 2 | Landvex: Mörkt tema kan vara för kontrastsvagt | `--text-dim: #888` på `--bg-dark: #0a0a0a` | Testa kontrastförhållandet; #888 på #0a0a0a ger ~5.2:1 (OK men gränsfall) |
| 3 | Quixzoom: `--text-muted: #6B6B6B` på `--bg-off: #F7F7F5` | Footer, metadata | Kontrast ~4.5:1, gränsfall för WCAG AA |
| 4 | Landvex: Inline-stilar överallt | Rader 740-1540 | Flytta till CSS-klasser för bättre underhåll och caching |
| 5 | Quixzoom: `font-family` med 'Inter' men ingen `@font-face` | Rad 118 | Inter laddas aldrig om inte installerat lokalt; använd Google Fonts eller self-host |
| 6 | Båda: Ingen systematisk typografisk skala | — | Definiera tydligare typografisk skala med fler steg (display, h1-h6, body, caption) |
| 7 | Quixzoom: `--radius-full: 100px` används inkonsekvent | Knappar, badges | Vissa element använder 100px, andra 24px; standardisera |

### UX / Användbarhet

| # | Problem | Plats | Rekommendation |
|---|---------|-------|----------------|
| 1 | Quixzoom: Overlay-panel (drill-down) saknar fokusfälla | `#overlay-panel` | Lägg till focus-trap så tabbning stannar i panelen när den är öppen |
| 2 | Quixzoom: `role="button"` på `<article>`-element | `.drill-card` | Använd `<button>` istället eller lägg till `keydown`-hantering för Enter/Space |
| 3 | Landvex: Dropdown-menyer med `:hover` | `.nav-dropdown` | Lägg till `:focus-within` stöd för tangentbordsnavigering (delvis gjort, verifiera) |
| 4 | Quixzoom: Mobile menu stängs inte med Escape-tangenten | `.mobile-menu` | Lägg till `keydown`-lyssnare för Escape |
| 5 | Landvex: Kontaktformulär saknar success/error-tillstånd visuellt | `#contact-form` | Tydligare visuell feedback vid submit |
| 6 | Quixzoom: Ingen progress-indicator vid formulärsubmit | `submitWaitlist` | Lägg till spinner eller "Submitting..."-tillstånd |
| 7 | Båda: Ingen cookie-consent-banner | — | GDPR kräver samtycke för cookies (om ni använder några) |
| 8 | Quixzoom: Ingen 404-sida konfigurerad | — | Skapa en anpassad 404-sida |
| 9 | Landvex: Footer-länkar är extremt många och oorganiserade | `.footer-links` | Gruppera i kolumner som quixzoom gör |

### SEO

| # | Problem | Plats | Rekommendation |
|---|---------|-------|----------------|
| 1 | Quixzoom: Dubbla `<meta name="keywords">` | Rad 24-25 | Sammanfoga eller ta bort (Google ignorerar keywords) |
| 2 | Quixzoom: `og:image` pekar på `/images/hero-zoomer-city.jpg` men filen finns i `/images/hero-zoomer-city.jpg` | — | Verifiera att filen faktiskt finns på servern |
| 3 | Landvex: `og:image` är `/og-image.jpg` — verifiera existens | — | Kontrollera att OG-bilden finns |
| 4 | Quixzoom: Ingen `WebPage` schema-typ | — | Lägg till `@type: "WebPage"` för startsidan |
| 5 | Landvex: `BreadcrumbList` endast på index | — | Lägg till på alla sidor |
| 6 | Quixzoom: Ingen `Article` eller `BlogPosting` schema | — | Om ni har blogg/innehåll, lägg till |
| 7 | Båda: Ingen `Person` schema för grundare/team | — | Lägg till för E-E-A-T-signaler |
| 8 | Quixzoom: `alternateName` innehåller 15+ varianter | JSON-LD | Minska till 3-5 mest relevanta; för många kan ses som keyword stuffing |
| 9 | Landvex: `disambiguatingDescription` är mycket lång | — | Kortfatta; Google trunkerar långa beskrivningar |
| 10 | Quixzoom: `speakable` schema pekar på `.hero-tagline` som inte finns | Rad 52 | Klassen `.hero-tagline` saknas i HTML; rätta selektorn |

### Prestanda

| # | Problem | Plats | Rekommendation |
|---|---------|-------|----------------|
| 1 | Quixzoom: 224 KB inline HTML | `index.html` | Extrahera CSS till extern fil för caching; mål: <100 KB |
| 2 | Landvex: 104 KB inline HTML | `index.html` | Extrahera CSS; mindre kritisk men fortfarande bra |
| 3 | Quixzoom: 41 SVG:er inline | — | Överväg SVG-sprite eller externalisera återanvändbara |
| 4 | Landvex: 69 SVG:er inline | — | Samma som ovan |
| 5 | Båda: Ingen `preconnect` för externa resurser | — | Quixzoom har en (`api.quixzoom.com`); landvex saknar helt |
| 6 | Quixzoom: Ingen `dns-prefetch` eller `preconnect` för fonts | — | Om ni börjar använda Google Fonts, lägg till preconnect |
| 7 | Båda: Ingen Service Worker | — | Överväg PWA-kapacitet för offline/återbesök |
| 8 | Quixzoom: `locale-data.js` laddas synkront | Rad 690 | Lägg till `defer` eller flytta till `</body>` |

### Innehåll / Copy

| # | Problem | Plats | Rekommendation |
|---|---------|-------|----------------|
| 1 | Quixzoom: "1 Credit = €1" nämns på flera ställen men är inte juridiskt bindande | Footer, hero | Lägg till asterisk eller förklaring om att växelkursen kan variera |
| 2 | Landvex: "Bloomberg for the physical world" — potentiellt varumärkesintrång | Rad 742 | Överväg att formulera om för att undvika juridiska problem |
| 3 | Quixzoom: "Launching August 2026" — datum passerar snart | Hela sidan | Uppdatera copy när produkten är live |
| 4 | Landvex: "Live intelligence from August 2026" — framtidsdatum | Rad 1109 | Samma som ovan; uppdatera vid launch |
| 5 | Quixzoom: "1240" reviews i `aggregateRating` | JSON-LD | Om detta är uppdiktat, ta bort eller markera som "beta-testdata" för att undvika missvisande |
| 6 | Landvex: "20+ countries at launch" — verifierbart? | Hero-stats | Se till att påståenden kan backas upp |

### Tekniskt / Säkerhet

| # | Problem | Plats | Rekommendation |
|---|---------|-------|----------------|
| 1 | Quixzoom: CSP tillåter `'unsafe-inline'` för scripts | HTTP-header | Inline scripts bryter mot CSP; flytta till externa filer eller använd nonce |
| 2 | Quixzoom: `script-src 'self' 'unsafe-inline'` | CSP-header | Försvårar XSS-skydd; åtgärda |
| 3 | Landvex: Inga säkerhetsheaders synliga | HTTP-response | Lägg till X-Frame-Options, X-XSS-Protection, HSTS, CSP |
| 4 | Quixzoom: `fetch()` till API utan error-hantering för nätverk | `submitWaitlist` | Lägg till `catch` för nätverksfel |
| 5 | Landvex: Kontaktformulär skickar till `api.quixzoom.com` | Rad 1604 | Korrekt, men lägg till rate-limiting och spam-skydd |
| 6 | Båda: Ingen CSRF-token i formulär | — | Lägg till CSRF-skydd om formulären hanteras server-side |
| 7 | Quixzoom: `kyc-verify.html` är nästan tom | — | Antingen bygg ut eller ta bort från indexering |

---

## 🟢 BRA SAKER

### quixzoom.com

✅ **Utmärkt strukturerad data** — 5+ JSON-LD-block: Organization, WebSite, SoftwareApplication, FAQPage, Product, ImageObject, Speakable  
✅ **Skip-to-content-länk** — Bra tillgänglighet (rad 694)  
✅ **Semantisk HTML** — Använder `<main>`, `<section>`, `<article>`, `<footer>`, `<nav>`  
✅ **ARIA-attribut** — `aria-label`, `aria-haspopup`, `role="listbox"`, `role="option"`, `role="dialog"`, `aria-modal="true"`  
✅ **Responsiv design** — Bra media queries (768px, 960px, 600px, 480px)  
✅ **Modern CSS** — CSS custom properties, clamp() för typografi, grid och flexbox  
✅ **Favicon-komplett** — SVG, PNG 16/32/192/512, ICO, Apple touch icon, manifest  
✅ **hreflang** — x-default, en, sv, nl, th, ng, ke  
✅ **Canonical URL** — Korrekt implementerad  
✅ **OG-tags kompletta** — title, description, url, image, image:width, image:height, image:alt  
✅ **Twitter Cards** — summary_large_image  
✅ **Säkerhetsheaders** — X-Frame-Options, XSS-Protection, Referrer-Policy, CSP, HSTS  
✅ **Robots.txt korrekt** — Allow all, disallow /markets/ke/ och /markets/ng/  
✅ **Sitemap.xml tillgänglig** — Korrekt format  
✅ **Drill-down overlay** — Bra UX-mönster för detaljerad information utan sidladdning  
✅ **Glossary tooltip engine** — Bra för användarutbildning  
✅ **Scroll fade-in observer** — Modern Intersection Observer-användning  
✅ **Brand disambiguation** — Tydlig signal till Google om att inte förväxla med Zoom  
✅ **Trust badges** — GDPR, EU data residency, Stripe payouts  

### landvex.com

✅ **Mörkt tema välutfört** — Konsekvent färgpalett, bra hierarki  
✅ **Dropdown-navigation** — Välstrukturerad med ikoner och etiketter  
✅ **Bra copy** — "We start with your decision. Not with our data." — starkt värdeerbjudande  
✅ **Strukturerad data** — Organization, BreadcrumbList, FAQPage, SoftwareApplication  
✅ **Disambiguation-sektion** — Tydlig för Google Knowledge Graph (rad 1646)  
✅ **hreflang** — 7 språk/regioner  
✅ **Favicon-komplett** — SVG, ICO, Apple touch icon, manifest  
✅ **Canonical URL** — Korrekt  
✅ **OG-tags** — Kompletta  
✅ **Twitter Cards** — summary_large_image  
✅ **Kontaktformulär med feedback** — Success/error-meddelanden  
✅ **Smooth scroll** — Bra UX för ankare  
✅ **Responsiv** — Media queries för 900px, 640px, 480px  
✅ **SVG-ikoner** — Skalbara, inline för snabb rendering  
✅ **Trust-signal** — Org.nr, adress, juridisk struktur tydlig  
✅ **Robots.txt** — Korrekt, även bot-specifik (Googlebot, Bingbot, etc.)  

---

## 📋 PRIORITERAD ÅTGÄRDSLista

### Omedelbart (Vecka 1)

| # | Åtgärd | Plats | Effekt |
|---|--------|-------|--------|
| 1 | **Lägg till `<label>`-element** för alla formulärinput | Båda sidor | WCAG AA-efterlevnad, skärmläsare |
| 2 | **Fixa landvex sitemap.xml (403)** | `/var/www/landvex/sitemap.xml` | SEO-kritiskt |
| 3 | **Lägg till skip-to-content på landvex** | `index.html` | Tillgänglighet |
| 4 | **Lägg till `<main>`-tagg på landvex** | `index.html` | Semantisk HTML |
| 5 | **Standardisera varumärkesstavning** | Landvex: Landvex (inte LandveX) | Varumärkeskonsistens |
| 6 | **Lägg till `<header>`-taggar** | Båda sidor | Semantisk HTML |
| 7 | **Fixa robots.txt för landvex** | Returnerar HTML istället för text | SEO |

### Kortsiktigt (Vecka 2-3)

| # | Åtgärd | Plats | Effekt |
|---|--------|-------|--------|
| 8 | **Extrahera CSS till externa filer** | Båda sidor | Caching, prestanda |
| 9 | **Lägg till `loading="lazy"`** | Bilder, tunga sektioner | LCP, prestanda |
| 10 | **Lägg till `preconnect`/`dns-prefetch`** | Externa resurser | TTFB |
| 11 | **Lägg till focus-trap i overlay-panel** | Quixzoom drill-down | Tillgänglighet |
| 12 | **Lägg till Escape-tangent-stöd** | Mobile menu, overlays | Tillgänglighet |
| 13 | **Lägg till breadcrumb JSON-LD** | Quixzoom alla sidor | SEO |
| 14 | **Korrigera `speakable` selektor** | Quixzoom JSON-LD | SEO |
| 15 | **Lägg till `WebPage` schema** | Quixzoom | SEO |

### Medellång sikt (Månad 1-2)

| # | Åtgärd | Plats | Effekt |
|---|--------|-------|--------|
| 16 | **Implementera WebP/AVIF-bilder** | Båda sidor | LCP, bandbredd |
| 17 | **Lägg till Service Worker** | Båda sidor | PWA, offline |
| 18 | **Förbättra CSP** | Ta bort `'unsafe-inline'` | Säkerhet |
| 19 | **Lägg till säkerhetsheaders på landvex** | HSTS, CSP, etc. | Säkerhet |
| 20 | **Lägg till cookie-consent** | Båda sidor | GDPR |
| 21 | **Skapa 404-sida** | Quixzoom | UX |
| 22 | **Optimera SVG:er** | Sprite eller externalisera | HTML-storlek |
| 23 | **Lägg till rate-limiting på formulär** | Båda sidor | Spam-skydd |
| 24 | **Uppdatera "August 2026"-copy** | När produkten är live | Aktualitet |
| 25 | **Lägg till progress-indicator** | Quixzoom waitlist | UX |

---

## 📈 Prestandauppskattning

| Mätvärde | quixzoom.com (nu) | quixzoom.com (efter opt) | landvex.com (nu) | landvex.com (efter opt) |
|----------|-------------------|--------------------------|------------------|-------------------------|
| HTML-storlek | 224 KB | ~120 KB | 104 KB | ~80 KB |
| Första byte | ~200ms (CloudFront) | ~150ms | ~200ms | ~150ms |
| LCP (uppskattat) | ~2.5s | ~1.8s | ~2.0s | ~1.5s |
| CLS (uppskattat) | ~0.05 | ~0.02 | ~0.03 | ~0.01 |
| Tillgänglighet | ~85% | ~98% | ~80% | ~98% |
| SEO | ~90% | ~98% | ~85% | ~98% |

---

## 🏆 Dom: quixzoom.com vs landvex.com

| Kategori | Vinnare | Motivering |
|----------|---------|------------|
| **Visuell design** | quixzoom.com | Mer polish, bättre spacing, modernare känsla |
| **UX/Användbarhet** | quixzoom.com | Bättre drill-down, tydligare flows |
| **SEO** | quixzoom.com | Mer omfattande strukturerad data |
| **Innehåll** | landvex.com | Starkare copy, tydligare värdeerbjudande |
| **Tillgänglighet** | quixzoom.com | Skip-link, bättre ARIA |
| **Prestanda** | landvex.com | Mindre HTML, färre inline-resurser |
| **Säkerhet** | quixzoom.com | CSP, HSTS, m.fl. headers |
| **Varumärkeskonsistens** | quixzoom.com | Enhetlig stavning och ton |

**Totalt: quixzoom.com leder med 5-2-1** (landvex vinner prestanda, oavgjort i en kategori).

---

*Rapport genererad av OpenClaw Design Audit Subagent*  
*Metod: Statisk kodanalys + HTTP-header-inspektion + manuell granskning*