How to make my app responsive

Extremely noob question here. I’m not so sure how to make the preview look how it does when i’m developing it. So for example, I’ll have 3 buttons (Login, How to join, Home) and some text at the bottom. It’ll all be centered perfectly and look great on when developing, but when I go into preview mode, the buttons will be in wild places and not where they are on the development version
Is there a ‘perfect’ width I need to make it or am I completely missing something?

I also want it to be compatible with mobile as well as PC so my users can utilize it.

I appreciate any help :slight_smile:

I think it is best to start to get to know the responsiveness engine, and how margins between elements interact on different viewports. I learned a lot watching the video’s below:

Good luck!

Thank you for the help, i’ll take a look at these videos :slight_smile:

I hate responsive design. It is a pain to deal with.

First you should get a set page width and element container width that you are comfortable developing in. I chose a 1200 px page with groups of 1080 px to contain content…both are divisible by 2, 3 and 4 making it so that when creating things I can get an accurate idea of what the width should be if I want 3 of the same object to spread the page, such as repeating groups with 3 columns ( ie: 1080 / 3 = 360 px ). From there I can then manage for the spacers needed etc and adjust the overall width of the element.

You want to maintain consistent margins, not only for design but for making responsive settings a bit easier to manage.

Something you need to get really comfortable with is putting “spacer” groups onto the page to assist with responsiveness. It is not an obvious idea, but putting a group that is set to “collapse height when hidden” and having the group not set to visible on page load ( ie: never visible so always collapse height ) can help with spacing between elements vertically separated. The same is needed when having elements that are visible dependent on options selected, and so your spacer group would have similar conditionals for visibility.

Another thing is putting elements, like buttons into a group and then add groups as spacers between them. The main group is set to max width of 100% width so the buttons don’t get wildly spaced across the page and instead stay within the group width you set. The spacer groups have non-fixed width with minimums of 1% or whatever you choose, so that when the page shrinks the main group can shrink with the spacers shrinking so the buttons come closer together.

There are obviously a lot of control over things, so you decide how you want it to behave and set up the conditionals, width max and minimums on elements to get the behavior you want.

I also design from the beginning with responsiveness in mind. So I make a lot of elements to fit a mobile screen and then expand it out to add things or re-arrange for larger page widths. Other people do it the opposite, design for desktop and scale down. No matter which way you choose, you may find yourself doing both just dependent on the element.

My groups I use in repeating groups are usually built for mobile and I just show more columns on larger page widths. My main page content is set to be for 1080px and I make it responsive to shrink for smaller screens ( especially forms ).

Other times I have to make new content groups for three different page breaks and set conditionals to hide/show the entire content of page based on current page width.

It takes a while to learn, and probably impossible for somebody like me to master, but you can get a handle on things and reduce the headache. The videos will help, as will just playing around and getting ready for long days.

I’m currently going through pages built for desktop and making them mobile responsive…some go quickly, others take an entire 12 hour day.

One suggestion, for forms, get one form with multiple element types ( ie: inputs, repeating groups, drop downs etc. ) to work perfectly and use it as your personal template anytime you create a new form. Same goes for search result pages if you are building a marketplace, so that you can have a very fluid and responsive search result page you can copy and reuse as a template.

Lastly, as I mentioned on my page width and content width choose and stick to a px value that is divisible by 2, 3 and 4. Also, look on google for responsive design ideas and page layout.

5 Likes