What is browser monitoring and why does it matter?
Posted Jun 23, 2016 | 5 min. (1023 words)Browser monitoring matters. Remember: Legacy…browser…support…
In the later days of Internet Explorer 6 this was a phrase which brought developers much misery.
Not only did we have to work around not having display inline-block but you also had to deal with PNG alpha transparency issues.
img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}And that doesn’t cover security issues.
Luckily enough there were dedicated individuals whose posts saved many hours debugging.
Fast forward to the present and now IE 6 is no longer supported, you can be forgiven for thinking Browser Monitoring (knowing which browser a user views your site with) isn’t important anymore. Since we don’t have nearly the same amount of worries.
Well think again!
Browser Monitoring can still save you valuable development time, and thus money. Which is why today we are going to discuss six reasons Browser Monitoring matters.
Let’s dive in!
1: Use Java, Flash, Silverlight?
In the past if you wanted to add something interactive to your website such as:
- Piece of audio
- How-to video
- Game attracting more users
Then it would have required development using a browser plugin.
Flash, Java, or Silverlight were commonly used for such roles.
These plugins at the time were wonderful since they not only added additional interactive functionality to the web, but they also had cross browser support. Which at the time wasn’t something very easily done.
The downside of these plugins are that users had to download the plugins before they could view the content. Not very nice to someone who just wanted to quickly find a tutorial!
Since the introduction of HTML 5, many of the plugins are now obsolete as the features can be done natively without the user downloading the plugin.
But should you use it?
Well that depends.
Knowing how many users need a plugin to support your functionality will determine the best approach to take.
Whether you’re building a new feature using a HTML 5 with a fallback using a plugin, or the more likely scenario of whether to remove the old plugin dependency (and upgrade a feature using the latest technology instead).
2: Utilize the latest CSS
When it comes to creating a stylesheet some choices like deciding to change the box model using box-sizing: border-box have seemingly become a valid, (yet trivial) choice since it’s now widely supported
But not all the latest and greatest CSS features are such as:
- Calc function
- Masks
- 3d transformations
- Grid layout
Now you wouldn’t need to use these properties in day to day development (I know I haven’t) and we have made do without them for years.
But what they offer is a way to create effects without requiring the download of an external image, which in turn reduces the amount a user needs to download.
Or in other cases, a way to create a web page easier, with less markup. And if that brings less div spam, then I’m all for it!
3: Keep those Polyfills?
Sites are large, complicated beasts, composed of multiple images, fonts, stylesheets, and more. With all these in mind, it’s easy to forget about just how many scripts are included in a website.
While it may seem trivial keeping or removing a polyfill, (or a no longer needed script) will impact how fast your website loads at least to the initial viewer. And as a previous post outlines page speed matters!
4: Upgrade your version of jQuery
While the title specifically mentions jQuery, this is more of a reference to that generic library we all have included in a project.
You know the library. The one that adds cross browser support. The one that fixes browser quirks. The same one that speeds up our development process by providing easy to use apis.
These libraries - just like our websites, support particular browsers. And so should be upgraded to match the browsers of your users.
It is pointless having fixes for IE 6 when no-one browses your websites on versions less than Internet Explorer 9.
Knowing when you can upgrade to use the latest version of that library brings benefits such as:
- File size reductions as required browser hacks, and polyfills are removed
- New features and APIs to speed up development tasks
- Speed improvements as faster ways of doing tasks are found
Not to mention the bug fixes!
5: Browser monitoring for mobile devices
In our world, almost everyone has a mobile device.
In this age every website should have a mobile alternative, ideally.
But sadly there is only so much time in the day.
Which I totally understand. You get busy working on a new product, or feature, or page for the website, and with a deadline looming there isn’t much time to do much else.
And just because users can browse to your site on a mobile device, doesn’t mean to say they do. Which is why knowing how many people browse your website on a mobile device helps you when prioritizing tasks.
We aren’t saying that the mobile site doesn’t matter. Just that tasks that need to be organised depending on the prioritizes since there is a limited time to do them.
6: Codebase cleanup
As projects wear on it’s easy to become oblivious to the reductant code that is being kept.
Workarounds, browser hacks, fallbacks for features now widely supported, “one-off” lines to deal with a particular quirk, they build up quicker than expected.
And this is where paying attention to the browsers of your userbase can help you out.
Removing needless code for unsupported browsers not only reduces the file-size, but helps increase the maintainability of the codebase.
Which in turn can help out new developers first being introduced to your codebase.
Browsers have come a long way
With less compatibility issues, more standardisation, new features, and faster release times in latter years. But sadly, not all of users have the knowledge, or the ability to update their browsers to make use of these new features.
Which is why browser monitoring is important and will continue to be important in the future. Understanding user behavior helps us make informed choices so your visitors get the most out of your site.
