Creating Responsive UI: Tips and Tricks from a Web Developer

Resources Community Tutorials
1

I began my journey on Roblox, learned Roblox-TS, refuged in Typescript, got into web development, got into SCSS, came back, and here’s what I figured for achieving a responsive UI based on my experience:

  1. Use scale for positioning
  2. Use offset for sizing
  3. For any floating effect (e.g. widget relative to the main frame), make the main frame the parent of your widget, and use offset to position your widget instead
  4. Pay attention to anchor points; your elements are now responsive, but you have to make sure that they know when to move up or right
    – Screen elements: e.g., center <0.5, 0.5>, left middle <0, 0.5>, vice versa, etc.
    – Floating elements are weirder ones: on the left in the middle relative to parent <1, 0.5>, vice versa, etc.
    Some

These are the general bases. Most of the time, they should be fine. However, there are special occasions when you’re meant to divert from it. That’s up to you to decide. Have fun!

8 Likes
2

The sky is blue and the grass is green.

10 Likes
3

The sky is green and the grass is blue.

8 Likes
4

The sky is grass and the blue is green.

4 Likes
5

green, blue.

3 Likes
6

This is very useful but why Using Offset when sizing?, Shouldn’t it be scale too?, i mean, most of the time that worked for me , but let me know

1 Like
7

The matter isn’t whether it fits on the screen or not. Most screens are now somewhere in the range of 720p-1440p, so offset has become less of an issue. Problem with scale now is that they struggle with aspect ratios. Even if you use UIAspectRatio, buttons can be smaller and harder to interact with on mobile than usual sometimes. Scale also causes problems in scrolling frames.

2 Likes