Accueil - Blogue - Design web avec Firefox 22 et le display scaling

Design web avec Firefox 22 et le display scaling

Le 25 juin 2013, la fondation Mozilla lançait la nouvelle version de Firefox, la version 22. Sans être une grande mise à jour, cette version apportait une nouveauté : la prise en charge des préférences d’affichage. C’est-à-dire, que si vous êtes sur Windows (je suis avec la version 7) et que vous avez modifié le zoom dans vos paramètres de Windows, soit à 125% ou bien à 150%.

Jusqu’à présent vous pouvez vous demander à quoi ça rime? En fait, Firefox utilise maintenant ces paramètres pour également afficher les choses en plus grand. Le problème c’est qu’il n’affiche pas seulement les textes plus grands, mais également les images. Le résultat obtenu fait en sorte que les images sont agrandies, et si elles n’ont pas été correctement ajustées, elles seront floues.

Lorsque j’ai constaté le problème, j’ai cherché des solutions. Les seules que j’ai trouvées consistent à désactiver l’option dans les paramètres du navigateur. Ce n’est pas ce que je souhaitais. Il serait impossible de dire à tous nos visiteurs de modifier les paramètres de leurs navigateurs afin que mon site s’affiche correctement.

Après plusieurs lectures sur internet, la plupart parlant du problème, des solutions internes, et du chialage en masse. J’ai décidé de chercher des solutions que je pourrais appliquer sur mon site internet. C’est en fait assez simple à corriger. Il suffit d’agrandir les images, et de leurs donner une taille ordinaire en HTML ou dans le CSS.

Prenons par exemple le logo de mon site. Sur les autres pages que l’accueil (dont celle-ci), le logo a une taille originale de 515 x 210 pixels. Lorsque les options d’affichages de Windows sont utilisées, la taille devient alors 644 x 263 pixels à 125% et 773 x 315 pixels à 150%.

La solution : agrandir les images à 150%, mais mentionner la grandeur dans le code du site à 100%.

Donc si je reprends toujours mon logo, je crée une image qui a 773 x 315 pixels. Dans mon site, je mentionne la taille à d’affichage à 515 x 210 pixels. Lorsque mon image sera agrandie par Firefox, elle le sera sans devenir flou, parce que mon image originale possède la dimension pour être zoomé.

Voilà, c’est assez simple à corriger, il fallait seulement y penser. Firefox continuera d’agrandir les textes et les images, disons que c’est normal vu qu’on a demandé à Windows d’agrandir ces éléments. Cependant vos sites resteront beaux, peu importe le navigateur et les paramètres Windows.