Reference Guide

Screen

The basic building block of a Nutshell app, this represents the screen that your end-user will see and interact with. Its size and shape will depend on which device and orientation you’ve chosen to optimise your app for – e.g. smartphone in portrait orientation.

The device and orientation you choose can have a big impact on what you can fit on-screen

Adding a Screen

Drag and drop the Screen icon from the Essentials tool bar onto your workflow. It will automatically zoom in, so you can begin adding form controls and visual elements, such as text fields and buttons.

Drag the Screen component from the Tool Bar on to the Canvas

Resizing a Screen

Longer screens can scroll vertically. If your screen isn’t big enough to fit all of your content, it can be enlarged by clicking and dragging on the lower handles. You cannot resize it smaller than its original height.

Screens can be enlarged vertically by clicking and dragging on the lower handles

The dotted green line tells you roughly where the bottom of your screen might be, so that you can make informed decisions about where to place important elements.

A dotted green line gives you a rough indication of where the bottom of the screen might be

However, this is only a rough estimation of where the bottom of the screen might be. Because devices are all different sizes and shapes, it’s impossible to know for sure where it will be, so Nutshell takes an informed estimate based on the most common screen-sizes for the type of device you’ve chosen to optimise your app for.

Screen Properties

When a screen is selected on the Canvas, the following settings are available in the Properties panel:

Recommended Image Sizes

For the best possible results, you should avoid using small images and enlarging them, as this can make them appear mushy or pixelated.

A small image (left) will look pixelated and mushy on a retina screen

Modern mobile devices are increasing in resolution (i.e. the amount of detail they can display per square inch), so if your images aren’t big enough, they won’t look very good on-screen.

All images should be in the RGB colour space and uploaded as either high-quality JPG or PNG files at a resolution of 72dpi.

For smartphones, you should aim for background images approximately 360 x 640 pixels for a standard definition screen, or 720 x 1280 pixels for high-resolution (e.g. ‘retina’) devices.

For tablets, use at least 768 x 1024 pixels for standard definition, or 1536 x 2048 pixels for high-resolution (e.g. ‘retina’) devices.