1485 sujets

Web Mobile et responsive web design

Site responsive avec 1 breakpoint, pure folie ou bonne idée ?

Yo hôp là !
Geht's ?

Partant du constat que très peu de visiteurs naviguent sur tablette, nous avons récemment décidé de concentrer nos efforts sur 2 formats pour le développement de nos sites Internet.

Mobile 375px -> 1279px
PC 1280 -> et au delà

En terme de code, un seul breakpoint min width à 1280.

Que pensez-vous de ce choix ?
Modifié par jhabai (10 Mar 2023 - 12:55)
Modérateur
Bonjour,

Peut-être aussi faire un 'check' sur la hauteur du viewport pour éventuellement décrocher un élément scotché devenu envahissant. Smiley cligne

Cdt
Bonjour,
j'ai aussi mis sur mes sites un seul "brekpoint", seulement afin de différencier l'ergonomie des mobiles par rapport aux desktops. Le reste, c'est flexbox et les valeurs fluides qui font le travail.

En toute sincérité et uniquement pour vous rendre service, j'espère que sur les sites que vous développez, il n'y a pas trois fautes par ligne...
a écrit :
très peu de visiteur(s) navigue(nt) sur tablette, nous avons récemment décider(é)
Bongota a écrit :
Bonjour,
j'ai aussi mis sur mes sites un seul "brekpoint", seulement afin de différencier l'ergonomie des mobiles par rapport aux desktops. Le reste, c'est flexbox et les valeurs fluides qui font le travail.

En toute sincérité et uniquement pour vous rendre service, j'espère que sur les sites que vous développez, il n'y a pas trois fautes par ligne...
très peu de visiteur(s) navigue(nt) sur tablette, nous avons récemment décider(é)


Pareil avec breakpoint à 1366px (viewport ipad pro)
kerlutinoec a écrit :
Pareil avec breakpoint à 1366px (viewport ipad pro)


Vache c'est beaucoup 1366 non ?

Sur les pc portable windows, depuis windows 10, windows force un zoom (Mise à l'échelle) à 125% par défaut, j'ai même eu des clients qui étaient à 150%.
Du coup, pour un écran à 1920, avec le zoom, on se retrouve à 1280px disponibles
Modifié par jhabai (10 Mar 2023 - 14:34)
jhabai a écrit :


Vache c'est beaucoup 1366 non ?

Sur les pc portable windows, depuis windows 10, windows force un zoom (Mise à l'échelle) à 125% par défaut, j'ai même eu des clients qui étaient à 150%.
Du coup, pour un écran à 1920, avec le zoom, on se retrouve à 1280px disponibles


Perso je pense au contraire qu'il y a de plus en plus de gens qui naviguent sur tablette (je me trompe peut être, c'est peut être juste mon entourage).
Après mon choix ne gène en rien l'utilisation, y'a juste un menu type tactile (mais qui fonctionne aussi à la souris; juste sans :hover ni refermeture auto).
L'utilisation des tablettes s'est effondrée au profit des smartphones. Quoi qu'il en soit on devrait toujours coder nativement les éléments de manière flexible.
Modifié par Olivier C (13 Mar 2023 - 05:57)
Administrateur
Bonjour,

les points de rupture dépendent avant tout du contenu : un site éditorial, un site d'e-commerce, des services en ligne, une webapp ont tous des besoins et contraintes bien différents (et entre eux également).

Je me rappelle avoir eu beaucoup de mal avec l'ancienne navigation de sncf.com sur desktop : les "codes" et habitudes du mobile sur desktop, ce truc énorme sur 2 colonnes sur un ultrabook 13,3" ça me perturbait (aussi parce que je devais à chaque fois chercher où était caché Infotrafic, dans quelle rubrique et avec quel intitulé donc beaucoup l'explorer...).
Maintenant on voit des menus burger partout et le mobile représente 50% du trafic Smiley smile

Si en supprimant un point de rupture, que c'est adapté au contenu et pour tous les visiteurs et permet de mettre plus de moyens sur l'amélioration de ce qui reste (UX design et cie), mmh ça me semble plutôt pertinent comme choix.

1280, 1366px et cie : perso j'ai longtemps utilisé les 125% et 150% sur un ultrabook 13,3" full HD. La résolution native avait un rendu bien trop petit pour ma vision pas parfaite.
Maintenant avec un 14" toujours full HD je reste en 1920.
Peut-être proposer un bon vieux bouton "Version mobile" et réciproquement pour permettre à l'utilisateur de faire son choix ? Mmh plus si facile à faire techniquement sans cette mauvaise pratique qu'était d'avoir une CSS pour mobile, une CSS pour desktop Smiley confus Il faut un outil de build CSS qui permette d'activer ou non les Media Query (min-width), je suppose en les regroupant et désactivant d'un coup (un boulot pour un plugin PostCSS qui doit exister)
Un aparté qui concerne ce sujet, n'oubliez pas que même bien étudié par vous, le nombre de français et même dans le monde qui sont de vieux (vielles) retraités, est énorme. En plus d'autres ont fait ce choix par l'énorme commodité de glisser les objets PDF IMG etc.... dans leur WhatsApp (sur ordinateurs ou tablettes) et d'écrire au clavier, leurs doigts tremblant trop !
il me parait donc judicieux de laisser (contrairement à l'avis de Google qui recommande de partir du téléphone le plus bas pour aller jusqu'aux grands écrans) de définir son CSS pour grand écran, et simplement utiliser:


/* ____début grand écran ------- */
/* ________________________________________________________  */
@media (min-width: 1200px) and (max-width: 1400px) { 
div.Limage_de_droite{display:none;} /* ETC... */
}
/* ________________________________________________________  */
@media (min-width: 750px) and (max-width: 1200px) { 
body { 	background-color:#ffffff;font-family:"Times New Roman", Times, serif;color:#000000; font-size:23px;margin:0;border:0;text-align: center;width:auto;} /* ETC... */
}
/* ________________________________________________________  */
@media (max-width:750px){  
body { 	background-color:#ffffff;font-family:"Times New Roman", Times, serif;color:#000000; font-size:22px;margin:0;border:0;text-align: center;width:auto;}  /* ETC... */
}


Je rappel au cas ou que les mal voyant qui zoom par exemple 200% vous renverront la taille réelle relative et non la taille de leur écran sans zoom !
Modifié par Fox-infograp (12 Mar 2023 - 14:00)
Penser aussi au texte. Ce bout de code évitera les déboires avec le texte, et il y a une seule valeur à changer pour tout le site.
@media screen and (min-width:1000px) {
 html {
    	font-size:1em;
    	}
}

J'ai mis 1em, mais cette valeur peut être contestée.
Prévenir un modérateur
Répondre au sujet
Aller à