Responsive Design Series

With Great Power, Comes Great Responsive Design Screen Metrics

How Screen Metrics ensure your UI flows smoothly across devices

5 min readApr 8, 2021

Last week we introduced you to Responsive Design and the impact it has had on our — let’s face it — daily time spent with devices. Since then, we found out that the ‘Your Activity’ feature on Instagram that tells you how much time you spent on the app, is only a mobile feature. Because of Responsive Design, this means, you can use the web application on your laptop, have a similar ‘stalking’ experience and not feel bad about the time you spent! Yes, this is the wrong lesson we just took away from responsive design, but hello! Game changer!

But we digress.

Today we’re exploring the first concept of responsiveness in UI design — Screen Metrics. This can get a little technical, but we’ve made sure you’ll be able to keep up.

With the rise of mobile apps, it became clear that a significant parameter behind their success, was that it be supported on a range of devices. As mentioned last week, a mobile-first approach became key over the years. Product designers thereby started with the mobile — not only because of the new movement but also because it had more restrictions — and then would expand its features to create a tablet or desktop version.

So, keeping specifically Android devices in mind, what are the screen metrics that matter when it comes to aligning hundreds of unique mobile screens available with varying metrics, features and configurations?

Pixels

The first Screen Metric that really matters, is a Pixel. A digital screen is made up of tiny dots called pixels. A pixel consists of three coloured (Red, Green & Blue) LEDs. In the image below, we see that they can be different shapes, or sizes.

However, at the same time, we see that they have no standard shape, size, arrangement patterns or density across devices and because of this, we do not use pixels as a unit of measurement for Android design and development. Instead we use Density Independent Pixels.

Density Independent Pixels

Density Independent Pixels a.k.a. DPs a.k.a. DIPs (depending on how cool you want to sound) are pixels that remain independent of the density of the screen. They are flexible units that adjust to create uniform dimensions of any screen, whether the elements remain large or small. Measuring in dips (yes, we’re that cool), allows designers and developers to ensure that what they create appears at the same physical size across screens, no matter what density those screens happen to be.

In other words, they are as flexible as our weekend plans during covid.

In the image above, notice how the high density screens of Pixels and DPs are different — with DPs scaling to match the dimensions of the rectangle on the android screen, while the Pixels are unable to maintain the uniformity.

Bonus: A commonly used unit similar to DP is Points (pt). So similar are they, that it is possible to convert pt to DP and vice versa with remarkable ease. Points are mainly used to develop iOS applications.

Scalable Pixels

The third screen metric is SP or Scalable Pixel. Similar to DP except scalable according to the user’s choice, this is used for specifying font sizes and will scale according to the device’s text size settings.

SPs are the reason you just have to just change your parents’ device font settings and not the size of the font on every mail or message they receive, ensuring that not it’s not only a one-time job, but also will keep your sanity.

Density Pixels Per Inch

As mentioned before, there are hundreds of screen sizes with varying height, width and the ratio between them. To help us target these groups easily, Android groups them as small, normal, large, and x-large.

Density of pixels determines the clarity of images and UI, and is quantified into numeric values with the unit DPI. DPI was a term used during the days of print design and was initially an abbreviation for “Dots Per Inch”. However, when digital printing machines were introduced, the term “Pixels Per Inch” was introduced. Instead of changing to PPI though, printers and their clients chose to stick with DPI, and by doing so, retained the moniker “DPI”. The DP of ‘Dots Per’ was swapped out for ‘Density Pixel’ thereby creating the new DPI — ‘Density Pixel Per Inch’. Today, DPI and PPI are used interchangeably.

Density Qualifiers

Since there is a huge variety of densities available, Android groups DPIs into density buckets or density qualifiers. Some of the commonly available density buckets are Low Density Per Inch (LDPI), Medium Density Per Inch (MDPI), High Density Per Inch (HDPI), Extra High Density Per Inch (XHDPI), Extra Extra High Density Per Inch (XXHDPI) and others. In the image below, you can see these terms visualised, starting from ldpi to xxxhdpi

Ranges of Densities categorised as Density Buckets/Qualifiers

MDPI is the baseline density.

This simply means that if we take a MDPI device, 1DP is equal to 1px.

Conclusion

Knowing where to use these units of measurements empower designers to produce the perfect design with accurate dimensions and communicate the ideas to developers with clarity. In the end, even the best designs can be impacted by poor resolution.

So the next time your parent or grandparent asks you to read out a message because the font is too small, a) you know what to do b) you know why it’s happening and c) you know that somewhere there once sat a designer who was just too tired of constantly looking for their parents’ spectacles.

We hope this helped shed some light on a small piece of responsive design. In the next article, we will look into how a responsive layout helps in making your UI flow smoothly across devices.