The web is constantly evolving; the HTML language is expanding, CSS is getting more advanced, and we are finding more and more ways to make the web interesting. However, for some reason, some people don’t upgrade their browsers, making it very difficult for us to share that creativity with others; so how do we deal with people who are running IE8, or even worse, IE6?
In this article, I’ll give you some tips and practices in no particular order that you can use to make life a little easier for you and your users.
Probably the most common method of dealing with those pesky Windows XP users running Internet Explorer 8 or older (only joking XP users! Windows XP is great, really it is.)
#2 Know your audience
Legacy browser support can be a massive pain in the butt; but as a web designer, your biggest concern should be to give your audience the best experience possible regardless of what browser they use. So, spare yourself the headache and know your audience. Use tools like Google Analytics to figure out how people are accessing your content, and develop your own standards & practices.
If you don’t know your audience yet, you can do 1 of 2 things.
- Take the Google approach and support only the latest three versions of the major browsers. For example, if IE11 is the latest version of Internet Explorer, the oldest version of Internet Explorer you would support is IE9.
- Ask other people what their audiences look like. If your website hasn’t been around long enough to gage who is using what, consider finding a company or asking a colleague in the industry what their numbers look like as a starting point, then, as your website gains traffic, use your own analytics to make your own decisions.
#3: Test on older browsers
Never rely on just the latest version Google Chrome or Firefox to test your code. Unfortunately, while browser “manufacturers” try to render code accurately and consistently, no browser is 100% equal. People tend to rant and rave how IE is the absolute worst it comes to rendering code, but they aren’t the only ones you should worry about.
And sometimes, it’s not the browser alone, but the operating system. Every operating system handles application text differently, not one is the same. When QAing your work, you should test every version of every browser you intend to support on every operating system you intend to support. How?
You could setup a virtual machine, but that can be tricky, expensive, and impact your computer’s performance. I like to use BrowserStack. BrowserStack let’s you choose between multiple versions of Windows, OSX, or choose different iOS or Android Devices, and multiple versions of the many browsers each operating system can run. Need to test IE9 on Windows 7? Easy! Need to test Firefox 10.0 on OSX? No Problem! BrowserStack will give you remote access to a machine with the OS and browser of your choice through your browser, making it easy to test your website’s browser compatibility.
#4 Be Responsive
When building a web experience intended to reach people on multiple platforms, browsers and operating systems aren’t the only factor. Consider the device your users are using, and the monitors they are viewing content through. Different screen sizes, resolutions, etc., all play a huge role in your website’s usability.
Whenever possible, test your website in various resolutions. A good start is to just shrink the size of your browser window. Or, again, use BrowserStack. Along with choosing the operating system and browser, you can set the desktop resolution all the way down to 800×600, or view your site through various devices, inheriting their viewport/resolution.
#5 Consider the fallbacks
As mentioned before, Modernizr can be used to determine what various CSS and HTML features a browser can support, and will add classes to the <body> tag for each unsupported feature. Utilize this tool to create fallbacks.
Hopefully the above tips and practices above will help ease the strain of supporting older browsers. How do YOU deal with older browsers? What do you support, and what tricks do you use to support them? I’d love to hear your ideas in the comment section below![/az_column_text][/vc_column][/vc_row]