A while back we made a list of ani­mat­ed gifs explain­ing the basic prin­ci­ples of respon­sive web design. The post was extreme­ly pop­u­lar. It turns we were not the only ones who find it dif­fi­cult to explain what makes the web respon­sive. Today we are releas­ing a video, explain­ing few of the prin­ci­ples with some real exam­ples.

As screen sizes become small­er, con­tent starts to take up more ver­ti­cal space and any­thing below will be pushed down, it’s called the flow. That might be tricky to grasp if you are used to design with pix­els and points, but makes total sense when you get used to it.

The can­vas can be a desk­top, mobile screen or any­thing in between. Pix­el den­si­ty can also vary, so we need units that are flex­i­ble and work every­where. That’s where rel­a­tive units like per­cents come in handy. So mak­ing some­thing 50% wide means it will always take half of the screen (or view­port, which is the size of the opened brows­er win­dow).

Break­points allow the lay­out to change at pre­de­fined points, i.e. hav­ing 3 columns on a desk­top, but only 1 col­umn on a mobile device. Most CSS prop­er­ties can be changed from one break­point to anoth­er. Usu­al­ly where you put one depends on the con­tent. If a sen­tence breaks, you might need to add a break­point. But use them with cau­tion — it can get messy quick­ly when it’s dif­fi­cult to under­stand what is influ­enc­ing what.

Some­times it’s great that con­tent takes up the whole width of a screen, like on a mobile device, but hav­ing the same con­tent stretch­ing to the whole width of your TV screen often makes less sense. This is why Min/Max val­ues help. For exam­ple hav­ing width of 100% and Max width of 1000px would mean that con­tent will fill the screen, but don’t go over 1000px.