Catégories
Astuces et Design

Comment tester la compatibilité entre navigateurs de conception Web responsive

Le HTML est un support intrinsèquement fluide. Le texte et les conteneurs se développent horizontalement et verticalement pour utiliser l'espace disponible. Cette fluidité a rendu les conceptions complexes plus difficiles, de sorte qu'au tournant du millénaire, de nombreux sites ont adopté une largeur fixe basée sur des tailles d'écran populaires.

Le processus est resté viable car la taille des écrans a continué d'augmenter de 800 × 600 à 1024 × 768 et au-delà. Cependant, la montée en puissance des smartphones et le lancement de l'iPhone en 2007 ont inversé cette tendance. Aujourd'hui, plus de la moitié des utilisateurs accèdent aux pages Web sur un appareil mobile plus petit.

Remarque: techniquement, les smartphones ont souvent une résolution plus élevée que de nombreux moniteurs, mais les pixels individuels deviennent invisibles. Un iPhone 11 Max traduit sa résolution matérielle 2688 x 1242 en une résolution logique 896 × 414 plus pratique. Chaque pixel logique correspond à une grille de 3 × 3 pixels réels, ce qui permet des polices plus lisses et des détails d'image accrus.

La solution de contournement initiale était deux sites: un pour ordinateur de bureau et un pour mobile, souvent avec l'agent utilisateur reniflant pour rediriger si nécessaire. Cela devint rapidement impraticable car la variété des appareils augmentait de façon exponentielle.

Enfin, le terme Site Web adaptatif (RWD) a été conçu par Ethan Marcotte en 2010. La technique permettait au même site de fonctionner sur n'importe quel appareil indépendamment de la taille de l'écran ou des dimensions de la fenêtre.

Nos remerciements vont à LambdaTest pour avoir sponsorisé la mise à jour de cet article plus ancien, que nous avons complètement réécrit pour 2020. Veuillez soutenir les partenaires qui rendent SitePoint possible.

Comment fonctionne RWD?

Il n’existe pas d’approche ou de technologie de RWD unique.

Tout d'abord, vous devez déterminer comment la conception d'un site réagira à des écrans de tailles différentes. C'est un défi, et bon nombre des premiers sites RWD ont pris une disposition de bureau existante et ont supprimé des sections à mesure que les dimensions de l'écran étaient réduites.

Une meilleure technique était mobile d'abord. Cela a commencé avec une vue mobile linéaire, qui a fonctionné sur tous les appareils, puis a réorganisé ou adapté le contenu à mesure que plus d'espace et les fonctionnalités de navigateur prises en charge devenaient disponibles. Plus récemment, de nombreux sites ont adopté des mises en page plus simples, où l'expérience mobile et de bureau est principalement similaire.

Un exemple typique de RWD en action est le menu hamburger. Ceux sur des écrans plus petits peuvent cliquer sur une icône pour afficher les liens de navigation, tandis que ceux avec des écrans plus grands peuvent voir toutes les options dans une liste horizontale.

Les sections suivantes fournissent un certain nombre d'options de mise en œuvre technique.

HTML viewport Balise Meta

Quelle que soit la technique RWD, la balise suivante doit être défini dans votre HTML :

<meta name="viewport" content="width=device-width,initial-scale=1">

le width=device-width Ce paramètre garantit que les navigateurs mobiles redimensionnent les pixels CSS logiques à la largeur de l'écran. Sans cela, le navigateur supposera le rendu d'un site de bureau et le redimensionnera en conséquence afin qu'il puisse être déplacé et zoomé.

Requêtes médias

Les requêtes des médias ont constitué la base principale des premiers sites RWD. Ils permettent au CSS de cibler des plages spécifiques de dimensions de la fenêtre. Par exemple:


p {
  font-size: 1rem;
}


@media (min-width: 900px) and (max-width: 1200px) {

  p {
    font-size: 1.5rem;
  }

}

Les requêtes multimédias sont toujours utilisées, bien que des options moins explicites soient désormais disponibles.

Éléments

Le HTML L'élément utilise la syntaxe de requête multimédia pour contrôler quelle image est affichée à partir d'un choix de options. Ceci est généralement utilisé pour la direction artistique afin d'afficher une image appropriée pour la fenêtre de l'appareil. Par exemple:

<picture>

  
  <source  srcset="landscape.jpg"
            media="(min-aspect-ratio:1/1)"
              alt="landscape" />

  
  <img src="portrait.jpg" alt="portrait" />

picture>

Unités de fenêtre CSS

le vw et vh Les unités CSS représentent 1% de la largeur et de la hauteur de la fenêtre, respectivement. vmin est 1% de la plus petite dimension, et vmax est 1% de la plus grande dimension.

Ceux-ci permettent une flexibilité de RWD, en particulier lorsqu'ils sont utilisés avec calc. Par exemple:


p {
  font-size: 1rem + 0.5vw;
}

Colonnes CSS

Les dispositions CSS à plusieurs colonnes permettent de créer plusieurs colonnes de texte à mesure que les dimensions d'un conteneur augmentent. Par exemple:


.container {
  columns: 12rem auto;
  column-gap: 2rem;
}

CSS Flexbox et Grid

CSS Flexbox et CSS Grid fournissent des techniques modernes qui présentent les éléments enfants en fonction de leur contenu et de l'espace disponible. La principale différence:

  • Flexbox est utilisé pour les mises en page unidimensionnelles. Les éléments peuvent passer (ou non) à la ligne suivante si nécessaire afin que les colonnes ne s'alignent pas.
  • La grille est destinée aux mises en page bidimensionnelles, généralement avec des lignes et des colonnes identifiables.

L'un ou l'autre peut être utilisé pour créer un disposition intrinsèque (un terme conçu par Jen Simmons). En substance, les éléments sont dimensionnés en fonction des dimensions de la fenêtre sans nécessiter de requêtes multimédias. Par exemple:


.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  grid-gap: 1rem;
}

Options de RWD JavaScript

JavaScript peut également être utilisé pour déterminer les dimensions de la fenêtre et réagir en conséquence. Par exemple:


const
  vw = window.innerWidth,
  vh = window.innerHeight;

De même, les dimensions d'un élément individuel peuvent être examinées avec offsetWidth et offsetHeight, bien que la méthode getBoundingClientRect () puisse renvoyer plus d'informations, y compris des fractions de pixel:

const
  element = document.getElementById('myelement'),
  rect    = element.getBoundingClientRect(),
  ew      = rect.width,
  eh      = rect.height;

Les dimensions des fenêtres et des éléments peuvent changer au fur et à mesure que l'appareil pivote ou que la fenêtre du navigateur est redimensionnée. le matchMedia L'API peut analyser les requêtes multimédias CSS et déclencher des événements de modification:


const mql = window.matchMedia('(min-width: 600px)');


mqTest(mql);


mql.addListener(mqTest);


function mqTest(e) {

  if (e.matches) {
    console.log('viewport is at least 600px width');
  }
  else {
    console.log('viewport is less than 600px width');
  }

}

Prise en charge du navigateur

Les technologies RWD offrent avant tout un bon support de navigateur. L'option la plus récente – CSS Grid – est prise en charge par près de 95% des navigateurs utilisés aujourd'hui. Cependant, il est toujours nécessaire de tester votre site sur une gamme d'appareils, de résolutions et de navigateurs…

Test dans le navigateur

Redimensionner la fenêtre de votre navigateur est une stratégie de test raisonnable pendant quelques heures, mais elle devient rapidement imprécise et lourde. La plupart des navigateurs offrent un Mode de conception réactive qui vous permet de sélectionner un appareil et un agent utilisateur, de le faire pivoter, de choisir une résolution, de modifier la densité de pixels, d'accélérer la bande passante, d'émuler le toucher et de prendre des captures d'écran.

Dans Firefox, sélectionnez Mode de conception réactive du Développeur web menu ou appuyez sur Ctrl | Cmd + Décalage + M:

Mode de conception sensible de Firefox

Dans les navigateurs basés sur Chromium, ouvrez Outils de développement du Plus d'outils menu ou appuyez sur Ctrl | Cmd + Décalage + je. Cliquez ensuite sur le Basculer la barre d'outils de l'appareil icône:

Mode de conception sensible de Firefox

Revenez à l'onglet du navigateur pour afficher le site redimensionné:

Barre d'outils de l'appareil Chrome

Dans Safari, activez le Afficher le menu Développement dans la barre de menus option de la Avancée onglet du navigateur Préférences. Chargez une page et choisissez Entrez en mode de conception réactive du Développer menu.

Cependant, sachez que ces outils imiter les dimensions de l’écran et l’agent utilisateur d’un appareil. Ils ne peuvent pas émuler avec précision les éléments suivants:

  • Capacités de rendu

    Le navigateur utilisera son propre moteur de rendu – pas celui du périphérique émulé. Une fonctionnalité CSS qui fonctionne dans Firefox «fonctionnerait» sur sa vue iPhone émulée indépendamment du support réel. Cela dit, le bureau Chrome affichera une approximation raisonnable d'Android Chrome, et macOS Safari sera similaire à l'iPhone car ils sont basés sur les mêmes moteurs de rendu.

  • Appareils plus anciens

    Le test de la vue du navigateur iPhone sur la dernière version de Safari ne peut pas représenter avec précision des appareils plus anciens avec des systèmes d'exploitation et des logiciels hérités.

  • Écrans haute densité

    Vous êtes limité aux pixels physiques de l’écran de votre PC, de sorte qu’un site peut être meilleur ou pire sur un appareil réel.

  • Toucher

    Une souris ou un trackpad a un contrôle plus fin qu'un appareil à écran tactile avec un petit écran. Il peut être impossible de voir les effets appliqués en survol.

  • Vitesse de traitement

    Votre PC est susceptible d'avoir un réseau et une vitesse de traitement plus rapides qu'un appareil mobile.

Émulateurs de système d'exploitation mobile

L'exécution d'une machine virtuelle Android ou iOS sur votre appareil vous permet d'installer et d'exécuter de vrais navigateurs mobiles et d'utiliser leurs moteurs de rendu réels.

Les émulateurs Android incluent:

  • Genymotion: options cloud gratuites et commerciales, toutes les versions d'Android pour Windows, macOS et Linux
  • Android Studio (et émulateur): gratuit, Windows, macOS et Linux
  • Visual Studio Xamarin (et émulateurs): commercial, Windows et macOS
  • Bliss OS: gratuit, Android 9 pour Windows, Linux et Chrome OS
  • Phoenix OS: gratuit, Android 7.1 ou 5.1 pour Windows et macOS
  • Android-x86: ISO Android gratuits pour toute plate-forme de machine virtuelle.

Chrome est le choix de navigateur évident pour Android, mais vous pouvez également installer Opera Mini, qui est prédominant sur les téléphones fonctionnels moins puissants.

Les options pour iOS sont plus limitées:

Ces émulateurs ont encore des inconvénients:

  • Le logiciel nécessite une certaine expertise technique et utilise des ressources système considérables.
  • De nombreuses options iOS sont simulateurs. Ils adaptent un autre moteur de rendu et ne seront pas toujours précis.

Services de test en ligne

Ce segment a été créé en partenariat avec LambdaTest. Merci de soutenir les partenaires qui rendent SitePoint possible.

Plusieurs services en ligne vous permettent de tester des pages réactives sur des navigateurs mobiles sur le Web. En substance, vous louez du temps sur un appareil réel et pouvez afficher son écran dans votre navigateur. Il n’ya aucun logiciel à configurer ou à entretenir.

Outre les tests en direct, certains services incluent des API de test automatisées qui vous permettent d'exécuter des scripts et de rechercher des régressions de style ou des interfaces utilisateur cassées.

LambdaTest fournit plus de 2 000 combinaisons d'appareils, de systèmes d'exploitation et de navigateurs. Les fonctionnalités incluent:

  • essai localhost pages s'exécutant sur votre PC de développement
  • débogage avec des outils de développement intégrés
  • tests de géolocalisation à partir de différents endroits
  • captures d'écran de pleine page générées automatiquement sur plusieurs appareils
  • un outil de suivi des problèmes intégré
  • Logiciel LT Browser (Windows, macOS, Linux) pour tester et comparer les appareils avec rechargement automatique et synchronisation par défilement
  • API de test automatisé basées sur le sélénium
  • Assistance 24/7
  • un plan gratuit avec accès illimité à partir de 15 $ par mois.

Créez un compte LambdaTest gratuit…

Vue en direct LambdaTest

Les services alternatifs qui fournissent également des tests mobiles en direct et automatisés comprennent:

Test d'appareils réels

Enfin, rien ne remplace les tests sur de vrais appareils. C'est le meilleur moyen d'évaluer la vitesse de traitement réelle, le contrôle tactile et la conception Web réactive de votre site.

Idéalement, vous devriez tester autant d'appareils que possible, mais votre propre smartphone récent peut ne pas indiquer un matériel moyen. Essayez de vous procurer des appareils de milieu de gamme âgés d'un ou deux ans, comme un Moto G7 ou un iPhone 8 d'occasion.

Les appareils sur le même réseau peuvent accéder au serveur de votre PC en saisissant son adresse IP dans le navigateur. Ceci peut être obtenu avec ifconfig sur macOS et Linux ou ipconfig sur Windows.

Vous pouvez également connecter un smartphone à votre PC avec un câble USB. Cela vous permet de contrôler à distance l'appareil et d'accéder facilement à ses panneaux d'outils de développement pour le débogage. La technique varie selon les plates-formes mais, pour déboguer Android Chrome sur l'édition de bureau du navigateur:

  1. Sur l'appareil Android, sélectionnez Options de développeur du Réglages et activer débogage USB.
  2. Connectez l'appareil à votre ordinateur à l'aide d'un câble USB approprié. La première fois que vous essayez cela, vous pouvez être invité à confirmer les actions sur un ou les deux appareils.
  3. Lancez Chrome sur votre PC et ouvrez dans un nouvel onglet. Assurer Découvrez les périphériques USB est autorisé.
  4. En option, définissez Redirection de port – par exemple, port 8888 sur l'appareil distant peut être transféré vers localhost:8888.
  5. Votre appareil devrait apparaître dans la liste. Vous pouvez maintenant inspecter un onglet nouveau ou existant qui ouvre les outils de développement de l'appareil:

périphérique distant DevTools

Pour déboguer Safari pour iPhone, procédez comme suit:

  1. Connectez votre téléphone à votre ordinateur Apple.
  2. Ouvrez la page Web que vous souhaitez déboguer dans Safari sur votre iPhone.
  3. Lancez Safari sur votre ordinateur.
  4. Dans Safari sur l'ordinateur, accédez à Développer > (votre iPhone) > (site Web à inspecter). Cela ouvrira les outils de développement de Safari sur votre ordinateur, vous permettant de déboguer le site sur votre iPhone.

Un site, de nombreuses vues

Les technologies de conception Web réactive vous permettent de créer un site Web unique qui peut être consulté par n'importe qui sur n'importe quel appareil, quelles que soient les limites et les limites techniques. En faire une excellente expérience utilisateur est une autre affaire, mais la gamme et les capacités des outils de test continuent de s'améliorer.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *