Maquetación, Programación, responsive web design

Crear una web para movil

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.

Deja un comentario