Comment tester la compatibilité entre navigateurs de conception Web responsive

Le HTML est un média 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. 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 de deux sites: un pour ordinateur de bureau et un pour mobile, souvent avec l'agent utilisateur reniflant pour rediriger si nécessaire .

Finalement, le terme Responsive Web Design (RWD) a été conçu par Ethan Marcotte en 2010 . Cette technique permettait au même site de fonctionner sur n'importe quel appareil, quelle que soit la taille de l'écran ou les 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'y a pas d'approche ou de technologie 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 first . 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 essentiellement similaire.

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

Les sections suivantes fournissent un certain nombre d'options d'implémentation technique.

HTML viewport Balise Meta

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

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

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

Media Queries

Media Queries constituaient 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 :   1  rem ; 
} 


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

   p   {
     font-size :   1.5  rem ; 
  } 

} 

Les requêtes des médias sont toujours

Éléments

L'élément HTML utilise la syntaxe de requête multimédia pour contrôler quelle image est affichée parmi un choix d'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:

 < image > 

  
   < source    srcset  =  " landscape.jpg " 
             media [19659018] =  " (rapport hauteur / largeur min: 1/1) " 
               alt  =  " paysage "  [19659028] /> 

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

 </  image > 

Unités de fenêtre CSS

Les 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.

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

 p   {
   font-size :   1  rem   +   0.5  vw ; 
} [19659099] Colonnes CSS 
  Les dispositions multi-colonnes CSS  fournissent un moyen de créer plusieurs colonnes de texte à mesure que les dimensions d'un conteneur augmentent. Par exemple: 

  .container    {
   columns :   12  rem  auto ; 
   column-gap  ]:   2  rem ; 
} 
 CSS Flexbox and Grid
  CSS Flexbox  et  CSS Grid  fournissent des techniques modernes qui 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 être renvoyés (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.
 Les deux peuvent être utilisés 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 : [19659124] répéter  ( auto-fit   minmax  ( 20  rem   1  fr ) [19659019]) ; 
   grid-gap :   1  rem ; 
} 
 JavaScript RWD Options
 JavaScript peut également être utilisé pour déterminer les dimensions de la fenêtre d'affichage 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  =  élément .  getBoundingClientRect  () 
  ew  =  rect .  largeur 
  eh  =  rect .  height ; 
 Les dimensions des fenêtres et des éléments peuvent changer lorsque l'appareil tourne ou que la fenêtre du navigateur est redimensionnée. L'API  matchMedia   peut analyser les requêtes multimédias CSS et  déclencher des événements de changement :

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


 mqTest  ( mql ) ; 


mql .  addListener  ( mqTest ) ; 


 function   mqTest  ( e )   {[19659192] if   ( e .  matches )   {
     console .  log  ( 'viewport is at largeur minimale de 600 pixels ') ; 
  } 
   else   {
     console .  log  (' viewport is less than 600 px width ') ; 
  } 

} 
 Browser Support
 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
 Le redimensionnement de la fenêtre de votre navigateur est une stratégie de test raisonnable pendant quelques heures, mais elle devient rapidement inexacte et lourd. La plupart des navigateurs proposent 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, de réduire la bande passante, d'émuler le toucher et de prendre des captures d'écran.
 Dans Firefox , sélectionnez  Responsive Design Mode  dans le menu  Web Developer  ou appuyez sur  Ctrl  |  Cmd  +  Shift  +  M :
 
 Dans les navigateurs basés sur Chromium, ouvrez  Outils de développement  dans le menu  Autres outils  ou appuyez sur  Ctrl  |  Cmd  +  Shift  +  I . Cliquez ensuite sur l'icône  Basculer la barre d'outils de l'appareil :
 
 Revenez à l'onglet du navigateur pour afficher le site redimensionné:
 
   
 Dans Safari, activez l'option  Afficher le menu Développement dans la barre de menus  dans l'onglet  Avancé  du navigateur  Préférences . Chargez une page et choisissez  Enter Responsive Design Mode  dans le menu  Develop .
 Cependant, sachez que ces outils uniquement  imitent  les dimensions de l'écran et l'utilisateur d'un appareil agent. Ils ne peuvent pas émuler avec précision ce qui suit:
  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 de l'iPhone sur la dernière version de Safari ne peut pas représenter avec précision les 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. Un site peut donc être meilleur ou pire sur un appareil réel.
  Tactile 
 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 ordinateur 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 de installer et exécuter de vrais navigateurs mobiles et 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 bien visible sur les téléphones multifonctions de faible puissance.
 Les options pour iOS sont plus limitées:
 Ces émulateurs ont encore des inconvénients:
 Le logiciel nécessite quelques expertise technique et utilise des ressources système considérables.
 De nombreuses options iOS sont des 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'y a aucun logiciel à configurer ou à maintenir.
 Outre les tests en direct, certains services incluent des API de test automatisées qui vous permettent d'exécuter des scripts et de vérifier les régressions de style ou les interfaces utilisateur cassées.
   LambdaTest  fournit plus de  2 000 combinaisons de périphérique, OS et navigateur .  Les fonctionnalités  incluent:
 testing  localhost  pages exécutées sur votre PC de développement
 débogage avec des outils de développement intégrés
 test de géolocalisation à partir de différents emplacements
 généré automatiquement, complet captures d'écran de pages sur plusieurs appareils
 un outil de suivi des problèmes intégré
  Logiciel LT Browser  (Windows, macOS, Linux) pour tester et comparer des appareils avec rechargement automatique et synchronisation par défilement
 Selenium- API de test automatisé basées sur
 Assistance 24/7
 un  plan gratuit  avec accès illimité à partir de 15 $ par mois.
   Inscrivez-vous pour un compte LambdaTest gratuit…  
 
 Les services alternatifs qui fournissent également des tests mobiles en direct et automatisés comprennent:
 Real Device Testing
 Enfin, il n'y a pas de substitut aux 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 smartphone récent n’est peut-être pas une indication du matériel moyen. Essayez de vous procurer des appareils de milieu de gamme vieux d’un ou deux ans, comme un Moto G7 ou un iPhone 8.
 Les appareils du 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  sous macOS et Linux ou  ipconfig  sous 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:
 Sur l'appareil Android, sélectionnez  Options pour les développeurs  dans  Paramètres  et activez  Débogage USB .
 Connectez l'appareil à votre ordinateur à l'aide d'un câble USB approprié. La première fois que vous tentez cette opération, vous serez peut-être invité à confirmer les actions sur l'un ou les deux appareils.
 Lancez Chrome sur votre PC et ouvrez  dans un nouvel onglet. Assurez-vous que  Détecter les périphériques USB  est activé.
 En option, définissez  Redirection de port  - par exemple, le port  8888  du périphérique distant peut être transféré vers  localhost: 8888 .
 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:
 Pour déboguer Safari pour iPhone, procédez comme suit:
 Connectez votre téléphone à votre ordinateur Apple. [19659116] Ouvrez la page Web que vous souhaitez déboguer dans Safari sur votre iPhone.
 Lancez Safari sur votre ordinateur.
 Dans Safari sur l'ordinateur, accédez à  Développer > [your iPhone] > [19659287]. 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 Responsive Web Design vous permettent de créer un site Web unique qui peut être consulté par n'importe qui sur n'importe quel l'appareil indépendamment des limites techniques et des limites. 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.