[Résolu] Points de rupture en responsive design

Bonjour,
Je m'interroge sur les valeurs de points de rupture à prendre en compte dans les media queries. Ethan Marcotte propose 320 px, 480, 600, 768, 1024 et 1200. Mais l'on trouve bien d'autres valeurs dans la littérature. Pour cibler la majorité des appareils, mais sans trop se prendre la tête pour autant, ces valeurs sont-elles acceptables ? En utilisez-vous d'autres ?

Par avance, merci.

Jean-Pierre

Salut,

Il n'est pas toujours nécessaire de multiplier les points de rupture, à partir du moment où le design, une fois intégré, est suffisamment élastique. D'ailleurs, Ethan Marcotte, dans son bouquin, prône plutôt la fixation de la largeur des blocs en pourcentage au lieu des pixels.

Il y a aussi la réflexion suivante, trouvée dans un billet de Stéphane Deschamps :

a écrit :
À quel endroit poser les points de rupture de votre design ? En fait il n’existe pas de règle, pas plus qu’on ne peut être sûr qu’un utilisateur navigue en ayant dimensionné son navigateur pour prendre la totalité de l’écran.

La méthode très simple que nous appliquerons est la suivante : redimensionnez votre fenêtre, et dès qu’une barre horizontale apparaît, considérez que c’est un point de rupture. Il faut alors faire une déclaration supplémentaire et commencer à « casser » le design.

Hello

Je suis assez d'accord avec Victor, et plutôt partisane du site en %, et placer les breakpoint "là où ça casse", à savoir là où le design devient vraiment atroce et où il vaut mieux ré-organiser le contenu pour qu'il devienne lisible. Ça évite de s’embêter avec "je cible tel ou tel device", surtout qu'on ne sait pas quelle taille d'écran Samsung, iPhone ou HTC vont nous sortir demain. Un petit article sur le sujet Responsive Design: Why You’re Doing It Wrong qui explique assez bien cette façon de penser. L'image de Brad Frost dans les commentaires illustre bien cette idée

Ça c'était la théorie, en pratique, ça dépend. Si tu pars sur un site non responsive, avec des largeurs fixes, que tu dois adapter pour, c'est peut-être plus simple de partir sur des break points fixes et changer les largeurs pour des pixels. Dans ce cas tu peux peut-être te baser sur les breakpoints du livre d'Ethan, tester, et voir si certains sont redondants ou pas. Si tu pars de zéros, la technique largeur fluide en % est la plus simple, mais il faut avoir "la chance" de partir de zéros Dans tous les cas testes, et vois ce qui convient le mieux à ton projet.

Hello aussi ,

J'ai bien aimé la lecture de ce retour d'expérience qui est assez éclairant sur les problématiques rencontrées.

Je pars effectivement d'un site en %. Je démarre avec une largeur a priori compatible avec un écran de 320 px. Donc, si je comprend bien, pour l'adapter à des largeurs plus grandes, c'est une question de feeling, de design et de bon sens ! Merci pour vos réponses et les liens.

Jean-Pierre

Je suis d'accord avec Victor surtout en ce qui concerne cette partie de la citation :

Stéphane Deschamps a écrit :
La méthode très simple que nous appliquerons est la suivante : redimensionnez votre fenêtre, et dès qu’une barre horizontale apparaît, considérez que c’est un point de rupture. Il faut alors faire une déclaration supplémentaire et commencer à « casser » le design.

ps : Un sujet m'a rarement apporté autant de bonnes informations et de lien intéressant en si peu de post !! Merci a tous !

Merci pour toutes ces infos. je crois que je peux clore le sujet !

Jean-Pierre