Testing Out Your Site On Other Devices/Emulators

Happy news! We now have 2 tablets to use to test our websites functionality in different operating systems and screen sizes. The Galaxy Tab S is a small android tablet and the Surface Pro is a large Windows based convertible tablet. We will also have an iPad Air and iPad Mini but they have not arrived yet.

As a web designer/developer, it is extremely important to make sure that your website will be functional and look good, no matter what the device type or screen size. There are programs and websites that can help you test your page for different devices but nothing is as effective as actually checking your website on different devices.


To see how your website looks, you need the same kind of link that we have used for earlier assignments. In case you have forgotten the process, the steps are listed below:

• Create a folder for your new site in Drive
• Add your images, css and html pages into that folder
• Make sure your homepage is called index.html
• Get a shareable link for the folder
• Find and copy the folder id
• In the browser add that folder id to the end of: www.googledrive.com/host/
• You should have a working link that looks something like this: www.googledrive.com/host/0B78m67zhksadft762g

I recommend getting a shortened version of that link to type into the tablet's browser:

• Go to goo.gl
• Paste your link into the text box
• Press "Shorten"

Now you should have a link you can easily type into other devices.

When there is not a device available, or you want to test your site for a different device, you can use a device emulator. There are a bunch of free emulators on the web. One you could use is:

http://www.mobilephoneemulator.com

Something else that is important is knowing how well different Browsers (old and current) display your site. You can usually check a few current browsers directly on your Mac or PC but that does not tell you that your site works on older versions of those same browsers.

At the following site you can select different versions of multiple browsers and get screenshots that display how your site looks on those versions. Obviously this does not let you see if everything is working but you can see if things need to be tweaked visually.

Browsershots.org

To specifically test your site on different versions of Explorer (again using screenshots):

http://netrenderer.com

This last link lets you actually test out other browsers/versions. The downside is that this currently only runs on the Windows based PCs/Tablets.
Browser Sandbox