Responsive web design

A simple method to make Your site accessible for mobile users is to use RWD.

It's not a big deal with simple sites (like this one) to implement RWD.

I. First step header modification.

Below line should do the trick, it specifies the viewport, and blocks the scalling:

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

II. Preparing the CSS 

From now on, Your CSS should have sections for each resolution range. Ranges can be calculated as You wish, but I use below ones:

/* COMMON STYLE & LARGE SCREENS DEFINITION */

/* MEDIUM SCREENS (I.E. TABLETS) */
@media only screen and (min-width: 768px) and (max-width: 991px) {

}

/* HORIZONTAL SMARTPHONE SCREENS */
@media only screen and (min-width: 480px) and (max-width: 767px) {

}

/* VERTICAL SMARTPHONE SCREENS */
@media only screen and (max-width: 479px) {

}

III. The design

Now it's time to design (or redesign) Your website, to meet the needs of smaller screens. In general it should be light and elements divisible by 320px (the smallest supported resolution).

IV. Tips