Outils
Browser Update: une notification de compatibilité des navigateurs pour votre site web
Pour répondre à l’un des soucis majeurs du développement web qu’est la compatibilité avec les différents navigateurs, Browser Update propose de notifier aux visiteurs les versions recommandées des navigateurs via un script simple à installer sur son site web.
En effet, lorsqu’on fait du développement web, il faut s’assurer de la compatibilité avec les principaux navigateurs afin de proposer (presque) la même expérience de navigation aux utilisateurs. Certaines fonctionnalités liées à l’évolution des standards du web ne sont pas donc pas intégrées dans les anciennes versions de certains navigateurs (l’exemple qui rend le plus fou les développeurs est IE8 et le Html5).
Plutôt que de passer de longues heures (et nuits blanches) à essayer des ajustements pour avoir le même rendu sur tous les navigateurs, une façon de clore le débat (quand on le peut) est d’inciter le visiteur à tout simplement mettre à jour son navigateur (IE10 est déjà beaucoup plus compatible que IE8) ou à carrément changer de navigateur.
Comment ça marche?
Le service « Browser update » fonctionne via un script à installer sur son site web (voir comment intégrer plus bas). Le script s’exécute au chargement de la page, détecte la version du navigateur et, en fonction des paramètres qu’on a indiqué dans le script, affiche une notification en haut de la page invitant à mettre à jour son navigateur pour des raisons de sécurité ou un message spécifique que l’on a défini.
Que propose-t-il?
Une configuration de base est proposée avec des navigateurs recommandés et une mise à jour automatique par rapport aux mises à jour pour informer des nouvelles versions disponibles.
Le message affiché indique la version du navigateur du visiteur et s’affiche automatiquement dans la langue du visiteur (une trentaine de langues sont prises en compte actuellement).
Il est ensuite possible de modifier la notification obtenue en modifiant les diverses options ci-dessous:
La fréquence d’affichage peut donc être ajustée et ainsi que le texte affiché. Par exemple, si votre site est optimisé pour les nouvelles versions de Firefox et Chrome, vous pourrez afficher un message du type:
« Votre navigateur ne prend pas en charge les fonctionnalités et technologies utilisées sur ce site. Pour une meilleure expérience utilisateur, nous vous conseillons d’utiliser Firefox (version 30 et +) et Chrome (version 30 et +) »
Comment l’intégrer à son site web?
Pour intégrer sur son site la version avec la configuration de base et les mises à jour automatiques, il faut ajouter dans le code source le script ci-dessous:
<script>
var $buoop = {c:2};
function $buo_f(){
var e = document.createElement("script");
e.src = "//browser-update.org/update.js";
document.body.appendChild(e);
};
try {document.addEventListener("DOMContentLoaded", $buo_f,false)}
catch(e){window.attachEvent("onload", $buo_f)}
</script>
Il est possible d’adapter la détection des navigateurs à certaines versions bien précises en adaptant le code généré ici: https://browser-update.org/#install.
Pour en savoir plus, il faut se rendre sur le site du service https://browser-update.org/.
Comme indiqué sur le site, c’est « une initiative de WebDesigners pour informer les utilisateurs sur les mises à jour de leur navigateur » que je trouve hyper pratique.
2 commentaires