How you see your website may not be the way your customer sees it
If you’ve ever created a document, flyer, or other item to be printed, chances are it came out of the printer looking pretty close to what you intended when you designed it on the computer. There might be slight variations in color due to screen colors vs. ink colors, or your printer being low on ink – but the variations tend to be minimal. And if you’ve hired a designer or print shop to prepare ads, business cards, or other promotional material for your business, it’s pretty likely the outcome looked just like the proof they provided.
Design for the web is different
I’m sure that most of you know that there are many different web browsers out there – Chrome, Internet Explorer, Safari, and Firefox being the most popular and widely used although there are many more. You probably have your favorite and use it almost exclusively. There are also browsers that are specific to mobile devices too.
Sadly, not all web browsers play by the same rules
There is an organization called the W3C that sets standards for how the web <should> work. It governs things like HTML (the main programming language of the web), CSS (web page styling), accessibility standards, and more. I say should, because no browser follows all standards and each browser varies with which standards they are compliant on. Additionally, a website may not be coded to follow current standards or to account for known differences between browsers. It all gets very complicated.
So, the reality is that the way your website is rendered can vary widely depending on what browser you’re using. The differences can be minor, ie. Safari and Chrome shift some text to the left a bit while Firefox shifts it to the right. Or one browser puts a huge gap between paragraphs while another does not.
But the differences can be major too. They can cause layouts to break, causing one page element to overlap another page element in a way that renders both unreadable. It can even cause items to completely disappear from your page.
What you should know about making your website cross-browser friendly
1) Ask your web developer which web browsers they test on. All web developers should test with at least recent versions of the most popular browsers. But understand that it is not reasonable to test with everything that is out there. Not only would it cost a small fortune, but browsers are being updated and changing all the time. How much time and money you invest into this endeavor will depend on how wide your audience and how forgiving they are.
A company like Apple will spend significant time and effort to ensure their company website looks great on the widest variety of browsers and will get flack from every tech news site and discussion board for any major glitch found. A local chiropractor’s website has a much smaller reach and likely a more forgiving audience.
2) Understand that correcting cross-browser issues can be very time consuming to diagnose and correct and is possibly the most difficult aspect of developing for the web. Often some trade-offs are required to make the design look good on different browsers.
I recently had a case where Safari showed some background text for a box in black where all others showed it in light grey. On Safari the text overlay was unreadable because of this issue. It turned out that Safari didn’t support the kind of gradient I was using for the background. Switching to a solid grey background did the trick. But if my client had insisted that I use the gradient supplied in the mockup, this would have been a big problem. In the bigger scheme of things, it didn’t matter for the message being delivered whether the grey was a gradient or a solid. The text just needed to be readable.
3) Check your Google Analytics account. It will tell you what browsers your website visitors are using and break them down by percentages. This will help you decide which browser issues are worth investing in. If 50% of your audience uses Chrome and there’s a big glitch there, it’s worth fixing. If your site looks ugly in Internet Explorer 8, but less than 1% of your visitors use this version, it may not be worth the cost to fix.
4) The large (and increasing) numbers of people viewing websites from phones and tablets has complicated the cross-browser issue tremendously. The number of variables has gone through the roof! Making your website look good and function well on mobile devices may require completely different layouts for your content and is a large project in itself. If mobile is a priority for you, this is a discussion that should happen with your web developer when the project is first being quoted. Your analytics will also tell you what percentage of your audience uses your site from a mobile device.
5) Check what your website looks like in other web browsers without having to install them yourself. And don’t forget to check more than just the home page.
Try:
http://browserstacks.com
http://browserling.com
