Introduction
Responsible application that works seamlessly with all devices like mobile, tablet, and desktops irrespective of size without breaking look and feel, and information.
Key points to consider while working on Responsive Applications
1. Viewport meta tag
The viewport is the area on the screen that is visible to the user. HTML5 introduced <meta> tag where we can set the viewport, which is suitable for all the devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
This gives information to the browser on how to handle the width and scaling of the page according to the device where the application is loading.
Here, width=device-width adjusts the width of the page
initial-scale=1.0 helps the browser set the scaling and zoom level of the page when the page is first loaded by the browser.
2. Usage of CSS
Use @media queries for all the breakpoints: Write styles for smaller screens first and then for larger screens using @media.
/* When screen size larger than 600px */
@media (min-width: 600px) {
body {
background-color: lightblue;
}
}
/* When screen size smaller than 600px */
@media (max-width: 599px) {
body {
background-color: lightyellow;
}
}
We can specify the range of screen sizes as below:
/* Specific range of screens */
@media (min-width: 600px) and (max-width: 1024px) {
body {
margin: 20px;
}
}
Along with these, we can use ‘orientation: landscape/portrait’ for horizontal/vertical screens.
Also, we can use the required font styles or display/hide specific elements with @media.
/* font styles */
@media (min-width: 600px) {
body {
font-size: 1.2em;
}
}
An
/* display hide and show with @media */
@media (min-width: 600px) {
.Classname {
display:none;
}
}
Grid view: Web pages can be divided into 12 columns and 100% of width. This will help us place the elements on the page easily and responsively.
This is how the grid classes are defined.
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
And in the html file, we can add the following:
<div class="row">
<div class="col-3">Div details goes here</div> <!-- 25% width of total page-->
<div class="col-9">Div details goes here</div> <!-- 75% width of total page-->
</div>
Bootstrap or tailwind CSS: Bootstrap allows coders to create user-friendly and mobile-friendly applications with less effort. It provides pre-designed styles for components, utilities, and grid systems to help achieve responsiveness.
We can include Bootstrap in our coding platform via CDN or by installing it with the npm command.
Bootstrap’s Grid system looks like as below:
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4">Column 1</div>
<div class="col-md-6 col-lg-4">Column 2</div>
<div class="col-md-6 col-lg-4">Column 3</div>
</div>
</div>
Here, the classes work for different breakpoints, as explained below:
- col-sm: For small devices (≥576px)
- col-md: For medium devices (≥768px)
- col-lg: For large devices (≥992px)
- col-xl: For extra-large devices (≥1200px)
Tailwind CSS: This is an open-source CSS framework that provides a list of utility CSS classes directly in HTML files, so it eliminates custom styling. Meanwhile it reduces work for coders as well.
For example
<div class="bg-green-500 text-white mx-auto px-20">
These are tailwind's utility classes
</div>
Here, we have classes bg-green-500, text-white, mx-auto, and px-20, which are CSS style classes that provide predefined styles for the elements that are responsive automatically.
Please refer to tailwind CSS for more details.
Use width and height in %, auto-scaling, use max-width
Let’s take an example snippet below:
<style>
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
.container-box {
width: 100%;
height: auto;
box-sizing: border-box;
}
</style>
In the HTML file, we have a container div.
<div class="container">
<div class="container-box">
This is a responsive div with the example of auto, percentage height, and max-width
</div>
</div>
Here
- Percentage width: The container will adjust 90% of the page. Here, we have not restricted the elements’ width with any scale, so the element would occupy the mentioned percentage.
- Auto: ‘auto’ helps the browser to calculate the width and height based on the content or device's width or height.
- Max-width/max-height: Max-width/max-height helps to restrict an element’s width or height so that the element should not grow beyond the layout.
Use em and rem or percentage for fonts: Use typography such that it would not disturb the fonts in different screen sizes.
em: Here, font size is relative to its immediate parent.
.container {
font-size: 16px; /* font size for the container */
}
.container span {
font-size: 1em; /* Inherits 16px as container class have 16px */
}
rem: here, the font is relative to the root element, which is <html>.
- 1rem = 16px (default root size)
- 1.5rem = 24px
- 0.875rem = 14px
html {
font-size: 12px; /* Set the parent font size */
}
span {
font-size: 2rem; /* 2 x 12px = 24px */
}
Use grid and Flex in CSS: Use Grid when we need 2-dimensional structures such as rows and columns, particularly when we have a complex structure, while flex is used when we have to focus on aligning the elements horizontally or vertically.
.container {
display: grid;
}
.container {
display: flex;
}
3. Accessibility is a complaint
The application should be accessible whether users are using a keyboard, mouse, or touchpad. Screen readers should be able to read the application without any hassle. It ensures seamless user experience, screen adaptability, and efficiency. Please refer accessibility blog for in detail understanding.
Use accessibility testing tools like JAWS, NVDA, Talkback, and Voiceover to confirm. I even traversed the application with a keyboard with a tab, enter, etc. Keys can confirm the application's accessibility.
4. Implement lazy loading to reduce the page load time
Improves speed and optimization. Essential content loading at high speed improves the efficiency of the application; also, it encourages modular design.
We can use angular or react for the front-end development.
5. Test for efficient performance
Proper testing needs to be done on devices. Also, the Chrome browser provides dev tools to test responsiveness on screens of all sizes.
For example, Let’s take an Amazon shopping cart.
Here, as we can see in the screenshot, this is how the application is visible in iPhone 12 Pro. We can see the width and height of the screen as 390 and 844. Also, we can adjust the zoom size. We are able to see the information without any distortion with a great look and feel. We do not see any horizontal scroll bar as well.
Along with the above tips, do not use large fixed-width elements, which would have horizontal scrollbar, affects responsiveness, and do not use large absolute widths in CSS instead use elements with relative width and that’s it.
Also, visit my profile for more information on Accessibility, cross-browser compatibility, and more.
Join the conversation! Your thoughts help the community grow.