Explain in detail Responsive web design with example.

169views

written 5.7 years ago by

Responsive Web Design (RWD)

Designing a website for flexibility and adaptability is called Responsive Web Design (RWD).
Responsive web design is the practice of building a website suitable to work on every device and every screen size, no matter how large or small, mobile or desktop.
It is a principal that focuses on optimizing a website so that it is flexible, adaptive and provides superior user experience.
It enhance a websites with best possible viewing experience, smooth content reading and navigation with reduced panning, scrolling and resizing regardless of screen sizes on various devices.
Responsive web design makes your web page look good on all devices. To achieve this it uses only HTML and CSS, RWD is not a program or a JavaScript.

Advantages of RWD:

There are various advantages of choosing a responsive design approach instead of the traditional design approach where different versions are created for different devices.

Developing a responsive website is expensive in the beginning but it eliminates the need to create several versions for mobile and other devices.
This is rewarding in the long term financially and in terms of time spent to manage the website.
Use of mobile devices to access the internet is rising exponentially which implies it is a right approach to design websites with RWD.
Since RWD enhances user experience and the users can easily find the content that they are looking for, the users will not be deviated from the website.

Elements of RWD:

The three main elements in responsive design namely Fluid grid, Flexible media and Media queries are used to design responsive website.

Fluid Grid

Instead of defining the web container with fixed width, the flexible grid takes the percentage approach by defining width in the percentage value.
It is possible to replace pixels with percentage values in the width attribute of the container in CSS. This approach will solve the problem of today’s devices with various screen resolutions.
When a website is viewed on a modern web browser, it interprets the style that is in percentage and renders accordingly.

Flexible Media

The shortcoming of rendering media can be overcome by using a relative unit, percentage in CSS. The media inherits the same properties as the grid layout.
The technique for scaling of the media with its container also achieved by using “max-width: 100%” attribute in the CSS properties of media elements.
It make possible to overcome the scaling of media with respect to its container and also media will not occupy more than the 100% width of the container.
Because of this property videos and images are scaled properly with respect to media containers and devices viewport.

Media Queries

Media Query is a CSS 3 module allowing different media types and features to adapt different styles for individual device viewport, device orientation, and many more.
It consists of different media types, aural, braille, handheld, print, projection, screen, tv.
Media query solve the problem of not being able to define a particular CSS for a particular range of viewport and give way to designing responsive web pages.

Example:

When making responsive web pages, it is necessary to add the <meta> element in all your web pages. This will set the viewport of your page, which will give the browser instructions on how to control the page's dimensions and scaling.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Web Design</title>
<style>
* { box-sizing: border-box;}
.left, .right {
  background-color:violet;
  border-radius:25px;
  border: 2px solid black;
  float:left;
  width:20%;
  padding:15px;
  margin-top:30px;
  text-align:center;
  color:black;
  opacity:0.6;
}
.main {
  float:left;
  width:60%;
  padding:20px;
  color:black;
  font-family: MV Boli;
}

@media only screen and (max-width:670px) {
  /* For mobile phones: */
.left, .main, .right { width:100%;}
}
</style>
</head>

<body style="font-family:Algerian;">
<center>
<div style="background-color:violet;padding:15px;text-align:center;color:black;border-radius:100px;border: 5px solid black;">
<h1>Welcome to the world of Ques10</h1></div>

<div class="left">
<h2>Internet Progrmming</h2>
<p>Information Technology Semester-5</p></div>

<div class="main">
<h2>Explain in detail Responsive web design with example</h2>
<p>This is the Example of Responsive Web Design (RWD) Web Page</p>
</div>

<div class="right">
<h2>Internet Progrmming</h2>
<p>Information Technology Semester-5</p></div>
</center>
</body>
</html>

ADD COMMENT EDIT