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

CSS Vendor (browser) Prefixes

CSS vendor prefixes or CSS browser prefixes are a way for browser makers to add support for new CSS features in a sort of testing and experimentation period. Browser prefixes are used to add new features that may not be part of a formal specification and to implement features in a specification that hasn’t been finalized.  It is temporary.

The CSS browser prefixes are:

• Android: -webkit- 
• Chrome: -webkit- 
• Firefox: -moz- 
• Internet Explorer: -ms- 
• iOS: -webkit- 
• Opera: -o- 
• Safari: -webkit-

Example:
Setting a rounded corner on a box:

• -moz-border-radius: 10px 5px;
• -webkit-border-top-left-radius: 10px;
• -webkit-border-top-right-radius: 5px;
• -webkit-border-bottom-right-radius: 10px;
• -webkit-border-bottom-left-radius: 5px;
• border-radius: 10px 5px;

CSS3 Transitions

Transitions are a way to affect how an element looks as it changes from one state to another.

Or you can use JavaScript or a library like jQuery to create them.