Goal
Ensure that content is usable in both portrait and landscape orientations (on mobile and tablets) unless a specific orientation is essential for functionality. Users with devices that lock orientation or who hold devices differently should still access all content.
Key Points
- Avoid designing interfaces that require rotation.
- Layouts, forms, and interactive elements should adapt to screen orientation.
- Only restrict orientation if essential for the user task (e.g., a piano app or certain games).
- Responsive design and CSS media queries help achieve orientation flexibility.
Short Summary
Users should be able to access content regardless of device orientation. Restricting orientation unnecessarily can make content inaccessible or unusable for certain users.
Example Issues and Fixes
Fixed Portrait Only
Fail
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
body {
display: flex;
flex-direction: column;
height: 100vh;
}
</style>
Pass
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="flex flex-col md:flex-row min-h-screen">
<aside class="w-full md:w-1/4 bg-gray-100 p-4">
Sidebar content
</aside>
<main class="w-full md:w-3/4 p-4">
Main content
</main>
</div>Game Requires Landscape
Fail
<!-- Game canvas only fits in landscape -->
<canvas width="800" height="400"></canvas>
<p>Please rotate your device to landscape.</p>
Pass
<canvas class="w-full h-auto"></canvas>
<p class="md:hidden text-center text-gray-700">For best experience, landscape is recommended, but portrait is supported.</p>
Quick Checklist
- Can all content be accessed in both portrait and landscape?
- Are layouts responsive and adaptive to orientation changes?
- Are orientation restrictions only applied when essential?
- Are users informed if orientation is recommended but not required?