Definition Orientation

Orientation (dt. Ausrichtung) bezeichnet die räumliche Lage, in der ein mobiles Endgerät gehalten wird, und bestimmt damit das Seitenverhältnis, in dem Webinhalte dargestellt werden. Smartphones und Tablets können im Hochformat (Portrait, vertikal) oder im Querformat (Landscape, horizontal) genutzt werden – und die Website muss ihre Inhalte in beiden Ansichten optimal anzeigen.

Im Portrait-Modus ist der Bildschirm höher als breit (typisch: 9:16 bei Smartphones), im Landscape-Modus breiter als hoch (16:9). Da die verfügbare Breite und Höhe sich beim Drehen des Geräts grundlegend ändern, müssen Layout, Navigation, Schriftgrößen und Medienelemente dynamisch reagieren. Im Responsive Webdesign wird die aktuelle Orientation über CSS Media Queries abgefragt – etwa @media (orientation: portrait) oder @media (orientation: landscape) –, um die Darstellung entsprechend anzupassen. Anders als oft vereinfacht dargestellt, werden dabei heute keine separaten Stylesheets geladen, sondern innerhalb eines einzigen Stylesheets orientierungsspezifische Regeln definiert.

Für die technische Umsetzung orientierungsabhängiger Layouts stehen zwei Ansätze zur Verfügung: CSS Media Queries für deklarative Stilanpassungen und die Screen Orientation API für programmatische Steuerung per JavaScript.

• CSS Media Queries: Die Eigenschaft orientation innerhalb einer @media-Regel prüft, ob die Viewport-Breite größer als die Höhe ist (landscape) oder umgekehrt (portrait). Diese Abfrage lässt sich mit weiteren Bedingungen wie min-width, max-width oder aspect-ratio kombinieren, um präzise Breakpoints zu definieren – etwa ein dreispaltiges Layout ab 1024 Pixel Breite im Querformat und ein einspaltiges im Hochformat.
• Screen Orientation API: Die JavaScript-Schnittstelle screen.orientation liefert den aktuellen Orientierungstyp (z. B. portrait-primary, landscape-secondary) und ermöglicht es, auf Orientierungswechsel mit einem Event-Listener zu reagieren. Damit lassen sich Funktionen auslösen, die über reine CSS-Anpassungen hinausgehen – etwa das Neuberechnen einer Diagrammgröße oder das Umschalten einer Kartenansicht.
• Orientation Lock: Über die Screen Orientation API können Webanwendungen die Ausrichtung auf Portrait oder Landscape fixieren – sinnvoll bei Spielen, Videoplayern oder Präsentations-Apps, die nur in einer Ausrichtung funktionieren. Diese Funktion steht allerdings nur für installierte Progressive Web Apps (PWAs) im Vollbildmodus zur Verfügung, nicht für reguläre Browser-Tabs.
• Viewport-Meta-Tag: Der Tag <meta name="viewport" content="width=device-width, initial-scale=1"> ist die Voraussetzung dafür, dass Media Queries auf mobilen Geräten korrekt greifen. Ohne diesen Tag interpretieren mobile Browser die Seite als Desktop-Version und skalieren sie herunter – die Orientation-Abfrage wäre dann wirkungslos.

Die Orientation beeinflusst die Usability einer Website erheblich, weil sie das verfügbare Platzangebot und damit die Informationsarchitektur jeder einzelnen Ansicht verändert.

• Navigation: Im Portrait-Modus ist die Bildschirmbreite begrenzt, weshalb die Hauptnavigation typischerweise in ein Hamburger-Menü (☰) eingeklappt wird. Im Landscape-Modus stehen oft genügend Pixel zur Verfügung, um die Navigation horizontal sichtbar zu halten – ein Wechsel, der über Media Queries mit orientation-Abfrage gesteuert wird.
• Lesekomfort: Texte sind im Hochformat auf Smartphones in der Regel besser lesbar, weil die Zeilenlänge natürlich begrenzt bleibt. Im Querformat können Zeilen zu lang werden (über 80 Zeichen), was die Lesegeschwindigkeit senkt – eine max-width-Begrenzung des Textcontainers auf 65–75 Zeichen pro Zeile schafft Abhilfe.
• Tabellen und Datendarstellungen: Breite Datentabellen, die im Portrait abgeschnitten oder horizontal scrollbar werden, lassen sich im Landscape vollständig darstellen. Manche Websites blenden deshalb im Portrait einen Hinweis ein: „Drehen Sie Ihr Gerät für die vollständige Ansicht."
• Formulare und Eingabefelder: Im Landscape-Modus mit eingeblendeter virtueller Tastatur bleibt auf Smartphones extrem wenig sichtbare Fläche übrig – teilweise nur 150–200 Pixel Höhe über der Tastatur. Formulare sollten daher im Landscape keine überflüssigen Elemente oberhalb des aktiven Eingabefeldes anzeigen.
• Bilder und Medien: Vollbreite Hero-Bilder, die im Portrait eindrucksvoll wirken, können im Landscape den gesamten Viewport einnehmen und den eigentlichen Inhalt unter den Fold drücken. Eine orientierungsabhängige Höhenbegrenzung (z. B. max-height: 50vh im Landscape) verhindert dieses Problem.

Die Wahl zwischen vertikaler und horizontaler Ausrichtung bei Videos, Bannern und anderen Werbemitteln ist eine der folgenreichsten Entscheidungen in der Content-Produktion, weil sie direkt über die Nutzererfahrung auf der Zielplattform entscheidet.

• Vertikale Videos (9:16, Portrait): Standard für TikTok, Instagram Reels, YouTube Shorts und Instagram Stories. Da über 90 % der Smartphone-Nutzung im Hochformat stattfinden, erreichen vertikale Videos die höchsten Completion Rates auf Social-Media-Plattformen – das Bild füllt den gesamten Bildschirm ohne schwarze Balken.
• Horizontale Videos (16:9, Landscape): Standard für YouTube (Langformat), Webinare, Schulungsvideos und Website-Einbettungen. Auf Desktop-Bildschirmen und Smart-TVs liefert das Querformat die beste Darstellung.
• Quadratische Videos (1:1): Ein Kompromissformat, das in den Feeds von Facebook und LinkedIn sowohl im Portrait- als auch im Landscape-Modus ausreichend Fläche einnimmt, ohne schwarze Ränder zu erzeugen.
• Display-Werbemittel: Banner-Formate der IAB (Interactive Advertising Bureau) sind in beiden Orientierungen spezifiziert – der Mobile Leaderboard (320 × 50 Pixel) für Portrait, der Mobile Interstitial (320 × 480 oder 480 × 320) für beide Ausrichtungen. Responsive Display Ads bei Google Ads passen Bild- und Textbausteine automatisch an die verfügbare Fläche und Orientation an.
• E-Mail-Marketing: Newsletter werden überwiegend im Portrait auf Smartphones gelesen. Bilder mit einer Breite von 600 Pixel und einspaltiges Layout gelten als Best Practice, damit die E-Mail in beiden Orientierungen ohne horizontales Scrollen lesbar bleibt.

Das Testen beider Orientierungen ist ein unverzichtbarer Bestandteil der Qualitätssicherung im Responsive Webdesign – viele Layout-Fehler treten erst beim Wechsel zwischen Portrait und Landscape auf.

• Browser-DevTools: Die Entwicklerwerkzeuge von Chrome, Firefox und Safari bieten einen Device-Emulator, in dem Bildschirmgrößen und Orientierungen simuliert werden können. In Chrome lässt sich die Orientation über das Rotate-Symbol in der Device-Toolbar mit einem Klick umschalten.
• Echte Geräte: Emulationen bilden nicht alle Eigenheiten realer Hardware ab – Tastaturhöhe, Notch-Position, Sensorverhalten und Rendering-Unterschiede. Tests auf mindestens zwei bis drei realen Geräten (iPhone, Android-Smartphone, Tablet) in beiden Orientierungen sind für produktive Websites unverzichtbar.
• Responsively App: Open-Source-Tool, das eine Website gleichzeitig in mehreren Bildschirmgrößen und Orientierungen anzeigt und synchron scrollt – ideal für den schnellen visuellen Abgleich verschiedener Breakpoints.
• Automatisierte Tests: Tools wie Playwright, Cypress oder Selenium können Viewport-Größen und Orientierungen programmatisch wechseln und Screenshots für visuelle Regressionstests erstellen – sinnvoll bei häufigen Layout-Änderungen oder großen Webprojekten.
• Google Search Console: Der Bericht „Nutzerfreundlichkeit auf Mobilgeräten" meldet Seiten mit Darstellungsproblemen, die auch orientierungsbedingte Fehler umfassen können – etwa zu breite Inhalte, die horizontales Scrollen erzwingen.

Die klassische Zweiteilung in Portrait und Landscape wird durch neue Geräteformen und intelligentere Layout-Systeme zunehmend aufgebrochen.

Faltbare Smartphones wie das Samsung Galaxy Z Fold oder das Google Pixel Fold erzeugen beim Auf- und Zuklappen dynamische Seitenverhältnisse, die weder dem klassischen Portrait noch dem Landscape entsprechen – teilweise nahezu quadratisch. CSS-Funktionen wie Container Queries (seit 2023 in allen großen Browsern unterstützt) ergänzen die klassischen Media Queries, indem sie die Darstellung nicht am Viewport, sondern an der tatsächlichen Größe des übergeordneten Containers ausrichten. Für Foldables ist das ein Durchbruch, weil ein und dieselbe Seite unterschiedliche Containergröße haben kann, je nachdem ob das Gerät gefaltet oder aufgeklappt ist.

KI-gestütztes Webdesign geht einen Schritt weiter: Tools wie Figma AI, Framer und experimentelle Ansätze generieren automatisch Layout-Varianten für verschiedene Orientierungen und Bildschirmgrößen – Designer definieren Regeln und Prioritäten, die KI setzt sie in Breakpoint-übergreifende Layouts um. Gleichzeitig analysieren KI-Modelle reale Nutzungsdaten und identifizieren, in welcher Orientation die Mehrheit der Besucher eine bestimmte Seite nutzt – und ermöglichen so datenbasierte Designentscheidungen statt pauschaler Annahmen.