Creating Responsive UI in Cross Platform

This blog will elaborate the means of creating a responsive UI during cross platform app development.. As we know, cross platform or multi-platform applications are developed to reuse code on different platforms.

Adaptive web design involves using framework CSS for a responsive UI design. As the platform varies, it introduces different screen sizes where your developed HTML runs. A mobile device comes in different sizes and one cannot predict all ranges of the device screen size and do the HTML coding accordingly. In such scenarios, in which you don’t know the screen size of device to run on, responsive design comes into picture. The term responsive design itself indicates that HTML will have the same look and feel on all devices, bringing a consistent user experience for all mobile OS platforms.

When developing Cross platform applications, one should take care of the below points while creating an HTML UI for the application. One should also follow the below guidelines while creating CSS classes.

Do not Give Hardcoded Sizes for HTML Elements

Never give hardcoded height and width to any HTML element. Consider a scenario in which you develop an application for a device size of 360×480 pixels. You define CSS with width 360px and deploy it on the same device. However, when you deploy the same application on a device with a different screen size, your HTML element won’t fit on screen and your UX goes for a toss.

Instead, create a CSS class in which you give size in terms of percentage for an HTML element. This class will be manipulated as per the required size of the element on screen. For example, if I create an HTML element that needs to fit to the complete width of the device, I will set the width as 100%, which will runtime calculate 100% of available screen space and will bring the same user experience on all devices.

Have Control on Your Margins

Always try to set margins in percentages instead of pixels. Many times, it collapses the responsive width and height of HTML components and makes the element go out of screen bounds. For example, consider a case in which you create an HTML element with width equaling screen size and with margin of five pixels. This will cause the element to move out of bounds and will add an unnecessary scroll to the UI.

Instead, divide the element space in terms of 100%; set size and margin to sum to 100, so that it will fit on screen.

Make Images Flexible

When images are added onto an HTML UI, try to make them more comfortable with screen size. A hard code sized image can vary the feel on different screen sizes., In such a case, to make the look and feel consistent, give the image a CSS class. This makes it comfortable to fit on screen. The CSS for an image should give the height and width of the image as a percentage. This will make the image more flexible in case of screen size and orientation changes.

Set Font According to Screen Size

Font size in pixels varies when pixel density of the mobile device changes. A font that looks perfect on one screen can look very small other screens with a high pixel density. In such scenarios, set the font size either in EMS. Otherwise, considering a smaller screen size targeted for applications, give the minimum font size in EMS and give the font size in pixels. For example, CSS class for label should be like:

.label class

{min-font-size: 10px; font-size: 9 %;}

Use of Media Queries

Use media queries when you want to have different responses for different screen sizes. Consider an application that runs on tablets and on smartphones and needs a different UI for tabs and phones. In such cases, media queries bring up a great deal of handling UI. Media queries are like writing if/else condition and telling the browser how to render UI on different screen sizes.

For example

@media screen and (max-width 700px)

{

#header

{

Height: 90px; font-size: 15px;

}

}

@media screen and (max-width 400px)

{

#header

{

Height: 50px; font-size: 10px;

}

}

If you would like to learn more about what we offer, write to us with your queries.