Crear una web para movíl
Discriminación CSS
@media screen and (max-width:320px) {
.sidebar { display: none }
}
@media screen and (min-width:1920px) {
body { font-size: 15px }
}
Evitar imagenes para reducir peticiones.
Ejemplo, usar codigo ASCII :
★ Para un estrella llena de rating (★) and ☆ para una estrella vacia (☆)
Crear un enlace hacia un numero de telefono
<a href=»tel:+18005550199″>1-800-555-0199</a>
Viewport Meta Tag
viewport meta tag para que el tamaño de la web se adapte al tamaño del dispositivo:
<meta name=»viewport» content=»width=device-width, initial-scale=1″ />
CSS especial para pantallazas grandes
<link rel=»stylesheet» type=»text/css» href=»style.css» media=»screen, handheld» />
<link rel=»stylesheet» type=»text/css» href=»enhanced.css» media=»screen and (min-width: 40.5em)» />
<!–[if (lt IE 9)&(!IEMobile)]>
<link rel=»stylesheet» type=»text/css» href=»enhanced.css» />
<![endif]–>
Algunos navigadores de moviles no suportan las media queries : Symbian browsers, Blackberry <OS 6.0, Netfront, WP7 pre-Mango, etc
La ausencia de suporte para @media query es una primera media query 🙂
Detectar y redirigir hacia usuario de mobiles
Con javascript
<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "YOUR-MOBILE-SITE.com";
}
//-->
</script>
Con user agent:
<script type="text/javascript">
<!--
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
location.replace("http://YOUR-MOBILE-SITE.com");
}
-->
</script>
El nuevo metodo CSS @media
<link rel="stylesheet" href="screen.css" media="screen"/>
<link rel=»stylesheet» href=»handheld.css» media=»handheld»/>
Utilizando PHP
Pero aqui hay que actualizar una lista largissima de user-agents
<? if (
stristr($ua, "Windows CE") or
stristr($ua, "Mobile") ) {
$DEVICE_TYPE="MOBILE";
}
if (isset($DEVICE_TYPE) and $DEVICE_TYPE=="MOBILE") {
$location='YOUR-MOBILE-SITE.com/index.php';
header ('Location: '.$location);
exit;
}
?>
Si utilizas WordPress, y no quieres crear un theme en Responsible Design, puedes usar un plugin.
Le más comun es: http://wordpress.org/extend/plugins/wordpress-mobile-pack/
Pero igualmente tienes que adpatar tu wordpress al plugin!
WURFL = Wireless Universal Resource FiLe
WURFL es una base de datos universal de la lista completa y actualizada de todos los dispositivos.
Es un formto XML.