#06/11/2025

Le responsive design dans HA

Introduction

Si on à un besoin particulier dans HomeAssistant au niveau des dashboards on est confronté tôt ou tard au problème de responsive design. Pour aborder cette thématique, voyons rapidement le concept de responsive design, le principe de grid et l'approche mobile first.

Le responsive design c'est quoi? C'est une technique de conception d'interface qui permet à un site web de s'adapter automatiquement à la taille de l'écran de l'appareil utilisé pour le consulter.
Cette approche vise à offrir une expérience de navigation optimale, en ajustant la mise en page, les images et le contenu pour qu'ils soient lisibles et faciles à utiliser sur n'importe quel appareil, qu'il s'agisse d'un ordinateur de bureau, d'une tablette ou d'un smartphone.

Pour arriver à cette fin on va utiliser le principe de grid (grille). C'est un est une méthode de structuration de l'espace qui permet d'organiser les éléments d'une page web de manière logique et cohérente.

Les technologies comme CSS Grid et Flexbox sont aujourd’hui largement utilisées pour mettre en œuvre ces systèmes de grille, offrant une flexibilité et une précision accrues dans la disposition des éléments

Pour l'Implémentation, on utilise souvent l'approche Mobile First, cela consiste à concevoir d’abord une interface pour les appareils mobiles, puis à l’adapter progressivement aux écrans plus grands (comme les tablettes et les ordinateurs de bureau). Cette méthode part du principe que le mobile est devenu le principal point d’accès à internet pour la majorité des utilisateurs.
L’avantage de cette approche est qu’elle évite de surcharger les versions mobiles avec des éléments inutiles, tout en garantissant une base solide qui peut être enrichie pour les écrans plus grands.

En résumer:

Historique du Responsive dans HomeAssistant

HomeAssistant propose des dashboards de type section, ces derniers s'adaptent en fonction d'une grid. Mais cela n'a pas toujours était le cas.

Un article officiel d'HomeAssistant explique l'adoption du principe de grid via le projet Grace.

Source: home-assistant.io - dashboard-chapter-1

Problématique

Ce principe de grid est super, le problème est que certains éléments du dashboard ne sont pas encore compatible avec cette grille. C'est le cas du picture element.

Ici, si je souhaite placer des éléments sur mon image, en fonction de la taille de l'écran tous se décale:

HA dispose d'options de visibilité, voyons ce qu'il propose:

Aie! Nous avons ici des résolutions obsolètes. Si je compare cela à un framework css comme Bootstrap CSS, on est loin du compte!

Adapter le css?

CSS dans les fichiers .yaml

Afin que le CSS soit complètement interprété dans les fichiers .yaml il faut installer une extension: card-mod.

Il est vivement conseillé de passer par HACS pour l'installer.

Pour corriger cela dans un premier temps, je vais essayer d'adapter le style css des éléments. Ajoutons une bordure pour essayer de comprendre:

Au passage via les web tools, on voit qu'on passe par du shadow dom:

J'ai essayé d'unifier le style en supprimant les padding, margin :

Cela ne règle pas le problème. Il faut donc analyser le comportement de la grid du dashboard.

Responsive design - mobile first

J'ai tester différentes options au niveau du grid sans résultat.

grid_options:
  rows: 14
  columns: 33

Analyse des breakpoints (bp).

breakpoints ?

Un breakpoint est un seuil de taille d’écran prédéfini (exprimé en pixels) à partir duquel la mise en page d’un site web s’adapte pour offrir une expérience optimale.
Grâce aux media queries en CSS, les breakpoints permettent de modifier l’affichage des éléments (taille, position, visibilité) en fonction de la largeur de l’écran, garantissant ainsi une navigation fluide sur mobile, tablette ou desktop

Les bp sont approximativement les suivants: 736, 871, 992, 1344, 1696, 2445.

L'idée est d'implémenter le code CSS supplémentaire (medias queries) au éléments qui ne sont pas compatible avec la grid afin d'avoir une solution.

Ici, l'utilisation d'HA se fait principalement sur tablette et smartphone, j'utilise donc les dimensions suivantes:

0px à 400px: smartphone en mode portrait
737px à 871px: smartphone en mode landscape
872px à 992px: tablette en mode portrait
993px à 1344px: tablette en mode landscape
1344px et plus: desktop (je n'adapte pas pour 1696px et 2445px)

Exemple de media querie:

@media (min-width: 872px) and (max-width: 992px) {
  ...
}

Conclusion

Le responsive design dans Home Assistant est un défi intéressant qui nécessite une bonne compréhension des principes de grid et de media queries. Bien que les dashboards de type section introduits avec le projet Grace apportent une grande amélioration, certains éléments comme le picture element nécessitent encore des ajustements CSS manuels.

L'approche mobile first reste la plus pertinente pour concevoir des interfaces adaptatives, en partant des contraintes les plus strictes (smartphones en portrait) pour ensuite enrichir l'expérience sur des écrans plus grands. Les breakpoints identifiés (400px, 737px, 872px, 993px, 1344px) permettent de couvrir l'ensemble des dispositifs couramment utilisés.

Pour réussir l'implémentation du responsive design dans vos dashboards Home Assistant :

Installez card-mod via HACS pour bénéficier du support CSS complet
Testez vos interfaces sur différentes tailles d'écran dès le début du développement
Documentez vos breakpoints et media queries pour faciliter la maintenance
Privilégiez les éléments compatibles avec la grid native quand c'est possible

Avec ces bonnes pratiques, vous pourrez créer des dashboards Home Assistant qui s'adaptent parfaitement à tous vos appareils, offrant ainsi une expérience utilisateur optimale que vous soyez sur smartphone, tablette ou desktop.