Conception mobile first et résolution smartphone

Bonjour,

Je suis en train de me former sur la conception de sites adaptés aux mobiles.

J'ai fait des sites web pendant des années, mais jamais de site conçu mobile first.


Dans les sources que je consulte (libres spécialisés, sites web), je ne trouve pas une info sur un site qui me permette de connaître les résolutions en France des utilisateurs de smartphone pour 2023.


Je souhaite m'en servir comme base pour concevoir les maquettes sur Adobe XD du site que je vais ensuite faire sur Wordpress avec Divi.

Le seul site que j'ai trouvé m'indique des résolutions étranges quand je sélectionne mobile, France, 2023 :

428x926 par exemple

ou encore ici : https://www.leptidigital.fr/technologie/parts-marche-resolutions-ecrans-26797/



Alors que quand je compare avec l'info pour un iPhone XS :

iPhone XS
Il affiche une résolution de 2436 x 1125 pixels avec une densité de 458 pixels par pouce.
https://certideal.com/content/157-apple-iphone-xs-fiche-technique-prix-avis#:~:text=%C3%89cran%20iPhone%20XS, -L'iPhone%20XS&text=Il%20affiche%20une%20r%C3%A9solution%20de,de%20458%20pixels%20par%20pouce.


Pourtant Adobe XD m'indique aussi des résolutions basses (voir copie d'écran).

Je ne comprends pas.

Pouvez-vous m'éclairer svp ?

Y-a-t-il une source pour se former en ligne ?
J'ai pris LinkedIn learning en payant pour essayer de trouver plus d'infos.


Merci.

salut
je fait comme ceci:
les tailles sont en px css et pas besoin de penser à la résolution des écrans.

tes règles de base si smart horizontal:

{...}

tes variantes si smart vertical :

@media only screen and (orientation: portrait) and (max-width: 500px) {
{...}
}

tes variantes si grand écran horizontal:

@media only screen and (orientation: landscape) and (min-width: 950px) {
{...}
}

tes variantes si + grand écran horizontal:

@media only screen and (orientation: landscape) and (min-width: 1400px) {
{...}
}

Un question au passage drphilgood, pourquoi "@media only screen" et pas "@media all" ?

Bonjour,

Vahia : screen pour ne cibler que l'écran et pas le print. Le only est une très très ancienne habitude des débuts de @media pour distinguer les navigateurs ne supportant pas les Media Queries. En 2024, ça fait de nombreuses années qu'il n'y en a plus. On peut l'enlever, on peut le laisser, peu importe.

webfinder : il se vend plus d'1 milliard de smartphones par an dans le monde, de 10 à 2000€, bonne chance avec ça En France, tu pourrais regarder ce qu'il se vendait dans les boutiques Orange/SFR/BT/Free il y a 2-3 ans pour avoir une idée du parc actuel et la réponse est : de tout, absolument de tout.
Tu trouveras ici 2 articles abordant le responsive : premier, deuxième.
Ce que je rencontre le plus couramment (et ce n'est PAS adapté à tous les cas, juste ce qui se fait le plus et/ou adapté à beaucoup de cas), c'est une maquette en 360px de large, énormément de fluidité prévue, une maquette desktop en 1920px de large qui prévoit une largeur de contenu max dans les 1400-1600px avec des bandeaux et illustrations pleine largeur.
Mmh et un UI Kit pour visualiser chaque composant, pour les projets conséquents que je peux côtoyer.
C'est le boulot de l'inté avec les indications du designer d'interpoler entre les 2 pour que ça s'affiche correctement dans toutes les situations possibles : écran 4K, pas d'ascenseur horizontal en 320px de large (ça c'est mon taff en accessibilité de m'en assurer pour que l'utilisateur malvoyant puisse zoomer très très fort, sur desktop), augmenter la taille des caractères sur iOS et Android sans que ça pète tout, orientation portrait ou paysage (la largeur enfin hauteur d'un iPhone va vous étonner), vieux laptop zoomé à 150% côté système donc en 1920/1,5 = 1280px dans le navigateur.
L'inté n'a jamais eu autant de situations à gérer depuis qu'on l'a - enfin - débarrassé du pixel perfect mais il n'a également jamais eu autant d'outils surpuissants à sa disposition :
Flexbox, Grid layout, @media
aspect-ratio, background-size: contain ou cover, object-fit pour conserver les proportions genre vidéos / remplir une surface avec une image dans toutes les conditions

salut
effectivement si je supprime "only" çà marche aussi.
4 caractères gagnés merci