"Translate" mobile app mockup dimensions from desktop to smartphone size?

Question

I'm pretty sure this is a common issue, but I'm not certain if I'll be able to explain myself correctly. So please bear with me.

I'm including a screenshot of a mobile app I'm working on in my Windows 10 PC. For the sake of argument, let's say I created it in MS Paint.

As you can see, in Paint the font is 48pt and the textbox is 580px wide. On the other hand, if I email this "drawing" to my iphone and look at the drawing from the phone, the image looks perfect. I know the picture is resized in the phone.

On the other hand, I sent this same picture to the developer, and the font in the app that he deployed (in my ihpone 7) is too big, but I don't know what size I should tell him. The same thing goes with the other controls. I assume that he uses an iphone plus, while I have a regular iphone. I assume Android will have the same issues.

My question, How do I tell the developer when he asks me about font size and control size? I can't tell him that the font is 48pt because I assume it'll be too big for the iphone.

In other words, how can I "translate" the sizes in my Windows 10 PC to sizes that would fit a smartphone?

The reason I ask is because I sent a developer a mockup of a screen that I created in FireWorks, but the font sizes are way off. So I need to tell him the specific font sizes, but I don't what those sizes are.

Answer 1

If your intention is to always yield the same physical font size on any device then you are approaching mobile design naively, overlooking platform best-practices and possibly entering into legal complications due to failed Accessibility.

It is hard to determine what "too big" means to you. It might be more accurate for you to express that as "the screen is too small" (a factor you have no control over, unless you only allow the app to be used on certain devices).

On iOS consider the Larger Dynamic Type Accessibility feature.

On Android consider that font sizes should be specified in sp and Users can increase or decrease the overall size of fonts. If your app does not reciprocate those system changes then your app is lacklustre (and probably failing Accessibility standards).

Your best bet is to provide some guidance, but do not attempt to provide a single size solution. Do not "test" the implementation of your design based on any and every device yielding exactly the same amount and distribution of content either (you should expect small screen Android devices to need to scroll more to display the same amount of content that would be displayed on a phablet-esque modern phone).

On Android, 48dp is roughly the size of an average (Caucasian) thumb print. That metric can be wisely used as a foundation for design, given most interaction with mobile apps is done using touch. So on mobile, design should focus on "fitting to touch" rather than "fitting to screen". Try to build your design "up" from touchable building blocks, rather than breaking it down from a visual "whole".

This might help for Android: https://angrytools.com/android/pixelcalc/

This might help for iOS: https://uxdesign.cc/how-to-make-the-typography-of-your-ios-app-not-suck-a6de09fb7c41