Que necesito para adaptar mi Web para móviles

Adaptar tu sitio web puede ser mucho más fácil de lo que crees, solo necesitas algunos trucos de CSS para que tu sitio funcione en cualquier equipo tanto móvil como de escritorio.

Antes de comenzar: valida tu código.

Esta es una buena practica que debes aplicar siempre, si tu código esta validado y utiliza técnicas amigables con equipos móviles ya tienes avanzada más de la mitad del camino, un HTML de mala calidad mostrará resultados impredecibles y perderás tiempo tratando de corregir con CSS errores innecesarios. Si necesitas ayuda para validar tu código puedes usar: webdeveloper tools o mobileToolkit para Chrome o Firefox.

Presentando los Media types: la hoja de estilo correcta para el medio correcto.

Desde hace más de una década, CSS2 usa el atributo “media” que permite definir una hoja de estilos especifica para el medio en que se muestra. Existe un valor especifico para dispositivos móviles: “handheld”. Así por ejemplo este código mostrara una hoja de estilos para PC y otra para equipos móviles:

<!– Hoja de estilos para móvil –>
<link href=”HojaDeEstilosParaMovil.css” rel=”stylesheet” type=”text/css”media=”handheld” />

<!– Hoja de estilos para escritorio–>
<link href=” HojaDeEstilosParaEscritorio.css” rel=”stylesheet” type=”text/css”media=”screen” />

El problema de esta etiqueta es que no todos los navegadores la aplican de la misma manera: algunos leen solamente la hoja de estilos asignada a Handheld, otros solo la de Screen otros ninguna. Además del problema de implementación esta técnica no toma en cuenta el tamaño del equipo, así que no importa que ingreses desde el Nokia monocromático de tu abuelo, un Kindle, un Nexus One o un iPad, si el fabricante los etiqueta como ” handheld” deberás usar la misma hoja de estilos para todos.

Las páginas web de la era móvil deben ser inteligentes y adaptarse al medio en que se desplieguen, ¿pero cómo hacer esto sin tener que lidiar con complejos lenguajes de programación?

MediaQueries al rescate

Afortunadamente CSS3 incluye losMedia Queries, una serie de condiciones y requisitos que nos permiten seleccionar una hoja de estilos especifica según las capacidades especificas de cada dispositivo. Con Media Queries tienes parámetros más inteligentes para mostrar las hojas de estilo como el ancho y alto del navegador o del equipo, la orientación actual de la pantalla (horizontal o vertical) y hasta la resolución.

Utilizando los media queries puedes mostrar diferentes hojas de estilo optimizadas para la pantalla del equipo que te visita, un ejemplo básico que puedes usar es:

<!– Esta hoja de estilos se muestra si tu dispositivo tiene como máximo 480px de ancho. –>
<link href=”css/movil.css” rel=”stylesheet” type=”text/css”media=”handheld, only screen and (max-device-width: 480px)” />

<!– Este otro query solo se muestra en equipos de escritorio en una ventana de al menos 481px de ancho. –>
<link href=”css/escritorio.css” rel=”stylesheet” type=”text/css”media=”screen and (min-width: 481px)” />

Enfocando el contenido con viewport

El valor del viewport es especifico para smartphones y define elementos como el área visible de tu página, la escala y el zoom. Con esta etiqueta podrás ajusstar el tamaño del viewport:

<meta name=”viewport” content=”width=device-width, initial-scale=1″ />

Puedes encontrar más información y una configuración completa de este elemento en nuestro tutorial sobre viewports.

Probando en diferentes dispositivos

Usando estas simples técnicas puedes adaptar tu sitio para móviles sin mayor problema, sin cambiar su html ni usar programación, el layout de este sitio de prueba se adapta automáticamente al dispositivo estos son screenshots del mismo código en 3 diferentes equipos, puedes probarlo tu mismo con los emuladores disponibles en nuestro plugin de desarrollo MobileToolkit.