Sitios webs para móviles

Los que desarrollamos sitios WEB nos encontramos a menudo con la necesidad de hacer un sitio adaptable tanto para equipos de escritorio (desktop o laptops) y que también pueda usarse en dispositivos móviles como celulares y tablets (Apple Ipad, Motorola Xoom, Samsung Galaxy Tab y otros).  Lastimosamente no siempre usar los estándares brindará el mejor resultado, ya que muchos dispositivos no logran interpretarlos correctamente, de esto me di cuenta esta semana ya que creía que con solo programar WEB SEMÁNTICA era suficiente y al probar mi web en una BLACKBERRY esta la interpretaba no en versión para móviles sino como una página web normal y requería hacer acercamientos (zoom) y desplazamientos para poder leerla.

Pantallazo de la página en el pc

Pantallazo de la página en el pc

Pantallazo de la página en el celular

Pantallazo de la página en el celular

SOLUCIÓN #1, SOLUCIÓN ESTÁNDAR: UN ESTILO VISUAL PARA CADA DISPOSITIVO

Además de programar WEB SEMÁNTICA debemos especificar para que tipo de dispositivo es cada plantilla de estilos, siendo “screen” los estilos especificados para computadores, “handheld” para dispositivos de mano y hay muchos otros dispositivos: http://www.w3.org/TR/CSS2/media.html

<link href='/css/benkos-screen.css' rel='stylesheet' type='text/css' media='screen'>
<link href='/css/benkos-handheld.css' rel='stylesheet' type='text/css' media='handheld'>

Sin embargo esto no funciona siempre, por ejemplo el navegador de la BLACKBERRY se identifica como “screen” y no como “handheld”, y no encontré en Internet una solución, los siguientes puntos explican como sortear el problema.

SOLUCIÓN #2, SOLUCIÓN POPULAR: CREAR UN SITIO PARA CADA TIPO DE DISPOSITIVO

Esto requiere de una página muy básica que permita preguntar o autodetectar que dispositivo usa el visitante y llevarlo a la página específica para este; esto lo vemos cuando navegamos a Google desde un celular y este nos redirige de http://www.google.com a http://m.google.com

SOLUCIÓN #3, MI SOLUCIÓN: FORZAR LA APLICACIÓN DEL ESTILO CORRECTO

Primero que todo, debemos incluir una etiqueta para que la página no aparezca como una miniatura, sino que busque ajustarse en la pantalla actual; en este momento es que programar WEB SEMÁNTICA va a ser importante.

<meta name="viewport" content="width=device-width" />

Al agregar la línea se mejora la apariencia de la página, ya parece un diseño para móviles

Ajuste de página

Ajuste de página

Luego tenemos dos opciones para forzar una plantilla de estilos, la primera es en javascript muy básico el cual puede correr en la mayoría de celulares, pero hace que nuestra página no pase el validador de la W3C:

<script type="text/javascript" >
	var plataforma = navigator.platform;
	var dispositivo = (plataforma == "Win32" || plataforma == "Win64" || plataforma == "MacPPC" || plataforma == "MacIntel" || plataforma == "X11" || plataforma == "Linux i686") ? "screen" : "handheld";
	document.write("<link href='/benkos/css/benkos-" + dispositivo + ".css' rel='stylesheet' type='text/css' media='screen, handheld'></link>");
</script>

La segunda opción es en PHP y funciona de la misma forma que la solución de javascript con la ventaja que nuestra página si pasará el validador de la W3C

<?php
	$plataforma = $_SERVER["HTTP_USER_AGENT"];
	$dispositivo = (strpos($plataforma, 'Windows') || strpos($plataforma, 'Linux') || strpos($plataforma, 'Macintosh')) ? 'screen' : 'handheld';
	echo "<link href='/benkos/css/benkos-$dispositivo.css' rel='stylesheet' type='text/css' media='screen, handheld'></link>\n";
?>
El resultado ya es el esperado y tiene diseño css

El resultado ya es el esperado y tiene diseño css

El resultado ya es el esperado y tiene diseño css

El resultado ya es el esperado y tiene diseño css

El resultado ya es el esperado y tiene diseño css

El resultado ya es el esperado y tiene diseño css

En las dos opciones verán que en media se utilizan los dos tipos de dispositivos para asegurarnos que siempre se muestre el contenido como queremos sin importar como se identifique el celular a si mismos (como la BLACKBERRY). Mientras que para tablets podríamos aplicar la plantilla original ya que se aprovecharía mejor el tamaño de la pantalla:

Pantallazo desde una tablet

Pantallazo desde una tablet

Espero que le sea de ayuda a todos

Anuncios