Table of Contents
The trends in responsive design are going crazy! Every web application built today is responsive to diversified devices to be accessed by the end-users. As you are already here, you must have known the importance of Responsive HTML of a website or application.
We will be working in CSS, not in HTML. The HTML code remains the same, the CSS styles will present the HTML code in different layouts for mobiles, tablets, desktops. This is one of the major reasons to separate content from presentation.
Nowadays, we have got many CSS frameworks to make our website responsive at ease. These frameworks use pure CSS to achieve the required level responsiveness. So, exposure with CSS for responsive design makes it easy to understand any CSS frameworks such as Bootstrap.
Let’s discuss how to make HTML content responsive to CSS styles.
What is Responsive?
A web page design that adapts to different screen sizes is called ‘responsive’. A desktop layout cannot fit smaller screen sizes like mobile or tablets. In the early days, the desktop site as shown in the mobiles, the user has to zoom in, scroll in X and Y direction to read the content on the webpage, which led to poor user experience. This is where a responsive design gives in. The layouts are made to adapt to different screen sizes, making the website attractive and convenient for the user in different devices.
Here well will focus on three areas in responsive design.
- Layouts
- Images
- Text
Media Queries
Media Query is provided by CSS to achieve the concept of responsiveness. This is a way to conditionally apply CSS rules.
The syntax goes like this,
@media (query) {
// css rules
}
@media rule indicates the media query using which different styles can be applied based on media types, screen sizes, orientation.
Media queries can be used to specify certain media types such as screen, speech, print and certain media features such as min-width, max-width, min-height, max-height, orientation and more.
The CSS rules are defined by specifying a media type and media features only if those specified criteria are met with the CSS which was applied.
@media screen and (max-width: 768px) {
.content {
width: 100%;
}
}
The above sample illustrates the element with class content, which will be applied with the style width 100% only when the type is a screen and the browser width is less than or equal to 768px.
To combine more than one media feature the not keyword is used.
@media only screen and (min-width: 480px) and (max-width: 768px) {
.content {
width: 100%;
}
}
This example applies styles to the browser width 480px to 768px.
Separate stylesheets can be used for specific media query like,
<link rel="stylesheet" media="screen and (min-width: 960px)" href="largedevice.css"> <link rel="stylesheet" media="screen and (max-width: 480px)" href="smalldevice.css">
Related: How To Host A Simple Static Website On AWS S3
Viewport
The viewport is the actual area in the rendering surface where the web page is displayed. The width or height constraint specified in the media query refers to the viewport width or height usually on the browser.
To make an HTML page to be responsive, the viewport meta tag has to be included.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This sets the page width to device-width and initial zoom to 1. If the meta tag is not included the mobile or tablet will try to fit the desktop layout but, it might not fit properly.
Breakpoints
Breakpoints in CSS are the places where different styles are applied, specified in the media query. For example, up to 480px styles for mobile devices get applied at the breakpoint. A standard breakpoint cannot be provided for each device. But if you want to know the commonly used breakpoints you can navigate to this link.
Responsive Layout
The most important part of the responsive design is making the page layout align the best according to the screen size. For desktops, contents can be shown in three columns; for tablets two columns and for mobile devices laying out content in one column is preferred for better user experience.
There are different layouts that refer to design patterns such as fluid, column drop, layout shifter, tiny tweaks, off-canvas. To understand these layouts in details you can navigate to this link.
Fixed layout – Fixed width layout remains the same in all devices. The elements are fixed with absolute units such as pixels, inches, centimeters …
Fluid layout – Fluid layout stretches or shrinks with device width. The element’s properties are specified with relative units such as %, em, vw, vh …
Let’s take a look at the example of how media queries conditionally apply CSS styles. Here, the flexbox is used to create a responsive layout at ease.
Mobile-First Strategy
In a mobile-first strategy, a web page layout is created for small devices at first since there won’t be much work just stacking every element vertically. Then progress to medium devices and then to large-screen devices. This makes development easier and faster.
<div class="container">
<div class="section1">Section 1</div>
<div class="section2">Section 2</div>
<div class="section3">Section 3</div>
</div>
.container {
display: flex;
flex-wrap: wrap;
}
.section1, .section2, .section3 {
width: 100%;
height: 215px;
display: flex;
justify-content: center;
align-items: center;
font-size: 22px;
font-weight: 700;
}
.section1 {
background: lightgreen;
}
.section2 {
background: lightblue;
}
.section3 {
background: lightsalmon;
}
For medium devices,
@media only screen and (min-width: 481px) and (max-width: 768px) {
.section1, .section2, .section3 {
width: 50%;
height: 320px;
}
}
For large-screen devices,
@media only screen and (min-width: 769px) {
.section1, .section2, .section3 {
width: 33.3%;
height: 350px;
}
}
Responsive Image
To make an image responsive, set width to 100% and height to auto. This will automatically resize the image based on the browser width.
<img src="micky.jpg" class="image">
.image {
width: 100%;
height: auto;
}
Responsive Text
Responsive text can be achieved by using viewport units such as vw (viewport width), vh (viewport height), vmin, vmax. Viewport units indicate the browser’s viewport, 1vw = 1% of viewport width.
<div class="text"> Angular is a TypeScript-based open-source web application framework… </div>
.text { font-size: 4vw; }
Also Read: How To Convert HTML To PDF Using Node.js?
EndNote
Making an HTML code responsive is no more arduous. With the help of CSS, anyone can fit the content on all the devices just as the native requires a proper understanding of the rendering surface. I hope this tutorial helps you understand the concept of responsive HTML and areas which are indispensable for real-time projects and expertise. Have any questions? Leave it in the comments, we are happy to help.
Don’t forget to subscribe to the weekly newsletter for exclusive updates on web development!
Looking to build a highly responsive web application? Discuss with our technical experts and get your requirements met on the time to market.
