# Ordio Mobile App – Screenshot Gallery

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

Visual reference for Ordio Mitarbeiter-App screens. Screenshots are organized by feature area under `/v2/img/mobile-app/screens/webp/[feature_area]/`.

## Image Standards

- **Format:** WebP (85% quality, max 1920px width)
- **Naming:** `[feature-slug]-[sequence]-[screenshot-id].webp`
- **Alt text:** "[Feature name] [view type] showing [key elements]"
- **Responsive:** Use srcset with multiple sizes where variants exist

## Example Markup (responsive)

```html
<img
  src="/v2/img/mobile-app/screens/webp/other/other-000-IMG_2655.webp"
  srcset="/v2/img/mobile-app/screens/webp/other/other-000-IMG_2655.webp 640w,
          /v2/img/mobile-app/screens/thumbs/IMG_2655.webp 320w"
  sizes="(max-width: 640px) 320px, 640px"
  alt="Ordio Mitarbeiter-App screen 1 showing mobile app interface"
  width="640"
  height="1398"
  loading="lazy"
/>
```

## Thumbnails

Thumbnails (320px width) are in `/v2/img/mobile-app/screens/thumbs/[screenshot_id].webp` for quick reference.

## Screenshot Paths by Feature Area

- **other:** `/v2/img/mobile-app/screens/webp/other/` (90 screens; refine after full AI analysis)
- After full analysis: expect subdirs such as login, dashboard, schichtplanung, zeiterfassung, abwesenheiten, profile, settings, checklists, documents, shift_applications.

## Full Mapping

See `docs/data/mobile-app-screenshot-name-mapping.json` for original HEIC → organized WebP path mapping.

## Related Documentation

- [mobile-app-documentation.md](mobile-app-documentation.md) – Main mobile app documentation
- [mobile-app-screens.md](mobile-app-screens.md) – Screen-by-screen list
- [VISUAL_DOCUMENTATION_PLAN.md](VISUAL_DOCUMENTATION_PLAN.md) – Project visual documentation standards