Responsive Web Design

Responsive design is a style of web design that responds to the user as they arrive at the web page. The design will display the content most effectively with different devices.

Web pages must be flexible and adapt, they must look different depending upon what is displaying them.

Don't crate separate websites for each device, it is only a quick and dirty approach.

Responsive design treats mobile and desktop the same. But the pages that are created may look vastly different, while containing the same content.

CSS media queries were introduced as part of CSS3 and they improved on the idea of media types by looking at the actual physical specifications being sent from the browser to the computer.


 For example, to send a specific style sheet only to iPhones, you would write:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="480-styles.css"> 

This can handle any device that has a width less than 480px.

Small Screen Need the Important Things First