Several weeks ago, I got an email from google. The abstract is that Google search will analyse your website and find how if your website is mobile friendly, fully responsive in other words. And this factor will affect the search result on mobile. For most of old website, it is a hard job to make the whole website mobile friendly. But there are more and more traffic from mobile. So what will you decide to do, change your website fully responsive or lost traffic from mobile? Now let’s start to make our website mobile friendly.

First of all, when the browser open our website, we need to tell it that how to control the page’s diensions and scaling. We add viewport meta tag in the website. This will tell the browser how to show our page in different screen width.

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

Second, if we are using absolute css width in our website, for example, setting width as 680px, it will cause the div to wide for the viewport on a narrower device screen. Therefore, we need to use relative width value, such as 100%.

Third, to make our website to be able to present nicely, we can use @media queries based on viewport size. Here is an example to set a div width as 60% when the viewport screen size width is between 600px to 900px. And when the viewport screen width is between 0 to 599px, set the div width as 100%.

<style>
      @media (min-width: 600px) and (max-width: 900px) {
        div {
          width: 60%;
        }
      }
      @media (max-width: 599px) {
        div {
          width: 100%;
        }
      }
</style>

Or we can use media attribute in the stylesheet link. Here is the example from google developer website:

<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">

The above four statements tell the browser:

• When the browser is between 0px and 640px wide, use max-640px.css
• When the browser is 640px or wider, use min-640px.css
• When the browser height is bigger than the width, use portrait.css
• When the browser width is bigger than the height, use landscape.css

Make Image Responsive with Width and Height Setting

In some website template like WordPress, when you insert a image in the page, the image width and height will be set in the tag. It will fix the image width and height, which makes the image cannot fit the containers size when your website is designed as fully responsive. The solution to make the image responsive is set the max-width as 100% and height as auto in the css. Here is an example:

<img src="timezone-design-in-db.jpg" width="399" height="222" id="res-img">
<style>
#res-img {
    max-width: 100%;
    height: auto;
}
</style>