Responsive webdesign basics

1. Tell the browser not to scale

By default, smartphone browsers assume that a website will not be responsive, and will therefore display your website completely zoomed out. This is basically never what you want. Therefore, always set the viewport meta tag in the head of your document to tell the browser not to scale.

<meta name="viewport" content="width=device-width, initial-scale=1" />

2. Make sure your whole website is flexible

There is an infinite amount of screen sizes out there. Even for laptop screens, one screen can be twice the size of another. Therefore, it is always important that your website layout is flexible. The easiest way to achieve this is to never use pixels to set the size or position of elements. Instead, you should always use % or VW and VH. Of course, this is easier said than done and there are exceptions to this rule. One thing to keep in mind is that sometimes you need to limit the line length in text, this can be done by setting the max width.