Comunidad de diseño web y desarrollo en internet online

Layout Sensible en HTML5 con Media Queries y JS

Con el lanzamiento de mi nuevo sitio web, decidí poner en práctica algunas de las técnicas que hasta ahora permanecen un tanto oscuras como lo son los Media Queries y el testeo selectivo de capacidades del navegador.

En este caso específico, explicaré como implementé el Layout Sensible, lo cual se refiere a la capacidad de presentar un diseño diferente dependiendo del dispositivo, o en este caso del tamaño de la pantalla donde es visto el sitio web. Pueden probarlo en mi sitio cambiando el tamaño de la ventana.


Imagen del sitio en resoluciones menores a 768px

Para lograr este efecto estoy usando Media Queries:

Código :

<link href="/css/style.css" rel="stylesheet"  media="only screen and (min-width: 768px)" />
<link href="/css/mobile.css" rel="stylesheet" media="only screen and (max-width: 768px)" />
Como pueden ver, los media queries indican al navegador que si la ventana tiene al menos 768px de ancho, use el style.css pero que si tiene menos de 768px use el mobile.css que es completamente diferente.

Como de costumbre, IE < 9 no acepta media queries, pero tenemos la facilidad de usar un simple condicional IE para hacer que en estos utilice el style.css, ya que no se usan versiones de IE < 9 en ningun dispositivo movil (que yo sepa).

Código :

<!--[if lt IE 9]>
<link href="/css/style.css" rel="stylesheet" />
<![endif]-->
Adicionalmente, para agregar mejor compatibilidad con diferentes navegadores antiguos, podemos usar la librería Modernizr, la cual es muy liviana y efectiva para comprobar que podemos usar alguna característica, combinado con el script yepnope.js para cargar los archivos CSS según el resultado de los tests:

Código :

yepnope({
  test : Modernizr.mq('only screen and (min-width: 768px)'),
  yep  : 'style.css',
  nope : 'mobile.css'
});


De esta forma cubrimos casi todos los escenarios que se puedan presentar. Casi, porque si no hay JavaScript activado, y se usa un navegador muy antiguo que no sea IE, no se cargara ningún estilo. Esto se puede solucionar colocando al inicio un llamado al style.css de la forma común, para que se muestre en dichos navegadores, pero hacer esto implica sobre-escribir todo en el mobile.css, ya que este archivo se cargará en todos los navegadores.

Por último, una nota importante sobre las imágenes. Yo suelo utilizar imágenes con su medida en el tag img, para que el navegador sepa como va a renderizar la imagen antes de que esta se cargue. Aprovechando que el CSS tiene prioridad sobre las medidas de la imagen, es recomendable hacer una regla que redimensione las mismas en pantallas pequeñas:

Código :

body img { max-width: 100%; height: auto; }


Así evitamos scrolls horizontales e imágenes que se salen de la pantalla.

Espero les sirva, y pregunten cualquier cosa.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate