Essential things to know about screen resolutions and screen sizes
Today, there are a plethora of smart devices for people to choose from. It can be a daunting task for mobile app developers to build the best mobile app that can give best experience on all the devices. It is important for app developers to stay up-to-date with the current screen size and screen resolution when designing a mobile app. An app or site that is mobile optimized enhances the user experience.
There are a variety of devices on both Android and iOS of different screen sizes and pixel density. App developers need to take a lot of care to ensure the UI adapts well for each type of screen. This post provides an overview of screen size and screen resolution that help you build app for different screens.
What does screen size and screen resolution mean?
Screen size and screen resolution are the two important elements that can affect the layout of an app. There are some tools that every app designer must have — to build a user friendly interface. Mobile devices are often rotated to show UI in portrait and landscape orientation. App designers must design for these differences.
When we buy a device, we often see two things — screen size and screen resolution. Screen size is nothing but the physical measurement of the screen in inches, while screen resolution is the number of pixels on screen. For example — iPhone with a 5 inch screen size can have a resolution of 320 X 480 points.
Remember that screens with same sizes may have different resolutions. When developers create mobile friendly pages, they use viewpoints, making the app viewable consistently across multiple devices.
It would be impossible for app developers to design for every single device. Instead, app designers group the styling into typical sizes for tablets and smartphones. You have to work on app UI, considering particular screen sizes and pixel density. In short, it is all about controlling the visual language to suit that particular device. You need to be very clear about the dimensions, which we are going to describe here.
Popular terms used in screen resolution and screen size
Let’s proceed further with a full-fledged explanation of the popular terms used in screen resolution and screen size. The most popular terms you must know about screen resolution are as below –
· Pixels — The single color dots that refers to picture element. One can create innumerable colors and wide range of brightness by enabling and disabling pixels at different intensities. For example — you can form white screen by enabling red, green and blue at the same time.
· DPI — It also known as pixels per inch (PPI) or dots per inch (DPI) that calculates the number of pixels present in single inch of screen. The higher DPI means that the size each pixel should be small, so that it is well adjusted in that particular space.
· Density independent pixels –The unit of measurement in Android device is known as density independent pixel. It is a virtual pixel unit that should be utilized while planning UI layout to define the dimensions or position, regardless of the pixel density.
· Points — These are resolution independent measurement on iPhone. A point can contain multiple pixels, depending on the pixel density of screen. When designing for different types of devices, app designers should consider points, but design in pixels.
How pixels are calculated?
Screen size is usually measured in inches and is the actual size of the device’s screen measured diagonally. Anyone with a tape can measure the screen size. Screen resolution is measured by the number of pixels displayed in each dimension. In order to calculate the pixels per inch, you need to know the screen size as well as the resolution.
The formula to calculate PPI is a bit complicated. You need to take both the digits in screen resolution. Add square of both these digits and take square root of the result. The final number should be divided by the size of the screen.
For example —
if the screen size is 5.8 inches and screen resolution is 1138 X 680
then PPI can be calculated as –1138X 1138 + 680 X 680 = 1757444.
Square root of 1757444 is 1325.69
Now divide the number 5.8 i.e. 1325.69/5.8 = 228.5.
Be familiar with different screen sizes
Screen sizes and resolutions can vary on the same mobile platform. For example — the resolution on HTC is quite different than HTC EVO 4G. The user interface and graphics need to be scalable, if you want the app to have a consistent look and feel on different devices. You should provide alternate bit maps to match the screen to make sure the images appear at their best on different screens.
Besides this, there are different types of screens such as — HD screen and QHD screen. Usually, the resolution of HD screens is 1920 X 1080 pixels, while QHD screens have a resolution of 960 X 540 pixels. For those who want to build new apps, we suggest to focus more on HD screens.
Conclusion
The idea behind considering screen resolution and screen size is to build an app that is visually compatible on any android and iOS device. If you are building an app with one screen in mind, it will spoil the user experience. Poor user experience will hurt the quality of your mobile app, which is something every app developer should avoid.
Be creative with your designs and use auto layout to craft advanced iOS animations. Make sure that the images load flawlessly no matter how the users hold their device. You should ensure that the transition between portrait and landscape is seamless. Besides these, there is a lot to do with app development such as — testing the app, images, features, design elements etc. Make sure that the app is optimized for multiple resolutions and screen sizes.
Hope you are now aware of what exactly screen size and screen resolution is so that you can deliver an optimized user experience.
Disclaimer: This post first appeared at: A quick guide to understand screen sizes and screen resolutions.
