Discussion :

[NewUserDelphi]

Bonjour

A lire différents articles je suis complètement perdu quant à la largeur de mon contenu.
On peut lire des max-with de 960, 1000, 1140, 1240 px....

Perso j ai un écran de 1920 de large et 960px c est ridicule, alors j imagine sur des écrans plus large !!!

Le site Microsoft affiche son contenu sur mon écran, sur une largeur de 1700 px environ et c est pas mal...

J ai trouvé quelques stats ici http://gs.statcounter.com/screen-res...ktop/worldwide qui dit que 25% des utilisateurs ont des ecrans de 1366 px.

Quel est selon vous la meilleure approche ?

Merci de vos conseils.

[kevin254kl]

Salut,

Le principe aujourd'hui c'est de penser mobil first, car la plus part des accès ce font aujourd'hui par mobile et le mobile t'oblige à prioriser ton contenu. Tu dois détecter les les points de ruptures et modifer tes règles en conséquences. Le refactoring de tes règles est important tu peux regarder du côté des règles de la plus part des framework css.

[NewUserDelphi]

Ok je suis tout à fait d accord avec toi et les points que je citais sont 'extraits' de skeleton, blueprint etc

mais le pb est qu il y a quasiment autant de breakpoint que de framework, certains en ont 3, d autres 5.... c est parfois à ne rien y comprendre.

le côté mobile first ok, en plus c est l approche la plus simple, du 100% avec un margin/padding si nécessaire.

mon pb est reellement la navigation plein ecran sur pc...

J ai trouvé un site un peu plus coplet niveau stats https://medium.com/@uiuxlab/the-most...e-9588e9bd3a8a

Je vais m en inspirer pour mes breakpoints mais j ai trouvé un tres bon article, en tous les cas pour un débutant comme moi qui rend le responsive design tellement plus simple : https://www.smashingmagazine.com/201...e-design-2018/

Merci pour ta réponse, du coup je mets en résolu

[kevin254kl]

Attention les breakpoint dépende du projet il ni à pas vraiment de règles. On les détectes quand le design devient "bisare" si je puis dire. Cela dépendra donc du contenu ainsi que des interactions possible avec lui.

[NewUserDelphi]

Merci

Le dernier lien que j ai mis explique bien cela.

J ai découvert d ailleurs que l on pouvait faire des breakpoints pour la hauteur

[Sodium]

Il faut garder à l'esprit que lire un contenu très large est rarement agréable. L'espace horizontal n'est pas qu'une question d'utiliser tout le contenu disponible, c'est aussi une question d'ergonomie.

[NewUserDelphi]

J ai réfléchi à cela et je vais limiter mon contenu à 1300 px pour des écrans jusqu'à 1950 et à 1700 au delà et n afficher aucun contenu sur l ensemble de la largeur de mon container à l exception faite de charts et encore suivant le nombre d'entrées

[NoSmoking]

Bonjour,

Le principe aujourd'hui c'est de penser mobil first, ...

cela dépend quand même en grande partie du contenu du site et du public visé, souvent un minimum de CSS, via les Media Queries, suffit à résoudre les problèmes de lisibilité.

Le soucis est effectivement que la lecture des lignes longues est fastidieuse voire désagréable, il est, me semble-t-il, communément admis qu'une taille de 960px, 60em avec une police de 16px, offre une lecture agréable.

Après sur un grand écran il y a toujours moyen de réorganiser la page en mettant, par exemple, les menus sur les côtés.

Je tiens également à souligner que ce n'est pas parce que l'écran est grand que le navigateur occupe tout l'espace.

A lire également :
↪ Les fondamentaux du Responsive Web Design