0

We have an iOS and an Android tailored application. We noticed that on small devices, the UI becomes very large with texts not fitting properly, either truncating or going to another line (this becomes more apparent when accessibility settings are changed from defaults), while on tablets the components stretch out.

I am aware of responsive design and mainly it's the regular mobile size we are going after, however, are there guidelines, set of rules on how to effectively scale the UI for different device resolutions?

I know that for websites you can have e.g. Large, Medium, Small typography sets with defined min max resolutions, meaning the text adapts dynamically depending on the resolution. Is there anything similar for apps?

In general, how to approach different resolution designs without necessarily making separate designs for a very small or large screen device? Or if still needed, what rules to adhere to? Where to stop scaling and how to scale the UI for best viewing?

1 Answer 1

0

If you are aware of the concept of responsive web design, then you'll know that a key to making it work well across different device sizes and resolutions is to make the layout and visual design as simple as possible.

I think the difficulty with scaling typography well across different sizes and resolutions is that you need to make sure that the text scales well with the rest of the content as well so you don't create a jarring experience for the user if they switch from reading the text to viewing an image in the same content block.

In general, if you can make things work in long and narrow screen sizes (typical of mobile devices), and use similar rules to populate wide and shorter screen sizes (typical of larger computer monitor sizes these days) then it should work reasonably well for anything in between.

But the first step is to simplify all the layout and visual design elements so that you have less complexity to work with, and less edge cases to try and iron out.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.