en 2020, il y a 3,5 milliards d’utilisateurs de smartphones dans le monde. C’est 45% de la population mondiale. En 2019, les gens accédaient à internet avec plus de 9000 appareils distincts. Chaque utilisateur s’attend à ce que chaque site Web auquel il accède soit parfaitement rendu sur son appareil mobile. Cela signifie que les développeurs de sites web doivent concevoir des sites Web qui sont affichés sur une multitude de tailles d’écran à travers le monde.
en d’autres termes, ils ont besoin d’un design réactif.,
Mais comme chaque concepteur le sait, l’exécution du responsive design doit commencer par savoir pour quelles tailles d’écran concevoir. Cet article explore cette question et discute des meilleures tailles de cri pour le design réactif.
qu’est-ce que le Responsive Design?
La conception Web réactive fait référence à une stratégie de conception qui crée des sites Web qui fonctionnent bien pour les appareils mobiles, tablettes et ordinateurs de bureau. Les sites Web sans conception réactive risquent d’aliéner un nombre important d’utilisateurs – 80% des utilisateurs ont affirmé qu’ils rejetteraient les sites Web qui ne fonctionnent pas bien sur leur appareil.,
de plus, Google considère la « convivialité mobile” comme un paramètre de classement. Pour citer le Blog Google Webmaster Central,
« à partir du 21 avril (2015), nous allons étendre notre utilisation de la convivialité mobile comme signal de classement. Ce changement affectera les recherches mobiles dans toutes les langues du monde et aura un impact significatif sur nos résultats de recherche. Par conséquent, les utilisateurs trouveront plus facile d’obtenir des résultats de recherche pertinents et de haute qualité optimisés pour leurs appareils. »
alors, comment trouve – t-on les tailles d’écran réactives idéales?,
Remarque: Pour comprendre pourquoi le responsive design fait partie intégrante du succès du site web, il faut comprendre la nature vaste et sans cesse croissante de la fragmentation des appareils. Téléchargez notre e-Book sur la fragmentation des appareils pour obtenir les dernières informations sur ce phénomène.,
Source D’Image
selon les statistiques mondiales de résolution D’écran (Nov 2018 – Nov 2019), les résolutions les plus couramment utilisées sont:
test réactif gratuit sur les résolutions couramment utilisées
essayez tester la réactivité de votre site web sur de vrais appareils.
bien sûr, l’accent mis sur la convivialité mobile ne signifie pas que l’on abandonne les appareils de bureau. Comme le montre le tableau ci-dessous, les appareils de bureau représentent toujours une part importante de l’utilisation d’internet.,
Source de l’Image
- Mobile – 52.03%
- Bureau – 45.17%
- Tablette – 2.,8%
selon la documentation de Microsoft,
avec un grand nombre de cibles d’appareils et de tailles d’écran dans L’écosystème Windows 10, plutôt que d’optimiser votre interface utilisateur pour chaque appareil, nous avons recommandé de concevoir quelques catégories de largeur de clé (également appelées « points d’arrêt”):
- Small (plus petit que 1008px et plus)
malgré ces informations, n’oubliez pas qu’il n’y a pas de taille d’écran standard pour la conception web., Selon la nature du site, les utilisateurs peuvent utiliser certains appareils qui n’offrent pas les tailles d’écran et résolutions mentionnées ci-dessus. Pour identifier les bonnes tailles d’écran pour la conception web, investissez dans l’analyse. Savoir ce que votre public cible est le plus susceptible d’utiliser. Si ces appareils ne respectent pas la résolution susmentionnée, incluez-les dans le mélange.,
accès en 1 clic à L’outil Responsive Checker
meilleures pratiques pour mettre en œuvre le Responsive Design
il devient beaucoup plus facile de concevoir un site web pour plusieurs tailles d’écran avec les directives suivantes:
- connaissez vos points d’arrêt: en responsive design, un point d’arrêt est le « point” auquel le contenu et la conception d’un site web s’adapteront d’une certaine manière afin de fournir la meilleure expérience utilisateur possible. Pour rendre un site web réactif, les concepteurs doivent ajouter un point d’arrêt lorsque le contenu semble mal aligné., Selon le nombre d’appareils sur lesquels le site est aligné, plusieurs points d’arrêt doivent être définis pour garantir sa réactivité. Reportez-vous à cet article sur les points d’arrêt réactifs pour en savoir plus sur eux et leur efficacité en détail.
- créer des conceptions fluides: la conception fluide fait référence à une disposition de conception qui peut être décalée (étendue et contractée) pour s’adapter à la fenêtre d’affichage de l’appareil sur laquelle elle s’exécute. Une disposition de conception fixe se déformera de manière indésirable sur chaque fenêtre sur laquelle ils ne sont pas alignés., Travaillez sur les mises en page de conception en utilisant des unités % ainsi que des largeurs maximales pour vous assurer que la mise en page s’adapte aux fenêtres des appareils mobiles sans devenir trop large sur les fenêtres des appareils de bureau.
- diminuer la Friction: cela signifie essentiellement que la conception doit être facile à utiliser sur plusieurs appareils. Le Responsive design n’inclut pas seulement à quoi ressemble un site Web, mais aussi ses performances en termes d’accessibilité et de convivialité. Concentrez-vous particulièrement sur le frottement sur petit écran, car à mesure que la taille de l’écran diminue, les éléments web ont moins d’espace pour rendre et deviennent plus susceptibles de se brouiller et de se déformer.,
- conception Mobile D’abord: puisque la friction est plus susceptible de se produire sur des écrans plus petits, concevez avec une approche mobile d’abord. Il est plus difficile de réduire une disposition de bureau pour une fenêtre mobile tout en faisant l’inverse est plus facile. Lors de la conception de mobile-first, le concepteur inclut ce qui est absolument nécessaire pour fournir une expérience utilisateur optimale.,
Voici quelques façons de procéder avec la conception mobile-first:
- prioriser les options de menu importantes
- supprimer toutes les distractions visuelles
- optimiser la conception pour faciliter le Tap – rendre tout facile à taper
- éliminer les formulaires inutiles et les champs d’information
- mettre en évidence le CTA principal
- taper: évidemment, taper est plus difficile sur les appareils mobiles que sur les appareils de bureau. Il est donc logique de minimiser la nécessité de taper sur les versions mobiles des sites Web., Remplacez la saisie par l’utilisation consciente des fonctions de l’appareil telles que le GPS, la lecture de codes QR, L’identification biométrique, etc. Facilitez le partage, l’e-mail ou l’appel des numéros pertinents par les utilisateurs en plaçant des liens qui lancent les fonctions nécessaires. Gardez à l’esprit que la meilleure conception réactive implique de simplifier et d’éliminer les interactions mobiles gênantes.
- Test, test, test: Une fois qu’un développeur ou un concepteur connaît les meilleures tailles d’écran pour le responsive design, il fait le travail et crée un site web réactif., Cependant, pour s’assurer que le site Web rend réellement la façon dont il est censé sur les appareils pour lesquels il a été construit, il doit être testé exactement pour cela. Un moyen facile de le faire est d’utiliser un vérificateur de conception réactif. Au lieu d’exécuter le site web via des appareils individuels avec différentes fenêtres d’affichage, entrez l’URL dans le vérificateur et voyez comment elle apparaît sur une variété d’appareils les plus récents à différentes résolutions d’appareils fréquemment utilisées. Le vérificateur lié ci-dessus offre une vérification réactive sur les derniers appareils mobiles tels que l’iPhone X, le Galaxy Note 10, l’iPhone 8 Plus, etc.,
bien que le responsive design puisse sembler difficile à exécuter, les informations contenues dans cet article visent à simplifier ce processus pour les développeurs et les concepteurs. En faisant ce qui est décrit ci-dessus, il devient beaucoup plus facile de créer des sites Web qui plaisent à son public, quel que soit l’appareil qu’ils utilisent pour accéder à ce site web.
Essayez Sensible Checker Gratuit