Responsive Web Design

_ May 14, 2020_ Sumantra Kundu

What is Responsive Website?

A responsive website changes the layout to offer an experience based on the device being used, especially ideal for mobile viewing.

A mobile responsive website includes design elements such as:

Readable text without requiring zoom
Adequate space for tap targets
No horizontal scrolling

It’s also true that over 60% of searches online now come from a mobile device. 65% of internet traffic in India comes via mobile

What is Responsive Web Design or RWD?

Responsive Web design or RWD is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform, and orientation.

Four Primary Components Of Responsive Web Designs

Viewport
Grid View
Media Queries
Flexible Images

What is The Viewport?

The viewport is the user’s visible area of a web page.

The viewport varies with the device and will be smaller on a mobile phone than on a computer screen.

Setting The Viewport

HTML5 introduced a method to let web designers take control over the viewport, through the tag.

You should include the following viewport element in all your web pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

A viewport element gives the browser instructions on how to control the page’s dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

What is Grid-View?

Many web pages are based on a grid-view, which means that the page is divided into columns:

Using a grid-view is very helpful when designing web pages. It makes it easier to place elements on the page.

A responsive grid-view often has 12 columns, and has a total width of 100%, and will shrink and expand as you resize the browser window.

What is a Media Query?

A media query is a CSS technique introduced in CSS3.

It uses the @media rule to include a block of CSS properties only if a certain condition is true.

We can add a breakpoint where certain parts of the design will behave differently on each side of the breakpoint.

Standard Media Queries for all Devices

/* TABLET LAYOUT (LANDSCAPE/992PX) */
@media only screen and (min-width: 992px) and (max-width: 1279px) {
	…..
}

/* TABLET LAYOUT (PORTRAIT/768PX)  */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	…..
}

/* MOBILE LAYOUT (PORTRAIT/320PX)  */
@media only screen and (max-width: 767px) {
	….
}

/* MOBILE LAYOUT (LANDSCAPE/480PX) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	….
}

Media Queries external CSS files

The CSS media query syntax for calling an external stylesheet is like this:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css">

<link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css">

Flexible Images

The max-width property is set to 100% and the height is set to “auto”, the image will scale down if it has to, but never scale up to be larger than its original size

img {
  max-width: 100%;
  height: auto;
}

HTML5 introduced the picture element, which lets you define more than one image.

The element works similarly to the video and audio elements. You set up different sources, and the first source that fits the preferences is the one being used:

<picture>
<source srcset="smallflower.jpg" media="(max-width: 400px)">
<source srcset="flowers.jpg">
<img src="flowers.jpg" alt="Flowers">
</picture>