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 of your paragraphs.

3. Add breakpoints

There is a limit to how flexible your layout can be. For example, a three-column layout will look great on many desktop screens will simply not fit on a phone screen. Therefore you should test what the size limit of your specific design is, and from that limit, the layout should change. This can be done with CSS media queries.

To illustrate, the CSS below will create a three-column layout by default, but as soon as the user's screen is smaller than 500px, the layout will change to a single column:

article{
  column-count:3;
}

@media (max-width: 500px) {
  article{
    column-count:1;
  }
}

Many things can be added in this media query. Elements can be hidden on smaller screens, menus switched to dropdown menus, font-sizes can be changed and margins made smaller. You can also add multiple media queries, so that you can optimize for multiple screen sizes. This complicates the CSS quite a but, so usually just two or three media queries should suffice.

Advanced Responsive Design

A Wiki article that goes into more detail on this subject can be found here.