Search Posts

Responsive Web Design for Mobiles and Tablets

Responsive web design (RWD) is a technique or can be stated as an approach to display a particular site in different display devices such as computer monitors, television screens, mobile phone screens, etc.

  • All that contains in a website is all about contents.

  • Contents are the things or the subject that delivers the actual information which is required.

  • Information leads to the birth of technologies and contents are the package of data or information’s embedded together. Contents are just like water, they take the shape of the container they are put into.

Benefits of Responsive Web Design:

  1. Internet usage is getting easier at a wide variety of screen resolutions.
  2. Search engine rankings are factored by the user experiences.
  3. The approach endorsed by Google itself.

Technologies used for Responsive Web Technology:

The two main factors to be followed:

  • Bandwidth:

    High-resolution images are used for greater clarity in the retina display and in desktops. But, in mobile networks, it will consume more bandwidth and increase website loading time. Therefore, you need to replace that high-resolution image with a low-resolution image.

  • Art direction:

    Images deliver a lot of detail will not be so clear in a smaller viewport. So we need an alternative method using CSS or some other technique.

The current technologies are as follows:

  1. An easy and simple way in CSS is present– img { max-width: 100%; height: auto; }

    This will enhance the image to its screen size but will neither save the bandwidth nor the art direction.

  2. Adaptive images: The technique of adaptive images can be used as a server-side technique. This will detect the screen size automatically and resize the images.
  3. HiSRC: HiSRC is a simple JQuery plug-in that checks the user current internet connection.
  4. Srcset attribute: This attribute accepts the image’s source path. It also supports the pixel density descriptors, such as 1x, 1.5x, and 2x.
  5. Media attribute: This attribute is like the @media selector in CSS. It accepts all valid media queries.Example:  <picture>
    <source srcset=”mdn-logo-wide.png” media=”(min-width: 600px)”>
    <img src=”mdn-logo-narrow.png” alt=”MDN”>
    </picture>
  6. Sizes attribute: This attribute accepts the width descriptors (e.g. 80vw). It denotes the proportion of an image to fill the view port.
  7. Type attribute: This attribute accepts the different types of image file formats.Example: <picture><source srcset=”mdn-logo.svg” type=”image/svg+xml”><img src=”mdn-logo.png” alt=”MDN”>

    </picture