Very simple!!! Enter the URL and select the dimension of the browser you want view. You have the following dimensions available:

• 160x160 Pixels
• 320x320 Pixels
• 640x480 Pixels
• 800x600 Pixels
• 1024x768 Pixels
• 1366x768 Pixels
• 1152x864 Pixels
• 1600x1200 Pixels

Click on the check button. The site will open in a new popup window with the selected resolution so that you can check the readability.

A responsive website has elements that are automatically adjusted based on the width of the browser. Generally the responsiveness is controlled with CSS media queries for the specified width.

Let us take an example that you want to have different font sizes for paragraphs of your site on mobile and desktop. This is has to be defined in the CSS and to be part of the external stylesheet of your site:

Font size 16px on desktop:

p { font-size : 16px;}

Font size 18px on mobile devices having width lesser than 480px:

@media screen and (max-width: 480px) {

p {font-size : 18px;}

}

When user views the content in mobiles typically having width lower than 480px then the CSS query will be triggered. This will overwrite the normal font size of 16px and show the content with the font size of 18px on mobiles.

Responsive sites eliminate the need of having separate mobile site. This ensures the same content can be readable on all devices thus offering the best user experience. Below are some of the benefits of having a responsive site:

• No separate cost and maintenance of a mobile site
• Good user experience
• Better SEO as mobile friendliness is measured as a ranking factor by Google

The content management systems like WordPress offer responsive themes for free as well as for premium. Users can use one of the responsive themes to start building their websites.

But these themes are written by developers and each element is controlled by CSS media queries as explained above. It is not possible for individual users to start a theme from scratch and make it responsive. The best alternate option is to use CSS frameworks which bring the mobile first concept.

Bootstrap and Foundation are two popular frameworks for frontend web design. These frameworks have built-in components that will be aligned automatically based on the browser's width.

You can use the above screen simulator tool to test whether the site is responsive and readable on different dimensions. Since most of the devices are covered within one of these dimensions, this is an easy way to test.

Otherwise you can use Google mobile friendliness test tool to check the site’s adaptability on mobiles.