# Screens

Check designs on other platforms while working from your Mac.

Have you ever wondered how your design will look on an iPhone screen? Or how much content area is available in Internet Explorer running on Windows? The Screens tool can help get you the answer without moving your work onto another platform.

The first thing you'll want to do is choose a screen size from the popup menu in the upper-left corner of the window. In the screen shot above, iPhone is selected.

## Can't find the screen you're looking for?

Many more screen sizes and platforms are available in the Screens panel of the xScope preferences. Just put a checkmark next to the ones you want to see.

You can also define you own screen configurations using the + button. The description will be used in the popup menu, the platform determines which interface items appear, and the width/height sets the size of the window.

Once you've chosen the screen, you'll see a list of platform content options in the Screen Options panel. Choosing one of these options colors in the area used to display it on the screen. In the screen shot above, you'll see the areas used by the iPhone status bar, the Safari address bar and toolbar. This would be a great configuration for testing the sizes of a mobile website. If, on the other hand, you were designing lock screen wallpapers, you can easily turn off Toolbar and Safari Address Bar and turn on Lock Screen. Changes to the platform options also updates the content size that is displayed at the bottom of Screen Options panel.

The content areas are calculated using default settings. Users can (and do!) adjust their toolbars, start menus, and other UI elements. These areas should be used as a guideline, not as an exact measurement.

Another important task that the Screens tool helps with is accessibility testing. Your eyesight is probably much better than many of the people who will be using your work. By default, the Screens tool shows how a screen looks to a user without any eyesight problems, but you can quickly change the popup menu from Layouts to simulate a variety of vision defects. Each of the defects is shown with its scientific name and a rough percentage of the population affected by the problem.

Presbyopia is a condition where older eyes lose the ability to focus on computer screens. A natural part of the aging process, it affects most users over the age of 40 to some degree. The other defects listed in the menu are for color blindness. You may be surprised at how your carefully chosen color palette makes a site or app more difficult to use.

In addition to the vision simulations, there is a De-retinizer option. When used on a Retina display, this setting simulates what the screen will look like on a normal @1x display.

## Working through Screens

Note that you can "work through" the vision simulation. If you load a website or an app behind the Screens tool, you can use controls as you normally would and get immediate feedback about problem areas.

This feature is also helpful when showing content areas with the normal vision setting: browser controls remain clickable even if they are behind the red highlight area.

When you're working with the Screens tool, you'll often want to place it over another window. To help with this, hold down the Control key while dragging the window and it will snap into place based on the underlying screen content. You can also use the arrow keys to nudge the window into place.