HTML Responsive Design

Now a days trend of using web applications is moving towards mobile and tablets. Due to this reason the content which may include text, images or both will be screen responsive. Here responsive mean content size and layout of webpage will be adoptive, there will be not the same view on devices of different sizes. Even on the same device there will also different layouts for different orientation.
Orientation is commonly used term in mobile and tablet devices. As the the landscape and portrait orientation have different width and height.

Importance of Responsive Design

Responsive design has many benefits that include the following.

Easy to use.
Clear contents for user.
Proper layout distribution
Visibility of vital objects
Attractive designs
No need of separate mobile apps
Mobile first design.

Mobile First Website

There is a modern concept about web applications relevant to the responsiveness. Mobile first design means the developed design will be adoptive according to the difference devices width and orientation. Now a days this is also demanding skill of web designers that he must be capable of designing mobile first webpages. Mobile first is also becoming trending because today peoples are using mobile devices except of traditional laptop or desktop computers.

How to create responsive design

There are multiple techniques used for creating responsive designs. The fundamental technique is using media queries in CSS. Media queries can be used to define different format and layouts of webpage depending on screen sizes. These media queries are free to define for any size (height and width). Browser will automatically apply style according to device dimensions displaying page.

Example

@media (min-width: 768px) {
    .sidebar-collapse .content-wrapper,
    .sidebar-collapse .right-side,
    .sidebar-collapse .main-footer {
        margin-left: 0
    }
}

HTML Viewport

Viewport is a html meta tag which directs web browser to scale the contents according to the device size. This viewport is placed in the head tag. It is recommended to use viewport for all mobile first web applications.

Example

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

Where name of this meta tag is viewport and contents are set as to scale webpage 100%.

Viewport Font sizes

We can also specify different font/text sizes according to the viewport width. For this purpose vw (viewport widht) unit is used as inline style. This style is prioritized for web browser to apply style. Vw unit is normally used with some/individual elements.

HTML Media Queries

Html media queries are helpful for all kind of responsiveness. These are the directives from CSS code to the browser. These media queries may be a part of separate CSS file or also write in the same page.
Syntax of media query
Media query starts with @media special character. After this keyword we will have to specify screen height and width.

How media query work

Media queries works with screen size accordingly. If we want to test the result/impact of media queries we simply have to resize the web browser the corresponding style will automatically apply with respect to screen dimensions.

Example

<style>

.resDiv {
  width: 60%;
 /* The default width of this div is 60% of entire screen. */
}

/* Media query for different screen width ie 600px: */
@media screen and (max-width: 600px) {
  .resDiv {
    width: 100%;
/* This style will be applied to all devices having screen size 600px or less. And set content size to 100%. */
  }
}
</style>

HTML Responsive Colors

Rather than the font size, formatting and layouts color scheme of entire webpage can also be responsive using media queries. Normally this technique is used for individual elements and to resolve visibility issue of small elements in lower screen resolutions.

Responsive images

In webpage to set the width of images as responsive to screen width can easily achieved. For this purpose we just have to set image width 100%. This can be done using inline style or we can also apply css class to image having width 100% property.

Example

<img style="width:100%;" src="testImage.jpg>

Limit image width in responsive design.

Sometimes smaller size of images are unable to read or understand when we set its property width to 100%. In such situation we can use other CSS property called max-width. We just have to set max-width property to 100%, now this image will scale down to its size with respect to screen size but will not exceed from its orignal width. So that the image quality will not suffer and image will not become blur. This practice is usefull when we are using low quality or less resolution images in our webpage.

Example

<img style="max-width:100%;" src="testImage.jpg>

Show Multiple Responsive Images

The above both discussed methods for displaying responsive images have some pros and cons. There may be images quality and other related issues. To provide a much better user experience HTML also provide facility to show different images on different screen resolutions. These images will be according to screen dimensions therefore can provide much better user experience. To show different images depending on screen resolutions and dimension we use picture element.

Example

<picture>
  <source srcset="smallImage.png" media="(max-width: 800px)">
  <source srcset="largeImage.png" media="(max-width: 1300px)">
  <source srcset="computers.jpg">
</picture>

Responsive Design using Bootstrap

Bootstrap is another easy and convenient way for creating responsive webpage. We use different bootstrap classes for responsive designs. These classes are start from col. Which mean col division.

Example

<div class="col-md-12 col-lg-12 col-xs-12 col-sm-12">
</div>