Taner Ozturk

What is responsive web design

Responsive web design (often abbreviated to RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience – easy reading and navigation with a minimum of resizing, panning, and scrolling – across a wide range of devices (from desktop computer monitors to mobile phones).

We all have different devices and therefore, so many different resolutions to visualize one website are available. That’s why we need to create a site to “respond” to all devices independently. Let me show you how many steps we need to take to create a responsive website.

Step by step RWD:

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. Main steps to create RWD are:

- Initial Setup
- Flexible Grid and Media
- Media queries

1. Initial Setup:

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

The meta viewport tag tells mobile browsers’ viewport how to behave. With this one you also disallow zooming:

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

2. Flexible Grid and Media:

Flexible (fluid) grids are more carefully designed in terms of proportions. Examples:


body {

font: normal 100% Helvetica, Arial, sans-serif;

}

h1 {

font-family: Georgia, serif;

font-size: <strong>1.5em</strong>; /* 24px / 16px = 1.5em */

}

ul {

font-size: 0.875em; /* 14px / 16px = 0.875em */

}

If we could treat font sizes not as pixels, but as proportions measured against their container, we could do the same with the different elements draped across our grid.

Make images flexible:


img{

max-width: 100%;

}

Make media flexible:


embed,

object{

max-width: 100%;

}

3. Media Queries:

CSS media queries keyed to resolution change.  Most commonly width changes, but they can also be height or other criteria:

Examples:


/* Smaller than standard 960 (devices and browsers) */

@media only screen and (max-width: 959px) {
EVERYTHING SMALLER THAN 960 GOES HERE
}

/* Tablet Portrait size to standard 960 (devices and browsers) */

@media only screen and (min-width: 768px) and (max-width: 959px) {
EVERYTHING SMALLER THAN 768 GOES HERE
}

/* All Mobile Sizes (devices and browser) */

@media only screen and (max-width: 767px) {
EVERYTHING SMALLER THAN 767 GOES HERE
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */

@media only screen and (min-width: 480px) and (max-width: 767px) {
EVERYTHING SMALLER THAN 480 GOES HERE
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */

@media only screen and (max-width: 479px) {
EVERYTHING SMALLER THAN 479 GOES HERE
}

4EJZ85UZXZ6X

Comments

  1. Dubai Web Design

    Good Tutorial with simple and to the point explanation… The sizes for 8 and 9 Inch Tablets are missing I guess… Though they are Chinese but they are really in Demand these days….

  2. WEB DESIGNS

    Share nice information.. thanks for sharing friends

Leave a comment




captcha

Please enter the CAPTCHA text