Remote Preview

Remote preview is a tiny JavaScript based tool which I built for our test lab. It allows you to preview any URL on large number of mobile devices simultaneously. Just enter a URL, hit enter, and new URL gets automatically loaded on each device. Remote preview works on platforms like Android, Blackberry, iOS, Maemo, Meego, Symbian, Windows Phone and WebOS.

Remote Preview is a tiny JavaScript based tool that allows you to preview any URL on large number of mobile devices simultaneously.

Remote Preview works by making an ajax call every 1100ms to check if the url in the ‘url’ file is changed. If it is, the script will then change the src attribute of the iframe and load a new page into it. If there’s no changes, the script will just keep polling the url file until something changes. Remote Preview allows very fast previewing of different URL’s to check for possible layout problems, which can then be debugged using various other tools depending on the platform where they occur.

There are some issues and limitations with the way it’s being done, but as there currently is no other tool which allows you to preview web pages on all these platforms, I think this can be a handy addition to any test lab’s toolset.

Basic usage

Copy and paste all files to a public Dropbox folder/server/localhost, edit ‘url’ file and wait for devices to refresh. That’s all! You might also want to bookmark Remote Preview to your device’s home screen for fast & easy application like access later on (bonus: If you moved all files to a server or localhost, you can control the devices via web browser by pointing your browser to the directory named ‘control’).

Browser support

Current version is tested to be working on at least:

OS Browser
Android 2.1 – 4.1.2 Stock WebKit + Chrome
Blackberry 7.0 Stock Browser
iOS 4.2.1+ Mobile Safari
Mac OS X Safari, Chrome, Firefox, Opera
Maemo 5.0 Stock WebKit
Meego 1.2 Stock WebKit
Symbian 3 Stock WebKit
Symbian Belle Stock WebKit
WebOS 3.0.5 Stock WebKit
Windows Phone 7.5 Internet Explorer Mobile
Windows 7 Internet Explorer 9

Download

Remote Preview on GitHub

Building A Device Stand

Not so long after the device lab was born I realized that we need a much better way to store and charge all the 40+ devices. There didn’t seem to be any existing solution available which you could just buy, so I started thinking what would be the easiest way to do something like that myself. After some research I ran into this device testing station by 64 Digital and thought it looked like a perfect solution.

The main idea is to provide a dynamic and secure way to store phones, tablets and other devices and make it possible to use them for testing without the need to actually remove them from the stand. Devices are held in place using Velcro tape which is attached both to the back of the phones and the stand. That makes it easy to detach the phones, but it also makes them stick securely to the wall. The whole stand system is done from two 800mm wide racks, and I’m planning to make a third one too so that we have available space to continue expanding our device collection.

The wood materials for both racks cost under 30 euros. The Velcro tape was actually the most expensive part as 25 meters of it cost about 70 euros + shipping. I used two full work days to built these and third to paint them. I guess someone with actual experience might be a lot faster as about half of that time went into trial and error. ❦

See the process below and grab my drawings:

Stand drawings

Establishing An Open Device Lab

I wrote an article to Smashing Magazine. It’s an in-depth guide about how to establish an open device lab. The article gives practical tips about things like location, how to get devices, what devices to get and what software to use. It would not have been possible to write it without the help from Shaun Dunne, Jeremy Keith, David Blooman and Andre Jay Meissner. Thank you guys, I owe you one.

Read the article

Helsinki Open Device Lab

If you’ve been building websites during the past two years you must know that the web doesn’t live on a desk anymore. The reality is that we now need to test our work on multiple devices, instead of just few desktop browsers. All this is easier said than done. It’s easy when you have a dozen devices laying on the desk in front of you, but what about the rest of us? Devices are expensive and the landscape is ever expanding.

The reality is that we now need to test our work on multiple devices, instead of just few desktop browsers.

That is the reason why we decided to set up an open device lab to Kisko’s office. ‘Open’ meaning that anyone can pop round, use the devices freely and contribute by lending their old devices to us. The list isn’t very long yet, but it will grow over time. I am also planning to contact few device manufacturers to help us out here.

Joni Korpi and I are leaving our spare devices at the office for testing purposes and we are hoping to see others to contribute too. Kisko Labs is also—in addition to the space—giving four devices for testing purposes. If you’ve got an old mobile device which you aren’t using anymore and it’s just gathering dust, then why not lend it to our lab. The device will of course remain yours all the time, and you can take it back whenever you want.

I will post more info about the project either here or on Twitter once we get everything up and running. I also made a site for the lab which can be found at devicelab.fi. Shout outs also to Jeremy Keith who started this whole ‘open device lab’ thing in the first place.

How things are looking at the moment:

The Lab The Lab, part 2

Location

Kisko Labs is located downtown Helsinki, next to Katri Valas park. Our address is Vilhovuorenkatu 11D, 00500 Helsinki, FI. Before coming make sure we’re at the office by sending message to @kiskolabs at least few days beforehand.

Kisko Labs' old location

Current devices

Device list moved to devicelab.fi

Our wish list

  • Android 3.x device
  • SonyEricsson LT15i Xperia Arc
  • Blackberry 5.x device
  • Blackberry 6.x device