Test Your Responsive Content with Little or No Budget

Source: iStock/Thinkstock

So, you have all of these great tools for creating responsive content like maybe Adobe Captiv
ate, Adobe RoboHelp, GoMo Learning or Elucidat, to name a few. But, let’s say you don’t have web space to run a good test with mobile devices. Yes, there are some mobile device simulators, but they may not be as accurate at testing mobile as you would like. Or, you could pay for website space just to test your content but, maybe that’s not in your budget. Well, here’s another solution: create your own FREE webserver for testing.

Yes, this is the eNerd part of me coming out! But, if you follow these instructions, you can have your free testing web server up and running in less than 35 minutes. This involves downloading and installing an open-source web server and using your laptop or PC as your web server. There are other tools you can use, but I used Apache Tomcat for my open-source server.

Here’s how to do it step by step.

1. Download and install Java JDK if you don’t already have it on your machine. A quick Google search will find this. (Make sure you get the version for the type of machine you’re using. For example, I used a Windows 64-bit version.)
2. Download Apache Tomcat. You can get this from http://tomcat.apache.org. I used Tomcat 8.0.
3. Install Tomcat in its own directory (folder).
4. Configure environment variables. Sounds hard, but it isn’t.
   For Windows, open your Control Panel and select System. (I’m using Windows 8, but other Windows versions would be similar.)
   Select Advanced system settings.
5. Click the Environment Variables button.
   Here you add two environment variables. Click the New button under System variables. Create the JAVA_HOME variable similar to the following . (You can copy and paste your JDK path here for the value.)
   Next, create the JRE_HOME variable in the same way. (Again, you can copy and paste your JRE path for the value.)
   Click OK for both of the above variables, and click OK to close your Environment Variables box and once more for the System Properties box.
6. If you have responsive content already created and ready to test, copy your responsive content folder and paste it under the webapps folder within your tomcat folder.In the above example, my eLearning content folder is called “DET_test”. I copied the entire folder under the webapps folder.
7. Start your Tomcat server.
   Go to your apache-tomcat-version folder, then to the bin folder. Double-click the startup.bat file. This will open a DOS (command) box. Leave this open while you’re running Tomcat, but you can minimize it to get it out of your way.
8. Find your machine’s IP address.
   Open a command prompt (Run – cmd). Type ipconfig and press Enter. Your IP address will display in the command box. Jot down your IP address; you’ll need this for your web content URL. Then you can close that command prompt.
9. Test 1 – See if you can access your content from your own laptop/PC.
   Open a browser window and type the following for the URL:
   yourIPAddress:8080/yourContentFolderName
   Example:
   10.5.5.20:8080/DET_test
10. Test 2 – Test your responsive content from your mobile device.
    Note that you must be on the same network as your laptop. For example, when I do this at work, I need to use a VPN app (like Cisco AnyConnect for example) from my iPhone to connect to my work’s network.Open your browser app from your smartphone or tablet and type in the same URL as you did above.If this does not work from your phone, you might need to temporarily turn off your firewall on your tomcat server machine. Just make sure you turn it back on later.
11. When finished, you can stop Tomcat by double-clicking the shutdown.bat file in your bin folder or just close the open Tomcat Java window.

Note that if you test on another day, your IP address could change, especially for a laptop that uses a dynamic IP address. You might have to use ipconfig again to find out your IP address on any given day. Also, you cannot use a machine name in place of an IP address with mobile devices. It will work on a laptop or desktop, but not with your mobile device.

I use this solution for testing our eLearning tutorials and our responsive help systems. You will probably see some differences between what you see on an iPad, for instance, versus an iPhone. These types of anomalies don’t typically show up in mobile device simulators. That’s why I use this method instead.

Try this solution if you need to test responsive content on mobile devices with little to no budget!