Catégories
optimisation

Développement : Responsive et compatibilité navigateurs

Lorsque l’on développe un site internet, il est important que chaque visiteurs puissent accéder au site internet quelques soit son navigateur ou sa device (téléphone ou tablette). Chez Vincent, on propose des développement de site internet adapté à toutes les cibles.

Un visiteur, des navigateurs :

Selon wikipedia : Google chrome est LE navigateur. Il a une part de marché de prêt de 50,2 %. C’est donc près d’un utilisateur sur deux qui naviguent avec ce navigateur. Mais il serait dommage de se concentrer exclusivement sur ce navigateur lorsque tu développes ton site internet.

part-marche-navigateur-aout-2016

Le développement de site internet avec les outils de google chrome est grandement facilité. Si comme moi, tu utilises OSX, il existe des outils pour virtualiser des environnements Windows afin de tester son site sur les navigateurs (Internet Explorer 11 et EDGE). Perso, je ne fais plus de développement pour IE 10 (Microsoft a annoncé la fin du support d’IE10, donc moi aussi) 🙂

Mais il est primordial de tester son site sur les autres navigateurs de la firme du Redmond.

Aide aux développements grâce aux machines virtuelles :

Microsoft met à notre disposition des machines virtuelles (Virtualbox, HyperV, Vagrant…) de Win7, Win8, Win10 incluant des versions de IE10, IE11, EDGE… Super pratique. Quelques giga à télécharger, on importe la machine virtuelle dans le logiciel de notre choix (Moi, j’aime Virtualbox).

Et en quelques secondes, on a un Windows fonctionnel prêt à tester notre site internet et ça n’a pas de prix (contrairement aux services comme BrowserStack, qui ne sont pas donné mais très puissant je l’avoue)

> Accede à la page de téléchargement des machines virtuelles de Microsoft : https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

/!\ Attention, Microsoft précise que les machines virtuelles sont valables pendant 90 Jours. Ils conseillent donc de faire un snapshot après la 1ère utilisation pour pouvoir revenir au début après les 90 jours 😉 

Pour les autres navigateurs, tu peux les installer sur ces mêmes machines virtuelles (ou sur ton système d’exploitation). A ma connaissance, les navigateurs sous Windows, Mac et Linux ont le même fonctionnement.

Développement, Test et responsive design ?

Oui, je n’allais pas oublier la part importante du responsive design. Tu connais cette technique qui consiste a adapter un site internet en fonction de la taille d’écran de la cible qui le visite.

On ne peut pas faire l’impasse sur les utilisateurs de téléphone (ou tablette) pour visiter un site internet. D’ailleurs, ce fameux responsive design est devenu presque une « norme ». Chez Vincent, on intègre se concept de base dans le développement des sites internets.

 

Et comment on test le responsive ?

Google est mon ami 😛 ! Enfin, ici c’est chrome (mais c’est quasi-pareil). Comme je disais plus haut, ce navigateur intègre des outils super intéressant et puissant pour le développement de site internet.

Pour découvrir ces outils, un clic droit > Inspecter, sur n’importe quelle page et voila qu’une demi-fenêtre s’ouvre. Je ne vais pas ici présenter tous les aspects des outils de développement de Google Chrome (Ca fera peut-être l’objet d’un autre article, si ça t’intéresse ?).

responsive-design-chrome-tools
Ouverture des outils développeur chrome

Dans l’écran ci-dessus, on fait apparaitre les outils de développement de google chrome. Tu peux cliquer sur l’icône « mobile/tablette » pour faire apparaitre, le mode « responsive ».

 

vincent-guesne-test-responsive-design
développement et test des différents support mobile

Ensuite, tu peux tester différentes tailles d’écran (même en personnaliser) et voir le résultat direct.

Cet outil est juste super efficace 😉

 

Mobile-friendly :

Oui, le mobile friendly est un critère pour google pour le référencement.

Tu peux aussi tester ton site via : https://testmysite.thinkwithgoogle.com/ Je dirais même que c’est un complément indispensable, une fois le site sorti.

 

Bon développement 😉

Et sinon, on est là Vincent

Laisser un commentaire

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