Web Safe Areas

2.  There was a time, not too long ago,
when monitors were limited by their
resolution.
 This is the number of pixels (tiny individual
dots) that make up the display.
 When the World Wide Web was first
established, a typical screen resolution
was approximately 640 by 480 pixels.

3.  As monitors and display panels have
become more sophisticated, the
resolutions have grown.
 Now, we have monitors capable of
displaying in excess of 2,880 by 1,800
pixels.
 This means we can display far more
information on screen at any one time.

4.  This leaves us with a
dilemma; what size screen
should we be designing
for?
 There’s no single solution
to this issue.
 Typically, however, we
should be aiming for the
greatest number of users
possible.
 Less than 2% of all web
users have a screen that’s
smaller than 1,024 pixels
wide.

5.  The ‘safe area’ is a necessary consideration.
Even a browser that displays, full screen, at 2880 pixels
wide will have part of that space ‘reserved’ for scroll bars
and borders.
 There are a number of varying recommendations as to
how big a safe area should be; a margin of approximately
40 pixels is often suggested as a ‘minimum’.

6.  Select ‘File > New’.
 Choose the ‘Web’
Preset.
 Select your size and
resolution; remember
to include a safe area!
 Leave the colour
mode on ‘RGB’.
 If visible, leave your
advanced settings on
the current defaults.