Why Cross-Browser Testing is Like Finding a Consistent Corned Beef Hash

Imagine your favorite dish is corned beef hash. Which is probably not hard because corned beef hash is the best. In your mind, the ideal version of this dish has potatoes that are cut up into small pieces, mixed with small pieces of corned beef and finely chopped onions, and then all pan-fried together for a crispy finish on the top and bottom.

Luckily for you, the diner that you've been eating at since it opened seven years ago serves this exact dish, prepared just the way you like it. So you turn to Yelp to see if you can find other restaurants with the same pan-fried corned beef hash deliciousness.

The first restaurant you go to comes pretty close to making your favorite dish. However, it uses brown potatoes instead of the red potatoes you've come to love in your corned beef hash. And even though the size of the plate is the same as the diner's plates, the portion is significantly smaller.

The second restaurant has a different take on the dish. Everything is chunky--big pieces of potatoes, chunks of corned beef, and onions that are definitely not finely chopped. It still tastes more or less the same, but it looks pretty different and is missing the crispy finish.

Finally, the last restaurant you go to is out of desperation. You're standing on a random street in the middle of LA when you get a hankering for corned beef hash. Behind you is a rundown looking place, but there is a sign in the window claiming "Best corned beef hash in town!"

Spoiler alert: it's not.

Unfortunately, someone's stolen all the rundown restaurant's kitchen knives, so they're forced to find another way to make this delectable dish. The slightly undercooked potatoes come out obviously hacked into pieces with something, though you don't want to know what. The corned beef is stringy and dry, and the onions are nowhere to be found.

We'll give you three guesses as to which browser the rundown restaurant represents. Okay, we'll just tell you--it's Internet Explorer (IE), otherwise known as the bane of a developer's existence.

Just as it's virtually impossible to find a dish prepared in the same exact way across various restaurants, a site isn't going to look exactly the same across browsers. However, the goal of cross-browser testing is to provide users with the most user-friendly experience possible no matter what platform they're on.

As developers, it's easy to pick a browser we prefer and stick with it for development and testing. As GREAT developers, it's important to remember that the rest of the world is not necessarily on the same browser we are.

According to W3Schools, 65.9% of people use Chrome, 20.6% use Firefox, 7.2% use IE, and 3.6% use Safari. Which means that even though IE can be incredibly buggy, it still needs to be supported because there are people out there using it.

Before we start cross-browser testing, an important thing to ask ourselves is: what exactly are we testing for?

The two main things developers want to look for when testing a site in different browsers are:

1) How the site renders or appears in each browser -- While the second restaurant you checked out was close to your regular diner's corned beef hash in taste, the appearance of the potatoes and corned beef was chunky and large, rather than finely chopped. In web design, a site's typography or form styles can appear slightly different from Chrome to Firefox, or Safari to IE.

2) How the site functions in each browser -- The first three restaurants most likely left you feeling full and satisfied, while the rundown restaurant just gave you, well, the runs. It's important to check for functionality such as image rotators, hover effects, and form submits, just to name a few. Even if the appearance is different in older browsers, users should still be able to do basic things like submit a form, click on links, or perform a search on the site.

A good site to reference when developing a cross-browser compatible site is CanIUse.com. It's simple and straightforward and clearly displays what is supported or not supported by various browsers.

With responsive web design at the forefront of our strategy here at Salted Stone, we not only test desktop browsers such as Firefox, Chrome, Safari, Opera, and Internet Explorer, we also test work against mobile devices like tablets, iPhones, and Androids.

That's at least 10+ platforms that need to be as user-friendly as possible. Testing can be time-consuming and difficult, but we use a tool called BrowserStack, which allows us to test across browsers from within our browser (how meta is that?).

While BrowserStack doesn't magically fix all bugs (and can someone please invent a magic fix, already?), it's an efficient way to see how a site looks across various browsers. For browsers that have developer tools, we can access them through this platform to work on the bugs directly without having to open up individual browsers.

Cross-browser testing is an extremely important part of our process, and the development team works closely with the design team to bring the intended site to life for people on all sorts of devices and browsers even Internet Explorer.

The next time you're enjoying a plate of corned beef hash, remember that while the dish may not look or taste exactly as you imagined, the restaurant owners tried their best to give you an exceptional dining experience. Except for that rundown restaurant. Go ahead and give it a 1-star rating on Yelp. The general public needs to be warned.

If you're curious about how pairing a cross-browser compatible website with an inbound marketing content strategy can factor into your business goals, feel free to drop us a line. We'd love to jump on a quick call to hear about what you're working on and how we might help you better achieve your sales and marketing goals.

PS - If you're in the East Los Angeles or Pasadena area, we'd love for you to join us at the first ever Pasadena HUG event — a HubSpot User Group where business owners, HubSpot customers and inbound marketing professionals can talk shop in a laidback environment. RSVP today and your first drink is on us!