Achieving Responsive Design

As a web developer myself I always came across this amazing concept known as responsiveness. Basically it means that all your content, everything you have placed in your website must adjust itself when the device and precisely the screen size changes.

Given above is a perfect example of a responsive design. Irrespective of the device the design is modified and this makes it much more good and well designed.

Honestly, I have had a really tough time dealing with this so I thought it's best to share some common tips and tricks and also the method of creating a responsive design.

Points to remember:

1. Always use relative units while defining parameters like height or width.
2. Avoid using pixels or 'px' as unit.
3. Use viewport height or 'vh' as a unit.
4. Use '%' as a unit.
5. Use 'rem' and 'em' as units.
6. Mention max-width property for div and containers.

These were some common points related to precautions that one can take, however these relative units do not ensure the responsiveness. One has to add media queries at the end.

Let me tell you with an example:

The adjacent example is self explanatory, where the condition at which changes in the CSS needs to happen is mentioned in parenthesis as "max-width:768px". Upon passing this condition the statements given inside the block will be applied to the mentioned HTML classes.

This is how a design is created to be responsive, by keeping the screen size at which the changes need to be reflected, in mind.

I hope this information was useful for everybody. :)