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

@Shelley591

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.

Vote Up Vote Down

@Frith110

Google Chrome

Instructions for Windows


Press F12
Click on "Toggle device mode"
Select your device and refresh the page


Step 1 and 2



Step 3



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

Vote Up Vote Down

@Berryessa866

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!

Vote Up Vote Down

@Turnbaugh909

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.

Vote Up Vote Down