• Fast response
• Layout adapting to context
• Elements adapting to context (e.g. images, menu)
• Content: Priority content first; persistent across devices

• Combine and minify CSS and JS files
• Ensure text-based files are gzipped
• Limit use of heavy JavaScript libraries and CSS frameworks
• Use image sprites
• DataURIs for small background images (no extra HTTP request)
• Icon fonts (IcoMoon lets you create your own)
• Compress images (see Google dev docs)
• Set appropriate caching

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

• Extension of media declaration in CSS
• Allows to serve styles according to media properties
• Usage:
     Inside the head tag:
  

  <link rel="stylesheet" type="text/css" href="enhanced.css" media="only all and (min-width: 600px)" />

  Inside a css stylesheet:

  @media only screen and (max-width: 30em)

Fixed	px
Elastic	em
Fluid	%

This is only possible if the container max-width is set in ems - no media queries involved

  

.col {float: left; margin-left: 1.6%}
.col:first-child{margin-left: 0}
.span_3_of_5 { width: 59.36%; }
.group{.clearfix;}

The :nth-child css rule can turn an 8 column row into a 4 column row

.span_1_of_8:nth-child(4n+1) {
clear: both; margin-left: 0;
}