Lars Kiesow :: Weblog
Jan 24, 2016 - Minimal Responsive Design for Websites

Minimal Responsive Design for Websites

Responsive design for Websites becomes more and more important. Everyone has a smartphone and more and more people actually learn how to use it. One good choice to deal with this is to use Boostrap, the probably most pupolar responsive design framework. This is a sane choice, but it will also pull in a lot of code you probably do not need, increasing your sites file size.

Fiel size might be no problem for multimedia sites serving videos, images etc. but it is to small sites like this one. And it is actually pretty easy to archive a basic support for responsive design without a large framework.

The Goal

What we want to archive it a page that:

The Viewport

The viewport on websizes describes how a page should be rendered by the browser and how it should be fit into the screen. Basically, it describes what a user will see when the page is loaded.

This is the first thing that should be modified when optimizing a page for mobile view. What we want is to tell the browser to render the page to the devices width:

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

The additional initial-scale defines the zoom level when the page is loaded. While you would expect this to be 1 by default, setting this explicitely, will make some mobile browsers also use this setting when the devices orientation changes (e.g. a smartphone is brought into landscape mode).

While this should already do the trick, you can read more about this on this w3schools article.

The Default Font Size

The second thing you want to do is defining the default font size. This is not necessary the font size you later want to use for a mobile device but the one you use by default.

Google recommends using 16px as base font size which I think is a good choice. Remember, these are CSS pixels which actual size is based on device size and density.

They also recommend to increase the line-height, which I think highly depends on the used font-face and which I would not recommend in general. Hence I stick with:

body {
  font-size: 16px;
}

CSS Media Queries

Finally, we now want to increase the font size on mobile devices. For this we can use CSS media queries which lets us add specific CSS rules active only if certain device or browser properties match. In short, we will set a new base font size if we are on a mobile device like a smartphone.

@media only screen and (max-width: 500px) {
  body {
    font-size: 22px;
  }
}

Again, these are CSS pixels and even if your device has a higher screen resolution, this should catch. A carefuly usage would even let you distinguish between different device types. For more details on media queries have a look at this w3schools article

Final Notes

This is basically it. It is not very complicated at all. Still there are some things that might break your mobile view when you are not careful. Here are some things to avoid: