Testing with Screenfly

Screenfly is a great tool that can assist you with seeing how your website or application will look on a variety of devices and resolutions. Also, like every other tool in this section, it is completely free to use!

Open up your browser and go to http://quirktools.com/screenfly/. You will be presented with a very simplistic and easy-to-use website. Don't let this simplicity fool you; once you submit a website you want to look at, you'll see the true power of Screenfly. You'll see a screen similar to the following screenshot:

Getting started with this tool is extremely easy. Simply input the URL of the website or application you would like to look at; you can even use the localhost address of our project from the previous chapter.

Once you hit Go, you will see your website in the middle of the screen and it will appear as shown in the following screenshot:

Now you will have several icons active at the top of the page. These icons represent various devices and options. You can also access each option through a keyboard shortcut; simply press the letter in parentheses after the icon name to access its options.

The interface

Starting from the left, you have the following icons:

• Desktop (shortcut key: D): This icon allows you to view the site on various desktop resolutions.
• Tablet (shortcut Key: T): From here you can see how your page appears on devices such as the iPad, iPad mini, Galaxy Tab, and others.
• Mobile (shortcut Key: M): This menu has various phone handsets such as the iPhone 3/4/5, RAZR V3/V8, Galaxy S3/4, and more.
• Television (shortcut Key: V): Here you can see how your website looks on HDTV modes such as 720p and 1080p. This could be great for setting up websites or web applications that will be running in kiosks.
• Custom Screen Size (shortcut Key: C): If you need to check how it would look at a resolution that is not covered by any other options, here is where you can do it. Simply enter in the resolution and click Apply.
• Refresh (shortcut Key: F): This allows you to refresh the page that is loaded. This comes in handy when looking at new changes you've made.
• Rotate Screen (shortcut Key: R): Pushing this icon will simulate a screen rotation so you can see how your project will respond.
• Allow Scrolling (shortcut Key: S): By default you cannot scroll on the page that Screenfly loads, but by clicking this icon and turning scrolling on, you can see the full website.
• Use Proxy Server (shortcut Key: P): This accesses your project through the use of a proxy server.
• Share (no shortcut key): This allows you share this session out to anyone you'd like via the generated link.

The icons look as shown in the following screenshot:

More information

Go ahead and spend some time with this tool. Try out as many different websites and devices as you can. You may be surprised how one of your websites looks when your users try to visit it from their iPhone.

One quick note about using this great tool. While you can test the way your site looks on various devices, Screenfly does not give you any indication of how it may act on the selected devices. If you use functionality such as offline storage, geolocation, or anything else that uses any device functionality, I implore you to still test them on actual devices. Do not rely solely on Screenfly being your only means of device testing.

Tip

While you are on this page, you may notice the other links at the top of the page such as Wires or Retro. These are some other cool tools that you can use in any web development scenario. Retro shows you some important information about your current browser (the one you are accessing Screenfly with) and Wires lets you create wireframe UI prototypes.