Nowadays, in order to create a web app or a simple web page is fundamental to make it readable in many devices as possible.

When start building a web page is is fundamental to start thinking responsively to make the content readable enough for the user. Start with the “mobile first” approach is a good starting point. There are some rule I try to follow in order to make everything responsive are:

• Use em with margins and paddings.
• Use % with widths and heights.
• Use rem with font sizes.

There are a couple exceptions to this rules that allow the use of px, when using borders for example, since there is something I’d like to keep consistent thru all devices.

One thing I learnt recently and would like to share it with you, is that keep away from the idea that the breakpoints are device specific. That’s not true. Breakpoints are not device specific, breakpoints are layout specific, when the layout breaks is a good time to add a breakpoint or adjust the current one.

The reason behind that logic is because there are a lot of devices out there with different breakpoints and would be almost impossible to cover them all (and that would include smarphones, tablets, smart TVs, monitors, etc.)