5

What are the best tools for testing how a website will look on different platforms and what are their pros and cons?

This includes knowing how my layout/fonts display and functionality in various browsers and OS, not merely how the layout adapts to different device sizes.

  • 2
    Check out www.BrowserStack.com. I find that useful and affordable (I am not an employee of BrowserStack, merely a user). – user48174 Aug 10 '15 at 21:50
  • Related question on how to host sites being tested – Zach Saucier Mar 15 '16 at 20:07
5

The best tools for testing how a website will look on different platforms are actually using the different platforms themselves. That means owning all the devices and using all of the relevant operating systems and browsers that your users will use. The pros are that every option is tested (if done correctly). The cons are that it can be relatively expensive to buy all of the devices and takes a lot of time to test.

But doing so for every device/software combination is relatively unrealistic. I encourage you and your company to do it as much as you can, especially hitting the primary user's devices and software. As such, here's how I test websites/web apps:

  • For some testing (especially testing responsiveness and page load/render) I use Chrome's dev tools. These are great tools and the ones I'm most comfortable using. Their dev tools are also a great assistance in development, but that's off topic.

  • While developing, I regularly test the website in different browsers and devices that I have when new "pieces" of the website are done. A "piece" could be a finished theme, a new animation set, a new interactive element, etc. This makes it so that you actually complete the piece including testing and any iteration that follows before you say you're done. Keep in mind load time and performance when doing this as well.

  • I love doing user tests with my friends and whoever else is around (essentially letting them use your site/app while you watch and then asking them relevant but somewhat general questions afterwards about it), especially if they're potential users. This is good to do in the prototyping/early stages as well as the later ones to make sure you're not investing a bunch of time in something useless.

  • Once everything is more or less "done", I sometimes test my site using a validation service and occosionally similar tools, but it's not on the top of my "this must be done every time" list.

There are other applications/tools that do automated testing which can be useful, but personally I haven't worked on something massive enough to require it and you get more accurate results by testing on the different devices and platforms themselves, so I haven't ever used any much.

3

Ideally, you'd have a room full of testers with a pile of different devices.

The general things you need to check for:

  • different browsers
  • different operating systems
  • different devices
  • different viewport sizes

These can affect:

  • layout
  • typography
  • functionality

In most cases, you need some form of the actual software you want to test.

That would mean you have the physical device, with the actual browser software installed.

That's hard to do in a lot of situations. As such, I think one robust-yet-practical set up may be:

OSX install with:

  • Latest Chrome, Safari, Firefox browsers. Thumb drive stand-alone versions of one version back.
  • Xcode for testing iOS virtually

Windows install with:

  • Latest Chrome, Safari, Firefox and IE (sigh) browsers. Thumb drive stand-alone versions of one version back. (Older versions of IE is a bit trickier...the best way is to run a virtual machine for each version)
  • Android Studio for testing Android devices virtually

Linux install if you care about Linux users (we all should, of course. Business rarely does.)

A step up from that would be services that provide you 'shared' access to actual devices via VPN tools. These are painful to use, though...as you are essentially trying to emulate a touch device via a mouse via network lag. But it's better than nothing in some situations.

  • Good answer; wanted to chip in modern.ie to supplement the Windows virtual machine part of this answer. With these VMs, you can do pretty much anything on an OSX machine. – Brendan Aug 11 '15 at 0:16
1

Like Zach said, ideally you want to test on specific devices/browsers and use validation tools. However, I have found it helpful to use browsershots.org as well. They used to have IE options, but have recently removed that from their list. Unfortunately, that just displays how your interface will look and does not provide any functionality as to how your site will behave. If you just need to see how it looks, then it would server your purpose just fine, though. Hope that helps!

0

Google Chrome

Instructions for Windows

  1. Press F12
  2. Click on "Toggle device mode"
  3. Select your device and refresh the page

Step 1 and 2

enter image description here

Step 3

enter image description here

Pros

  • It works well

Cons

  • Limited device emulation choices? Not sure if this is relevant
  • Being cruelly forced to refresh the page after switching devices

Android Studio

If you really want to go overboard and get cross-browser, cross-platform, functionality testing in the mix then I would recommend Android Studio.

With Android Studio you can download images of almost any device imaginable in the Android-o-sphere and run them in a virtual environment. Once the virtual environment has been fired up, you can download the web browsers which you are testing against.

Aside from getting your hands on the devices you want to test, this is definitely the next best thing.

Virtual Devices

  • 1
    That really only changes screen size. Which, while important, isn't the only factor that needs to be checked. – DA01 Aug 10 '15 at 16:01
  • 4
    As above, using this is great for responsive testing, but the page will still render with Google Chrome, not how the actual device will render it. – Clarkey Aug 10 '15 at 16:09
  • @DA01 OP's question is not specific enough to justify your comment. I will add Android Studio emulation for completeness of the Android platform. – MonkeyZeus Aug 10 '15 at 16:19
  • @MonkeyZeus well, my point is that there's a lot more to this than just Chrome and android. We're talking various versions of the Chrome browser and android browser, not to mention all of the other desktop and mobile browsers, as well as OS-level differences. I agree, the OP isn't being very specific. – DA01 Aug 10 '15 at 16:23
  • @DA01 Yes, this is exactly why testing for 100% compliance is a fools errand. – MonkeyZeus Aug 10 '15 at 16:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.