C’est quoi un breakpoint ? Définition, utilisation, intérêt

C’est quoi un breakpoint ? Définition, utilisation, intérêt

Leslie Pinsard
Rédigé par Leslie Pinsard
24 octobre 2020 - 10 minutes

Entre les ordinateurs, tablettes ou smartphones, les sites internet doivent être en mesure de s’adapter à différentes tailles d’écran. Pour un affichage optimal quel que soit le support, il faut mettre en place des points de rupture. C’est quoi le breakpoint ? Comment ça marche ? Pourquoi l’utiliser ? Eficiens vous explique tout. 

 

C’est quoi un breakpoint ?

Un breakpoint (ou point de rupture) se réfère à la taille imposée par la fenêtre de rendu du navigateur qui fera varier proportionnellement le rendu visuel du site web affiché. Par exemple sur un PC moderne, vous aurez une zone d affichage du navigateur de 1 400 pixels de large. Si vous réduisez votre fenêtre navigateur, vous passerez à 1 000 pixels puis 800 puis 360 simulant ainsi un smartphone. Le rendu d’un site web ne va pas varier à l’infini, mais le développeur va fixer quelques rendus figés à l’avance. Généralement, on a un breakpoint à 360 pixels, 600 pixels, 1 000 pixels et 1 4000 pixels. Ces points de rupture seront gérés dans sa feuille de style.

 

Breakpoint, définition et résolution : tout comprendre

Les breakpoints font référence au nombre de pixels affichés à l’écran. On parle alors de définition à ne pas confondre avec résolution.  La définition correspond au nombre total de pixels dans l’image (par exemple un Macbook Air a une définition de 1440 x 900 pixels). La résolution quant à elle correspond à la densité de pixel c’est-à-dire le nombre de pixels par pouce (un pouce mesurant 2,54 cm). On la mesure souvent en DPI (Dot per Inch). Apple double le nombre de pixels pour une meilleure qualité d’image. C’est ce qui est appelé Retina.

Ce qui est important pour les breakpoints, c’est la définition.

 

Comment se rendre compte des breakpoints d’un site web ?

C’est très simple, il suffit de passer en mode développeur dans votre navigateur (dans Chrome, menu Afficher | Options pour les développeurs | Outils de développement – Raccourci Option + Cmd + I sous MacOS). Vous pourrez ainsi simuler tout les tailles possibles.

 

exemple de breakpoints site web responsive

 

Les breakpoints, le langage HTML et les CSS

Commençons par les bases. Le langage HTML permet la mise en page d’un site web. C’est-à-dire qu’il donne une structure au contenu et regroupe tous les éléments entre eux. De son côté, le CSS gère l’apparence du site web. Autrement dit, la façon le site est vu par l’internaute. Pour cela, le langage CSS définit un certain nombre de règles.

 

Les Media queries 

 

Les médias queries sont nécessaires dès lors que les règles par défaut définies par le CSS sont insuffisantes. Il leur faut donc des exceptions. Ce sont les medias queries. Autrement dit, des requêtes envoyées au navigateur lui indiquant d’utiliser un certain nombre de conditions, que l’on appelle spécifications CSS3.

Ainsi, le contenu d’une page internet peut être modifié selon les conditions prédéfinies. Bien souvent, ces conditions concernent la taille de l’écran de navigation. Il faudra donc adapter le contenu selon que l’internaute consulte une page sur un ordinateur, un smartphone ou une tablette numérique. Grâce aux media queries, l’affichage du site s’adapte quel que soit le support de navigation. 

Outre la taille des écrans, les media queries peuvent également définir le visuel d’un contenu selon le mode de visionnage, à savoir sur un écran ou une impression. 

 

À noter : les media queries ne sont pas disponibles avec tous les navigateurs. Pour s’assurer de leur efficacité, optez pour les versions les plus récentes. 

 

breakpoint media queries

 

Définition des breakpoints

 

Également appelé point de rupture, le breakpoint renvoie aux résolutions indiquées à la media query. Plus précisément, il s’agit de la taille à partir de laquelle le site doit changer son affichage. Le breakpoint permet donc aux développeurs de présenter la meilleure mise en page pour les internautes. 

Attention, le breakpoint ne stocke que les règles qui changent. Par exemple, il peut s’agir du bouton, du menu burger, de la taille de la typographie, etc.

Les breakpoints sont devenus nécessaire avec l’arrivée des smartphone. Au début du web, la tendance était d’augmenter les tailles d’ordinateur mais aucun autre dispositif ne venait concurrencer l’utilisation des PC. Avec la possibilité de naviguer sur le web depuis son mobile, il faut alors jongler entre les différents appareils.

 

Comment utiliser un breakpoint ?

 

Avec la multiplication des appareils et de leurs tailles, il devient plus difficile de définir les breakpoints avec précision. Aujourd’hui, il existe deux manières principales d’utiliser les points de rupture. 

 

Breakpoints basés sur le dispositif

 

Dans ce cas, il s’agit de définir les points d’arrêt pour chaque dispositif. Par exemple, pour un Iphone 8, un ordinateur AIO Intel, une tablette Samsung Galaxy, etc. 

En réalité, ce modèle est extrêmement long, puisqu’il faut prévoir une media query pour chaque dispositif. Par ailleurs, dès lors qu’un nouveau téléphone ou un nouvel ordinateur fait son apparition, il faudra revenir à son CSS pour ajouter le breakpoint correspondant. Or, au vu de la rapidité des évolutions technologiques, cela risque d’être très chronophage. 

breakpoint taille écran

 

Breakpoints basés sur le contenu

 

C’est la méthode idéale pour définir les breakpoints. 

Pour cela, il suffit d’afficher son site internet sur le navigateur et de diminuer progressivement la fenêtre. Dans ce cas, il faut noter toutes les fois où la page ne s’affiche pas correctement. Cela signifie que des ajustements sont nécessaires pour obtenir une belle mise en page. En d’autres termes, ce sont les points de rupture. Cette méthode est beaucoup plus simple à gérer sur le long terme. 

 

Pour l’optimiser, il est possible de définir une plage avec des breakpoints maximaux et minimaux. Ainsi, la media query s’appliquera dans le cadre de ces limites. Elles peuvent concerner la longueur, la largeur, ou les deux. 

Concrètement, les limites de ces points de rupture sont traditionnellement définies comme suit. 

  • Small : (<768px) : cela correspond aux téléphones portables. Dans ce cas, le site web utilise l’intégralité de la taille de l’écran.
  • Medium (<992px) : cela correspond davantage aux tablettes. Ici, un point de rupture pourrait ressembler à ça : @media only screen et (min-width : 768px) et (max-width : 959px).
  • Large (<1200px) : ce sont les tailles d’écran classiques. Bien souvent, le site ne s’affichera que sur 960 px afin de prévoir les différents dispositifs.
  • Extra large (>1200 px) : ce sont les très grands ordinateurs.

Outre ces tailles, il est aussi possible de prévoir d’autres dimensions. Par exemple, si les sites web devaient apparaître sur les montres connectées, il faudrait aussi prévoir un point de rupture pour une taille inférieure à 320 px.

 

Mobile first ou Desktop First

 

Pour concevoir des breakpoints, il faut d’abord se poser une question : mobile first ou desktop first ?

  • Mobile first : il s’agit de prendre d’abord en compte l’affichage sur mobile (la plus petite possible) pour la conception de son site web. Ensuite, il faudra définir les breakpoints en augmentant progressivement la taille des dispositifs. Cela vous permet de commencer par le plus simple, puisque l’affichage mobile est souvent moins riche que l’affichage web. Mais surtout, la version mobile est aujourd’hui la version privilégiée par les moteurs de recherche.

 

  • Desktop fisrt : à l’inverse, c’est l’affichage sur écran d’ordinateur qui prime. Dans ce cas, vous devrez commencer par la taille d’écran la plus large et diminuer petit à petit. L’avantage est d’intégrer toutes les fonctionnalités dès le début, puisque la version ordinateur est la plus complexe à réaliser.

 

En général, il est conseillé d’intégrer au minimum deux breakpoints pour son site web. À savoir un pour les ordinateurs et un pour mobile. D’autres peuvent être ajoutés pour les tablettes (horizontales et verticales), grand écran, etc.

 

Combien de breakpoints doit-on implémenter ? Notre recommandation

Plus vous aurez de breakpoints, plus vous aurez une expérience utilisateur satisfaisante. Mais plus vos coûts de développement / intégration, voire d’UX et de DA vont augmenter. Nous recommandons :

Pour un budget limité : breakpoint mobile 320 pixels et breakpoint PC 1024 pixels

Pour un budget standard : breakpoint mobile 320 pixels, breakpoint tablette 768 et breakpoint PC 1024 pixels

Pour un budget plus conséquent et une expérience utilisateur optimale : breakpoint mobile 320 pixels, breakpoint tablette 768, breakpoint PC 1024 pixels et breakpoint élargi 1280 pixels

Pour être au top : breakpoint mobile 320 pixels, breakpoint tablette 768, breakpoint PC 1024 pixels, breakpoint élargi 1280 pixels et breakpoint grands écrans (24″ et plus), 1600 pixels. Cette dernière variation fait surtout du sens si votre audience travaille beaucoup sur écran fixe (graphiste, architecte, concepteur CAO, monteurs video…) et que vous voulez offrir un site web qui s’exprime pleinement sur ces grandes définitions.

 

Plus de détails sur les breakpoints (mise à jour 2022)

Traditionnellement, en intégration responsive, on travaille plutôt sur un jeu de wireframes puis maquettes, avec les côtes suivantes (pixels) :
Breakpoint 1 : smartphone
De 360 (Résolution minimale mobile) à 767 pixels de large
ZC (Zone de contenu) : 360 pix
Breakpoint 2 : Tablette Portrait – Ou PC avec navigateur fenêtré
De 768 à 999 pixels de large
ZC (Zone de contenu) : 700 pix
Breakpoint 3 : Tablette Paysage – PC Laptop (Surface, micro PC…) – Et tout PC avec navigateur fenêtré
De 1000 à 1279 pixels de large
ZC (Zone de contenu) : 960 pix
Breakpoint 4 : PC Full HD – Tablette grand format Paysage (iPad Pro 12′) – Et tout PC à plus haute définition avec navigateur fenêtré
De 1280 à 1599 pixels de large
ZC (Zone de contenu) : 1140 pix
Breakpoint 5 : PC 4K –  Et tout PC à plus haute définition avec navigateur fenêtré
Au delà de 1600 pix
ZC (Zone de contenu) : 1140 ou 1350 pix

 

Pourquoi utiliser des breakpoints dans la conception de son site web ?

 

Aujourd’hui, avec le développement des dispositifs, il est primordial d’intégrer les breakpoints dès la conception de son site web. Cela permet à l’internaute de visualiser le site aussi bien sur un mobile que sur un ordinateur.

 

Faciliter la conception d’un site responsive design

 

Le breakpoint permet de créer des sites responsive design, c’est-à-dire qui peuvent s’adapter à différents supports de navigation. 

Il est aussi possible de créer des sites adaptés à chaque dispositif sans point de rupture, mais cela prend beaucoup plus de temps. Dans un tel cas, il faudrait créer une interface pour ordinateur, une autre pour téléphone, et une autre pour tablette. C’est un travail titanesque puisque chaque modification (ajout d’image, de contenu, changement d’adresse, …) devrait être mise en place sur toutes les interfaces. 

En d’autres termes, les breakpoints facilitent la conception d’un site responsive design. 

 

breakpoint - Responsive_Web_Design

 

Utiliser le responsive design pour améliorer l’expérience utilisateur

 

Aujourd’hui, avoir un site responsive design est absolument primordial pour l’UX. En effet, les internautes ne se contentent pas de rechercher des informations sur un ordinateur fixe ou portable. Ces derniers multiplient les dispositifs pour leur navigation sur le web. Par exemple, l’ordinateur est privilégié au bureau, alors que la tablette est utilisée à la maison et le téléphone portable dans les transports en commun. 

Quel que soit l’endroit où il se trouve, l’utilisateur souhaite obtenir des informations de manière simple et efficace. Si le site est illisible sur téléphone portable, il ira chercher l’information ailleurs, peut-être chez un concurrent. Sans site responsive design, vous risquez de perdre des visiteurs, voire des potentiels clients. 

D’où l’importance de mettre en place un site responsive avec les points de rupture adéquats. In fine, l’objectif des breakpoints est l’amélioration de l’expérience utilisateur

 

 

Quelques exemples de breakpoints 

 

Eficiens utilise des breakpoints pour définir le nombre de colonnes pour ses différents partenaires. Ainsi, sur grand écran, six colonnes s’affichent. Alors que pour un plus petit écran, seules deux colonnes apparaissent.

Site Eficiens sur ordinateur

exemple eficiens breakpoint grand ecran

Site Eficiens sur mobile

exemple eficiens breakpoint petit ecran

 

De son côté, LeTrot utilise les breakpoints pour définir l’affichage de ses actualités. Lorsque celles-ci s’affichent toutes sur un ordinateur, il faut utiliser le curseur pour faire défiler les news du site lors d’un visionnage sur mobile. De même, les breakpoints transforment les différentes catégories en menu hamburger pour la version smartphone.

 

LeTrot sur Ordinateur

 

exemple breakpoint letrot ordinateur

 

LeTrot sur mobile

 

exemple breakpoint letrot mobile

 

Pour Mutualia, les chiffres clés de l’assureur se réunissent sur une seule et même colonne en passant sur un petit écran.

 

Mutualia sur ordinateur

 

exemple breakpoint mutualia ordinateur

 

Mutualia sur mobile

 

exemple breakpoint mutualia mobile

 

De son côté Coca-Cola utilise les breakpoints et supprime même du contenu selon le support. Par exemple, sur la page d’accueil une phrase explicative accompagne le slogan sur la version PC. En revanche, cette explication disparaît lorsque l’on passe sur mobile.

Coca-Cola sur PC

Coca-Cola sur PC

 

Coca-Cola sur mobile

breakpoint cocacola sur mobile

 

Créer un site web responsive avec Eficiens 

 

Votre site web est-il responsive ? 

Si ce n’est pas le cas, il est impératif que cela soit dans vos prochains objectifs. À cette fin, n’hésitez pas à en confier la gestion à Eficiens. Nous intervenons sur les créations et refontes de site web afin que celui-ci soit responsive design avec des breakpoints adaptés.  Dans le cadre de la maintenance de son site, on peut aussi imaginer lancer un chantier pour ajouter un breakpoint additionnel (les grandes résolutions par exemple)

Pour cela, consultez notre grille tarifaire et faites-vous une idée du budget à allouer pour votre projet.