See How Your Website Looks On Different Devices And Browsers – With BrowserStack

How To Use BrowserStack

About This Lesson

When creating your own website you need to be aware that different devices and browsers could display your site differently.

So how your site looks in the Safari browser on a Mac, could look different, to how it looks in Internet Explorer on a PC and again it could look totally different in Google Chrome on an Android phone.

Which means you’ll need to check how your site looks across multiple devices/browsers and make sure there are no major problems.

Luckily there’s a tool called BrowserStack, which makes this easy to do.

BrowserStack lets you take a screenshot of how your site looks on different devices, like a PC, Mac, iPad, Samsung phone, etc and how it looks with different browsers, such as Google Chrome, Safari, Internet Explorer, Firefox, etc.

In this tutorial I’ll,

  1. Show you how to use BrowserStack
  2. Show you the devices and browsers I recommend testing your site against
  3. Show you how you can “Live” test your site on multiple devices/browsers

Read All About It

See How To Use BrowserStack

First of all to use BrowserStack, you’ll need to visit their site at www.browserstack.com/screenshots/

Which will give you a page similar to below.

How To Use BrowserStack

Using BrowserStack is really simple,

  1. First – Insert your web address / or a theme demos web address (like in the image above)
  2. Then choose the different devices and browsers you want to see a screenshot of
  3. Click “Generate screenshots”

(You don’t need to download anything, you’ll use BrowserStack within your browser.)

BrowserStack will then start taking screenshots of the address you entered. (This can take a couple of minutes to complete).

You’ll then get back a list of screenshots, (like in the image below).

All Done

If you click a particular screenshot, you’ll see how your site looks on that device/browser.

So in the image below I clicked iPhone 6, and now I can see how my site looks on that device. And if I scroll down I’ll be able to see more of that screenshot.

Checking On iPhone 4s

Now I can go through all the screenshots that BrowserStack took and make sure there are no major problems.

And that’s all there is to it.

No Website Or WordPress Theme Is Perfect

It’s worth noting, that when you check your site across multiple browsers, it’s more then likely you will see some minor problems, or things that you don’t like.

The purpose of this check is to make sure there aren’t any major problems and to make sure your site fully loads across all the important devices and browsers.

Even big companies who have teams of web developers/designers have some problems with how their site displays across devices / browsers, just look at the two examples below. (Although these are more major problems!)

CNN on Internet Explorer 6

CNN

ESPN on Internet Explorer 7

ESPN

See The Devices And Browsers I Recommend Testing Your Site Against

With BrowserStack, you can check “compatibility across 300+ browsers”. Which is great. It means you can see how your site looks across pretty much any device or browser.

However, as I talked about above, you need to be realistic and understand that no website is perfect. If you were to check any website across 300+ browsers, you will find problems.

Especially with the older browsers like Internet Explorer 6, 7 and 8, which very few people use. (In fact on this site, only 25 people viewed my site in I.E 6, 7 or 8 throughout the whole of last year, which is why I don’t ever check my site on these browsers and probably why CNN and ESPN don’t care about the issues in the images above.)

Personally when I use BrowserStack, I’m really only checking to make sure there aren’t any major problems on the important browsers.

In fact I only really check about 20-40 devices/browsers. Which are what I consider to be the most important and popular devices/browsers.

In case you’re wondering, the full list of devices and browsers I check my sites against, is as follows.

  • iOS
    • v8.3 – iPhone 6 & iPad mini 2 & iPad air
    • v7 – iPhone 5s iPad mini
    • v6 – iPhone 4s & iPad 3
    • v5 – iPad 2
  • Android
    • Samsung – Galaxy S2 & S5
    • Samsung – Galaxy Note 10.1
    • Motorola – Razr
    • Google – Nexus 5 & 9
    • HTC – One X
  • Amazon Kindle Fire 2
  • Windows 8.1
    • Internet Explorer – 11 Desktop
    • Firefox – 37
    • Chrome – 30
  • Window 7
    • Internet Explorer – 9, 10 & 11
    • Firefox – 30
    • Chrome – 42
  • Windows XP
    • Firefox – 36
    • Chrome – 40
  • Mac OS X Yosemite
    • Firefox – 37
    • Chrome – 40
    • Safari – 8
  • Mac OS X Mavericks
    • Firefox – 30
    • Chrome – 36
    • Safari – 7
  • Mac OS X Mountain Lion
    • Safari – 6.1
  • Mac OS X Lion
    • Safari – 6
  • Mac OS X Snow Leonard
    • Firefox – 34
    • Chrome – 40
    • Safari – 5.1

(Mostly I just like to test my site with lots of different devices and also the newest versions of different browsers.) 

This Is Not Interactive Testing – However You Can Get “Live” Testing

One final thing I want to point out, the option I showed you above only gives you a screenshot, which means you can’t interact with the site, but you can get an idea of how it looks.

BrowserStack do have an option for “Interactive testing and debugging of websites”, which you can get by visiting www.browserstack.com

However this costs anywhere from $20 – $40 a month.

Personally I think the screenshot option is good enough. (But then again, maybe I’m just cheap!)

Live Browser Testing

All Done

And that’s it for this lesson!

If you’re interested in more tutorials like this, check out my individual tutorials page.