Developing apps and sites these days can become a minefield of potential issues.
As a mobile-first social media agency, we know that the reality is far from the utopia of having only one bug-free browser and a single device to cater to.
Differences in how each browser interprets HTML markup, especially when developing with older browser support, is just one of the problems that can appear.
Tools to help counteract these potential problems have been around now for a while. Browserstack is an example of a useful tool that aids in testing across multiple platforms. Used via the browser, it allows (by means of virtual machines) you to use almost any device that one might need to test in.
However, while testing a site or app once the project is live, layout issues (to name one of many potential problems) may be reported that the virtual machine did not reveal. The opposite could also be true, where a virtual machine is portraying a bug that would not happen in the real-life use of said device/browser.
If virtual machines aren’t 100% certain to predict what will happen with projects in multiple devices, browsers and operating systems then what other option do we have? Building a cool testing station is the option we liked the most. Bear in mind, depending on your budget, virtual machines may be the answer for you. If your budget allows, however, you may soon find yourself with a new essential tool and a great investment.
Steps to Build a Testing Station
1. Make a list of essential devices
You will need to purchase and compare these to your budget to consider stretching or cutting down on ones you think are necessary. If you develop fully responsive and mobile friendly apps and sites, then your list should include popular devices ranging from mobiles, tablets to smaller screen laptops and full screen computers. It is a good idea to have a varied selection, a good place to start is by looking at a popular device list like this one for mobiles. A healthy mixture of iOS, Android and possibly Windows Phones should be thought of. For larger devices, Windows 7 and 8 machines as well as Macs should be in the mix. This way you can test everything from Google Chrome to the infamous IE (okay, it’s getting better now).
2. Where to buy?
A good suggestion is to stay away from E-bay auctions. People tend to get excited and prices raise to an unjustifiable amount for used as well as new. Shop around. Trying something like the used section of Amazon’s shop and buying strictly the undamaged devices, or if your budget is high then you could go brand new. It’s important to make sure you’re getting a decent deal. Some might say renting is now an option although it is tricky whether to say this will be the best option. Don’t forget chargers. USB cables are a good option and can be connected to a multi USB port to keep it simple for small devices.
3. Where to put them?
Once you have all your devices you may be thinking where to place all your mobile devices in one place. A rack is a good solution. A few rows to allow enough space for all your portable devices is important. As you will see in the following step, you will be able to view your site or app through all the devices at the same time. It is important you have a way to leave the devices connected to a charger whilst working with them. Therefore, it is difficult to find something suitable in shops. That is why our well connected developer called a friend and in a couple days we had a custom-built rack with an opening on the bottom for the phone to charge.
4. Test all devices simultaneously?
This step is for developers only. This can be done with some simple HT Access and AJAX. Bear in mind there are many ways for testing and practices vary with numerous methodologies available. This is one of them. It’s a simple but great concept. You add an HT Access rule for a subfolder where if a URL is entered following the / in say, for example, /testing/ then it saves that URL onto a .txt file. Next, you have the index page on /testing/ to do consistent AJAX calls to the .txt file to find out if this URL in the .txt file has changed, and go to that window location automatically in an iframe. An example of this could be:
- On your main machine you go to //yoursite.com/testing/www.siteToTest.com
- HT Access picks this up, saves //siteToTest.com URL onto specific .txt file.
- You have all your devices have a browser open to yoursite.com/testing/
- The page the devices are in will be performing the AJAX calls and will detect a change in the .txt file and open within a frame the page you want to test.
- That’s it!
By following these steps, you will have a useful testing station where you can run your applications on the devices you need. The final step is to give it a nice name like TestBoy 5000, THX-1437 or Bernie.