Conception une fois, Stream Everywhere: UI réactif pour les applications OTT

Introduction

De nos jours, tout en regardant nos applications OTT préférées, nous avons beaucoup d’options à choisir, bien sûr, mais en même temps, il y a aussi de nombreux appareils pour diffuser votre film préféré!
Les écrans sont disponibles dans toutes les formes: les téléphones, les pliables, les tablettes, les ordinateurs de bureau et les téléviseurs – et votre application de streaming doit se sentir indigène sur chacun de chacun, sans utiliser cinq bases de code différentes. Donc, la question se pose: à quoi devrait ressembler l’application sur le mobile et comment devrait-elle évoluer pour la télévision? Comment les différents écrans de notre application réagiront-ils lorsque la taille de l’écran de l’appareil changera-t-elle? Cet article montre un chemin pragmatique pour concevoir une fois, s’adapter partout aux produits OTT à l’aide d’Android et React Native.

Dispositions réactives et adaptatives – quoi et pourquoi?

1 et 1 Disposages réactifs: Dispositions qui semblent fluide – ils se reflètent à mesure que l’espace disponible change (orientation, redimensionnement des fenêtres, écran fendu)
2 Disposages adaptatifs: La mise en page saute discrètement aux points d’arrêt (barre inférieure -> Nav Rail -> tiroir / liste de liste)
Exemples dans les applications OTT:
Maison: Les rails réactifs se développent à partir de 2 → 3 → 5 affiches; Le héros échange la densité des métadonnées à mesure que l’espace se développe.
Détails: Commutateur adaptatif de une colonne unique à deux volets (grille d’épisodes visible) sur les tablettes / TV.
Live / EPG: Liste compacte «Now / Next» → Élargissement du temps de temps avec panneau d’aperçu.

UI réactif sur différentes tailles d’écran

Principes de base:

• Contenu d’abord: Une décision doit être prise sur ce qui devrait être visible, selon la taille de l’appareil. Séparer l’interface utilisateur dans ce qui est principalement important, ainsi que des trucs secondaires. Le contenu secondaire peut s’effondrer, se déplacer ou être divulgué progressivement.
• Points d’arrêt: Groupe en seaux (compact / moyen / étendu) en fonction des largeurs de périphérique au lieu de régler manuellement pour chaque appareil:
  • Compact: <600 dp (téléphones portrait)
  • Medium: 600–840 dp (téléphones paysagistes, petites comprimés, pliables)
  • Expansé:> 840dp (grandes tablettes / bureau / téléviseur)
• Échelles de navigation en fonction de la taille: L’écran compact commence avec seulement une barre inférieure, qui se déplace progressivement vers un rail de navigation pour des appareils de taille moyenne comme les tablettes, les pliables et enfin un tiroir persistant ou un rail gauche pour des appareils plus grands comme les téléviseurs.
• Densité et cibles: Gardez au moins 48 cibles DP / PX avec une taille de cartes accrue pour la télévision
• Typographie: utiliser sp dans Android et Autorisation en RN; respecter les paramètres de la police utilisateur
• Définissez des créneaux au lieu des pages: Sélectionnez la page dans divers emplacements comme Nav, Hero, Rows, List, etc. – Échangez en fonction des points d’arrêt susmentionnés.
• Performance: Utilisez la liste / grilles paresseuses, reportez-vous à de grandes images sur des tailles compactes, pré-chargez l’art clé sur les rails pour les applications TV, écoutez les modifications de charnière pour les pliables et reflows la mise en page.

Android (Jetpack Compose): adaptatif par design!

1 et 1 Branche l’échafaudage selon la largeur

@Composable
fun AppScaffold(windowSizeClass: WindowSizeClass) {
when (windowSizeClass.widthSizeClass) {
WindowWidthSizeClass.Compact -> CompactHome() // Bottom bar + single column rails
WindowWidthSizeClass.Medium -> MediumHome() // Nav rail + wider hero/rails
WindowWidthSizeClass.Expanded-> ExpandedHome() // Drawer + list–detail (genres → preview)
}}

2 Des grilles qui s’adaptent parfaitement du téléphone à la télévision?

Pourquoi cela aide-t-il? Les lignes se développent naturellement de 2 -> 3 -> 5 cartes de manière adaptative, pas besoin de compter les code hardage en fonction de la taille des périphériques, les lignes restent bien rangées.

@Composable
fun AdaptivePosterGrid(items: List<Title>) {
LazyVerticalGrid(
columns = GridCells.Adaptive(minSize = 160.dp),
contentPadding = PaddingValues(16.dp),
horizontalArrangement = Arrangement.spacedBy(12.dp),
verticalArrangement = Arrangement.spacedBy(12.dp)
) {
items(items) { title -> PosterCard(title) }
}}

React Native: Un extrait pour les gouverner tous!

Comment il mappe aux applications OTT: vous verrez 2 cartes par ligne pour les téléphones, 3-4 sur les tablettes et 5+ pour les téléviseurs!

import React, { useMemo } from "react";
import { View, Text, FlatList, useWindowDimensions } from "react-native";

const useBreakpoint = () => {
const { width } = useWindowDimensions();
if (width < 600) return "compact";
if (width < 840) return "medium";
return "expanded";
};

const numCols = (bp) => (bp === "compact" ? 2 : bp === "medium" ? 3 : 5);

export default function OTTResponsiveHome({ data }) {
const bp = useBreakpoint();
const cols = useMemo(() => numCols(bp), [bp]);

return (
<View style={{ flex: 1, padding: bp === "compact" ? 12 : 24 }}>
{/* Navigation scales with space */}
<Text style={{ marginBottom: 12 }}>
{bp === "compact" ? "Bottom Tabs" : bp === "medium" ? "Nav Rail" : "Permanent Drawer"}
</Text>

{/* Adaptive poster grid for rails like “Trending” / “Continue Watching” */}
<FlatList
data={data}
key={cols} // re-create when column count changes
numColumns={cols}
keyExtractor={(it, i) => String(i)}
columnWrapperStyle={{ gap: 12 }}
contentContainerStyle={{ gap: 12 }}
renderItem={({ item }) => (
<View style={{ flex: 1, minHeight: 120, padding: 12, borderWidth: 1, borderRadius: 12 }}>
<Text allowFontScaling style={{ fontSize: 16, fontWeight: "600" }}>{item.title}</Text>
<Text allowFontScaling numberOfLines={2}>{item.tagline}</Text>
</View>
)}
/>
</View>
);
}

Exemple d’Ott surfaces Exemple de Cheatheet: comment ils évoluent par point d’arrêt

• • Maison
    • Compact: onglets inférieurs; Banner de héros avec une méta minimale; Rails à 2 colonnes.
    • Moyen: Nav Rail; Le héros se développe avec le synopsis + les actions secondaires; 3–4 colonnes.
    • Étendu (TV / tablette): Diroir / Nav gauche; LISTE – DETAIL AVEC APPREETENTION; 5+ colonnes, cartes plus grandes.
      
      
  • Détails / épisodes
    • Compact: Affiche + Play CTA; épisodes dans une liste.
    • Étendu: deux volets avec une grille d’épisodes + aperçu; Actions secondaires visibles (Audio / Subs, WatchList, similaire).
  • Live / EPG
    • Compact: Liste verticale «Now / Next» avec des logos de canaux.
    • Étendu: Grille de temps horizontale + canaux verticaux; Focus montre le synopsis et regarde en direct / recommencer.
  • Compte / abonnement
    • Compact: Formulaires et cartes à colonne unique.
    • Étendu: deux colonnes – cartes de plan laissées, avantages sociaux / FAQ à droite; Les feuilles de dialogue deviennent des panneaux latéraux.

Conclusion :

Si vous optimisez votre application OTT à l’aide des points d’arrêt et des fentes, l’interface utilisateur évolue gracieusement d’un petit téléphone de 6 pouces à un énorme téléviseur de 55 pouces – sans avoir besoin d’écrans spécifiques pour chaque appareil. Cela garantit que vos téléspectateurs acquièrent une expérience cohérente et optimisée, quel que soit l’appareil qu’ils choisissent.

Vous avez trouvé cela utile? PARTAGEZ-LE