By now almost everybody would be aware of the responsive web designs and how it should behave. Most users or website owners test the responsibility of the sites by simply dragging the browser window to smaller size. Responsive sites are designed to be viewable and usable on varying screen sizes and hence the right way of testing the responsiveness of a website is to view it on devices with varying screen sizes and not by dragging the browser windows.
The idea behind a responsive web design is to let the users enjoy the same experience while visiting a site on different devices, thus improving user access to the site. For mobile devices have a mobile site would have been sufficient but with the introduction of responsive design, mobile websites became a thing of the past.
Breakpoints are predetermined screen dimensions at which the webpage breaks its current layout to suite the new screen size. Here are a few points to keep in mind while defining the breakpoints.
Major breakpoints
Start the design with content to fit the small screens first, then expand until a major break point is required. With this technique the design can be optimized based on the content. Here it is important to keep track of the white space building up as the design is expands, and decide upon a breakpoint when the screen size becomes
Minor breakpoints
Apart from the major breakpoints it is essential to have minor breakpoints. The minor breakpoints are helpful in adjusting to minor changes. With no standard size for mobile devices the website may need small adjustments for displaying a clean site.
Optimizing content
This step is to make sure that the content on each screen size is readable. There is no fixed standard for this, but the bottom line is to make sure the text in the webpage is readable.