Responsive Web Design Best Practices

Responsive Web Design Best Practices: The secret lies in the modern tendency to utilize various devices with different screen sizes for entering the Web. The times when you could enjoy the Internet only at home sitting in front of your PC display passed long ago. Now everybody can put the World Wide Web in a small pocket and take it almost anywhere his or her heart desires.

Make the web design of your solution fully responsive, and it will look flawless for any user. So, if the design of a web app plays well with a laptop, but can’t successfully adjust to a smartphone screen, software developers are likely to be criticized. To avoid such a nuisance, software engineers should spare no effort to make web design as responsive as possible.

The key pieces of advice for making web design responsive:

• Set the viewport

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<meta name=”viewport” content=”width=device-width”>

content=”width=320px”

• Scale the contents to fit a viewport

img src=”img_girl.jpg” style=”max-width:100%; height:auto;”

• Employ media queries

@media (query)

{

/* CSS Rules used when query matches */

}

div.fullWidth

{
width: 100%;
}

• Choose the most appropriate breakpoints

Example for a smaller screen:

/* Smartphones (portrait and landscape) ———– */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

Example for a bigger screen:

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

Read More