Resolution, pixels, & layouts – A complete guide to “screens”

The Age of Screens

They say this is an ‘Information Age’, well I say this is a ‘Screen Age’. With hundreds of screens in the market today, there are still more coming. From big laptops to smartphones, there are way too many screen sizes to memorize. Though it is exciting for many, it is a complete nightmare for designers and developers and many others who are creating content or any other information for these never-ending variable-size screens. To make things easier in life, lets try to get into the screen world (as if you are not in it, already!) and understand the jargons associated with it.

RESOLUTION in screens

There is no shame in feeling lost about the topic of resolution and the technical terms around it. Everybody seems to be talking about pixels, dpi/ppi, retinas, and megapixels today. But not everyone understands all of these in detail. Let me try to simplify it for you.

Pixel stands for picture element. It is the smallest element on a screen that human eye can distinguish. All digital image sizes are given in pixels. For example, 1024 x 768 (width x height) implies that there are 1024 pixels displayed in each row and there are 768 rows (lines). The width is usually listed first.

Now if you take the product of width and height of an image in pixels, you get what is called definition. So, an image with the size 4608x3072px has a definition of 14155776 pixels, or about 14.2 MegaPixel. This is the parameter being used by camera and phone manufacturers as their top marketing stunt.

Now time for the confusion!
Pixels per Inch (PPI) vs Dots per Inch (DPI)
No, they are not the same. Though they are being used interchangeably by people, they mean different things. Let’s clear the doubt once and for all.

PPI is the number of pixels per inch in your image. This affects the print size of the image and the quality of output. If there are too few pixels per inch, that implies that pixels will be bigger and the image will be pixelated or blur. A lot of it depends on the print size. Suppose you have a 100 x 100-pixel image.

Printing at 10 PPI means,

100 x 100 pixels /10 PPI = 10’’ x 10’’ image.

Whereas, printing at 100 PPI means,

100 x 100 pixels / 100 PPI = 1’’ x 1’’ image.

As you would have guessed it by now, PPI comes into picture only when you are getting a digital image printed. Otherwise PPI doesn’t matter. So a 72ppi image and a 2000ppi image look exactly same on the screen.

DPI stands for Dots per Inch. And it refers only to the printer. Every pixel is made up of different colors and printer should be able to mix inks to get all the colors of the image. So a 1200 dpi printer implies that there are 1200 dots in every inch to make up for the colors.

So, if there was an image of 300ppi to be printed, there would be 1200 x 1200 dpi / 300 x 300 ppi = 16 dots per pixel. Needless to say, more dpi implies more dots per pixel thereby giving more accurate picture.

LAYOUTS

The screen layout changes as you move from one screen to another. By layout, I mean not just the placing of the containers but also about the overall scaling of the content. This is the world of responsiveness and if you not already responsive to it, you are lagging behind. Read this awesome article to understand the difference between the different types of page layouts.

Broadly, they are:

1. Static Layout: This is for those who don’t like to adapt or change. This remains fixed no matter which screen you are using. You are fine with scroll bars and zoom options to make sense of the content.

2. Liquid Layout: This lets the content shrink as the size of the screen decreases. But the layout remains the same.

3. Adaptive Layout: This lets the layout of the content change itself depending on the breakpoints that have been set according to the screen size. The content doesn’t shrink as the screen size decreases.

4. Responsive Layout: This is the perfect blend of Liquid Layout and Adaptive Layout. Not only does the content shrink on decreasing the screen size, the layout also changes depending on the screen size.

Many people today call their pages responsive even when it is just an adaptive layout. See this for kickass examples of responsive designs being used today.

FONT UNITS

The heck about px, pt, em and %

Another confusing element is the text scaling. There are four units in web that can be used to give the size of the text. But which one should be used? Read on for the answer.

1. Pixels(px): This is the fixed sized unit used in screen media. It doesn’t scale up or down depending on the size.

2. Points(pt): Again, fixed sized. Point was used traditionally in print media. One point is equal to 1/72 of an inch.

3. Ems (em): This unit is widely used for responsive design. It is dependent on the current font-size being used. So, 1em = 16px if 16px is the size of the font being used. Then, 2em will be 32 and so on. Fully scalable.

4. Percent (%): Pretty much like ‘em’. The current font size is represented by 100%. So in our case, 100% = 16px. So, if 16px is the default size of the font in the browser, and you need a font of 20px, all you do is: 20/16 = 1.25em.

See the chart below to quickly convert your text sizes from px to em. (Note: It takes 16 px as the default size of the font)

SIZES

So, there are hundreds of screens sizes present, right? Now which ones should I be bothered about? You can get a comprehensive idea on screen sizes here.

To Be Continued…