Entérate de nuestras últimas actualizaciones en Facebook

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 ChromeFirefox.

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:

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

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)

Safari 5 (escritorio)

 

Iphone 4

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.

Acerca de 

Adobe Community Professional e instructor en Video2Brain.com/Lynda.com. Conferencista en diversos eventos en América Latina. 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.

  • http://mnsa77.blogspot.com patriciobvmnsa7

    muchas gracias me ha servido de mucho este articulo

  • Bryan YS

    Genial, me sirvió de mucho (:

  • http://tpbarranquilla.wordpress.com/ Jhonatan Palencia

    Excelente!

  • José

    Muchas gracias por tu información amigo, tengo una duda, hice una prueba en mi nokia 5320 y pierde muchas características de cs3, quería preguntarte si en el caso de los blackberrys con pantalla de 320×240 también ocurre esto.

  • Juan Jose

    Hola me gustaría saber el codigo HTML para colocar en Head antes de body para que acepte la mayoría de los celulares, yo tenía una en mi web y la borre cuando cambie unas cosas y no recuerdo donde o vi. MI web no se ajusta automaticamente es solo para que al menos entran con un celular medianamente viejo puedan vera iguaal o mejor, agradezco ayuda. Juanjo

  • Borja Pombo

    Donde puedo encontrar más información sobre la técnica Bushido? El enlace está roto y no encuentro gran cosa en Google.

  • Eduardo

    Tengo una duda, si estoy trabajando con estilos dentro de la misma hoja html como debo usar el media=”handheld” ?

    Se podría utilizar así: ?

    .body media=”handheld” {

    width: 100%;

    height: auto;

    margin: auto;

    margin-top: 10px;

    }

  • Jesus

    Si quiero que mi página de 1340 x 1500 con un banner superior de 1200 x 300 (de extremo a extremo) se vea correctamente en monitores de menor resolución o en móviles, ¿qué líneas de código de las que propones debería utilizar? Agradezco tu cooperación.