Les développeurs Web trouvent de plus en plus de bonnes raisons de refuser le support total d'IE6 dans les projets qu'ils créent.

Certains proposent une dégradation gracieuse à peu de frais, tandis que d'autres disent radicalement au revoir aux anciens navigateurs, pimentant presque délibérément le site avec des technologies modernes et affichant un talon dans les navigateurs plus anciens avec une proposition de mise à jour urgente.

Le moyen le plus fiable consiste à configurer plusieurs machines virtuelles, où tout peut être testé en profondeur (y compris le déplacement de la bordure de la fenêtre, le défilement et, plus encore, le fonctionnement de JS). Mais souvent, il suffit de regarder le site et de comprendre si tout va bien dans son ensemble. Ou offrez cette opportunité au client.

Un classique du genre pour résoudre ce problème est un service web :

Browsershots.org polyvalent mais long

Il vous permet d'obtenir une capture d'écran non seulement d'un navigateur spécifique, mais également de sélectionner sa version et le système d'exploitation dans lequel le navigateur est exécuté.

Il n'y a qu'un seul inconvénient : la file d'attente. Vous pouvez attendre une demi-heure voire plus pour des captures d'écran de la page souhaitée.

Je cherchais des solutions qui existent en tant que services Web Et ne nécessitent pas d’inscription ni de paiement obligatoire. C'est-à-dire ceux qui pourraient être utilisés non seulement par le développeur, mais aussi par son client, en tant qu'outil indépendant (j'ai rencontré une situation désagréable lorsque le client avait une sorte de panneau semi-découpé dans IE qui redessinait la conception de adresses e-mail - ne vous rendez pas dans une telle situation chez le client avec son ordinateur portable).

Nous avons trouvé deux services Web appropriés qui produisent des captures d'écran après seulement quelques secondes d'attente, mais avec un inconvénient commun : ils ne sont compatibles qu'avec IE, mais cela n'est généralement pas suffisant, car d'autres navigateurs sont multiplateformes et beaucoup d'entre eux vous permettent pour contenir plusieurs versions portables à la fois sur une seule machine sans virtualisation.

www.thumbalizr.com polyvalent et son IE7

Ce service a en fait été créé pour créer des « aperçus » de sites et est même équipé de l'API appropriée, mais si vous l'envoyez pour prendre une capture d'écran d'une page aussi délicate que inet.ya.ru, il devient alors clair que le service utilise IE7 comme moteur de rendu des captures d'écran. Et cela sera utile à tous ceux qui ont mis à jour IE vers la huitième version ou qui n'utilisent pas du tout Windows.

Optimal ipinfo.info/netrenderer

Le service peut prendre des captures d'écran dans IE 5.5 (pour les nécrophiles), IE 6, 7 et 8. Autrement dit, il est excellent pour les tests. Il existe également un mode dans lequel une capture d'écran montre les différences de présentation entre IE6 et IE7. Pratique, mais j'espère qu'à l'avenir, il sera possible de comparer immédiatement avec le huitième IE.

Browserling.com pratique avec la possibilité de faire défiler et de cliquer

Nous avons parlé du service dans les commentaires. C'est bien car c'est le seul répertorié qui vous permet de cliquer, de faire défiler et de tester JS (vous obtenez quelque chose comme un accès VNC à une fenêtre distante avec le navigateur souhaité). L'inconvénient d'un service aussi luxueux est prévisible : il existe une liste d'attente. Bien que cela soit magnifiquement visualisé :

Browserling vous propose n'importe quel IE de 5.5 à 9, ainsi que les dernières versions d'Opera, Chrome, Safari et Firefox. La file d'attente est la même, quel que soit le navigateur auquel vous vous êtes inscrit. Pour cette raison, je veux personnellement donner une fessée à ceux qui font la queue pour essayer Firefox, qui est disponible sur toutes les plateformes.

Après avoir attendu votre tour, vous aurez cinq minutes à votre disposition, puis ils vous déposeront et si vous n'avez pas eu le temps de vérifier quelque chose, vous devrez refaire le « dernier » (au moment de tester le service, j'ai rencontré des files d'attente de 10 personnes chacune, mais je constate que beaucoup de « debout » devant ont abandonné la file d'attente ou ont tourmenté le service pendant moins que les cinq minutes disponibles). Pour être honnête, il faut dire qu'il existe également une option payante sans file d'attente.

Ta version

J'attends avec impatience des liens vers des services similaires dans les commentaires, mais je vous suggère de respecter les critères décrits ci-dessus : le service doit être accessible au public sans inscription et gratuit.

Les développeurs Web trouvent de plus en plus de bonnes raisons de refuser le support total d'IE6 dans les projets qu'ils créent.

Certains proposent une dégradation gracieuse à peu de frais, tandis que d'autres disent radicalement au revoir aux anciens navigateurs, pimentant presque délibérément le site avec des technologies modernes et affichant un talon dans les navigateurs plus anciens avec une proposition de mise à jour urgente.

Le moyen le plus fiable consiste à configurer plusieurs machines virtuelles, où tout peut être testé en profondeur (y compris le déplacement de la bordure de la fenêtre, le défilement et, plus encore, le fonctionnement de JS). Mais souvent, il suffit de regarder le site et de comprendre si tout va bien dans son ensemble. Ou offrez cette opportunité au client.

Un classique du genre pour résoudre ce problème est un service web :

Browsershots.org polyvalent mais long

Il vous permet d'obtenir une capture d'écran non seulement d'un navigateur spécifique, mais également de sélectionner sa version et le système d'exploitation dans lequel le navigateur est exécuté.

Il n'y a qu'un seul inconvénient : la file d'attente. Vous pouvez attendre une demi-heure voire plus pour des captures d'écran de la page souhaitée.

Je cherchais des solutions qui existent en tant que services Web Et ne nécessitent pas d’inscription ni de paiement obligatoire. C'est-à-dire ceux qui pourraient être utilisés non seulement par le développeur, mais aussi par son client, en tant qu'outil indépendant (j'ai rencontré une situation désagréable lorsque le client avait une sorte de panneau semi-découpé dans IE qui redessinait la conception de adresses e-mail - ne vous rendez pas dans une telle situation chez le client avec son ordinateur portable).

Nous avons trouvé deux services Web appropriés qui produisent des captures d'écran après seulement quelques secondes d'attente, mais avec un inconvénient commun : ils ne sont compatibles qu'avec IE, mais cela n'est généralement pas suffisant, car d'autres navigateurs sont multiplateformes et beaucoup d'entre eux vous permettent pour contenir plusieurs versions portables à la fois sur une seule machine sans virtualisation.

www.thumbalizr.com polyvalent et son IE7

Ce service a en fait été créé pour créer des « aperçus » de sites et est même équipé de l'API appropriée, mais si vous l'envoyez pour prendre une capture d'écran d'une page aussi délicate que inet.ya.ru, il devient alors clair que le service utilise IE7 comme moteur de rendu des captures d'écran. Et cela sera utile à tous ceux qui ont mis à jour IE vers la huitième version ou qui n'utilisent pas du tout Windows.

Optimal ipinfo.info/netrenderer

Le service peut prendre des captures d'écran dans IE 5.5 (pour les nécrophiles), IE 6, 7 et 8. Autrement dit, il est excellent pour les tests. Il existe également un mode dans lequel une capture d'écran montre les différences de présentation entre IE6 et IE7. Pratique, mais j'espère qu'à l'avenir, il sera possible de comparer immédiatement avec le huitième IE.

Browserling.com pratique avec la possibilité de faire défiler et de cliquer

À propos du service dans les commentaires. C'est bien car c'est le seul répertorié qui vous permet de cliquer, de faire défiler et de tester JS (vous obtenez quelque chose comme un accès VNC à une fenêtre distante avec le navigateur souhaité). L'inconvénient d'un service aussi luxueux est prévisible : il existe une liste d'attente. Bien que cela soit magnifiquement visualisé :

Browserling vous propose n'importe quel IE de 5.5 à 9, ainsi que les dernières versions d'Opera, Chrome, Safari et Firefox. La file d'attente est la même, quel que soit le navigateur auquel vous vous êtes inscrit. Pour cette raison, je veux personnellement donner une fessée à ceux qui font la queue pour essayer Firefox, qui est disponible sur toutes les plateformes.

Après avoir attendu votre tour, vous aurez cinq minutes à votre disposition, puis ils vous déposeront et si vous n'avez pas eu le temps de vérifier quelque chose, vous devrez refaire le « dernier » (au moment de tester le service, j'ai rencontré des files d'attente de 10 personnes chacune, mais je constate que beaucoup de « debout » devant ont abandonné la file d'attente ou ont tourmenté le service pendant moins que les cinq minutes disponibles). Pour être honnête, il faut dire qu'il existe également une option payante sans file d'attente.

Ta version

J'attends avec impatience des liens vers des services similaires dans les commentaires, mais je vous suggère de respecter les critères décrits ci-dessus : le service doit être accessible au public sans inscription et gratuit.

Salut tout le monde!

Aujourd'hui, nous allons parler du sujet le plus important qui affecte directement les facteurs comportementaux (et donc le trafic du site et la quantité de trafic des moteurs de recherche) : comment voir comment un site est affiché dans différents navigateurs.

Vous savez probablement tous qu'il existe plusieurs navigateurs populaires (Safari, Chrome, Opera, Mozilla, etc.) de versions différentes. Il existe de nombreuses versions de navigateurs, car elles sont constamment mises à jour, ajustées, améliorées, et cela arrive très souvent. En conséquence, tout porte à croire qu'il existe plus d'une centaine de programmes permettant d'accéder à Internet. Et le problème, c'est qu'ils ne sont pas cohérents entre eux : chaque navigateur perçoit le code html (celui dans lequel sont écrits les sites Internet) à sa manière.

C'est pourquoi Le site s'affiche différemment selon les navigateurs. De ce fait, divers problèmes surviennent : dans certains navigateurs, les tableaux sont affichés de manière moche, à certains endroits les barres latérales se déplacent, à d'autres le site ne rentre pas en largeur (et un défilement horizontal apparaît).

Vous comprenez probablement que tout cela mènera à une chose : le visiteur fermera la page du navigateur avec un tel site et ne reviendra probablement plus ici. Les moteurs de recherche l’interpréteront à leur manière : « le site n’intéresse pas les utilisateurs, alors pourquoi y envoyer des visiteurs ? En général, cela entraînera une baisse du trafic des moteurs de recherche et une diminution du classement des sites. Le problème est urgent et nous devons le combattre.

Vérification de l'affichage du site dans les différents navigateurs

Il existe des services spéciaux qui vous permettent de vérifier l'affichage d'un site Web dans plusieurs navigateurs différents. Il n’y en a pas encore beaucoup, nous devons donc nous contenter de ce que nous avons.

Comment éviter les problèmes avec les navigateurs

La seule façon d’éviter les problèmes avec les navigateurs est d’utiliser une présentation multi-navigateurs. Dans ce cas, le code source du site est traité de telle manière qu'il soit à peu près le même dans tous les programmes de toutes les versions.

La règle la plus importante dans la mise en page multi-navigateurs est d'indiquer des pourcentages au lieu de pixels partout où vous devez indiquer la taille des blocs ou des parties du site. Le fait est que les pourcentages sont une valeur relative (dynamique) qui ne dépend pas de la largeur de l'écran, de sa résolution, du type de navigateur, etc. Et les pixels sont une quantité statique qui peut être affichée de différentes manières.

Le plus simple n'est pas de réaliser soi-même la mise en page cross-browser, mais de la confier à un maquettiste, car il a plus d'expérience, il le fera plus vite et vous pouvez faire des erreurs de plusieurs manières. J'espère que cet article vous a ouvert les yeux sur ce sujet important.

Nous avons publié un nouveau livre, Social Media Content Marketing : Comment entrer dans la tête de vos abonnés et les faire tomber amoureux de votre marque.

La compatibilité entre navigateurs est la capacité d'une ressource Web à s'adapter à plusieurs navigateurs et à s'afficher correctement dans ceux-ci.

Plus de vidéos sur notre chaîne - apprenez le marketing Internet avec SEMANTICA

Par exemple, vous avez créé un site Web pour votre boutique en ligne. Vous avez créé un beau design agréable à l’œil. Mais les utilisateurs accèdent à votre site via différents navigateurs. Certaines personnes utilisent effectivement un smartphone. Et si vous n'avez pas vérifié la compatibilité entre navigateurs de la ressource, il peut arriver que le site ne s'affiche pas bien dans certains navigateurs.

Les éléments peuvent bouger, les images peuvent ne pas s'afficher et les polices peuvent devenir laides. Une personne n'utilisera pas un tel service. Il poursuivra ses recherches.

La tâche du développeur du site est de faire en sorte que, quels que soient le navigateur et l'appareil, la ressource s'affiche correctement.

Disposition multi-navigateur

Il existe une concurrence entre les navigateurs. Auparavant, tout le monde essayait d'ajouter des fonctionnalités et des options exceptionnelles. Cela a entraîné le non-respect des normes HTML et le rendu des pages par chaque navigateur différemment.

Netscape Navigator abandonne la course, laissant le monopole à Internet Explorer. Presque simultanément, les projets Mozilla Firefox (Gecko), Google Chrome (Blink), Opera (WebKit) et Safari (WebKit) ont commencé à prendre de l'ampleur, se divisant le marché et obligeant la communauté à réfléchir à la question de la compatibilité entre navigateurs. pour leurs sites.

À quelle fréquence les clients de logiciels souhaitent-ils que leur produit fonctionne pour n’importe quel utilisateur, dans n’importe quelles conditions et environnements ? La réponse appropriée ici est toujours. Que se cache-t-il derrière cette phrase ? Qu'est-ce qui est exactement requis du testeur pour la vérification ? Et comment va-t-il mettre en œuvre les exigences ?
Ce n'est un secret pour personne que les applications WEB diffèrent des applications de bureau. La différence et la préoccupation la plus importante est que nous ne savons pas dans quel navigateur, et plus encore, dans quelle version de ce navigateur notre utilisateur ouvrira l'application.

Combien y a-t-il de navigateurs ?

Si on vous demande combien de navigateurs vous connaissez, je pense que vous pouvez en nommer au moins cinq en toute confiance. Et si on vous demandait combien il existe de navigateurs, vous vous poseriez peut-être la question.

Et si vous demandiez à Google à ce sujet ? La réponse sera ambiguë. Le nombre de navigateurs plus ou moins connus dépasse désormais les 50 noms. Et peut-être qu’en ce moment, quelqu’un en publie un autre en ligne. Imaginons que demain ce « quelqu’un » publie une mise à jour de son navigateur. Comment tout vérifier dans des conditions aussi difficiles ?

Quelles sont les normes de création de navigateurs ?

Il y a une bonne nouvelle ! Il existe beaucoup moins de moteurs typiques utilisés par les navigateurs. Il existe également des langages et des protocoles de balisage qui connectent tous nos navigateurs divers et disparates. Je parle de choses comme HTML, CSS et HTTP. Tout créateur de navigateur qui se respecte et respecte ses utilisateurs potentiels suivra ces règles et réalisera un navigateur adapté aux normes généralement acceptées. Vous pouvez en savoir plus à ce sujet séparément sur le site Web w3.org.

Mais il y a ici aussi des pièges. Les normes s'améliorent ; Les nouvelles versions du navigateur tentent au moins de s'améliorer. Et les anciennes versions ? Peu de gens travaillent sur la mise à jour des anciennes versions. Oui, personne ne le fait du tout. Ils en ont sorti un nouveau - et tout le monde est content. Pensez-vous que les utilisateurs vérifient quotidiennement les mises à jour de leur navigateur ? Aussi peu probable.

De plus, n'oubliez pas les développeurs qui écrivent l'application elle-même. Ce sont aussi des personnes, ils peuvent faire des erreurs dans le code, ils peuvent ne pas regarder la norme – tout peut arriver. Malheureusement, les normes ne constituent pas une panacée.

Comment choisir les navigateurs pour votre application

Parlons maintenant des tests. Avant de commencer à tester directement une application web particulière, le testeur doit se familiariser avec les exigences avancées par le client. Il arrive que les exigences indiquent initialement : « Notre produit doit fonctionner dans les navigateurs Chrome, à partir de la version 43, et IE, à partir de la version 9. » Ou bien le client lui-même ne peut pas décider et, bien sûr, il veut couvrir tout et tout le monde. Et si son client potentiel le plus important utilisait le navigateur Uran ? Et maintenant quoi? Ne verra-t-il pas du tout sa candidature ?

Avant que le testeur ne commence à installer tous les navigateurs du monde sur un ordinateur ou, à l'inverse, à en supprimer les 48 inutiles, vous pouvez inviter le client à effectuer une recherche. Ainsi, les tests seront plus rapides et plus approfondis. L'application sera publiée plus tôt. Eh bien, le client lui-même dépensera moins d'argent.

Tout d’abord, vous devez déterminer le public cible de la future application. Qui sont ces gens, où vivent-ils ? Sur la base de ces données sur Internet, vous pouvez consulter des statistiques sur l'utilisation des navigateurs - par exemple, les navigateurs les plus populaires en Asie. Grâce à de telles requêtes, vous pouvez voir des résultats très intéressants et même inattendus. Eh bien, si l'application existe déjà sous une forme ou une autre, vous pouvez utiliser les statistiques pratiques de Google Analytics et disposer de vos propres données spécifiques.

Je voudrais vous montrer quelques services de visualisation de statistiques :

• w3schools.com - ici, vous pouvez afficher les données pour chaque mois et suivre les tendances. En plus des navigateurs eux-mêmes et de leurs versions, vous pouvez afficher des données sur l'utilisation du système d'exploitation, les résolutions d'écran et les plates-formes mobiles ;
• http://gs.statcounter.com - les statistiques sont collectées ici pour des pays individuels ou des directions cardinales (Asie, Europe, Océanie) ;
• netmarketshare.com - sur ce service, vous pouvez créer une liste des navigateurs qui vous intéressent et leurs versions ;
• google.ru - vous pouvez consulter vos propres statistiques sur Google Analytics.

Comment faire des tests multi-navigateurs

Une fois la sélection des navigateurs terminée, les tests complets commencent. Supposons que vous ayez sélectionné trois versions d'IE, trois versions de Chrome, deux versions de FireFox et deux versions de Safari. Même si un testeur peut gérer différents navigateurs, des problèmes peuvent survenir avec différentes versions d'un même navigateur.

C'est là que les émulateurs viennent à la rescousse. Il y en a aussi beaucoup. En utilisant certains, par exemple Browsershots, vous pouvez obtenir des captures d'écran d'utilisateurs réels à partir des navigateurs dont nous avons besoin et de leurs versions. Avec l'aide d'autres personnes, vous pouvez effectuer les actions dont nous avons besoin dans l'émulateur lui-même.

Je veux parler de deux d'entre eux que j'ai personnellement utilisés dans le cadre de mon travail.
Par exemple, l'émulateur IETester, conçu spécifiquement pour ce navigateur. Dans les fenêtres adjacentes de l'émulateur, vous pouvez ouvrir la même page avec différentes versions du navigateur. C'est très pratique et visuel. En comparant deux onglets adjacents, vous pourrez facilement constater des incohérences dans l’affichage. Dans ma pratique, ce programme ne m'a pas laissé tomber. Et en plus, un autre avantage incontestable est que le programme est totalement gratuit et prend très peu de place.

Cependant, certains pensent que l'affichage dans cet émulateur ne correspond pas à la réalité. que-faire dans cette situation? Il existe une solution ! Vérifiez dans le navigateur lui-même. Si un moment vous «déroute vraiment et vous embrouille», ouvrez un vrai navigateur et regardez.

Si, par exemple, vous devez vous connecter à IE 10, mais que votre ordinateur dispose déjà d'IE 11 ? Désinstaller, réinstaller, vérifier est une mauvaise décision. C'est là que les machines virtuelles viennent à la rescousse. C'est comme un ordinateur dans un ordinateur.

Par exemple, vous pouvez utiliser VMware Workstation. Et ayez certaines versions de navigateurs sur votre ordinateur de travail et d’autres sur votre machine virtuelle. Vous pouvez même installer plusieurs de ces machines sur un seul ordinateur, et disposer ainsi de nombreux logiciels différents. Il convient de noter que les machines virtuelles sont également différentes :

• Station de travail VMware - prend en charge Windows et Linux ;
• PC virtuel Windows - Windows uniquement ;
• ORACLE VirtualBox - prêt à installer Windows, Linux et MAC OS.

Un autre émulateur est Spoon. Son utilisation est également totalement gratuite. Il comprend une large sélection de navigateurs : Firefox, Chrome, Opera, Safari et leurs différentes versions. C'est aussi un programme assez pratique qui vous permet de comparer différents navigateurs dans différentes fenêtres sur une seule page.

• prendre des captures d'écran ;
• tester dans différents navigateurs et systèmes d'exploitation ;
• enregistrez les tests et exécutez-les ultérieurement sur d'autres navigateurs souhaités.

En plus de l'enregistrement, ce service peut se vanter d'un travail à part entière dans le système d'exploitation : c'est-à-dire que vous pouvez basculer entre les navigateurs, définir différentes adresses et même ouvrir un outil de développement en un seul test.

À quoi il est important de prêter attention lors des tests multi-navigateurs

Pourquoi les testeurs effectuent-ils de tels tests, que veulent-ils vérifier exactement ? Comme je l'ai déjà dit, les navigateurs sont différents, les moteurs sur lesquels ils fonctionnent sont également différents. Cela signifie que les mêmes éléments peuvent être affichés différemment. Après tout, lors de l'écriture d'une application, il est assez difficile pour les développeurs de s'adapter à tous les navigateurs à la fois et de prendre en compte toutes leurs fonctionnalités.

Les applications WEB sont également appelées applications client-serveur. Ici, le client est le navigateur et le serveur est le serveur Web. Le navigateur reçoit une demande de l'utilisateur et l'envoie au serveur. Le serveur WEB traite la demande et renvoie la réponse sous forme de page HTML. Le navigateur dessine le code reçu dans la page que nous voyons finalement. Autrement dit, le type de page que nous verrons dépendra directement du navigateur.

Les testeurs dotés de ce type de contrôle surveillent l'affichage des formulaires, des champs, des cases à cocher, des polices, mais la plus grande attention, bien sûr, est portée à l'interface : après tout, c'est ce que les utilisateurs de votre application évaluent en premier.