Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
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.
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.
Ideally, you'd have a room full of testers with a pile of different devices.
The general things you need to check for:
These can affect:
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:
Windows install with:
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.
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!
Instructions for Windows
Step 1 and 2
Step 3
Pros
Cons
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.
