3 Tools for Cross-Browser CompatibilityFebruary 7th, 2015 by Jeff Winget
When I started designing websites, I was doing it for fun. I had sites to play on and blog on, but that was about it. So, because they were just for fun and just for me, I didn’t really worry about how they displayed in Internet Explorer. IE would totally bork my design, and I would just put a disclaimer at the bottom that said, “Best viewed in Firefox” with a link to the Firefox website.
Of course, this practice wouldn’t have been acceptable had I been selling websites or trying to promote anything in a meaningful way. A lot of people use Internet Explorer, always have, and always will. So, as designers, we need to make sure that we are supporting IE and any of the other major browsers with our designs, and that takes a lot of work. For instance, I spent 3 hours this week making sure the design I was working on worked in IE. It took a lot of coding and recoding, but I finally got it, and it was totally worth the pain.
Because cross-browser compatibility can be a pain sometimes, here are 3 tools that I’ve found that are invaluable in our quest for web compatibility.
A CSS reset is an invaluable tool for compatibility. It zeros out all of the CSS declarations that browsers include automatically. Since each browser’s default declarations are different, zeroing them out to start from scratch is a solid place to start. There are many options out there to do this. I use a slightly modified version of Eric Meyer’s Reset CSS 2.0. I modify it to fit my needs, which is what Meyer wants us to do, and what good designers should do.
Font Squirrel Webfont Generator
One of the biggest headaches I’ve encountered with cross-browser compatibility is getting custom fonts to work. This problem has been completely fixed by the Font Squirrel Webfont Generator. This tool will allow you to upload the font you want to use, and it will give you a .zip file with the converted font files to upload along with the CSS to put in your stylesheet. It works wonderfully, and I can’t say enough about its ease of use. You should use it in any project you have with custom fonts.
Real Favicon Generator
Creating a Favicon for your website is easy. Making that Favicon work in every browser and every platform isn’t. The Real Favicon Generator takes care of the work for you. Much like Font Squirrel, you upload the file you want to use, and it does all the heavy lifting for you. It converts it to every file type you need and gives you the code to use in your site. It is slick, easy, and thorough.