What is responsive web design?
Your website is accessed on a host of hand held devices other than a desktop or a laptop. Each device has a different display size.
The smartphone is 320px and 480px, iPad is 768px and 1068px, and then there is a width, usually taken as greater than 1068px.
Web content is expected to render itself suitably to enhance user experience on each of these devices. Such web content that looks good on all devices is said to be responsive web design. The webpage or the website responds, and automatically adjusts to the screen size.
 |  |
| This website is not responsive | This website is responsive |
Responsive design using CSS
Responsive websites use CSS (Cascading Style Sheets) to automatically resize – enlarge, shrink or hide sections to look good on devices of all sizes.
You can modify the CSS to accommodate varying screen sizes. Use a meta-tag called “viewport” in the HTML file to give instructions to the browser on how to control the page’s dimensions and scaling.
Similarly, you can use controls for images as well as text size to make the websites responsive.
For images, use width=100% and max-width=100% depending on the exact requirements.
For making the text size responsive, set the text size with a “vw” unit, which means the “viewport width”.
Does web browser make a difference?
It is worthwhile to point here that there are different web browsers, and websites render differently in each web browser too. The most common web browsers in use are:
- Google Chrome
- Mozilla Firefox
- Apple Safari
- Opera
- Microsoft Edge
With web technology constantly changing and evolving, it becomes necessary to check-up on the responsiveness of your website design at least quarterly. This gives you an opportunity to identify if there are any responsive issues with your website and make necessary modifications.
Responsive design checking
There are hundreds of different display sizes. Add to it, screen rotation, and browser compatibility, you will have thousands of combinations to check the responsiveness of your website. No one will have access to so many devices to check their the website’s responsiveness on each of these.
Even if you do have all these devices, checking thousands of combinations, requires a lot of time and patience. So, how do you check if your website is responsive? You can use these online tools to check responsiveness, and here are a few good ones.
You can use any of these web tools to check responsive web design on a host of screen sizes. Notable among these is Design Modo, which even offers to check custom screen sizes. Give it a try.
As a business owner, you don’t need an in-depth knowledge of how responsive websites are made, or how websites are made responsive. This is best handled by your website builder and developer. You, as a business owner or a website owner, only need to worry about the end-result. Is my website responsive? Since web browsers are constantly updated from time to time, to ensure that your visitors always get to see a responsive website, check for responsiveness at least once a month. Stay responsive!