Responsive web design principals

• Built on a Fluid Grid
  A website built on a fluid grid will be based on percentages instead of on pixels.
• Responsive Images & Video
  Images should scale depending on the resolution of the screen they are being viewed on.
• Media Queries Define Breakpoints

   
  Media queries in CSS are used to alter the layout at various break-points in the design.
  
  Example:
  

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

  This media query is fairly self-explanatory: 
  if the browser displays this page on a screen (rather than print, etc.),
   and if the width of the screen (not necessarily the viewport) is 480 pixels or less, then load shetland.css.
  

• Non-Essential Content is Removed

  At smaller screen sizes none essential content is hidden to remove clutter and improve the user experience. 
  Be careful when deciding what to remove as all of the core content should still be accessible on smaller screens.
  

• Responsive Navigation

   
  While not every website will require responsive navigation techniques, 
  those with extensive menus would benefit from using various techniques designed for smaller screen resolutions.

more resources:
gallery of responsive design examples
principles
guidelines