Innovation Hub
An initiative by Al Bayat Mitwahid in UAE
Course 2
Making an “Memory Stream” app
Create a working app prototype where users can create posts about things that are important to them. You will create functions that let users sign in, write and save posts, and view their saved items.
Unit 2 – Making it work
Lesson 2 – Customizing the mobile version
In this lesson you will make sure your app works on different screen sizes.
So far we have concentrated on using the app on a web browser. Adalo allows you to edit your pages so that they will adapt to different screen sizes, like tablets and phones. You can test how each of your screens will look on tablets and mobiles by clicking the icon next to the name of the screen.
​Test your screens to see how they look on tablet and mobile sizes. You can test your app on a different device by clicking the Share button on the top menu, and sending that link to another device in a message.
You will notice that narrow screens will squash the components together so that the form and the lists can’t be seen clearly. We can fix this issue by rearranging the components on the screens and using the layout functions for components.
For the types of screens we are using, there are three options:
1. You can move the form component to the top and center of the screen, and move the list component underneath the form. This will mean that the two components do not squeeze into each other on a small screen.
2. You can add a button to open a modal screen, and move the form onto that new screen. You can then resize the list component take up all the screen. This means that the list of items can take up the important space on the small screen, and the form will only be visible when needed. Alternatively, you could include the form on the original screen, but make it invisible on mobile screens by toggling the visibility in the Layout settings for the form component.
​
​
​3. If you decide that most of your users will be using mobile devices, you can create new screens using the + button > Add Screen > Blank Mobile First. This setting will create a screen that is the right dimensions for a mobile device and will make sizing easier for mobile. You can copy all your existing components to these new screens.
To change the layout settings of any component, click on a component and find the “Layout” settings tab on the left menu. You can change the component so that it stays a fixed size, or scales with the screen. You usually want to scale the component with the screen, so that it all fits on the visible screen. You can anchor the component to the left, right, or center of the screen. A right anchor is usually best.
​
Test these settings on different devices to make sure that your app is responsive to all screen sizes. There is some more advice from Adalo on this link: https://www.adalo.com/posts/responsive-design-the-key-to-unlocking-multi-device-magic
