0
5.3kviews
Explain in detail Responsive web design with example.
1 Answer
0
170views

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>
Please log in to add an answer.