Web Safe AreasWeb Design – Week 7

History of Monitor Resolutions

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.

History of Monitor Resolutions

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.

Screen Resolutions 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.

Web Safe Area

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’.

Setting Up Your Photoshop Document

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.