HTML5 Responsive Web Design

25 aug. 2022
Intermediate
8,57K Views
7 min read  

In this article, we are going to talk about how to initialize and create a website that is responsive in nature. The literal meaning of responsive is reacting quickly in an appropriate manner. We can think of responsive web design in the literal meaning terms. Well, when we resize a website nowadays, we see that the alignment doesn’t break and the page’s proportions are set as per the resized window. This is nothing but the responsiveness of a website. Let’s see an example: Wikipedia in full-page mode; looks damn good.

Let’s resize the window and then see how the website reacts, is it responsive or not :

We can see from the above image that yes the website is responsive, when we resize the browser window; the website’s alignments do not break and look out of the way. Responsive web design also applies to mobile devices, like tablets, phones. Mobile devices come in various screen sizes and a website should look beautiful and proportionate on all those screens. Hence responsiveness of a website is the need of the hour nowadays. Let’s see how we can create a responsive web page :

Set up the viewport

We need to set the meta tag to respond to various screen sizes.

<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0" />

viewport meta tag decides how a web page should look on different screens. width=device-width and initial-scale=1.0 equate the width of the viewport to the width of the device and an initial zoom to 1.0. Let’s see an example :

 <!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0" /> 
 <title>HTML Responsive Web Design</title> 
 <link href="wwwroot/css/style.css" rel="stylesheet" /> 
 </head> 
 <body> 
 <img src="wwwroot/2.jpg" width="200" height="200"/> 
 <p> 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
 Excepteur sint occaecat cupidatat non proident, 
 sunt in culpa qui officia deserunt mollit anim id est laborum 
 </p> 
 </body> 
 </html> 

Let’s resize it and voila the page becomes responsive and proportionate.

Setting up the viewport is the first and foremost thing to do to make a page responsive.

Setting up responsive images

Setting up the width to 100% in the style attribute of an image will resize the image as the window is resized. Let’s look at an example :

<!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0"/> 
 <title>HTML Responsive Web Design</title> 
 <link href="wwwroot/css/style.css" rel="stylesheet" /> 
 </head> 
 <body> 
 <img src="wwwroot/images/1.jpg" style="width:100%"/> 
 <p> 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
 Excepteur sint occaecat cupidatat non proident, 
 sunt in culpa qui officia deserunt mollit anim id est laborum 
 </p> 
 </body> 
 </html> 

Let’s see the original display in the browser.

Let’s resize the window and see whether the image does resize or not.

And yes, the image does resize as the window is resized. max-width is a better property to set rather than width because max-width wouldn’t scale the image beyond its original size.

Setting up responsive texts

We can set up the responsiveness of the texts present inside the web page by using the font-size property of the style attribute. Let’s see an example :

HTML Code
 <!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0" /> 
 <title>HTML5 Responsive texts</title> 
 <link href="wwwroot/css/style.css" rel="stylesheet" /> 
 </head> 
 <body> 
 <div style="font-size:10vw;">Website Header</div> 
 <p style="font-size:5vw;">Sub Heading 1</p> 
 <p style="font-size:3vw;">Sub Heading 2</p> 
 </body> 
 </html>

The original display appears as below :

Let’s resize the image and see whether the texts have become responsive or not.

font-size: 10vw means 10% of the viewport width, similarly 5vw refers to 5% of the viewport width.

Setting up media queries

We can use media queries to scope the styles to a specific configuration, applying different styles based on the configurations that match our query. moreover, we can even combine multiple media queries that are capable of testing several features by using semantic operators such as AND and NOT. It includes the features such as width, height, max-width, max-height, device-height, orientation (horizontal/vertical), aspect-ratio, resolution, and so on.

We can use CSS media queries to introduce responsiveness in our web pages. Let’s see an example.

HTML Code
 <!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="utf-8" content="width=device-width, initial-scale=1.0" /> 
 <title>Media Queries</title> 
 <link href="wwwroot/css/style.css" rel="stylesheet" /> 
 </head> 
 <body> 
 <h1>Website</h1> 
 <div class="navigation1"> 
 <p>Box1</p> 
 </div> 
 <div class="navigation2"> 
 <p>Box2</p> 
 </div> 
 <div class="navigation3"> 
 <p>Box3</p> 
 </div> 
 </body> 
 </html> 
CSS Code
 body{ 
 background-color:burlywood 
 } 
 .navigation1 
 { 
 float:left; 
 background-color:blue; 
 color:white; 
 width:20% 
 } 
 .navigation2 { 
 float: left; 
 background-color:chartreuse; 
 color: white; 
 width:60% 
 } 
 .navigation3 { 
 float: left; 
 background-color:gold; 
 color: white; 
 width: 20% 
 } 
 @media only screen and (max-width:500px) { 
 .navigation1,.navigation2, .navigation3 { 
 width: 100%; 
 background-color:black; 
 border:2px solid white 
 } 
 }

The above media query says that when the screen gets resized to 500 px or less than make the width of the relevant classes to 100%, the background color is black and gives them a white border. Let’s see how the page looks in full-fledged browser mode.

Let’s resize the page to less than 500 px and see the result.

Using modern CSS frameworks

Modern CSS frameworks such as Bootstrap, Foundation, Semantic UI, etc are used to create modern responsive websites. They provide separate CSS, JS files to create the websites.

SUMMARY

Responsive Web design is evolving day-by-day and the demand also getting increased immensely. and the web designer creating the layout based on the precision taken for the best suitable user experience and the core is the web responsiveness that we have learned in this article by following the simplest examples.

The HTML and CSS standards are evolving to help Web designers to overcome them. It’s pretty clear that some of the forms of responsive Web design aspects may be used to meet the current challenges, and it’s equally clear that the new standards will continue to evolve over time until the concrete web design solution won't be available.

In this article, we have seen what is a responsive website, what can be done on an initial level to set up responsive web pages. In the next articles, we might learn more extensively about responsive web design.

Share Article
About Author
Anurag Sinha (Author and Full Stack Developer)

He is a Full stack developer, and Author. He has more than 8 years of industry expertise on .NET Core, Web API, jQuery, HTML5. He is passionate about learning and sharing new technical stacks.
Learn to Crack Your Technical Interview

Accept cookies & close this