Making responsive html

Very often you do not need a separate websites for mobile and desktop viewers. Its is even a bit cumbersome to redirect your clients away from their chosen landing page just because they happened to google it up with mobile device. All you need to do is make your website responsive - meaning it should scale down and rearrange its content depending on window size.

Viewport meta tag

First step (a common beginners obstacle) in starting to use media queries is adding a viewport meta tag in the HEAD part of you HTML. When you visit a website via a mobile browser it will assume that you’re viewing a big desktop experience and that you want to see all of it. So it will zoom out. If you start using media queries you will do the view optimizing and resizing yourself. Mobile browsers auto-guessing overriding your setup is probably not desired. With the viewport meta tag you can stop the browser from guessing and say how it should behave. You can read more about it here (Quick Tip: Don't Forget the Viewport Meta Tag). The most commonly used meta tag is:

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

Media queries

Use media queries in your stylesheet to define the visual differences for viewers with various screen sizes. For example aligning left floated content and sidebar in a straight vertical line for small screen sizes:

.content {
  width: 500px;
  float: left;
}

.sidebar {
  width: 250px;
  float: left;
}

@media all and (max-width: 740px) {
  .content, .sidebar {
    width: auto;
    float: none;
  }
}

Also keep in mind that there is a useful max-device-width property that behaves according to device size not window size. It is especially useful for serving mobile devices with small alternatives to big background images. Using just max-width in media query might result in background being changed if user resizes window.

.content-with-bg {
  background-size: cover;
  background-position: center center;
  background-image: url('very-big-image.jpg');
}

@media all and (max-device-width: 768px) {
  background-image: url('smaller-768px-image.jpg');
}

You can read more about using media queries here (CSS media queries) and here (10 basic tips about responsive design). For examples and inspiration, you can visit this page.

Max-width for images and containers

Very long lines of text are usually not desired as are hard to read. Commonly making a horizontally centered main wrapper, that limits the text to a certain length is defined in css:

.main-wrapper {
  margin: 0 auto;
  width: 960px;
}

The problem is that while it centers the content nicely in browser for bigger than 960px screens, it fails to scale down for smaller window sizes. Fix is very simple and straightforward - use max-width instead of width. Also using max-width:100%; on all content images is a good idea allowing images to scale down if they do not fit too. Remember not to define height of images in code, or your images cannot maintain aspect ratio when scaling down.

.main-wrapper {
  margin: 0 auto;
  max-width: 960px;
}

.main-wrapper img {
  max-width: 100%;
  height: auto;
}

Keep mobile view in mind when coding

When writing code, keep in mind that it is better to make site component responsive than make two different components that are displayed or hidden according to screen size. For example horizontal mobile menu can be made adaptive without making two different menus.

HTML

<div class="mobilefriendly-menu">
  <div class="mobilefriendly-menu-icon">
    <div></div><div></div><div></div>
  </div>

  <ul class="menu">
    <li>
      <a href="#">Home</a>
    </li>
    <li >
      <a href="#">This is a long title</a>
    </li>
    <li >
      <a href="#" >This is a long title too</a>
    </li>
  </ul>
</div>

CSS

.mobilefriendly-menu {
  display: inline;
}

.mobilefriendly-menu-icon {
  display: none;
  width: 20px;
  height: 20px;
  padding: .5em;
  cursor: pointer;
}

.mobilefriendly-menu-icon div {
  height: 4px;
  margin: 2px 0;
  background: black;
}

.mobilefriendly-menu ul.menu {
  display: inline-block;
  margin:0;
  padding:0;
  list-style-type: none;
  text-align: left;
}

.mobilefriendly-menu ul.menu li {
  display: inline;
  margin:0;
  padding:0;
}

.mobilefriendly-menu ul.menu li a {
  text-decoration: none;
  padding: .2em 1em;
  background-color: black;
  color: white;
}

@media screen and (max-width: 768px) {
  .mobilefriendly-menu {
    display: inline-block;
    vertical-align: middle;
  }

  .mobilefriendly-menu-icon {
    display: block
  }

  .mobilefriendly-menu ul.menu {
    position: absolute;
    right:0;
    left:0;
    display: block;
    margin-top: 4px;
  }

  .mobilefriendly-menu ul.menu li a {
    display: block;
    padding: .8em;
  }
}