Your cart is currently empty!
Responsive design and control alignment at Apphive
Responsive design is an important aspect nowadays to deliver a pleasant user experience, so if you’re working on developing an app, you’ve come to the right place!
In addition, we will see how work with responsive design in Apphive, we will align the containers and buttons to start shaping a useful and attractive app for your users.
What is responsive design?
It is the adaptation of a site’s content to the different interfaces and sizes of different devices, such as smartphones, tablets, computers, etc.
First, you need to open a project or start a new one, visit our blog on how to create your first project in Apphive.
Next, you need to open Apphive on your phone to be able to open the same project and visualize the changes that will be made in real time.
If you don’t have a project yet, Apphive provides you with templates to start developing a new app, as shown in the image.
Once a window is open, on the left side, clicking on “controls” displays a panel to name the elements. It is important to name each one to be able to identify them and not generate confusion.
In this part we will begin to choose a color for the window, and we will be able to visualize the progress in a better way in the phone linked with Apphive.
At this point, since we already have a canvas, we proceed to add containers by dragging them from the “containers” button on the right side.
Automatically a tab will open on the right side, in this part select the “dimensions” section to adjust the size of the element that has just been added to the canvas.
In this tab you will also find other sections that are used to shape and color the container you are working on.
Having already integrated some containers, other types of elements can be added to the canvas, such as fields, text, buttons, etc.
It is important to mention that the dimensions of each element that make up the app will adapt to the size of the interface of the device from which the user is accessing, always respecting the proportions and from any device, whether it is a smartphone, tablet or computer.
Aligning controls
Once the name is assigned to the button, select it and to align it, click on the upper part to choose the position to which you want to move it.
When controls are aligned within a parent container, the other controls are affected by the previously selected movement.
Aligning on a Y-axis
This is another way to align the controls, there are a few ways that can be found by clicking on the bottom left, as shown in the following image.
We recommend that you view these alignments on the phone linked to Apphive in order to have a better appreciation of the design that takes place at each step.
Alignment by spaces
Controls can be aligned using the “space between” property, where elements can be aligned to the container boundary, thus leaving a symmetrical space between each control.
Apphive also allows us to align the controls with the “space around” property, leaving a slight space between the boundaries of the parent container and its controls.
As we could see, the issue of dimensions and responsive design in Apphive does not represent knowing too technical issues, since in a very simple way the elements can be accommodated in order to create the ideal app for your brand, product or service.
Remember that in DevITM we provide you with different digital solutions to enhance your business.
0 Comments