CSS Responsive Web Design

With a wide range of devices being able to access the internet, it is very necessary to make the websites easily operable on all these devices. A website that looks great on the laptop screen should retain its swagger on the mobile phone screen as well.

To serve this purpose, CSS provides a feature called, Responsive Web Design or RWD. RWD uses HTML and CSS for all its implementation and provides a responsive layout for different devices without any JavaScript or external program.

RWD ensures that your web-pages look good irrespective of whether they are being viewed on a tablet, phone, or a desktop screen. Not only the looks, but the ease of use should also be intact for all the platforms. A responsive website is one that doesn’t have to leave out any information and rather adapt to the device screen dimensions and limitations.

Viewport

The visible area of your webpage is generally known as the viewport. The size of the viewport varies from device to device. Obviously, the viewport for a phone will be smaller than that on a laptop screen.

Earlier, when the web-pages had fixed size due to static designing, the browsers used to scale them down as per the screen requirements of the device. This quick fix was, however, not a very strong solution. The rescaled web-pages were very difficult to operate due to obvious reasons.

Viewport Setting and <meta> tag

A method was provided in HTML5 that helped the web designers to take over the viewport settings  using the <meta> tag. The tag instructs the browser as to how it will control the page’s scaling and adjust the dimension.

The content sizing on the view port follows some rules such as:

  • Adjusting the content to avoid as much horizontal scroll as possible
  • Let the content be flexible and not completely rely on a single screen dimensions
  • Avoid specific length values and rather use relative percentage values to make the elements responsive to change in screen size.