2.3 Cross-Browser Compatibility
Every web browser renders web pages a little differently, so it’s important to make sure your site will work as intended in your visitors’ browser of choice. In this lesson we’ll cover which browsers you should think about supporting, and how to check a theme’s compatibility with them.
1.Introduction1 lesson, 00:36
2.WordPress Themes Under the Hood10 lessons, 1:23:49
3.Conclusion1 lesson, 05:00
2.3 Cross-Browser Compatibility
Hey, welcome back to WordPress Themes: things to check before you buy. In the last lesson, we looked at how you can check to make sure that a theme you're interested in buying is responsive and mobile friendly. Now, we're gonna look at how you can make sure that it's cross browser friendly. Every browser renders websites a little bit differently. You might find that from one browser to the next the layout is slightly different, the spacing changes a little bit. Some things that might work in one browser might not work in another. So it's important to make sure that you're not inadvertently gonna be using a theme that's gonna deliver a broken experience to your site visitors. What can be the tricky part is trying to find out which browsers your site visitors are actually using. To get a broad idea of which browsers you need to accommodate, and you need to make sure your site works in, or your theme works in. You can look at some of the global browser share statistics that are available. So for example, on the screen here you can see here, we're at StatCounter.com. And that's giving us a percentage breakdown of the browsers that this website have been able to track. So nobody knows exactly what browsers are being used around the world, you only know what you can directly interact with. So for this stat tracking service, these are figures they've been able to establish. And we can see here we've got six browsers that we are looking at. We've got Chrome with a little over half the users, Safari at 14%, UC Browser at 8%, Firefox at 5%, Opera at about 4%, and IE at 3.2%. But here's the thing, your website is your website and your site visitors are your site visitors. So the only way to really know what browsers they are actually using is if you can get some stats of your own traffic. Because what your site visitors are using might be totally different to the kind of stats that you're seeing here. I'm gonna show you an example, this is from one of my own personal websites. Now, here you can see along the top column here, the group percentage for each of these browsers. So here I've got 9.4% of my visitors to this website are using IE. And that compares to 3.2% here. So right there we immediately see a difference. And we can see an even more substantial difference if we look at the usage stats for Firefox. Here, I've got almost 20% of my users are on Firefox. Whereas here, only 5.6% of these global stats are using Firefox. Now, if you depended solely on this Chrome statistic here, you would assume that for every website, a little over half of the users are gonna be on Chrome. But here on this site, only 34% of my users are on Chrome. So I've got a a whole bunch of other stats for Opera and Safari. And then, so if we go all the way down to the bottom here, you can see that there are some browsers that aren't even listed on this global stats breakdown. I have very few visitors here. But you may find that with your site and your specific audience, there might be some other browser that a significant portion of your visitors are using. And, therefore, you'll need to make sure that the theme that you buy works with that browser. So overall, the point is, use these stats as a baseline guide, but if you can get access to statistics for your website, try to find out for a fact what your visitors are actually using so you can cater to them. All right, so once you know which browsers you need to accommodate, how do you check a theme to make sure that it runs on those browsers? The obvious thing to do is just to install many browsers on as many different operating systems and devices as we can and check them all, but that is not gonna get you across every browser. For example, you can't install Safari unless you have an Apple device. And you can't install Edge or IE unless you're running a Windows system. So this is where you can use third-party services that emulate different browsers running on different operating systems. And there are a few of these services that you can use. But the thing is, most of them are oriented towards professional web developers, which kind of means that they tend to be priced accordingly. But if all you wanna do is just test a theme here and there and make sure it's not gonna be broken for a significant portion of your users, then you might wanna check out a service like TestingBot. I'm showing you this one because it's relatively affordable. So where another service might be, say, $29 a month or thereabout, this service is $20 for a year. You can also use a trial version, which will have some limitations to which browsers you can test on, but it will at least let you test for these main browsers like IE and Edge if you don't necessarily run a Windows machine. So I'm gonna show you how that works. And we're going to test this theme Avada, which is a pretty well known theme on Theme Forest. And what I've done is, I've signed up for a free trial for Testing Bot. And then in the sidebar here, I've gone to Screenshots. And there's a couple of ways you can test with this service. You can either go to Live Testing, and it will spin up an actual simulated version of that browser on that operating system for you. And you can get in and you can interact with the website in this emulated version of the browser. Or for a quick and easy option, you can just have screenshots generated that show you what this theme is gonna look like in these different browsers. So I've plugged in the address of the demo for this theme, and I'm just gonna hit Generate Screenshots. The process can actually take a while, so I'm just gonna show you a couple of screenshots that I generated earlier. All right, so here we go. You can have a look here and see, this is an example of a screenshot that's been generated, showing you how this would look on Chrome 44 on the Windows Vista operating system. So we can open it up and check it out. And then we can see that everything looks fine, everything seems to be working as it should be. We've also got another example of Firefox 39 on Windows 8. Once again, everything seems to be working just fine. And you can look more closely at these screenshots of course to make sure that everything's in order. And when you go through the process of generating screenshots, if you do have a full account, then you'll be able to select exactly which browsers you need to test for and on which operating systems. And as I mentioned, you also have that live testing option too. So let's just recap everything that you need to think about with browser compatibility. First up, you can have a look at the estimated global breakdown of browser usage and make sure that you have those main browsers covered. If you can, check out the statistics of your own website to see for sure what your visitors are using. Install and test on as many of those browser and operating system combinations as you can yourself. And for everything else, try to use a third-party emulation service like Testing Bot. There's one more thing that can help you with the process of evaluating if a theme is gonna work with a particular browser. And that is, if you're looking on ThemeForest for a theme, then if you jump into the Details page for a particular theme and you look down here in the sidebar, you can see that we have a section marking Compatible Browsers. So these are the browsers that the developer has already tested on, so you can be confident to know that those browsers, at minimum, are covered with the particular theme that you're looking at. So that wraps up everything that you need to know about browser compatibility when you're evaluating a theme. In the next lesson, we're gonna start looking at something that's a part of the design of a theme, and that is the typography. Typography is really, really important in a theme, and it's not just because a theme needs to look pretty. Unless you have a site that's 100% video-based or 100% image-based, you need your text to be really easily absorbable by your visitors to make sure that you can get your message across. So in the next lesson, we're gonna look at some of the aspects of typography that you should consider when you're evaluating a theme that you might like to buy. So I'll see you in the next lesson.