We’ve all been there– our website is visually stunning and works flawlessly, and so we pat ourselves on the back for a job well done. Then we pop open Internet Explorer and nothing appears as it should, or some integral functionality is broken. What to do next? We could simply ignore IE users and move on, but they might be vital to the success of our end product.
Article Sections
- Understanding the Optimal User Experience
- Knowing Your Audience & Setting Priorities
- Adding the Right Tools to Your Arsenal
In an ever-changing digital environment, we must strive to support all users while continuing to drive the internet forward, innovate, and use the latest technology to deliver an improved user experience and simplify development.
Understanding the Optimal User Experience
In a perfect world, we developers would always get to focus on coding for cutting-edge technology on the latest browsers and devices. In the real world, however, we must strive to provide the best user experience possible for users on legacy technology.
There are generally two approaches when it comes to legacy support:
- Graceful degradation
- Progressive enhancement
Graceful degradation involves providing a limited version of website functionality that still works, or informing the user why a feature may not be working properly. Progressive enhancement begins with a basic, working product and then adds more advanced functionality to improve the user experience for those with capable technology. While progressive enhancement is generally preferred, the approach you choose should be based on the requirements of your project.
Knowing Your Audience & Setting Priorities
Google Analytics provides a surprising amount of user data that helps us better understand how technologically-savvy a website’s audience is. For example, with an existing website, you can determine which browsers and devices are most important to support. If you know that very few users are browsing your website with Windows phones, you can focus your time on providing a better experience for users with other devices. On the other hand, you may find that a large percentage of your visitors are using Opera Mini. Arming yourself with that kind of knowledge beforehand means you’ll be better able to predict what approaches will and won’t work, and will be able to account for more testing time where necessary.
For any new website build where the internal data simply doesn’t exist yet, you’ll want to aim for majority coverage. There are many websites you can leverage that’ll provide general information on browser and device market share, like NetMarketShare. While we never want to leave any users with a nonfunctional website, we can still focus on optimizing for those which have a significant user base.
Adding the Right Tools to Your Arsenal
Once you know which browsers and devices you’ll need to support, what comes next? Luckily, there are many tools we can use to provide a good cross-browser experience.
- Caniuse.com is a great resource for determining browser support for different properties.
- Polyfills can be used to provide modern functionality in an environment where a feature isn’t supported.
- Using tools like Modernizr to detect which HTML, CSS and JavaScript are supported by a user’s browser, we can easily provide a better user experience.
- Preprocessors and compilers, like Babel, allow us to develop with the latest tools by transforming the code to work with legacy technology.
- For testing across browsers and devices, we have virtual device labs like BrowserStack.
Summing it Up
Developers today continue to push the limits of internet browsers’ and devices’ capabilities. However, we must balance our desire to move the internet forward with providing a great experience for everyone who uses the websites we build. Fortunately, there are a number of tools and methods to help us in our attempt to reach this balance. At the end of the day, our goal is to provide the best experience for our users, which includes both legacy support and using the latest technology to provide an even better experience.
