Devices and Display Terminology

In the design context, devices are the equipment you use to access a digital product. Examples include smartphones, desktops, tablets, laptops, smartwatches, and even things like smart fridges or other smart home gadgets. Each device has a different screen size and way of being used, which is important to think about when making a digital product easy to use and look good on all these different tools.

A pixel is the smallest unit of a digital image. It's like a tiny dot on a screen, and when many of these dots come together, they create the images, text, and everything else you see on your devices.

The more pixels you have, the clearer and more detailed the picture will be. Low pixel density results in blurry and less sharp images, creating a "pixelated" image in extreme cases.

A software pixel (also called a CSS pixel) is a unit of measurement. The device manufacturer determines how many hardware pixels equals one software pixel, a concept known as the device pixel ratio. So, if a device has a high-resolution screen, it might have several physical pixels for every one CSS pixel.

PPI refers to the pixel density of an electronic image device, with the abbreviation standing for pixels-per-inch. PPI is calculated from the screen's diagonal size and resolution ratio. Higher PPI results in a clearer, crisper display. For example, a graphic with 1920×1080 Full HD resolution will be displayed well on a 20" monitor (110 PPI). However, if you decide to print it as a banner at 48" horizontally, the output will have only 46 pixels per inch, and the same image will look fuzzy.

Most modern digital displays have a PPI of 300 or higher. You can calculate the number of pixels per inch yourself using the online PPI Calculator.^[1]

Understanding screen density and ratio is essential for designers to deliver enjoyable user experiences across devices.

Retina displays are high-resolution displays with a pixel density higher than the human eye can detect. Generally, their resolution is at least 300 pixels per inch.

Retina displays create a highly realistic image. The term was originally coined by Apple when such displays first appeared on the iPhone 4 and 4S.

Mobile design involves designing for hand-held and wearable devices with touch interfaces: smartphones, smartwatches, tablets, etc. In 2024, the number of global smartphone users is estimated at 4.88 billion and the number is only expected to keep growing.^[2] Considering these stats, it's crucial to make digital products with both desktop and mobile devices in mind.

Adaptive design is a web design approach that involves creating multiple versions of a website, each tailored to specific device types or screen sizes. When a user accesses a website, the server detects the device's characteristics and serves the corresponding version of the site. This ensures a tailored and optimized user experience.

Adaptive design usually handles the 6 most common screen widths: 320px, 480px, 760px, 960px, 1200px, or 1600px.

Responsive design uses CSS to create different page layouts depending on the device's screen size.^[3] Instead of showing completely different versions for mobile and desktop, the page automatically reconfigures itself as needed.

Responsive design is used to create mobile-friendly websites that look good on various devices. While it doesn't offer tailor-made solutions like adaptive design, it's still commonly used today.