UX & Accessibility Audit: Mark Forscher Portfolio

Audit Date: October 30, 2025 Website: forscher.com Auditor: Claude (UI/UX Design Expert)

Executive Summary

This comprehensive audit evaluates the Mark Forscher portfolio website across four key dimensions: User Experience, Design Effectiveness, Accessibility Compliance, and Conversion Design. The site demonstrates strong artistic vision and brand personality but has critical accessibility barriers and conversion optimization opportunities that could significantly impact business goals.

Overall Assessment:

• UX Score: 6.5/10 - Good navigation structure but friction in user journeys
• Design Effectiveness: 7/10 - Strong aesthetic, inconsistent hierarchy
• Accessibility: 4/10 - Multiple WCAG failures, critical barriers present
• Conversion Design: 5/10 - Weak CTAs, hidden contact information

1. USER EXPERIENCE ANALYSIS

1.1 Navigation & Information Architecture

Strengths

• Clean navigation structure: Three primary nav items (Info, Projects, Words) creates clear mental model
• Consistent header: Logo and navigation present on all pages
• Semantic URL structure: Clean permalinks (/info/, /recent/, /words/)

Critical Issues

Issue #1: Navigation Terminology Mismatch

• Severity: Medium
• Problem: Navigation says “Projects” but URL is /recent/
• Impact: SEO confusion, mental model mismatch for users
• Recommendation: Align navigation label with URL or vice versa. Consider /projects/ URL or “Recent Work” label

Issue #2: Hidden Email Pattern

• Severity: High (Conversion Impact)
• Problem: Contact email only appears on homepage and buried in info page footer
• Impact: Users looking to hire/contact must hunt for contact information
• Recommendation: Add persistent “Contact” link in navigation or visible email in footer on all pages

Issue #3: Fragmented Bio Information

• Severity: Medium
• Problem: Bio content split between homepage, info page, and “More” accordion
• Impact: Users must click multiple times to understand full value proposition
• User Flow Issue: Homepage → Click Bio link → Info page → Click “More” → Background
• Recommendation: Restructure info architecture with progressive disclosure that makes value proposition clear upfront

Issue #4: Preloader Adds Friction

• Severity: Low-Medium
• Problem: 350ms artificial delay on all internal navigation via preloader
• Code Location: _includes/header.html lines 23-27
• Impact: Every click feels sluggish; users expect instant response
• Recommendation: Remove artificial delay or reduce to <100ms

Issue #5: Navigation Anchor Bug

• Severity: Medium
• Problem: Multiple links point to #bio but ID is #background
• Code Location: /info/#bio links don’t scroll correctly
• Impact: Broken scroll behavior creates confusion
• Recommendation: Fix anchor ID mismatch (line 145 in info page has id="bio" on hr, line 170 has id="background")

1.2 User Journey Analysis

Primary Journey: Learning About Services → Contact

Current Journey (8 steps):

1. Land on homepage
2. Read one-sentence bio
3. Click “Bio” link
4. Navigate to Info page
5. Read first bio section
6. Click “More” to expand
7. Scroll to find background
8. Return to find contact email (only on homepage or footer on non-homepage)

Problems:

• Contact information hidden/inconsistent across pages
• Value proposition buried in accordion
• No clear CTA for hiring/engagement
• 8 steps to understand services and contact

Recommended Journey (3-4 steps):

1. Land on homepage with clear value proposition
2. See “Work with me” or “Contact” CTA in navigation/header
3. Quick bio with link to detailed background
4. One-click access to contact (email, form, or calendly)

Secondary Journey: Viewing Portfolio Work

Current Journey:

• Homepage → Projects → Grid of work items → Click item
• Issue: Projects page focuses heavily on music video, not professional brand work
• Issue: Grid items lack context (no descriptions, just images)
• Issue: No filtering or categorization (music vs brand work vs experiments)

Recommendations:

• Add brief descriptions/captions to grid items
• Categorize work (Brand Design, Music, Experiments)
• Lead with brand work for business credibility
• Add case studies for key projects (not just visual gallery)

1.3 Mobile vs Desktop Experience

Desktop Experience (>1000px)

• Layout: Single column with adequate whitespace
• Navigation: Horizontal layout works well
• Reading: Line lengths appropriate (max-width: 34em on paragraphs)
• Grid: Masonry layout displays 6 columns at widest (16.666% width)

Mobile Experience (<600px)

• Critical Issue: Navigation becomes cramped
  • Logo and nav links stack in absolute positioned div
  • Top padding increases to 10em to accommodate navigation
  • This creates massive dead space at top of mobile pages
• Font Size Issue: Base font increases from 16px to 18px on mobile
  • This is good for readability
  • But combined with 10em top margin creates poor space utilization
• Preloader Color: Background is #f1f4d1 (light yellow)
  • Creates jarring flash on dark site (#101010 background)
  • Should match dark background

Mobile-Specific Recommendations:

1. Redesign mobile navigation for better space efficiency
2. Reduce top margin (currently 10em at <1000px)
3. Fix preloader color to match dark theme
4. Test actual touch targets (links may be too close together)
5. Consider hamburger menu to reclaim vertical space

2. DESIGN EFFECTIVENESS ANALYSIS

2.1 Visual Hierarchy

Strengths

• Dark aesthetic: Distinctive, artistic, matches creative positioning
• Typography: Courier New creates technical/artistic hybrid feeling
• Whitespace: Generous use creates breathing room
• Animated background: Subtle circles add movement without distraction

Issues

Issue #1: Link Styling Creates Confusion

• Problem: All links have identical visual treatment
  • Same color (#f3f3f3)
  • Same border-bottom (1px solid)
  • No distinction between internal/external/CTA links
• Impact: Users can’t distinguish primary actions from secondary links
• Recommendation: Create visual hierarchy for CTAs vs body links vs navigation

Issue #2: Weak Visual Hierarchy in Bio

• Problem: One-sentence bio looks identical to body text
• Impact: Value proposition doesn’t stand out
• Recommendation: Increase font size, weight, or use different font for key messaging

Issue #3: Images Lack Accessible Alt Text

• Problem: Bio images, career photos have generic or missing alt text
• Example: <img src="..." alt="Mark Forscher" style=""/> (line 113, index.html)
• Impact: Screen readers can’t describe images; SEO suffers
• Recommendation: Write descriptive alt text for all images

Issue #4: Grid Item Opacity Animation

• Problem: Grid items start at opacity: 0 and fade in after Masonry loads
• Code: .grid-sizer,.grid-item { opacity:0; transition:opacity 0.25s }
• Impact: Flash of invisible content; accessibility issue for users with slow connections
• Recommendation: Use progressive enhancement; show content immediately, enhance with Masonry

2.2 Brand Consistency

Strengths

• Consistent color palette: Dark background (#101010), light text (#f3f3f3)
• Consistent typography: Courier New throughout maintains technical aesthetic
• Logo usage: Simple signature mark used consistently

Inconsistencies

Issue #1: Mixed Font Loading

• Problem: Three different fonts loaded but inconsistently used:
  • Rubik (loaded but unused in visible areas)
  • Joan (loaded but unused in visible areas)
  • Courier New (primary)
  • Inconsolata (loaded via @font-face but unused)
• Impact: Unnecessary page weight, confusion in design system
• Recommendation: Audit font usage; remove unused font files

Issue #2: Multiple Link Patterns

• Pattern 1: Underline on default, background on hover
• Pattern 2: .bio-pic-link has border-bottom: 0px
• Pattern 3: .logo:hover removes background
• Impact: Inconsistent interaction patterns
• Recommendation: Standardize link treatments by type (navigation, body, images)

Issue #3: Spacing Inconsistencies

• Problem: Arbitrary <br /> tags used for spacing instead of margin/padding
• Examples: Line 10, 38, 124 in index.html
• Impact: Inconsistent spacing, harder to maintain, accessibility issues
• Recommendation: Use CSS margin/padding; remove inline <br /> spacing

2.3 Mobile Responsiveness

Breakpoint Strategy:

• 2000px, 1800px, 1600px, 1400px, 1200px, 1000px, 800px, 600px
• Issue: Very granular breakpoints (8 total)
• Recommendation: Consolidate to 3-4 key breakpoints (mobile <768px, tablet 768-1024px, desktop >1024px)

Grid Responsiveness:

• 16.666% width (6 columns) → 20% (5 col) → 25% (4 col) → 33.33% (3 col) → 50% (2 col) → 100% (1 col)
• Strength: Good progressive enhancement
• Issue: 6 columns at 1600px+ creates very small items that are hard to see

3. ACCESSIBILITY COMPLIANCE ANALYSIS

3.1 WCAG 2.1 Level AA Compliance

Critical Failures (Level A)

WCAG 1.1.1 Non-text Content (Level A) - FAIL

• Issue: Images missing descriptive alt text
• Examples:
  • Logo image: alt="" (should describe “Mark Forscher signature logo”)
  • Bio images: Generic alt text doesn’t convey meaning
  • Career photos: Alt text duplicates caption
• Severity: Critical
• Impact: Screen reader users cannot access visual content

WCAG 1.3.1 Info and Relationships (Level A) - FAIL

• Issue: Missing semantic HTML structure
  • No <main> landmark
  • No <nav> element (uses <div id="nav">)
  • No heading hierarchy on homepage (jumps from page title to body)
• Severity: High
• Impact: Screen readers can’t navigate content structure

WCAG 1.4.3 Contrast (Minimum) (Level AA) - PARTIAL FAIL

• Primary text: #f3f3f3 on #101010 = 18.5:1 ratio ✓ PASS (exceeds 7:1 for AAA)
• Links: Same as body text until hover
• Issue: Hover state (white on light background) creates insufficient contrast
• Severity: Medium
• Impact: Low vision users struggle to see hovered links

WCAG 2.1.1 Keyboard (Level A) - PARTIAL FAIL

• Issue: Focus indicators not visible on dark background
• Issue: No skip link to main content
• Issue: Accordion “More” button requires mouse for optimal UX
• Severity: High
• Impact: Keyboard-only users have poor experience

WCAG 2.4.1 Bypass Blocks (Level A) - FAIL

• Issue: No skip navigation link
• Severity: Medium
• Impact: Keyboard users must tab through nav on every page

WCAG 2.4.2 Page Titled (Level A) - PASS

• Unique, descriptive page titles present ✓

WCAG 2.4.4 Link Purpose (Level A) - PARTIAL FAIL

• Issue: Links like “Bio” and “More” lack context out of context
• Issue: External links not indicated (no aria-label or icon)
• Example: “X.com” link doesn’t indicate it’s Twitter/X
• Severity: Medium

WCAG 3.1.1 Language of Page (Level A) - FAIL

• Issue: No lang attribute on <html> tag
• Severity: Medium
• Impact: Screen readers may use wrong pronunciation

WCAG 4.1.2 Name, Role, Value (Level A) - PARTIAL FAIL

• Issue: Accordion button (.bio-read-more) is an anchor, not button
  • Should use <button> with aria-expanded
  • Current implementation uses <a href="#background">
• Severity: Medium
• Impact: Screen reader users don’t know content is collapsible

Level AA Failures

WCAG 1.4.5 Images of Text (Level AA) - FAIL

• Issue: Logo is image of signature
• Mitigation: Acceptable as it’s decorative branding
• Recommendation: Ensure alt text describes purpose

WCAG 2.4.5 Multiple Ways (Level AA) - PARTIAL PASS

• Navigation menu provides one way ✓
• No search function ✗
• No sitemap ✗
• Recommendation: Add search or sitemap for larger content collections

WCAG 3.2.4 Consistent Identification (Level AA) - PASS

• Navigation and UI elements consistent across pages ✓

3.2 Screen Reader Support

Issues Identified

Issue #1: Navigation Landmark Missing

<!-- Current (incorrect) -->
<div id="nav">
  <a class="logo" href="/">...</a>
  <div class="nav-links">...</div>
</div>

<!-- Recommended -->
<nav aria-label="Main navigation">
  <a class="logo" href="/" aria-label="Mark Forscher home">...</a>
  <ul class="nav-links">
    <li><a href="/info/#bio">Info</a></li>
    <li><a href="/recent/">Projects</a></li>
    <li><a href="/words/">Words</a></li>
  </ul>
</nav>

Issue #2: Main Content Landmark Missing

<!-- Current -->
<section class="layout">
  <div class="col-content">...</div>
</section>

<!-- Recommended -->
<main>
  <section class="layout">
    <div class="col-content">...</div>
  </section>
</main>

Issue #3: Decorative vs Informative Images

• Bio images are informative (show Mark in professional context)
• Current alt text is insufficient
• Recommended: Describe context, not just “Mark Forscher”

Issue #4: Link Context

• Multiple “Bio” links on page
• Screen reader users hear “Bio, link” three times
• Recommendation: Use aria-label to differentiate
  • “View full biography”
  • “Scroll to biography section”
  • “About Mark Forscher”

3.3 Keyboard Navigation

Current State

• Tab order: Likely follows DOM order (not explicitly tested)
• Focus indicators: Browser default (likely invisible on dark background)
• Skip links: None present
• Modal/Overlay: None present (good)

Issues

Issue #1: Invisible Focus Indicators

• Default browser focus outline likely invisible on #101010 background
• Recommendation: Add visible focus styles:

  a:focus, button:focus {
  outline: 2px solid #f3f3f3;
  outline-offset: 2px;
  }
  

Issue #2: No Focus on Grid Items

• Masonry grid items are links but focus state not designed
• Recommendation: Design obvious focus state for grid items

Issue #3: JavaScript-Dependent Accordion

• “More” link requires JavaScript to work
• Falls back to hash navigation (acceptable)
• But scroll animation may disorient users
• Recommendation: Ensure keyboard users can escape scroll animation (ESC key)

3.4 Assistive Technology Testing Required

Recommended Testing:

1. Screen Readers:
   • NVDA (Windows) - free
   • JAWS (Windows) - industry standard
   • VoiceOver (macOS/iOS) - built-in
   • TalkBack (Android) - built-in
2. Keyboard-Only Navigation:
   • Disconnect mouse, navigate entire site with Tab, Enter, Space
   • Verify all functionality accessible
   • Check focus indicators visible
3. Voice Control:
   • Dragon NaturallySpeaking
   • Voice Control (macOS)
4. Low Vision:
   • Zoom to 200% (WCAG requirement)
   • Test with Windows Magnifier
   • Test with browser zoom
5. Color Blindness:
   • Use Color Oracle or Sim Daltonism
   • Verify information not conveyed by color alone

4. CONVERSION DESIGN ANALYSIS

4.1 Call-to-Action (CTA) Placement

Current State

• Primary CTA: None explicitly defined
• Contact method: Email address buried
  • Homepage: Contact: [email protected] in body text
  • Info page: Email only in footer (non-homepage pages)
  • Other pages: No contact information visible

Critical Issues

Issue #1: No Clear Conversion Goal

• Problem: Unclear what action visitor should take
• Business Impact: Lost leads, missed opportunities
• Questions to answer:
  • What is the primary conversion goal? (Hire for brand work? Book consultation? Download portfolio?)
  • Secondary goals?

Recommendations:

1. Add primary CTA in header/nav: “Work with me” or “Get in touch”
2. Create dedicated contact page with:
   • Email (clickable mailto: link)
   • Contact form
   • Calendly for consultations
   • Response time expectation
3. Add CTA to info page after value proposition
4. Footer CTA currently commented out - activate or create new one

Issue #2: Email Not Clickable

• Problem: Contact: [email protected] is plain text, not mailto: link
• Impact: Users must manually copy/paste or remember email
• Recommendation: Change to <a href="mailto:[email protected]">[email protected]</a>

Issue #3: Commented-Out Footer CTA

• Problem: Valuable CTA space unused
• Recommendation: Activate with business-relevant CTA or cross-promotion

4.2 Form Design

Current State: No forms present on site

Recommendation: Add contact form

• Benefits: Lower barrier than email, captures structured info, integrates with CRM
• Best practices:
  • Keep fields minimal (Name, Email, Message)
  • Clear labels and error messages
  • Accessible form validation
  • Success confirmation
  • Privacy policy link

4.3 Engagement Patterns

Social Proof

Current:

• TechCrunch quote (“Verified Expert”)
• Bison Trails acquisition mention
• $30B+ assets managed
• Notable clients implied

Strengths:

• Credible third-party validation
• Quantifiable achievements

Issues:

• Buried in expandable “More” section
• Not surfaced on homepage
• No client logos (if permissible)
• No testimonials (though testimonials page exists in code but unused)

Recommendations:

1. Surface key achievements earlier (before “More” accordion)
2. Add “As seen in” or “Clients include” section
3. Testimonials from clients (if available)
4. Press/media mentions more prominent

Trust Signals

Present:

• Consistent branding
• Professional photography
• Detailed background
• Active projects (music, writing)

Missing:

• Client logos
• Case studies
• Awards/recognition (beyond TechCrunch)
• LinkedIn integration
• Recent work timeline

4.4 Mobile Conversion Optimization

Issues

1. Contact info harder to find on mobile due to collapsed navigation
2. No tap-to-call or tap-to-email functionality optimized for mobile
3. Forms (if added) must be mobile-optimized with proper input types

Recommendations:

1. Add tel: and mailto: links for mobile
2. Ensure CTAs are large enough for thumb (min 44x44px)
3. Test form fields on mobile devices (avoid zoom-on-focus issues)
4. Consider mobile-first layout for contact page

5. PRIORITIZED RECOMMENDATIONS

P0 - Critical (Fix Immediately)

1. Add lang="en" to HTML tag (Accessibility - 5 min fix)
   • File: _includes/header.html line 2
   • Change <html> to <html lang="en">
2. Make email address clickable (Conversion - 5 min fix)
   • File: _includes/bio-short.html line 2
   • Change to: <p>Contact: <a href="mailto:[email protected]">[email protected]</a></p>
3. Add semantic navigation element (Accessibility - 15 min fix)
   • File: _includes/nav.html
   • Wrap in <nav aria-label="Main navigation"> and use <ul><li> structure
4. Add main landmark (Accessibility - 10 min fix)
   • File: _layouts/default.html line 7
   • Wrap content in <main> tag
5. Fix focus indicators (Accessibility - 15 min fix)
   • File: _sass/_html_base.scss
   • Add visible focus styles for dark background
6. Write descriptive alt text for all images (Accessibility + SEO - 30 min)
   • Audit all images in _includes/ and _pages/
   • Write meaningful descriptions

P1 - High Priority (Fix Within 1 Week)

1. Add primary CTA to navigation (Conversion - 1 hour)
   • Design and implement “Contact” or “Work Together” CTA
   • Make visually distinct from other nav items
2. Fix navigation anchor IDs (UX - 15 min)
   • File: _pages/info.html
   • Align anchor link targets with actual IDs
3. Remove/reduce preloader delay (UX - 10 min)
   • File: _includes/header.html line 26
   • Remove or reduce 350ms delay
4. Fix preloader color for dark theme (UX - 5 min)
   • File: _sass/_preloader.scss
   • Change background from #f1f4d1 to #101010
5. Add skip navigation link (Accessibility - 20 min)
   • Add hidden skip link at top of page
   • Style to appear on focus
6. Optimize mobile navigation spacing (UX/Mobile - 2 hours)
   • Reduce 10em top margin
   • Redesign mobile nav for better space efficiency

P2 - Medium Priority (Fix Within 1 Month)

1. Add contact form (Conversion - 4 hours)
   • Design form
   • Implement with accessible markup
   • Set up backend (Formspree, Netlify Forms, etc.)
2. Restructure bio content hierarchy (UX/Conversion - 3 hours)
   • Surface value proposition earlier
   • Reduce clicks to understand services
   • Add clear service offering
3. Add grid item descriptions (UX - 2 hours)
   • Write captions for each project
   • Add category tags
   • Improve scannability
4. Surface social proof earlier (Conversion - 1 hour)
   • Move key achievements before accordion
   • Consider homepage callouts
5. Audit and remove unused fonts (Performance - 1 hour)
   • Remove Rubik, Joan, Inconsolata if unused
   • Reduce page weight
6. Consolidate breakpoints (Maintenance - 2 hours)
   • Reduce from 8 to 3-4 key breakpoints
   • Test responsiveness

P3 - Low Priority (Nice to Have)

1. Replace <br /> spacing with CSS (Code quality - 2 hours)
   • Audit all pages for inline <br /> usage
   • Replace with proper margin/padding
2. Add progressive enhancement for grid (Performance/A11y - 2 hours)
   • Show content immediately
   • Enhance with Masonry after load
   • Remove opacity: 0 default
3. Create consistent link hierarchy (Design - 3 hours)
   • Define primary, secondary, tertiary link styles
   • Implement across site
   • Document in style guide
4. Add testimonials section (Conversion - 4 hours)
   • Collect client testimonials
   • Design testimonial component
   • Add to info or dedicated page
5. Create case studies (Conversion/Content - 8+ hours)
   • Document 2-3 key projects
   • Show process, results, impact
   • Add to portfolio section
6. Add search functionality (UX/A11y - 4 hours)
   • Implement site search
   • Improves WCAG 2.4.5 compliance
   • Helps users find content

6. TESTING & VALIDATION PLAN

Automated Testing

Tools to use:

1. WAVE (Web Accessibility Evaluation Tool) - https://wave.webaim.org/
   • Run on all major pages
   • Document errors, alerts, features
2. axe DevTools - Browser extension
   • Automated WCAG testing
   • Provides specific remediation guidance
3. Lighthouse - Chrome DevTools
   • Performance, Accessibility, Best Practices, SEO scores
   • Track over time
4. PageSpeed Insights - https://pagespeed.web.dev/
   • Mobile and desktop performance
   • Core Web Vitals
5. HTML Validator - https://validator.w3.org/
   • Check for markup errors
   • Ensure standards compliance

Manual Testing

Screen Reader Testing:

1. Navigate entire site with VoiceOver (Mac) or NVDA (Windows)
2. Document issues with:
   • Navigation flow
   • Content comprehension
   • Link context
   • Form accessibility (when added)

Keyboard Testing:

1. Tab through entire site
2. Verify all interactive elements reachable
3. Check focus indicators visible
4. Test Enter/Space activation

Mobile Testing:

1. Test on actual devices (iPhone, Android)
2. Verify touch targets adequate size
3. Check horizontal scrolling doesn’t occur
4. Test form inputs (when added)
5. Verify telephone/email links work

Browser Testing:

• Chrome (latest)
• Safari (latest)
• Firefox (latest)
• Edge (latest)
• Mobile Safari (iOS)
• Chrome Mobile (Android)

User Testing

Recommended:

1. Usability testing with 5 users:
   • Task: “Find out what Mark does and how to hire him”
   • Task: “Find examples of Mark’s brand work”
   • Task: “Contact Mark about a project”
   • Observe friction points
2. A/B testing (after implementing CTAs):
   • Test CTA placement (header vs. sidebar vs. footer)
   • Test CTA copy
   • Test form vs. direct email

7. CONVERSION OPTIMIZATION STRATEGY

Recommended Conversion Funnel

Current Funnel:

Homepage → Bio page → ??? → (user leaves to find contact)
Conversion rate: Unknown but likely very low

Recommended Funnel:

Homepage (with value prop + CTA)
  ↓
Info/Services page (detailed, with CTA)
  ↓
Contact form/Email (with clear next steps)
  ↓
Confirmation + Follow-up expectations

CTAs to Implement

Primary CTA: “Work with me” or “Start a project”

• Placement: Header navigation (all pages)
• Design: Distinct visual treatment (button style, different color)
• Action: Link to dedicated contact page

Secondary CTAs:

• “View recent projects” (homepage)
• “Read my background” (homepage)
• “Download portfolio” (if PDF available)
• “Schedule a call” (Calendly integration)

Tertiary CTAs:

• Social media links (existing)
• Newsletter signup (if applicable)
• Cross-promotion (music, shop)

Trust Building Elements

To add:

1. Client logos (with permission)
   • Under After client list
   • Notable brands worked with
2. Case studies (2-3 detailed)
   • Problem, approach, solution, results
   • Quantifiable outcomes
   • Client testimonial
3. Media mentions
   • TechCrunch (already mentioned)
   • Other press/podcasts
   • Speaking engagements
4. Credentials
   • MFA from Parsons (mentioned but buried)
   • Notable roles (Coinbase, Bison Trails)
   • Years of experience

Mobile Conversion Optimization

Mobile-specific CTAs:

1. Sticky header CTA on mobile
2. Tap-to-call/email functionality
3. Simplified form for mobile (name, email, brief message)
4. WhatsApp integration (if applicable for international clients)

8. BRAND CONSISTENCY & DESIGN SYSTEM

Current Design Tokens

Colors:

• Background: #101010 (very dark gray)
• Text: #f3f3f3 (off-white)
• Preloader: #f1f4d1 (light yellow) - inconsistent
• Animation colors: gold, orange, yellow, lightblue, lightpurple

Typography:

• Primary: Courier New (monospace)
• Loaded but unused: Rubik, Joan, Inconsolata

Spacing:

• Inconsistent (uses both CSS and <br /> tags)
• Base unit unclear

Breakpoints:

• Too many (8 total)
• Not semantically named (by width, not device)

Recommendations for Design System

1. Define Core Design Tokens:

// Colors
$color-bg-dark: #101010;
$color-text-light: #f3f3f3;
$color-accent: #[to be defined]; // for CTAs
$color-hover: #[to be defined];

// Typography
$font-primary: 'Courier New', Courier, monospace;
$font-size-base: 16px;
$font-size-mobile: 18px;
$line-height: 1.55em;

// Spacing (using 8px base unit)
$space-xs: 0.5rem;  // 8px
$space-sm: 1rem;    // 16px
$space-md: 2rem;    // 32px
$space-lg: 4rem;    // 64px
$space-xl: 8rem;    // 128px

// Breakpoints
$breakpoint-mobile: 768px;
$breakpoint-tablet: 1024px;
$breakpoint-desktop: 1440px;

2. Component Library:

• Document each component type (navigation, cards, buttons, forms)
• Define states (default, hover, focus, active, disabled)
• Create Figma/design file with components
• Ensure accessibility baked into each component

3. Style Guide:

• Typography scale and usage
• Color palette and usage
• Spacing system
• Grid system
• Iconography (if applicable)
• Photography style
• Motion/animation principles

9. SEO IMPACT OF UX/A11Y ISSUES

Current SEO Issues Related to UX/A11y

1. Missing semantic HTML - Search engines rely on proper structure
2. Poor alt text - Images don’t contribute to SEO
3. No clear H1 on homepage - Missing primary keyword signal
4. Inconsistent internal linking - Diluted page authority
5. Long loading time (preloader delay) - Affects Core Web Vitals

Recommended SEO Improvements

1. Add proper heading hierarchy on all pages
2. Write SEO-optimized alt text for all images
3. Add schema.org markup:
   • Person schema for Mark Forscher
   • Organization schema for Under After
   • Service schema for brand design services
4. Optimize meta descriptions (currently minimal)
5. Add internal links with descriptive anchor text
6. Create sitemap.xml (Jekyll plugin available)
7. Add robots.txt (if not present)

10. ANALYTICS & MEASUREMENT

Recommended Tracking

Current: Google Analytics installed (UA-39022323-1)

Additional tracking needed:

1. Goal Conversion Tracking:
   • Email clicks
   • Form submissions (when added)
   • CTA clicks
   • Time on bio/info page
2. Event Tracking:
   • “More” accordion expansion
   • External link clicks
   • Grid item clicks
   • Video plays
3. User Flow Analysis:
   • Top entry pages
   • Exit pages
   • Path to contact
   • Drop-off points
4. A/B Testing Platform:
   • Google Optimize (free)
   • Optimizely
   • VWO

Key Metrics to Monitor

1. Conversion Rate: Visitors → Contact actions
2. Bounce Rate: Especially on homepage
3. Time on Page: Info page vs homepage
4. Mobile vs Desktop: Conversion differences
5. Traffic Sources: Which channels drive qualified leads

APPENDIX A: Code Examples

A1: Accessible Navigation

Current (in _includes/nav.html):

<div id="nav">
  <a class="logo" href="/">...</a>
  <div class="nav-links">
    <a href="/info/#bio">Info</a> &middot;
    <a href="/recent/">Projects</a> &middot;
    <a href="/words/">Words</a>
  </div>
</div>

Recommended:

<nav aria-label="Main navigation">
  <a class="logo" href="/" aria-label="Mark Forscher home">
    <picture class="" style="border:0;"><source type="image/webp" srcset="/images/2021/2021-mark-forscher-sig.webp"><source type="image/png" srcset="/images/2021/2021-mark-forscher-sig.png"><img src="/images/2021/2021-mark-forscher-sig.png" alt="" style="border:0;"></picture>


  </a>
  <ul class="nav-links">
    <li><a href="/info/#bio">Info</a></li>
    <li><a href="/recent/">Projects</a></li>
    <li><a href="/words/">Words</a></li>
    <li><a href="/contact/" class="cta-primary">Contact</a></li>
  </ul>
</nav>

A2: Accessible Accordion

Current (in _pages/info.html):

<p><a href="#background" class="bio-read-more">&darr; More</a></p>
<div class="bio-more-content" style="display:none;">
  ...
</div>

Recommended:

<button
  class="bio-read-more"
  aria-expanded="false"
  aria-controls="bio-more-content"
>
  <span class="visually-hidden">Show more about </span>Background
  <span aria-hidden="true">&darr;</span>
</button>
<div id="bio-more-content" class="bio-more-content" hidden>
  ...
</div>

With corresponding JavaScript update:

$("button.bio-read-more").click(function(event) {
  event.preventDefault();
  const expanded = this.getAttribute('aria-expanded') === 'true';
  this.setAttribute('aria-expanded', !expanded);
  const content = document.getElementById(this.getAttribute('aria-controls'));
  if (expanded) {
    content.hidden = true;
  } else {
    content.hidden = false;
    // Scroll behavior...
  }
});

A3: Skip Link

Add to _includes/header.html (after <body> tag):

<a href="#main-content" class="skip-link">Skip to main content</a>

Add to _sass/_utilities.scss:

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: $color-text-light;
  color: $color-bg-dark;
  padding: 8px;
  text-decoration: none;
  z-index: 100;

  &:focus {
    top: 0;
  }
}

A4: Visible Focus Indicators

Add to _sass/_html_base.scss:

*:focus {
  outline: 2px solid $color-text-light;
  outline-offset: 2px;
}

// Remove outline for mouse users, keep for keyboard
*:focus:not(:focus-visible) {
  outline: none;
}

*:focus-visible {
  outline: 2px solid $color-text-light;
  outline-offset: 2px;
}

APPENDIX B: Accessibility Checklist

Quick Reference Checklist

Perceivable:

• All images have meaningful alt text
• Color is not the only means of conveying information
• Text has sufficient contrast (18.5:1 - PASS)
• Content can be resized to 200% without loss of functionality
• No information conveyed by shape, size, or location alone

Operable:

• All functionality available via keyboard
• Skip navigation link present
• Focus indicators visible
• No keyboard traps
• Page titled appropriately (PASS)
• Link purpose clear from context
• Multiple ways to find content
• Headings and labels descriptive

Understandable:

• Language of page identified
• Language of parts identified (if applicable)
• Navigation consistent across pages (PASS)
• Consistent identification of components (PASS)
• Error identification and suggestions (N/A - no forms yet)
• Labels or instructions for user input (N/A)

Robust:

• Valid HTML markup
• Name, role, value for UI components
• Status messages communicated to assistive tech

SUMMARY & NEXT STEPS

Quick Wins (Can Implement Today)

1. Add lang="en" attribute
2. Make email clickable with mailto: link
3. Fix focus indicators
4. Write better alt text for images
5. Add semantic HTML5 elements (nav, main)

High-Impact Changes (This Week)

1. Add “Contact” CTA to navigation
2. Create dedicated contact page with form
3. Fix mobile navigation spacing
4. Surface social proof earlier (move TechCrumb quote up)
5. Remove preloader delay

Strategic Improvements (This Month)

1. Restructure info architecture to clarify services
2. Add case studies for key projects
3. Implement comprehensive analytics tracking
4. Conduct user testing on conversion flow
5. Build out design system documentation

Ongoing Optimization

1. Monitor conversion metrics
2. A/B test CTAs and messaging
3. Collect and display client testimonials
4. Regular accessibility audits
5. Performance optimization

This audit provides a roadmap for improving the Mark Forscher portfolio website across UX, design, accessibility, and conversion metrics. Implementing these recommendations will create a more inclusive, effective, and business-driving website that better serves both users and business goals.

Questions or need clarification on any recommendation? Let me know and I’m happy to elaborate on implementation details.