Solución a los problemas de compatibilidad con HTML5 de IE8 y Firefox 3

Se puede descargar el Js de Google en: http://code.google.com/p/html5shim/

1.- Agregan un condicional HTML para incluir un código JavaScript que sólo interpretarán las versiones anteriores a Internet Explorer 9:

<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 

2.- Obligar a Internet Explorer que muestre las nuevas etiquetas HTML5 como bloques, ya que no las interpreta como tal y ahí reside parte del problema.

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section, main{
    display: block;
} 

Esto deberemos insertarlo al principio de nuestra hoja de estilos.
Con esto nuestro sitio HTML5 se verá perfectamente en todos los navegadores*.


*Probado en Internet Explorer 7 y 8. (falta agregar más datos...)

CSS medidas para diseño web adaptativo

CSS, sugerencia de medidas y notas para diseño web adaptativo (Responsive Design).

Medidas

960px
768px
480px
320px
200px

 

/************************* Base ******************************/
/************************* Ejemplo. 960px ******************************/
/*style.css*/

/************************* Responsive Design ******************************/
/************************* 960px - 1200px ******************************/
@media only screen and (min-width: 960px) and (max-width: 1200px) {
    
}

/************************* 768px - 960px ******************************/
@media only screen and (min-width: 768px) and (max-width: 959px) {
    
}

/************************* 480px - 768px ******************************/
@media only screen and (min-width: 480px) and (max-width: 767px) {
    
}

/************************* 320px - 480px ******************************/
@media only screen and (min-width: 320px) and (max-width: 479px) {
    
}

/************************* 200px - 320px ******************************/
@media only screen and (min-width: 0px) and (max-width: 319px) {
    
} 

Icono

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon" />

<!-- For non-Retina iPhone, iPod Touch, and Android 2.2+ devices: -->
<link rel="apple-touch-icon" href="/img/WMB_57x57.png" />
<!-- For first-generation iPad: -->
<link rel="apple-touch-icon" sizes="72x72" href="/img/WMB_72x72.png" />
<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon" sizes="114x114" href="/img/WMB_114x114.png" />
<!-- No such device exists yet, so if this value is used, it means the sizes attribute is ignored: -->
<link rel="apple-touch-icon" sizes="228x228" href="/img/WMB_228x228.png" />