Como hacer un sitio web compatible con celulares y otros dispositivos móviles

Lograr que las páginas web se vean correctamente en todos los navegadores de teléfonos y otros equipos portables como tabletas y eBooks. Códigos y scripts para identificar el navegador del usuario y cargar el estilo CSS que permita mostrar una página web correctamente.

Debido al auge actual del uso de móviles y dispositivos portables para acceder a internet y su inevitable crecimiento, es necesario para los desarrolladores y todos los que publican artículos en internet, buscar alternativas para lograr que las páginas web creadas se muestren correctamente en cualquiera de estos medios y por supuesto también en las computadoras de escritorio y Laptops.
Cada vez son más los que acceden a nuestros sitios utilizando sofisticados dispositivos, que soportan las últimas especificaciones de HTML, CSS y Javascript, su gran limitación es lo reducido de su pantalla que en algunos casos puede ser de solo 320 pixeles.
Ya que es tan reciente este auge, la gran mayoría de los CMS, es decir software en la red que permiten crear páginas web, ninguno de ellos está debidamente actualizado para lograr que las páginas generadas sean compatibles con los dispositivos móviles.
El gran problema al que nos enfrentamos todos, no es solo el de crear nuevo contenido que sea compatible, sino también el de adaptar páginas creadas con anterioridad y que no se muestran debidamente en estos dispositivos.
Estas páginas sin una acción inmediata, perderán cada día más visitantes en la medida que aumente la proporción de tráfico desde móviles.
Quizás no sea necesario adaptar todas, pero si las más demandadas en cada caso.
Existen varias opciones o alternativas para lograrlo, en esta página encontrarás varias de ellas, escoge la que se adecue a tu situación.

Tipos de dispositivos móviles usados para acceder a internet, diferencias

Existen varias formas de diferenciar los dispositivos portables, pero para los que publicamos contenido en la actualidad, la más conveniente puede ser separarlos por los recursos de que disponen, de esa forma podemos diferenciarlos en solo dos grandes grupos:

Teléfonos celulares tradicionales que permiten el acceso a la red pero con recursos limitados. Todos estos medios por lo general tienen las siguientes limitaciones:
• Solo son compatibles con paginas hechas en: cHTML (iMode), WML y WAP.
• No admiten o son capaces de leer los script, por lo que de emplearse Javascript se bloquearían.
• No admiten tablas.
• Necesitan de páginas que usen la codificación UTF-8

Dispositivos portables como los Smartphone o tabletas modernas que disponen de un especie de escritorio, con una funcionalidad bastante similar a los navegadores de escritorio.
Ejemplos son los iDevice (iPhone, iTouch, iPad), Windows Phone 7, Blackberry, los que utilizan Android y todas las TabletPC y lectores de eBook.
Todos ellos:
• Por lo general admiten HTML 5 en menor o menor grado.
• Admiten perfectamente Javascript.
Por suerte están incluidos la mayoría de los dispositivos modernos y representan el grueso de la navegación con móviles en internet actualmente.

Para conocer la medida y resolución de las pantallas de los teléfonos y tabletas más empleados actualmente, mira las tablas en la siguiente página de nuestro sitio: Medidas de la pantalla y resolución de los teléfonos celulares y tabletas

Opciones y alternativas para que se vean correctamente las paginas en móviles y en navegadores de escritorio

➔ Crear versiones de páginas optimizadas para celulares, detectar y dirigir estos dispositivos a ellas.

---

➔ Crear versiones de páginas optimizadas para celulares y solo colocar un link en la parte superior de las páginas normales, para que el usuario manualmente las cargue.

---

➔ Seguir utilizando las mismas páginas estándar pero utilizar un script que detecte los móviles y en ese caso carguen un estilo especifico solo para ellos.

---

➔ Utilizar páginas optimizadas para celulares pero utilizar un script para que los navegadores estándar de escritorio usen un estilo apropiado para ellos.

---

➔ Por último el método que recomienda Google, usar Responsive web design. Algo en español como "diseño web responsable o adaptable".
Responsive web design no es más que servir a todo tipo de dispositivos, la misma página o sea el mismo contenido HTML, pero utilizar CSS3 para definir la forma en que se representa, de acuerdo al tamaño de su pantalla.
Para eso se pueden emplear los comandos CSS: "@media handheld" y "@media screen".

Ejemplos del uso de @media handheld

En el siguiente ejemplo, de forma predeterminada el navegador cargará el archivo de estilo normal.css, si es un dispositivo portable el que carga la página, entonces leerá el estilo inline, que modificará el ancho y tamaño de la fuente especificado en el archivo anterior

<link rel="stylesheet" media="screen" type="text/css" href="normal.css" /> <style type="text/css"> @media handheld body{width:98%;font-family:Verdana;font-size:16px;} </style>

Usar el comando @media screen

@media screen es algo parecido, la diferencia es que se aplica un estilo determinado solo cuando cambia el tamaño de la pantalla del dispositivo.
En el siguiente ejemplo, se usa para cambiar el tamaño de la fuente de la página y ocultar la barra lateral, se activa cuando el ancho del navegador es inferior a 800px.
Se puede probar en esta misma página, reduciendo el ancho de la ventana del navegador, incluso con un navegador de escritorio como Google Chrome.
@media screen and (min-width:300px) and (max-width:800px) { body{font-size:0.8em;} sidebar{display:none;} }

Usar CCS3 para disminuir el tamaño de las imágenes

Unas de las reglas fundamentales para lograr una buena experiencia en los dispositivos móviles, es evitar la barra horizontal que incomoda y casi hace imposible el desplazamiento por la página al usuario.
Se puede hacer que las imágenes en una página, se reduzcan de forma automática a la pantalla del dispositivo para evitar que aparezca la barra deslizante horizontal, pruébalo y úsalo de la siguiente forma:
<style> img{max-width:100%;} </style>
Ejemplo práctico del uso de CSS para reducir y encajar las imágenes en una pagina
La siguiente imagen mide exactamente 1000 pixeles de ancho, puedes comprobar reduciendo el ancho de la ventana del navegador, como la imagen se ajusta exactamente, impidiendo que aparezcan las barras de desplazamiento lateral.

Más información en el blog de Googlewebmaster: Diseños adaptables

Consejos para Google
Para lograr que Google identifique correctamente y comprenda que nuestras páginas usan el diseño adaptable, es necesario comprobar que no bloqueamos en el archivo robots.txt, el directorio de los archivos de estilos CSS.
Lee más información: Como crear un archivo robots.txt para un sitio web

Como detectar los dispositivos móviles con los que se accede a un sitio web

Lógicamente no se puede usar Javascript para este fin, porque gran parte de estos dispositivos no admite este lenguaje, la solución puede ser lenguajes de servidor como PHP, para detectar los dispositivos por su agente de usuario o utilizar Javascript en el código HTML a sabiendas que gran parte de los teléfonos más antiguos no podrán acceder a dicha página.

---

Script para detectar dispositivos móviles y redirigirlos a un directorio

➔ El siguiente script en lenguaje PHP, insertado al comienzo de una página index.php, re-direccionará a los dispositivos móviles cuyos agentes de usuario se especifiquen, a un directorio llamado en este ejemplo mobile, que contiene las versiones optimizadas para estos dispositivos.
En este ejemplo se especifican solo tres agentes de usuario (iphone, ipad y kindle), pero se pueden usar varios.
Los navegadores estándar continuaran leyéndo el resto de la página original.
La gran desventaja de su uso es la gran cantidad de dispositivos con agentes de usuarios diferentes, que incluso crece más cada día que pasa. Además se necesitarían versiones duplicadas de cada página.

<?php $navigator_user_agent = (isset($_SERVER['HTTP_USER_AGENT'])) ? strtolower($_SERVER['HTTP_USER_AGENT']):''; if( stristr($navigator_user_agent, "iphone")or stristr($navigator_user_agent, "ipad")or stristr($navigator_user_agent, "kindle") ) { header("Location: mobile/index.html"); } ?> <html> Resto del código fuente de la página </html>

Script para detectar dispositivos móviles y servirles un estilo CSS

➔ El siguiente script que se emplea en algunas páginas de este sitio, usa Javascript para servir a los clientes que no usen los navegadores estándar Internet Explorer, Chrome o Firefox, un estilo CSS diferente.

<script type="text/javascript"> //<![CDATA[ if((navigator.userAgent.match(/MSIE/i)) || (navigator.userAgent.match(/Googlebot/i)) || (navigator.userAgent.match(/Chrome/i)) || (navigator.userAgent.match(/Firefox/i))) {""} else { document.write('<style type="text/css" media="screen">#sidebar,#menu{display:none;}#page{width:99%;}#content{width:99%;}</style>');} //]]> </script>

¿Qué hace el script?
Solo escribe el siguiente estilo si no se utilizan los navegadores especificados, que oculta la barra lateral o sidebar y el menú, también ajusta el ancho de la página.

<style type="text/css" media="screen">
#sidebar,#menu{display:none;}
#page{width:99%;}
#content{width:99%;}
</style>

---

Script para detectar navegadores web específicos y servirles un estilo CSS

➔ El siguiente script funciona a la inversa, se usa en páginas creadas para móviles, a los navegadores Internet Explorer, Chrome o Firefox, se les servirá la página con un estilo diferente.

<script type="text/javascript"> //<![CDATA[ if((navigator.userAgent.match(/MSIE/i)) || (navigator.userAgent.match(/Chrome/i)) || (navigator.userAgent.match(/Firefox/i))) { document.write('<style type="text/css" media="screen">#header{font-family:Verdana;font-size:16px;width:90%;}</style>'); } //]]> </script>

Los dos poseen la ventaja que se pueden insertar en páginas existentes y que usan la extensión HTML, permite que dichas páginas se muestren correctamente en los Smartphone y otros dispositivos modernos que asimilan Javascript.

---

Puedes encontrar varios scripts en Javascript o PHP para detectar los navegadores web en:
Javascript Browser detection
PHP Browser detection

Como comprobar cómo se ven las páginas web en dispositivos diferentes

Existen varias opciones para comprobar cómo se ve cualquier página web en un dispositivo portable, ya sea un teléfono celular o una tableta.
Son las siguientes:

• Usar servicios en la red que funciona como simuladores.
• Usar la Vista de diseño adaptable del navegador Firefox.
• Instalar la extensión "User Agent Switcher" en Firefox.
• Usar el navegador Google Chrome con diferentes agentes de usuario.

Usar la Vista de diseño adaptable del navegador Firefox

El navegador Firefox incluye desde la versión 15 en las Herramientas de desarrolladores, una nueva utilidad llamada: "Vista de diseño adaptable".
Permite comprobar cómo se ve la página en que se está navegando, en las pantallas de los más populares dispositivos portables.
En el menú se puede escoger entre las siguientes resoluciones:

320 x 480 - iPhone (3G - 3GS)
360 x 640
768 x 1024 - iPad 1 & 2
800 x 1280 - Nexus 4 Nokia Lumia
980 x 1280 Kindle Fire HD 7
1280 x 600 iPhone 5
1920 x 900 Microsoft Surface

Para abrir la Vista de diseño adaptable usa las teclas Control + Mayus + M.

---

Usar en Firefox la extensión "User Agent Switcher"

User Agent Switcher es una extensión creada por Chris Pederick, permite a Firefox funcionar como un perfecto simulador.
A diferencia de la Vista de diseño adaptable, no se usan diferentes tamaños de pantalla.
Se usa el navegador con distintos agentes de usuarios, es decir se envía la petición al servidor web donde se aloja la página, simulando dispositivos y navegadores diferentes.
Los sitios que entregan el contenido de acuerdo al navegador o al dispositivo (Facebook, Twitter, Google+, etc.), reaccionarán de forma diferente.
Podremos ver una página de la misma forma, que si la cargamos usando un iPhone, iPad, BlackBerry o cualquier otro dispositivo, incluyendo un navegador de escritorio o la araña de un buscador web.

Ejemplos del uso de Firefox con User Agent Switcher

Simular como se muestra una página en un iPad, usando Firefox con User Agent Switcher.


Simular como se muestra una página en un iPhone, usando Firefox con User Agent Switcher.

¿Cómo instalar User Agent Switcher en Firefox?

Instala User Agent Switcher en Firefox desde el siguiente link: addons.mozilla.org.
De forma predeterminada la extensión solo incluye algunos pocos agentes de usuario, por lo que se deberá incluir un archivo XML que es una base de datos con la inmensa mayoría de los dispositivos que se utilizan en la actualidad.
Puedes descargar dicho archivo desde: Techpatterns
En el fututo deberás actualizarlo regularmente para tener disponibles los adentes de usuario de dispositivos nuevos.

---

Usar el navegador Google Chrome con agentes de usuarios diferentes

Si usas Google Chrome puedes configurarlo para cargar páginas utilizando agentes de usuarios diferentes.
Para eso solo es necesario agregarle un modificador en el acceso directo del ejecutable.
En el siguiente ejemplo se indica como configurar un acceso directo de Google Chrome, para ver los sitios web de forma similar que si estuviéramos navegando con un iPad.
Haz lo siguiente:

• Da un clic derecho en el acceso directo a Google Chrome o crea uno nuevo en el Escritorio.
• Abre Propiedades.
• En Destino aparece la ruta a la aplicación:
C:\Users\NombreDeUsuario\AppData\Local\Google\Chrome\Application\chrome.exe
• Al final de ella deja un espacio y pega:
-user-agent="Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10"
• Guarda los cambios.

Lee más información en las siguientes paginas:
Como entrar a Google+ con una conexión de internet lenta
Como cambiar el agente de usuario en el navegador Google Chrome

---

Usar un simulador en la red

En la actualidad varios servicios de internet permiten comprobar cómo se ve una página web específica en distintos dispositivos, solo es necesario introducir la dirección URL y ver el resultado, de acuerdo a las posibilidades que brinde el servicio.
Uno de los servicios más eficientes es Pikock.com
Para probarlo carga en tu navegador: http://www.pikock.com/en/pi-responsive.html
Escoge en el menú de la parte superior el dispositivo que se necesita simular.

Carga en el siguiente vínculo la infografía: Comprobar cómo se ve un sitio web en distintos dispositivos
En ella se puede comprobar como se ve la página principal de nuestro sitio web NorfiPC en los teléfonos IPhone 4 y un Samsung Galaxy S3. También en las tabletas IPad, Amazon Kindle Fire y una Google Nexus 7.

Usar los estilos CSS para que se muestren adecuadamente las páginas en todos los navegadores

Algunos consejos para conseguir que las páginas se muestren correctamente tanto en computadoras de escritorio como en los dispositivos móviles son los siguientes:

• Evitar usar dimensiones absolutas como los pixeles en los elementos principales de las páginas, usar por ciento para acomodarlas en las pantallas pequeñas.

---

• En los iDevice (iPhone, iPad, iTouch) se debe usar el meta-tag "viewport" en el área del HEAD para facilitar el acomodo de las páginas de la siguiente forma:
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes">

---

• En algunas páginas es recomendado ocultar para los móviles la barra lateral, lo que permite ganar espacio, esto se logra utilizando en CSS el atributo display:none.

---

• También se puede ocultar elementos que sobrepasen las dimensiones de las pantallas pequeñas, como imágenes de una forma similar a la anterior. Para eso es necesario agregarles un identificador a dichos elementos, por ejemplo id="imagen1" y a continuación en el CSS destinado a móviles usar: #imagen1(display:none;}

---

• Se recomienda siempre usar imágenes cuyo ancho máximo sea de 280 pixeles, se mostrarán perfectamente en cualquier Smartphone.

Peligro de los scripts de Facebook y Google+

Al usar los scripts en nuestras páginas que escriben los widgets o botones de Facebook y Google+, de forma predeterminada crean un marco de un ancho de 450 pixeles.
Al cargar la página en un Smartphone, se verá la molesta barra de desplazamiento horizontal.
Lee como evitarlo: Como hacer los vínculos para compartir una página en Facebook, Twitter y Google+

Donde comprobar la compatibilidad de una página web con celulares o dispositivos móviles

En Mobiready puedes tener una idea de la compatibilidad de una página con diferentes dispositivos portable, tiene una interface muy amigable, muestra el resultado en una escala y señala todos los errores con una sencilla explicación de cómo corregirlos.

---

También puedes visitar el validador del W3C para móviles en la siguiente dirección: validator.w3.org
Sus resultados pueden resultar desalentadores ya que emplea reglas estrictas para que las paginas se muestren correctamente en los dispositivos portables tradicionales, no se tienen en cuenta las funcionalidades de los Smartphone y tabletas modernas.

---

Para conocer las reglas por las que se rigen estos validadores puedes leer Mobile Web Best Practices (Practicas recomendadas para móviles)

---

El método más fácil para que un sitio web se muestre correctamente

Por ultimo una recomendación.
Si todo lo que se explica en esta página se te hace difícil y complicado, hay otras alternativas para lograr que un sitio o blog de internet se muestre correctamente en el navegador de cualquier dispositivo. Son las aplicaciones web que se encargan de ello.
La mejor opción antes de andar buscando que servicios hacen la tarea y cual es realmente confiable, es acudir a SiteApps.
Es un sitio web recomendado por Google.
El servicio que presta SiteApps de forma gratis es analizar rápidamente un sitio web y recomendar las aplicaciones que se pueden usar para optimizarlo.
El único requisito para utilizar el servicio es estar usando Google Analytics ya que con sus datos se efectúa el análisis.
Entre las aplicaciones recomendadas están las necesarias para el diseño responsable, que aseguran que cualquier página se vea correctamente en un dispositivo portable.
Después de decidirse solo resta insertar el código necesario en las páginas de tu sitio o en la plantilla, en el caso de WordPress.
Lógicamente las aplicaciones que uses son de pago, pero a algunos les dará resultado y les ahorrarán mucho tiempo y esfuerzo.
Accede a SiteApps: http://siteapps.com/

Los anuncios de AdSense y el diseño adaptable

Después de lograr que las páginas de nuestro sitio usen el diseño adaptable para conseguir que se vean correctamente en cualquier dispositivo, si seguimos utilizando los mismos anuncios de AdSense podremos echar a perder todo lo logrado.
Los bloques de anuncio anchos al cargar en un teléfono o tableta, inmediatamente crean las barras horizontales de desplazamiento que enloquecen e incomodan a los usuarios.
Por otra parte si usamos solo bloques de anuncios pequeños, estaremos desperdiciando la ganancia de los anuncios anchos más vistosos.
AdSense ahora permite y facilita usar el diseño adaptable en la publicidad que incluimos en nuestros sitios, para hacernos posible su mantenimiento.

Los anuncios en esta página son adaptables, además cargan de forma asíncrona.
En una computadora o Laptop se muestran preferiblemente los de 728 pixeles de ancho.
En una Tablet medianos de 336 de ancho como máximo.
En un celular solo los de 300 pixeles de ancho.
Lee como hacerlo: Como adaptar los anuncios de AdSense a la pantalla de los móviles

Más información sobre el diseño adaptable

Más información sobre cómo usar el diseño responsable en las páginas web, puedes encontrarla en otra página de este sitio, enfocada específicamente en el iPhone. También conocerás como utilizar en nuestras páginas otras opciones que ofrecen estos dispositivos, como son los mensajes SMS y el GPS: Lograr que las páginas web se vean correctamente en el iPhone y otros celulares

Prueba la herramienta Modern IE Testing de Microsoft para comprobar la compatibilidad de un sitio web con las últimas versiones del navegador Internet Explorer. Adicionalmente indica si se usa diseño responsable y ofrecen consejos útiles. ¿Cómo saber si un sitio es compatible con Internet Explorer?