As web developers with finite time and resources, we have to make a conscious decision of which browsers we will support. Every supported browser means additional bugs to fix when things don't work, and additional browsers to do both manual and automated testing in. And as you all know, some browsers are much harder to support than others (*cough* IE6 *cough*).
At Coursera, we have decided to support IE9+, Firefox 12+, Chrome (any version), and Safari 5+, and we document that decision on our help site.
Letting users know
But, our website still works in other browsers, so we do not want to block a user from using it completely, if that is their only option. We do want them to be aware that they are on an unsupported browser, though, so that they are prepared for some features to not quite work. Since 99.99% of users do not consult the help site before they use a website, we need to find a way of messaging this to them when they're on the site. Pop up a modal? Make them sign an agreement that they know they're on an older browser? Float a banner somewhere? Turn everything bright red?
Our approach: the top banner
We opted for the top banner approach, which has become a fairly common paradigm on websites for warning-style messages. We have a little JavaScript browser banner library that we can include on any of our sites. It starts by checking the user agent to see if the user is on an un-supported browser. I debated between checking if they're on a whitelisted browser versus checking if they're on a blacklisted browser, and I went for the latter approach. I figure that we can always add more to that blacklist, if we see many people on a particular old browser.
If the user is on an unsupported browser, then it animates a banner sliding down with the message "You are using an unsupported browser, so some features may not work. Please upgrade to a modern browser." We link to our help site so that users can read which browsers we support and hopefully decide to download one of them.
You can see the full code for our banner in this gist, a demo of it in this jsfiddle, and a screenshot below:
Is it enough?
We've had users ignore the banner in the past (as evidenced by oblivious forum posts) and have been iterating on it to increase its obviousness (increasing the font size, adding the push-down animation), but we will probably still have users that ignore it and get upset when something doesn't work.
In particular, we have some parts of our class sites that work much better than others in older browsers (like lecture watching vs. peer graded assignments), and we have debated whether we should have a harsher warning in some places versus others. But, we decided that our users are likely to eventually experience both features, so it is the responsible thing to warn them everywhere.
If anything, we may make the warning even more obtrusive in the feature, like a modal which forces the user to acknowledge its existence before continuing, to make sure that users do not get started on a class in a browser and think that they will be successful, only to discover later that there are some aspects of the class that they just cannot complete at all.
So, that's where we're at right now. I'd love to hear about other approaches to browser messaging. Let me know in the comments!
No comments:
Post a Comment