What is cross browser compatibility and how does it affect my website?

September 5, 2017

What is cross browser compatibility and how does it affect my website?
CONSUME CREATIVELY

This content is available in:

This content is available in:

TEXT

Subscribe to Our Podcast:

Some people won’t admit they have a favorite child. For example, in my family we know my brother is the favorite child, but my parents won’t admit it out loud. (Only kidding…sort of!) In our office, we all have a favorite child and its name is Google Chrome. This is our go-to Internet browser whenever we need something done on the web.

This might seem silly, but the Internet browser you use is really important. It can determine if you’re interacting with websites the way you’re intended to. Outdated browsers don’t allow for proper interaction, and you may be missing out on your browsing experience without even realizing it.

Why Browsers Render Content Differently

For starters, it’s important to know how internet browsers work. When you click a link or type a URL into your browser, you’re making a request to the web browser to locate the server for the page you’re requesting. Your browser fulfills this request and processes the information needed to view the website.

What is cross browser compatibility?

Your browser displays the code using a rendering engine that processes and presents an interpretation of a website’s code on your screen. Internet Explorer, Mozilla and Google Chrome all use different rendering engines. Interpretation is the key word here. Particularly, CSS and HTML (the codes generally used to format websites) are not displayed identically across all browsers. As a result, a website may appear slightly off, or sometimes very off, when viewed in different browsers.

If they’re not the same, you can probably fix it.

There are ways to code that make your design similar on the different browsers when this happens. So if things aren’t showing up right, act funny or aren’t in the correct place on your site, you can adjust the code to display correctly in the browser in which the error occurs.

Sometimes you don’t have control.

Sometimes there are things you just can’t control. For example, orphans and widows. If you’re unfamiliar with these terms, they refer to an extra word or phrase at the top or bottom of a paragraph that hangs out by itself in a line.

At this point you’ve gotta choose your battles. Are you really going to let one word become an issue when everything on your website still works? I’ll answer that – no. Functionality is your main concern when working between multiple browsers. If it doesn’t function properly or give the user the correct experience, then the glitch must be addressed. However, if the website functions properly, you may choose to ignore some of the nitty gritty details that will likely go unnoticed by your viewers.

[cta_right id=”33″]

Cascading Style Sheets (a.k.a. CSS)

Let’s go back to this CSS thing. CSS is what beautifies your website.  The code is used to determine placement and actions of objects on the screen and how they will look. As web design has progressed, CSS has evolved from just changing the color of links on roll over to fading in and out, displaying gradients, making rounded corners and shadows, even making things spin and move. Back in the “old days,” we had to use flash or java script to get things to fade in and out, and gradients were limited to images alone. Doing these tricks in CSS makes the page load faster AND allows it to be used across all platforms. Though Flash was a good way to make websites slick and interactive, it isn’t mobile compatible, and we all know that won’t work with smart phone internet usage rising each year.

This brings me back to which type of web browser to use. Some browsers embrace change and are the first to accept and render new coding techniques while others (*ahem* Internet Explorer *cough*) are slow to adapt and have to be worked around when coding with less progressive code alternatives.

Which browser is your must-have compatible browser?

Google Analytics allows you to see which browsers your viewers are using to look at your website.

When we’re designing, we look at which browsers are used most often for each client and make sure designs work correctly on those browsers as well as the other big ones. It comes back to picking your battles. Designers may not be able to make a website look exactly the same on all browsers within the budget they’ve got to work with.

A website built to work in the most recent version of Chrome will belly flop in IE4 or Netscape.  You’d literally have to build a second website using retired coding techniques! Not the best investment if you ask me. If people are using those browsers to view modern websites, their web surfing experience as a whole is a complete sideshow. They never know what they’re going to get and to be honest, they probably just think that’s how it is.

For example, my mom views everything zoomed in at least 200%. I logged on her computer to show off my recently completed web project and the site was not at all what I expected to see.  It was HUGE! But that’s her chosen viewing experience, and that’s how she see’s everything, so she thought the site looked really nice. Case in point: focus your energy toward making sure the popular browsers display the site correctly instead of designing a site for every viewer on earth, especially those running antiquated software.

All or Nothing, or Somewhere in Between?

Websites need cross browser compatibility but maybe not to every single web browser out there. Some browsers allow you to control the minor glitches that differ, and others are just a total waste of your time trying to figure out. Compare it to dealing with a 2-year-old who refuses to put on the outfit you have picked out for them – fighting about it gets you nowhere. Stay realistic as your pick your battles against the barrage of browsers. Focus on providing a positive viewing experience for the majority of your viewership, not the entire Internet using population.

Who Manifested This Madness?

Monica Maye Pitts

This fabulous human, that's who.

Monica Maye Pitts

Monica is the creative force and founder of MayeCreate. She has a Bachelor of Science in Agriculture with an emphasis in Economics, Education and Plant Science from the University of Missouri. Monica possesses a rare combination of design savvy and technological know-how. Her clients know this quite well. Her passion for making friends and helping businesses grow gives her the skills she needs to make sure that each client, or friend, gets the attention and service he or she deserves.

GET MORE AWESOME

If this trips your trigger you'll love our podcast. Get more episodes just like this on:

What is cross browser compatibility and how does it affect my website?
Email Alerts About New Episodes
Weekly Pride Maker Sign Up - Blog Sidebar
Industry

© MayeCreate Design 2024 | 573-447-1836 | info@mayecreate.com |108 E. Green Meadows Rd., Ste. 9 | Columbia, MO 65203 | Privacy Policy