There’s nothing more annoying than being on a site and having to scroll left and right just to read the content, it's poor design and turns most users away. You’ve only 10 seconds to grab the user’s attention after all.
Designing for mobile is just as complex as designing for computers; many sites just proportionally decrease the size of items, but why? If you’ve a background image on your laptop, is it really necessary to decrease the size of that on a mobile, eating up data and increasing the loading time? The answer’s no, users want their device to respond to them, whether on a PC or a mobile, landscape or portrait, they want the device to adapt to them and provide them with a good experience. It shouldn’t matter what device is being used, the information should be easy to digest.
So what actually is it?
The simple answer? Having the website respond to the width of the user’s device.
The technical answer? It’s a mixture of flexible grids, layouts and the intelligence of CSS media queries. As the size is decreased from a laptop to a mobile device, the website should automatically adjust to the smaller screen size, all with the help of those queries.
How can I test if my sites responsive?
It’s simple, just shrink your browser and if the elements follow suit by going with you then it’s responsive, if you’ve to scroll to the right because content is cut off, it isn’t.