Open In App

Short note on Responsive Web Design

Responsive Web Design comprises two words i.e., responsive and web design. Responsive means to respond and web design means to design website. Therefore, responsive web design generally means website that respond to or resize or adjust itself depending upon screen size it is being seen through. It automatically adjusts to fit user’s screen whether it’s desktop, laptop, mobile, tablet, etc. It only uses one layout for web page and it can be done either using CSS and HTML or CSS3 and HTML5.  

When to use it?  

Responsive web design is a way by which website that contain flexible layout that automatically scale its content and elements according to screen size on which it is viewed. It simply resizes, shrink, enlarge, hide web pages so that it can look better on all type of devices and does not have to zoom and pan to see any content on website. But still some people get confused in deciding when to use responsive web design. Below given are some points to clear this confusion:  



How to check whether the Website is Responsive?  

One should know that not all Websites are responsive. Non-responsive websites display perfectly on desktop, laptop but not on mobile or tablets. Below are some steps given that one can follow to determine whether website is responsive or not.  



Step 1: Go to Google Chrome and Open it.

Step 2: Go to website that you want to check for responsive design.

Step 3: Press Ctrl + Shift + I. This will open Chrome DevTools. These are web developer and debugging tools built into browser and help one to edit page and identify problem easily.

Step 4: Press Ctrl + Shift + M. This will toggle device toolbar i.e.; toolbar will appear at top of page and enable one to see appearance of website on mobile device.

Step 5: View website from mobile, tablet perspective.

Conclusion: If the website view fits according to screen size, everything looks clear and crisp, images and text are clear, etc., then one can say that website is responsive. All images, fonts, and HTML elements will be scaled properly, and fit whatever screen size is.  

Article Tags :