Como crear una versión móvil de tu website solo usando CSS

Aun no te atreves a optimizar tu sitio web para móviles porque crees que eso significa un gran trabajo de programación? Adaptar tu sitio web puede ser mucho mas 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 mas 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 mas 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. Ademas 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 paginas web de la era móvil deben ser inteligentes y adaptarse al medio en que se desplieguen, pero como hacer esto sin tener que lidiar con complejos lenguajes de programación?

MediaQueries al rescate

Afortunadamente CSS3 incluye los Media 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 mas 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 pagina, la escala y el zoom. Con esta etiqueta podras ajusstar el tamano del viewport:

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

Probando en diferentes dispositivos

Usando estas simples tecnicas puedes adaptar tu sitio para moviles sin mayor problema, sin cambiar su html ni usar programacion, el layout de este sitio de prueba se adapta automaticamente al dispositivo estos son screenshots del mismo codigo en 3 diferentes equipos, puedes probarlo tu mismo con los emuladores disponibles en nuestro plugin de desarrollo MobileToolkit.

Safari 5 (escritorio)

Sony Ericsson k750i

Técnicas avanzadas

Los media Queries son muy poderosos y sencillos de usar, sin embargo, segun la complejidad de tu sitio puedes tener problemas con algunos sistemas operativos y (como siempre) problemas de compatibilidad con el infame Internet Explorer.

Es por eso que algunos desarrolladores han creado técnicas avanzadas para mostrar múltiples hojas de estilos en la mayor cantidad de plataformas. Mi favorita personal es la Técnica Bushido, especialmente diseñada y testada para funcionar en equipos Blackberry, Nokia, Windows, iOS y Android entre muchos otros, el principio de la tecnica Bushido es incluir una condicional para internet explorer y una sintaxis a prueba de todo:

Si deseas profundizar mas en este interesante tema y aprender tecnicas mas avanzadas, te recomiendo estos enlaces donde se analiza a profundidad las capacidades de los mediaQueries y el soporte para diferentes equipos y configuraciones

Conclusión

CSS es una herramienta muy poderosa que te permite crear paginas inteligentes que se adapten a la necesidad de los usuarios y todo sin tener que hacer una sola linea de programación.

Desarrollar sitios web para móviles no tiene que ser una odisea imposible, acabas de ver como con la ayuda de elementos sencillos de CSS como los Media Types y Queries, el viewport y un código de buena calidad puedes tener un sitio con mejora progresiva para moviles sin mucho esfuerzo.

También puedes utilizar estas técnicas en conjunto con Mobile Boilerplate o Bootstrap para crear sitios web responsivos en pocos minutos.

Gracias a David Leiva (@leivajd) por sugerir este tema, si quieres que hablemos sobre algún tema de tu interés, no dudes en contactarnos.

Bio
Latest Posts

Carlos Solis

Mobile Developer & Author at Revolucion.mobi

Adobe Community Professional, Blackberry Elite Developer y speaker en diversos eventos en América Latina. Certificado W3C en buenas prácticas móviles, docente universitario y fundador del proyecto revolucion.mobi. Es autor del "Manual del guerrero móvil" y un firme creyente del potencial de los desarrolladores latinoamericanos.