Actuellement, il est tout simplement inconcevable, dans le cadre d’un projet, de ne pas penser à l’expérience utilisateur sur mobile. Dans un précédent article, nous avons évoqué les différentes manières d’adapter son site web à ces terminaux : un site web mobile à part, un site dynamique qui affiche des contenus différents selon la plateforme ou le responsive design (des éléments statiques qui s’adaptent en fonction de la taille de l’écran).
Jusqu’à preuve du contraire, le responsive design semble être la solution la moins dangereuse (notamment vis-à-vis de Google) et celle-ci est même encouragée par Google.
Si vous avez choisi cette approche (ou même les autres), il est préférable de tester en parallèle l’affichage sur les mobiles et les tablettes dès les premières étapes du développement (donc, même lorsque le site web est encore hébergé dans le « localhost »), afin d’éviter les surprises.
Pour réaliser ces tests, ce ne sont pas les solutions qui manquent, certaines étant plus efficaces que d’autres – notamment, des services web qui n’affichent pas les sites hébergés en local ou qui manquent de « réalisme ».
Ce que je propose, c’est une liste non exhaustive de solutions qui vous permettront de vérifier cet affichage.
#1 Redimensionner le navigateur
Aussi simple que ça puisse paraitre, cela devrait fonctionner (mais pas à 100%). Si votre site répond bien aux redimensionnements de votre navigateur web, c’est déjà un bon signe. Actuellement, la plupart des nouveaux thèmes WordPress s’adaptent instantanément.
#2 L’émulateur de Google Chrome
Dans ses outils de développement, le navigateur de Google propose une fonctionnalité qui émule les tailles d’écran de différents smartphones et tablettes. Pour essayer, il vous suffit d’aller dans le menu > Outils > Outils de Développement et de cliquer sur l’onglet Emulation.
#3 L’émulateur de Firefox
Le navigateur de Mozilla propose une fonctionnalité similaire à celle de Google Chrome. Il suffit d’aller dans le menu > Développement et de cocher la case vue adaptative.
#4 L’émulateur d’Opera Mobile
Pour les développeurs, Opera propose également un émulateur d’Opera Mobile. Outre la visualisation de l’affichage de votre site sur ce navigateur populaire, le petit logiciel permet également de voir comment le site apparaît à côté des éléments du navigateur ou lorsque l’utilisateur saisi quelque chose (donc, lorsque le clavier apparaît).
#5 Les services web
En plus des émulateurs (qui peuvent s’avérer plus pratiques à partir d’un moment), il existe aussi de nombreux services web qui vous permettent de tester rapidement l’affichage de votre site. Certains ont été évoqués dans ces précédents articles :
- Responsive design : trois services web pour tester facilement un site sans émulateur
- Testez vos sites dans tous les navigateurs et tous les OS avec CrossBrowserTesting.com
- bMobilized, une autre solution pour adapter son site web au format mobile
📍 Pour ne manquer aucune actualité de Presse-citron, suivez-nous sur Google Actualités et WhatsApp.
Il existe aussi dans Internet Explorer le mode mobile, activable soit en appuyant sur F12 et en allant tout en bas des options, soit en faisant Control+Alt+M
Mea culpa, j’ai manqué de vérifier, Control+Alt+M c’est pour Firefox 😉
Hello,
Pour moi cela n’apparaît pas sur Chrome dans les outils développeur… à mon avis il s’agit d’un pluggin… mais lequel ?
Hello,
Cela ne fonctionne pas avec Chrome, l’option ne semble pas être présente par défaut dans les outils développeur… un pluggin peut être ?
Si, c’est par défaut normalement. En tout cas, je n’ai rien installé. Peut-être un souci de version ?
Pour l’émulateur sous chrome, c’est chrome canary, et c’est un outil vraiment top !
@byote et @setra Dans outils de développement il faut d’abord cliquer sur “Show Console” dans la liste d’icones en haut à droite (4e à partir de la droite: La flèche avec les 3 barres horizontales) et ensuite cliquer sur Emulation.
Coté service web il y a le très bon Screenfly aussi http://quirktools.com/screenfly/
La forme c’est important mais pensez aussi à vérifier les temps d’affichage ! On a des surprises en fct des browsers.
Un outil gratuit.. y’en a d’autres mais celui là donne les temps réels d’affichage
http://www.quadran.eu/index.php/fr/solutions/quadran-performance-analytics