How do you choose the right screen size and resolution for your mobile app prototype? (2023)

Share your insights alongside other invited experts

Scroll to add your perspective to any article section

Earn a Community Top Voice badge

Add to collaborative articles to get recognized for your expertise on your profile. Learn more

Why screen size and resolution matter

Screen size and resolution are two different but related aspects of how your app displays on a device. Screen size is the physical dimension of the screen, measured diagonally in inches. Resolution is the number of pixels that fit on the screen, expressed as width x height. For example, an iPhone 12 has a 6.1-inch screen size and a 2532 x 1170 resolution. Screen size and resolution affect how much content and detail you can fit on your app, how readable and clear your text and images are, and how responsive and fast your app is.

How to choose the right screen size and resolution

There is no one-size-fits-all solution for choosing the right screen size and resolution for your mobile app prototype. You need to consider your app's purpose, audience, and features, as well as the devices and platforms you want to support. A good starting point is to research the most common screen sizes and resolutions for your target market, and use them as a reference for your design. You can use online tools like Screen Sizes or Device Metrics to find out the latest data on device specifications. Alternatively, you can use the default screen sizes and resolutions provided by your prototyping tool or framework, such as Sketch, Figma, or Flutter.

How to test your design on different screen sizes and resolutions

Once you have chosen a screen size and resolution for your mobile app prototype, you need to test how it looks and works on different devices. You can use simulators, emulators, or real devices to check your design for consistency, usability, and performance. Simulators and emulators are software applications that mimic the behavior and appearance of a device on your computer. They are convenient and fast, but they may not reflect the exact conditions and limitations of a real device. Real devices are physical devices that you can use to test your app in a realistic environment. They are more accurate and reliable, but they may be costly and time-consuming to acquire and maintain.

How to adapt your design for different screen sizes and resolutions

Testing your design on different screen sizes and resolutions can reveal potential issues or opportunities for improvement. You may need to adjust the layout, typography, images, icons, buttons, or other elements to make your app more compatible and appealing across devices. To help you adapt your design, you can use responsive design, which allows the app to adjust its layout and content to fit different screen sizes and orientations with flexible grids, media queries, breakpoints, and relative units. Adaptive design works by delivering different layouts and content based on the device's capabilities and features. Lastly, scalable design maintains quality and clarity on different screen resolutions and pixel densities with vector graphics, SVGs, or high-resolution images.

How to optimize your design for performance

You don't want your mobile app prototype to be slow, laggy, or crash on different devices. Screen size and resolution can impact the performance of your app, especially if you use large or complex images, animations, or effects. To optimize your design for performance, reduce the file size of images with compression tools like TinyPNG or ImageOptim. Web formats such as JPEG or PNG are better than native formats like PSD or TIFF. Additionally, you can create sprites or icons with SpritePad or IconFont to combine multiple images into one file and reduce HTTP requests and loading time. Finally, minify code with UglifyJS or CSSNano to remove unnecessary characters and spaces from your code and compress it with Gzip or Brotli before sending it to the browser.

Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

Mobile Design