HTML5 Responsive Web Design

Anurag Sinha  Print 
18 Oct 2018
 
Intermediate
184

In this article, we are going to talk about how to initialize and create a website which 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 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 in 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 in different screens. width=device-width and initial-scale=1.0 equates 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 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 then make the width of the relevant classes to 100%, the background color as black and give 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

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.

Hands-on Learning
+