Responsive design – Diseño diferente dependiendo del dispositivo css media querie
Se llama diseño sensible a aquellos que se adaptan al distintos dispositivo que visitan el sitio web. Esto lo hace cambiando el tamaño de elementos, su posicion o eliminandolos, haciendo una version reducida mas sencilla.
De esta manera en vez de crear distintas plantillas o webs, hacemos que se adapte a los distintos dispositivos.
Un ejemplo de diseño sensible:
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.
Como crear un hook (posición) en prestashop Google lanza paquete de seguridad de SEO