# Mobile App Feature Page Documentation

**Last Updated:** 2026-02-06

## Overview

Complete documentation for the Ordio mobile app feature page (`product_mobile_app.php`). This page showcases the Ordio Mitarbeiter-App (employee mobile app) with benefit-focused messaging, feature showcases, and conversion-optimized CTAs.

## Page Information

- **File:** `v2/pages/product_mobile_app.php`
- **URL:** `https://www.ordio.com/mitarbeiter-app`
- **Page Type:** Product Feature Page
- **Status:** ✅ Complete
- **Created:** 2026-02-02

## Page Structure

### 1. Hero Section

**Layout:** Two-column grid (text left, image right on desktop)

**Content:**
- Badge: "Mobil & synchron"
- H1: "Ordio Mitarbeiter-App – Alles für dein Team in einer App"
- Subheadline: "Schichten einsehen, Zeiten erfassen, Urlaub beantragen – alles mobil und synchron mit Ordio Workspace."
- Primary CTA: "Kostenlos testen"
- Hero Image: Dashboard screenshot (`dashboard-009-IMG_2664.webp`)

**SEO:**
- H1 includes primary keyword "Mitarbeiter-App"
- Benefit-focused messaging
- Image preloaded with `fetchpriority="high"`

### 2. Benefits Section

**Layout:** Grid (1 col mobile, 2-3 cols desktop)

**Content:** 6 benefit cards with icons:
1. Sieh deine Schichten immer im Blick
2. Stemple unterwegs – auch offline
3. Beantrage Urlaub mit wenigen Taps
4. Erledige Checklisten mobil
5. Lade Dokumente direkt hoch
6. Bleib immer informiert

**Design:**
- White cards with shadow
- Ordio Blue icon backgrounds
- SVG icons inline
- AOS fade-up animations

**CTA:** Secondary CTA after benefits section

### 3. Feature Showcase Sections (Scroll-Based Visual Switching)

**Layout:** Unified scroll-based visual switching layout (inspired by nesto-software.com)
- **Left Column:** All 4 text sections stacked vertically (scrollable)
- **Right Column:** Single sticky visual container that changes based on active text section
- **Visual Switching:** Smooth crossfade transitions triggered by scroll position using Intersection Observer API

**Features Showcased:**
1. **Schichtplanung ohne Rückfragen** - Calendar/list view, filtering, availability
2. **Minutengenauer Zeiterfassung** - Clock in/out, GPS tracking, offline support
3. **Urlaub mit einem Klick beantragen** - Vacation requests, balance tracking, status
4. **Dokumente & Nachrichten erreichen alle** - Documents, broadcasts, push notifications

**Text Sections Structure:**
- Each section has unique ID: `section-schichtplanung`, `section-zeiterfassung`, `section-urlaub`, `section-dokumente`
- Each section has `data-visual-id` attribute for visual mapping
- Sections stacked with consistent spacing (`space-y-24`)
- All sections maintain existing content structure (H2, description, feature list, link)

**Visual Container:**
- Sticky positioning (`position: sticky; top: 50%; transform: translateY(-50%)`) on desktop/tablet
- Visual centered vertically in viewport, scrolls dynamically with active section
- Disabled on mobile (<1024px) - visuals stack vertically
- Contains 4 visual images with IDs: `visual-schichtplanung`, `visual-zeiterfassung`, `visual-urlaub`, `visual-dokumente`
- Crossfade transitions (opacity-based, 0.5s cubic-bezier)
- Visuals stacked absolutely for smooth crossfade

**Visual Switching Logic:**
- Uses Intersection Observer API for performance
- Switches visual when text section is ≥25% visible in viewport (`switchThreshold: 0.25`)
- Tracks intersection ratios for all sections simultaneously
- Handles edge cases (multiple sections visible, rapid scrolling)
- Initial visual set based on first section or most visible section on page load

**Scroll-Based Positioning:**
- Visual scrolls dynamically with user scroll
- Calculates active section center vs viewport center
- Applies `translateY(calc(-50% + ${offset}px))` transform to sticky wrapper
- Visual follows active section's center position
- Uses `requestAnimationFrame` for smooth 60fps updates
- Throttled scroll listener prevents performance issues

**Boundary Detection:**
- Visual appears only when first section (`.mobile-app-text-section-first`) enters viewport
- Visual disappears when last section (`.mobile-app-text-section-last`) exits viewport
- Visual hidden when features section (`#mobile-app-features`) is out of viewport
- Transform reset when boundaries are exceeded

**Temporary State:**
- Component includes temporarily disabled (preserved in comments):
  - `calendar-component.php` - Schichtplanung visual
  - `timer-component.php` - Zeiterfassung visual
  - `absence-form-component.php` - Urlaub visual
  - `documents-broadcast-component.php` - Dokumente visual
- Placeholder visuals show section names
- Components will be restored/enhanced after visual file integration

**JavaScript:**
- File: `v2/js/mobile-app-visual-switcher.js` (minified: `.min.js`)
- **Rebuilt from scratch** - Clean, simple implementation
- Intersection Observer configuration:
  - `rootMargin: '0px 0px -50% 0px'` (standard pattern for scroll-based switching)
  - `threshold: [0, 0.25, 0.5, 0.75, 1.0]` (multiple thresholds for smooth switching)
  - `switchThreshold: 0.25` (switch when section is ≥25% visible)
- Scroll positioning:
  - Uses `requestAnimationFrame` for smooth updates
  - Calculates `offset = sectionCenter - viewportCenter`
  - Applies transform: `translateY(calc(-50% + ${offset}px))`
  - Throttled scroll listener (passive: true)
- Boundary detection:
  - Checks features section visibility
  - Checks first section entry (visual appears)
  - Checks last section exit (visual disappears)
  - Resets transform when out of bounds
  - `switchThreshold: 0.15` (switches when section is ≥15% visible - responsive)
- Initialization: Single DOMContentLoaded handler, no competing fallbacks
- Fallback: Shows first visual if Intersection Observer not supported
- Performance optimized: Uses `will-change: opacity` for smooth transitions
- Debug mode: Set `CONFIG.debug = true` to enable console logging

**CSS:**
- Sticky positioning: `.mobile-visual-container` (sticky on desktop, static on mobile)
- Visual transitions: `.mobile-visual` (opacity-based crossfade)
- Responsive breakpoints: 1024px (sticky enabled/disabled)
- Visual container: Absolute positioning for stacked visuals, relative for active visual

### 4. User Type Benefits Section

**Layout:** Three-column grid

**User Types:**
1. **Für Mitarbeiter** - 5 benefits
2. **Für Führungskräfte** - 5 benefits
3. **Für HR** - 5 benefits

**Design:**
- White cards with icons
- Benefit lists with checkmarks
- AOS fade-up animations with delays

### 5. Comparison Table

**Layout:** Responsive table (card layout on mobile)

**Comparison Points:**
- Zeiterfassung unterwegs
- Schichten einsehen
- Urlaub beantragen
- Push-Benachrichtigungen
- Offline-Funktionen
- Mobile Optimierung

**Comparison:** Mobile App vs. Web-only vs. Manual

**Design:**
- Checkmarks for Mobile App advantages
- X marks for missing features
- "Teilweise" for partial support
- Highlighted Mobile App column

**CTA:** Secondary CTA after comparison table

### 6. Integration Section

**Layout:** Three-column grid

**Integration Points:**
1. Echtzeit-Synchronisation
2. Sichere Daten
3. Plattformübergreifend

**Design:**
- White cards with icons
- Centered text
- AOS animations

### 7. FAQ Section

**Layout:** Accordion/collapsible details

**FAQ Questions (8 total):**
1. Ist die App kostenlos?
2. Funktioniert die App offline?
3. Welche Geräte werden unterstützt?
4. Wie synchronisiert die App mit Ordio Workspace?
5. Ist die App DSGVO-konform?
6. Wie lange dauert die Einrichtung?
7. Welche Sprachen werden unterstützt?
8. Gibt es Push-Benachrichtigungen?

**Design:**
- Details/summary HTML5 elements
- Custom arrow SVG
- Gray background cards
- Smooth transitions

**Schema:** FAQPage schema included in JSON-LD

### 8. Final CTA Section

**Layout:** Centered, full-width blue background

**Content:**
- H2: "Bereit, die Ordio Mitarbeiter-App zu testen?"
- Subheadline: "Starte jetzt kostenlos und unverbindlich. Die App ist für alle Ordio-Kunden verfügbar."
- Primary CTA: "Kostenlos testen"
- Secondary CTA: "Demo vereinbaren"

**Design:**
- Ordio Blue background (`bg-ordio-blue`)
- White text
- Dark CTA buttons

## SEO Implementation

### Meta Tags

**Title:** "Ordio Mitarbeiter-App: Alles mobil & synchron - Ordio" (58 chars)
- Includes primary keyword "Mitarbeiter-App"
- Includes benefit "Alles mobil & synchron"
- Includes brand "Ordio"

**Description:** "Mit der Ordio Mitarbeiter-App siehst du Schichten, stempelst Zeiten und beantragst Urlaub mobil. Synchron mit Ordio Workspace. Kostenlos testen." (158 chars)
- Du tone
- Benefit-driven
- Includes CTA
- Natural keyword integration

**Canonical:** `https://www.ordio.com/mitarbeiter-app`

**OG Tags:**
- og:title, og:description, og:url, og:image, og:type, og:locale
- Image: Dashboard screenshot

**Twitter Cards:**
- summary_large_image
- Title, description, image

### Schema.org Markup

**WebPage Schema:**
- Name, description, URL
- datePublished, dateModified
- inLanguage: "de-DE"

**SoftwareApplication Schema:**
- name: "Ordio Mitarbeiter-App"
- applicationCategory: "BusinessApplication"
- operatingSystem: "iOS, Android"
- offers: €89/Standort/Monat
- aggregateRating: 4.9/5, 54 reviews
- featureList: 8 specific features
- screenshot: Dashboard screenshot URL

**Service Schema:**
- serviceType: "Mobile Mitarbeiter-App"
- provider: Ordio GmbH
- areaServed: Deutschland

**BreadcrumbList Schema:**
- Home → Mitarbeiter-App

**FAQPage Schema:**
- 8 questions with answers
- Structured for rich results

## Content Strategy

### Tone & Style

- **Du tone:** Informal "du" pronouns throughout
- **Benefit-focused:** Lead with outcomes, not features
- **Natural language:** Conversational, avoid AI content tells
- **Ordio mentions:** Once per major section, naturally integrated
- **Paragraph length:** 2-3 sentences max
- **Active voice:** Present tense, action-oriented

### Key Messages

**Primary Value Proposition:**
"Alles für dein Team in einer App – Schichten einsehen, Zeiten erfassen, Urlaub beantragen, mobil und synchron mit Ordio Workspace."

**Core Benefits:**
1. Schichten immer im Blick
2. Unterwegs ein- und ausstempeln
3. Urlaub mit wenigen Taps beantragen
4. Checklisten mobil erledigen
5. Dokumente direkt hochladen
6. Immer informiert bleiben

### Keyword Integration

**Primary Keywords:**
- Mitarbeiter-App (H1, title, throughout)
- Mobile App Zeiterfassung
- Schichtplanung App

**Secondary Keywords:**
- Arbeitszeiterfassung App
- Urlaubsplanung App
- HR App

**Natural Integration:**
- Keywords integrated naturally in content
- No keyword stuffing
- Focus on user intent

## Visual Assets

### Screenshots Used

1. **Hero:** `dashboard-009-IMG_2664.webp` (Dashboard)
2. **Schichtplanung:** `schichtplanung-015-IMG_2670.webp`
3. **Zeiterfassung:** `zeiterfassung-046-IMG_2701.webp`
4. **Abwesenheiten:** `abwesenheiten-018-IMG_2673.webp`

### Icons

All icons are inline SVG:
- Calendar, Clock, Arrow, Checklist, Document, Notification
- User, Shield, File (user types)
- Sync, Lock, Device (integration)

### Image Optimization

- Hero image: Preloaded with `fetchpriority="high"`
- Feature screenshots: Lazy loaded with `loading="lazy"`
- All images: Explicit `width` and `height` attributes
- All images: `decoding="async"` for performance
- Format: WebP
- Alt text: Descriptive, benefit-focused

## CTAs

### Primary CTAs

1. **Hero Section:** "Kostenlos testen" (above fold)
2. **After Benefits:** "Kostenlos testen" + "Demo vereinbaren"
3. **After Comparison:** "Kostenlos testen" + "Demo vereinbaren"
4. **Final CTA:** "Kostenlos testen" + "Demo vereinbaren" (blue background)

### CTA Placement

- Hero: Primary CTA above fold
- After Benefits: Secondary CTA
- After Comparison: Secondary CTA
- Final: Primary + Secondary CTAs

**Frequency:** Every 2-3 sections (as per best practices)

## Internal Linking

**Links to Related Pages:**
- Schichtplanung → `/schichtplanung`
- Zeiterfassung → `/arbeitszeiterfassung`
- Abwesenheiten → `/abwesenheiten`

**Link Text:** "Mehr zur [Feature] erfahren →"

## Performance Optimization

### Image Optimization

- ✅ Hero image preloaded
- ✅ Below-fold images lazy loaded
- ✅ Explicit width/height attributes
- ✅ WebP format
- ✅ Async decoding
- ✅ Descriptive alt text

### CSS/JS

- ✅ Uses shared `product-pages.min.css`
- ✅ Uses `mobile-app-components.min.css` (includes scroll-based visual switching styles)
- ✅ AOS animations script included
- ✅ `mobile-app-visual-switcher.min.js` for scroll-based visual switching
- ✅ No inline styles (except FAQ arrows)
- ✅ Deferred scripts where appropriate
- ✅ Intersection Observer API for performance (no scroll listeners)

### Page Load

- Target: <3s page load
- Optimized images
- Minimal CSS/JS
- Efficient markup

## Mobile Optimization

### Responsive Design

- Mobile-first approach
- Breakpoints: sm, md, lg
- Grid layouts adapt to screen size
- Comparison table: Card layout on mobile (consider)

### Touch Targets

- CTA buttons: min 48px height
- FAQ accordions: Full-width touch targets
- All interactive elements: Accessible touch targets

### Mobile Testing

- Tested on: 360px, 375px, 390px, 412px, 430px
- No horizontal scrolling
- Proper spacing on mobile
- Readable text sizes

## Accessibility

### WCAG AA Compliance

- ✅ Image alt text (descriptive, benefit-focused)
- ✅ Heading hierarchy (H1 → H2 → H3)
- ✅ Keyboard navigation (FAQ accordions)
- ✅ Color contrast (Ordio Blue on white: sufficient)
- ✅ Focus states (CTA buttons, FAQ)
- ✅ ARIA attributes (FAQ details/summary)

### Screen Reader Support

- Semantic HTML5 elements
- Proper heading structure
- Descriptive alt text
- FAQ structured for screen readers

## Validation

### Content Validation

- ✅ Du tone throughout
- ✅ Ordio mentions (once per major section)
- ✅ Benefit-focused copy
- ✅ Paragraph length (2-3 sentences)
- ✅ Natural language (no AI content tells)

### Technical Validation

- ✅ Schema.org markup (validated structure)
- ✅ Meta tags (title <60, description 155-160)
- ✅ Canonical URL correct
- ✅ OG tags complete
- ✅ All CTAs functional
- ✅ Internal links correct

### SEO Validation

- ✅ Primary keyword in H1
- ✅ Keywords integrated naturally
- ✅ Internal linking structure
- ✅ Image alt text optimized
- ✅ Schema markup complete

## Analytics & Tracking

### GTM Events

- CTA button clicks tracked via `data-event-type` and `data-event-name`
- Form submissions tracked (if forms added)
- Page view tracking (via GTM)

### Conversion Tracking

- Primary CTA: "Kostenlos testen"
- Secondary CTA: "Demo vereinbaren"
- Callback button: "Rückruf anfordern" (in hero)

## Visual Integration (Next Steps)

### Visual File Requirements

**Location:** Visual files will be provided by user and integrated into visual container placeholders.

**Expected Structure:**
- 4 app visual images (one per feature section)
- Format: WebP (preferred) or PNG
- Dimensions: Optimized for mobile device frame (max-width: 360px)
- Aspect ratio: Maintain mobile device proportions

**Visual Mapping:**
1. `visual-schichtplanung` → Schichtplanung ohne Rückfragen section
2. `visual-zeiterfassung` → Minutengenauer Zeiterfassung section
3. `visual-urlaub` → Urlaub mit einem Klick beantragen section
4. `visual-dokumente` → Dokumente & Nachrichten erreichen alle section

**Integration Steps:**
1. Replace placeholder content in each `.mobile-visual-placeholder-content` div
2. Add `<img>` tags with proper srcset and sizes attributes
3. Optimize images (WebP format, responsive sizes)
4. Add proper alt text for accessibility
5. Test visual loading and crossfade transitions
6. Consider restoring/enhancing original components later

## Future Enhancements

### Potential Additions

1. **Visual Integration:** Replace placeholders with actual app visuals (pending user-provided images)
2. **Component Restoration:** Restore/enhance original component includes after visual integration
3. **App Store Badges:** Add iOS and Android badges to hero section
4. **Social Proof:** Add testimonials, ratings, customer logos
5. **Video:** Add app demo video (30-60 seconds)
6. **Animated GIF:** Add feature demonstration GIFs
7. **Additional Features:** Add Checklists and Documents feature showcases

### Content Updates

- Update pricing if changed
- Update ratings/reviews quarterly
- Add new features as app evolves
- Update screenshots when UI changes

## Related Documentation

- [Mobile App Content Strategy](mobile-app-content-strategy.md) - Content strategy document
- [Mobile App Asset Requirements](mobile-app-asset-requirements.md) - Asset requirements
- [Mobile App Documentation](../../product-features/mobile-app-documentation.md) - Feature documentation
- [Mobile App Benefits](../../product-features/mobile-app-benefits.md) - Benefits documentation
- [Product Pages Guide](../../../guides/PAGE_TYPE_GUIDES.md) - Page type guide
- [Product Pages Cursor Rules](../../../../.cursor/rules/product-pages.mdc) - Cursor rules

## Maintenance

### Update Schedule

- **Content:** Update when app features change
- **Screenshots:** Update when UI changes
- **Ratings:** Update quarterly
- **Pricing:** Update if pricing changes
- **Schema:** Update when structure changes

### Common Updates

- Add new feature screenshots
- Update benefit descriptions
- Add new FAQ questions
- Update user type benefits
- Refresh comparison table

## Troubleshooting Visual Switching

### Visual Not Appearing on Page Load

**Symptoms:** Visual doesn't show when page loads with features section in viewport.

**Solutions:**
1. **Check JavaScript Configuration:**
   - Verify `rootMargin: '0px 0px -50% 0px'` (not `'-20vh 0px -30% 0px'`)
   - Verify `switchThreshold: 0.15` (not `0.25`)
   - Check browser console for JavaScript errors

2. **Check CSS Conflicts:**
   - Ensure no CSS fallback is showing first visual by default
   - All visuals should start with `opacity: 0`
   - Only `.active` class should set `opacity: 1`
   - Remove any CSS rules like `.mobile-visual:first-child { opacity: 1; }`

3. **Enable Debug Mode:**
   - Set `CONFIG.debug = true` in `mobile-app-visual-switcher.js`
   - Check console for initialization logs and intersection updates
   - Use debug script: `v2/scripts/dev-helpers/debug-visual-switcher.js`

### Visual Not Switching During Scroll

**Symptoms:** Visual stays on first image and doesn't change when scrolling.

**Solutions:**
1. **Verify Intersection Observer:**
   - Check browser console for Intersection Observer errors
   - Verify sections have correct `data-visual-id` attributes
   - Verify visual containers have matching IDs (`visual-{id}`)
   - Check that sections are actually visible in viewport

2. **Check Configuration:**
   - Verify `rootMargin: '0px 0px -50% 0px'` (standard pattern)
   - Verify `switchThreshold: 0.15` (responsive switching)
   - Check `threshold: [0, 0.25, 0.5, 0.75, 1.0]`

3. **Test Initialization:**
   - Check that script loads after DOM is ready
   - Verify features section (`#mobile-app-features`) exists
   - Verify visual container (`.mobile-visual-container`) exists

### Visual Flickering or Rapid Switching

**Symptoms:** Visual switches too quickly or flickers during scroll.

**Solutions:**
1. **Adjust Transition Delay:**
   - Increase `transitionDelay` in CONFIG (default: 100ms)
   - Prevents rapid switching during fast scroll

2. **Check Threshold:**
   - Increase `switchThreshold` slightly (e.g., from 0.15 to 0.2)
   - Requires more section visibility before switching

3. **Verify Transition Timing:**
   - Check CSS transition: `opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1)`
   - Ensure transitions complete before next switch

### Visual Shows Too Early or Overlaps Previous Sections

**Symptoms:** Visual appears before its corresponding text section is visible.

**Solutions:**
1. **Check Spacer Element:**
   - Verify `.mobile-visual-spacer` exists before sticky wrapper
   - Adjust spacer height to match first section's padding-top

2. **Adjust Sticky Position:**
   - Check `.mobile-visual-container-wrapper` `top` value (should be `10vh`)
   - Verify `z-index` doesn't cause overlap issues

### Browser Compatibility Issues

**Symptoms:** Visual switching works in some browsers but not others.

**Solutions:**
1. **Check Intersection Observer Support:**
   - Verify browser supports Intersection Observer API
   - Fallback: First visual shows if not supported

2. **Test in Multiple Browsers:**
   - Chrome, Firefox, Safari
   - Check for browser-specific CSS or JavaScript issues

3. **Check Console Errors:**
   - Look for browser-specific JavaScript errors
   - Verify no conflicting scripts

### Debugging Tools

**Debug Script:**
- Location: `v2/scripts/dev-helpers/debug-visual-switcher.js`
- Usage: Load in browser console to get detailed state information
- Outputs: Section detection, visual states, Intersection Observer status

**Debug Mode:**
- Enable: Set `CONFIG.debug = true` in `mobile-app-visual-switcher.js`
- Logs: Initialization, intersection updates, visual switching events
- Disable: Set `CONFIG.debug = false` for production

**Browser DevTools:**
- Check Elements tab: Verify `.active` class on correct visual
- Check Console: Look for JavaScript errors or warnings
- Check Network: Verify JavaScript file loads correctly
- Check Performance: Monitor scroll performance and transitions

## Notes

- Page follows product page template structure
- Uses existing product-pages.css
- All content benefit-focused (not feature lists)
- Du tone throughout
- Natural keyword integration
- Mobile-responsive design
- Performance optimized
- Accessibility compliant