Refondre un site web
24 octobre 2020
7minutes

C’est quoi un breakpoint ? Définition, Utilisation, Intérêt

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 ?

 

Pour définir le breakpoint, il faut commencer par les bases. 

 

Le langage HTML et les CSS

 

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.

Par exemple, 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.

 

exemple eficiens breakpoint grand ecran

 

exemple eficiens breakpoint petit ecran

 

 

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.

 

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

 

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. 

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

 

 

Vous avez aimé ? Notez-nous !