How to adapt text and/or elements size while designing to smaller screens?

Question

I have a layout I made some time ago on Adobe XD (that was just a personal project) and now I wanna put it on Behance. To do so, I need to duplicate/adapt that layout (designed for desktop) to smaller screens, iPad and mobile.

Since I'm not used to design for smaller screens, after I started I've got a doubt: how do I know for example how much I need to decrease both text and UI elements' sizes? To explain better: I have a text with 40px. How should I calculate to properly decrease that size? Is there like a default percentage to reduce from those values? Maybe some visual "default" rules that every design follows?

I always design for Bootstrap, however I'm not sure if I'm thinking the right way.

(I've also posted this on stack overflow, I'm not sure which one is the best suitable to my question).

Thanks for all your thoughts and advices you could tell me. I worked most of time only for desktops, a traditional web designer, and now I'm trying to migrate to UI/UX.

Answer 1

Since you’re using Adobe xD, check out the new responsive resize feature.

If you have a version of your design in HTML5 format (for example if you’ve built it with Bootstrap), then you can use responsive design mode in Firefox to test the layout at various window sizes. It will be helpful to have a large monitor since some mobile devices have extremely high resolution. Also, consider using em or % for font-size instead of px. Em and % are relative, so will scale with screen size.

On iOS, Interface Builder uses a constraint-based layout system to adapt to different screen sizes. Apple advises that iOS apps be designed with a square layout and a set of constraints that lets iOS know how to adapt the layout for different screen sizes and device orientations. Even if you’re not designing for iOS, it is worth reading about the overall concept in the Adaptivity and Layout, Understanding Auto Layout, and Interface Builder workflow articles.

Answer 2

I believe learning to work in physical display size will solve this for you. It's the way everybody should work. Everybody should at least learn it.

The problem is the size of pixels changes across devices. Adding to this issue is OSs and browsers resizing things to try to solve the issue.

A low-density display (top) has physically larger pixels so a smaller button is physically larger:

The high-density display has smaller pixels so a larger button is physically smaller:

The solution is to measure the physical size of things. Instead of measuring things in pixels which are input, measure the physical dimensions of the output. Measure things using inches or millimeters. Use their physical size on the display to define them.

So you define what the output should be in physical size in the design and it's the developer's job to match the physical size. Think about how much this clears things up.

Google's solution for this is to convert everything to pixels with specific physical dimension. Instead of millimeters they use "density-independent pixels" or DPs so that things are still in pixels and make sense without knowing DPs.

They have a great explanation of pixel density and all of this in Material Design: Density and Resolution

Answer 3

According to you, what you made was a landing page.

So generally designing based on breakpoints is your best bet. Breakpoints are the point at which the content of your site will respond to provide the user with the best possible layout to consume the information. So say your initial desktop width was 1440px, and your mobile is now 360px. Those are the breakpoints.

In adapting texts to mobile, there are 2 methods you can use:

1. Set up a modular type scale. A modular type scale is a series of type sizes that relate to each other because they increase by the same ratio. You start with a base font size and multiply it by the selected ratio. This can be done using https://type-scale.com/, https://www.modularscale.com/ or even manually in your design tool of choice.

2. Trust your eye: You can basically just copy over all the content from the desktop artboard to the mobile artboard and resize visually to your discretion. You can then use this new scale on the other mobile artboards.

Personally, I use the two methods. I start with a modular scale (but they usually come in decimal points), I then round up or round down as my eye pleases. Here is a screen shot from a past project I employed this technique:

For this particular project, my h1 was set to 48px on desktop and 40px on mobile.

Note: The ideas presented are not hard and fast rules. I encourage you to experiment and explore.