Responsive website designs (RWD) is primarily an approach to create a website or web pages that auto detects the screen size of the web browser on which a visitor is viewing the website and the website itself adapts to the screen size of the visitors’ web browser.

Say for example if the visitor is viewing a website in 19-inch desktop monitor then the website should adapt the size of the monitor. If the visitor is accessing the same website in a mobile phone whose screen size is 5.5-inch, then the website should adapt to the mobile screen size. Also, the same logic applies to laptop monitor size or tablet/iPad screen size.

In a way, there is only one content in the backend. The same content is accessed and then displayed or hidden on the screen. Consequently, the website owner does not need to maintain separate content for desktop, laptop, mobile or tablets. Also, this was done 4-5 years ago when the concept of the responsive website design was not prevalent.

Why should one have responsive website designs?
One of the important keys to responsive website designs is knowing your audience. What browsers and devices the audience use to view your website. How much of your current traffic is desktop or laptop versus tablet and/or mobile? Based on a research, as of 2018, approximately 65 percent of traffic in the US and Canada is now from mobile or tablet devices. Currently, there are around 2.6 billion smartphone users and by 2020 it is estimated to reach over 6 billion. Therefore it is quite evident that mobile designs are essentials.

How to get responsive website designs?
Responsive website designs are achieved by making CSS for different screen sizes. As a result, we define CSS based on mobile screen size, tablet, laptop or desktop screen sizes. For mobiles, the viewport is usually 320 pixels to 480 pixels. For tablets, the viewport is usually 768 pixels. For laptops and desktops, it is usually 960 pixels.