Je cherche à rendre mon site Web réactif, mais c'est ma première incursion dans la conception réactive, et je suis assez désemparé pour le moment.
Je n'ai aucune idée de l'état actuel des choses en ce qui concerne les tailles d'écran pour les téléphones, les machines de jeux portables et autres, donc j'apprécierais quelques conseils sur les plus petits appareils pour lesquels vous concevez actuellement (en pixels). Je sais qu'il y a plus de variables que cela mais ce serait un début.
Quelle est la plus petite taille d'écran pour laquelle vous concevez
Mais, comme d'autres l'ont répondu, pour de meilleurs résultats, vous devez réellement mesurer votre audience et considérer combien de ressources vous souhaitez consacrer au fonctionnement de votre site/application pour <0,1% d'utilisateurs en dessous de votre seuil de largeur d'écran déterminé.
Cela dit, sauf si vous exécutez un site/une application obscure pour les écrans monochromes 60 pixels intégrés, chacun de vos utilisateurs aura essentiellement une prise en charge de la largeur d'écran de l'appareil d'au moins 320 pixels. Nous avons utilisé ce nombre comme seuil et il n'y a pas eu de rétroaction négative à ce sujet.
Tout d'abord, puisque c'est votre site, ne devinez pas; savoir !
C'est très simple. Si ce n'est pas déjà fait, ajoutez Google Analytics à votre site (c'est GRATUIT) =.
De là, vous pouvez réellement voir ce que appareil mobile , navigateur , [~ # ~] os [~ # ~] , Résolution d'écran , etc. que vos visiteurs utilisent.
Enfin, une fois que vous disposez de suffisamment de données, décidez quelles résolutions vous souhaitez traduire en requêtes CSS pour votre nouveau site responsive.
Il y a des limites pratiques sur chaque extrémité du spectre IRT dimensions max et min écran.
Ces informations peuvent varier d'un projet à l'autre. Cependant, sur le bas de gamme, 320px est assez courant ces jours-ci (principalement en raison de l'iPhone et des appareils Android en mode portrait).
Il y a toujours des exceptions, cependant, et si votre public s'inscrit dans l'une de ces exceptions, c'est ce que vous devez prendre en considération plus que tout.
Sur ce site Web, il donne quelques informations sur les résolutions d'écran http://www.websitedimensions.com/
Selon ces statistiques, la plus petite résolution mobile est de 320px
- cependant, comme indiqué dans le troisième tableau, la largeur réelle (hors interface du navigateur) dans ce cas peut être 310px
dans le cas où le lien expirera à l'avenir, voici le lien d'archive Web: http://web.archive.org/web/20160330034016/http://www.websitedimensions.com/
Je suis avec @ DA01: Les données utilisateur sont un point important, mais parfois la décision d'aller réactif concerne les visiteurs que vous souhaitez obtenir, pas nécessairement ceux que vous avez actuellement. Je sais que le Web est ouvert à tout le monde, mais vous voudrez peut-être cibler un public spécifique qui pourrait ne pas accéder à votre site car il n'est pas encore adapté aux mobiles.
Mais pour répondre à votre question, en règle générale, je viserais une largeur d'écran de 320 pixels et plus.
Le commentaire de Rumi ci-dessus résume très bien la réalité du défi.
Cependant, en reconnaissant que vous ne pouvez pas faire une expérience idéale pour chaque appareil, tout comme vous ne pouvez pas faire une expérience idéale pour chaque personne de tous les horizons et de tous les besoins, vous voudrez prioriser quoi faire le expérience idéale pour. Ensuite, rendez l'expérience acceptable et aussi bonne que possible pour tout le monde.
Regardez le but de votre site Web et les utilisations possibles. Pourquoi quelqu'un voudrait-il afficher votre site sur un appareil mobile? Qu'espéreraient-ils faire? En quoi cela pourrait-il être différent de ce qu'ils feraient/attendraient de l'expérience de bureau? Il y a plusieurs camps pour savoir si et comment vous devriez donner une expérience dégradée pour mobile, et je n'entrerai pas dans ceux ici.
Regardez également les analyses de votre site Web. Les gens essaient-ils réellement de voir votre site Web sur de petits appareils? Vers quelles pages vont-ils? Comme c'est petit? Quel pourcentage du trafic provient d'appareils minuscules?
Dans mon cas, je travaille sur un ensemble d'applications qui s'intègrent ensemble. Le mobile est un élément très important de cela, donc même si seulement environ 4% du trafic vers le composant d'application Web provient d'appareils 320px (100 dpi), nous le faisons bien fonctionner pour eux. Cependant, mon plan à plus long terme est d'optimiser les appareils jusqu'à 480 pixels tout en faisant fonctionner les choses (avec zoom) sur les minuscules résolutions. Je sais que certaines personnes seront en désaccord avec cela, mais je pense qu'il vaut mieux donner une grande expérience au plus grand nombre de personnes au lieu de faire des sacrifices qui affectent tout le monde.
Cela ne vous donne probablement pas la réponse que vous cherchez, mais j'espère que cela suffit pour vous orienter dans la bonne direction pour votre situation.