Creating Responsive UI in Cross Platform | Nitor Infotech
Send me Nitor Infotech's Monthly Blog Newsletter!
×
nitor logo
  • Company
    • About
    • Leadership
    • Partnership
  • Resource Hub
  • Blog
  • Contact
nitor logo
Add more content here...
Artificial intelligence Big Data Blockchain and IoT
Business Intelligence Careers Cloud and DevOps
Digital Transformation Healthcare IT Manufacturing
Mobility Product Modernization Software Engineering
Thought Leadership
Aastha Sinha Abhijeet Shah Abhishek Suranglikar
Abhishek Tanwade Abhishek Tiwari Ajinkya Pathak
Amit Pawade Amol Jadhav Ankita Kulkarni
Antara Datta Anup Manekar Chandra Gosetty
Chandrakiran Parkar Dr. Girish Shinde Gaurav Mishra
Gaurav Rathod Harshali Chandgadkar Kapil Joshi
Madhavi Pawar Marappa Reddy Milan Pansuriya
Minal Doiphode Mohit Agarwal Mohit Borse
Nalini Vijayraghavan Neha Garg Nikhil Kulkarni
Omkar Ingawale Omkar Kulkarni Pranit Gangurde
Prashant Kamble Prashant Kankokar Priya Patole
Rahul Ganorkar Ramireddy Manohar Ravi Agrawal
Robin Pandita Rohini Wwagh Sachin Saini
Sadhana Sharma Sambid Pradhan Sandeep Mali
Sanjeev Fadnavis Saurabh Pimpalkar Sayanti Shrivastava
Shardul Gurjar Shravani Dhavale Shreyash Bhoyar
Shubham Kamble Shubham Muneshwar Shweta Chinchore
Sidhant Naveria Sreenivasulu Reddy Sujay Hamane
Tejbahadur Singh Tushar Sangore Vasishtha Ingale
Veena Metri Vidisha Chirmulay Yogesh Kulkarni
Software Engineering | 30 Dec 2014 |   7 min

Creating Responsive UI in Cross Platform

featured image

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.

Related Topics

Artificial intelligence

Big Data

Blockchain and IoT

Business Intelligence

Careers

Cloud and DevOps

Digital Transformation

Healthcare IT

Manufacturing

Mobility

Product Modernization

Software Engineering

Thought Leadership

<< Previous Blog fav Next Blog >>
author image

Nitor Infotech Blog

Nitor Infotech is a leading software product development firm serving ISVs and enterprise customers globally.

   

You may also like

featured image

A Complete Guide to Monitoring Machine Learning Models: Part 2

In the first part of this series, I introduced you to the monitoring of machine learning models, its types, and real-world examples of each one of those. You can read Read Blog


featured image

Building and Managing AI Frameworks

I’m sure you would concur when I say that reliable AI is well on its way to becoming a vital requirement in today’s business landscape. Its features of fairness, explainability, robustness, data li...
Read Blog


featured image

Top 4 Types of Sentiment Analysis

When you’re analyzing what works for your business and what doesn’t, you deal with two types of data- objective, tangible data that you collate from surveys, feedback, and reviews, and then there’s...
Read Blog


subscribe

Subscribe to our fortnightly newsletter!

We'll keep you in the loop with everything that's trending in the tech world.

Services

    Modern Software Engineering


  • Idea to MVP
  • Quality Engineering
  • Product Engineering
  • Product Modernization
  • Reliability Engineering
  • Product Maintenance

    Enterprise Solution Engineering


  • Idea to MVP
  • Strategy & Consulting
  • Enterprise Architecture & Digital Platforms
  • Solution Engineering
  • Enterprise Cognition Engineering

    Digital Experience Engineering


  • UX Engineering
  • Content Engineering
  • Peer Product Management
  • RaaS
  • Mobility Engineering

    Technology Engineering


  • Cloud Engineering
  • Cognitive Engineering
  • Blockchain Engineering
  • Data Engineering
  • IoT Engineering

    Industries


  • Healthcare
  • Retail
  • Manufacturing
  • BFSI
  • Supply Chain

    Company


  • About
  • Leadership
  • Partnership
  • Contact Us

    Resource Hub


  • White papers
  • Brochures
  • Case studies
  • Datasheet

    Explore More


  • Blog
  • Career
  • Events
  • Press Releases
  • QnA

About


With more than 16 years of experience in handling multiple technology projects across industries, Nitor Infotech has gained strong expertise in areas of technology consulting, solutioning, and product engineering. With a team of 700+ technology experts, we help leading ISVs and Enterprises with modern-day products and top-notch services through our tech-driven approach. Digitization being our key strategy, we digitally assess their operational capabilities in order to achieve our customer's end- goals.

Get in Touch


  • +1 (224) 265-7110
  • marketing@nitorinfotech.com

We are Social 24/7


© 2023 Nitor Infotech All rights reserved

  • Terms of Usage
  • Privacy Policy
  • Cookie Policy
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. Accept Cookie policy