La técnica de diseño liquido o fluido, plantillas ajustables según dispositivo

"Diseño líquido o fluido" (Responsive Web Design) es la técnica para crear plantillas que automáticamente se ajustan al tamaño de la pantalla en las que están siendo navegadas, utilizando la definición de reglas de medios de destino definidas dentro de las nuevas características del CSS3, ( @media ). 

En el pasado el diseño de la interfaz se basaba en resoluciones aproximadas de 960 pixeles, y esto funcionaba porque un 99% de los usuarios podían adaptarse y leer fácilmente esta resolución, independientemente de la maquina, el navegador, o el sistema operativo que estaban utilizando.  Los tiempos cambiaron y cada vez son más los usuarios que utilizan dispositivos móviles para navegar.  Ante esto las empresas empezaron a diseñar dos aplicativos, para diferentes tipos de dispositivos, una versión full y una versión más liviana para dispositivos móviles que intentaban cubrir todo el contenido de la versión original.    Está técnica tiene ciertas desventajas porque exige un mayor esfuerzo, la sensación de no tener todo en la versión móvil y la creciente diversidad de modelos con una igual cantidad de tamaños.

Se tiene que tener en cuenta que la venta de "smartphones", está despegando y superará muy pronto a la venta de PC (tanto de escritorio como portátiles).  Actualmente basados en las estadísticas de 20 personas que visitan tu sitio web, por lo menos 1 de ellos lo hace por medio de un dispositivo con pantalla de menos de 3 pulgadas.    Esto a disparado el diseño amigable-móvil en el que se crean diseños que se ajustan a cada tamaño de pantalla. 

En respuesta a esto se tiene el Diseño Liquido o Fluido, no tienen un ancho fijo, y permiten que cada navegador lo adapte a su tamaño.  Usando está técnica puedes eliminar la necesidad de crear diseños especiales por cada dispositivo.  Permite con un simple código mostrar el contenido en un ilimitado número de medios. 

La técnica de diseño líquido: 

1El ancho de la plantilla:  Lo más importante es conseguir un ancho flexible,  es el factor que entorpece muchos de los diseños cuando se ven en las pantallas más pequeñas.   Crear contenedores que se extiendan o se recojan en las diferentes resoluciones.  No hay un truco, solo es cambiar la forma de crear las columnas de tu hoja de estilo.  Ejemplo:  

#contenedor {
  width: 80%;
  margin: auto;
  max-width: 1200px;
}

Este es un pequeño ejemplo de diseño con un ancho fluido, es una buena técnica adicionar el max-width, que limitará el máximo ancho permitido, en caso de encontrar pantallas de una resolución demasiado grande.

2Las imágenes : Un tema a tener en cuenta cuando se pasa de ancho fijo a diseño fluido,  son las imagenes en el HTML (los elementos <img>).  Un archivo de imagén, en su mayor parte es un archivo de tamaño fijo que no se redimensiona, esto puede dar errores en la presentaación del diseño con imagenes de gran tamaño que se desbordan por la ventana del navegador, la solución es muy simple, solo debemos adicionar las siguientes líneas en la hoja de estilo:

 img {
   max-width: 100%;
 } 

Presenta inconvenientes en Internet explorer, solución:  Imagenes Fluidas en internet explorer (texto en ingles) 

3Eliminar el zoom en los dispositivos móviles : Los dispositivos celulares o tablas utilizan una función de "zoom" para mostrar sitios web muy grandes, en escala en sus pequeñas pantallas, esto es bueno en la mayoría de casos, pero para nuestra técnica no es funcional.  Adicionando un meta tag "viewport" en el header del documento eliminamos esta funcionalidad:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

Solo debemos deshabilitar esta opción cuando estemos seguros que nuestro diseño se ajusta y permite una navegación adecuada, de otro modo solo vamos a lograr dificultarle las cosas.

4Utilizar CSS Query @media : La característica de "Consulta de medios" en CSS permite aplicar cambios de diseños basados en el tamaño de visualización y capacidad del dispositivo en el que se está mostrando el contenido.    Tiene respaldo en las mayoría de navegadores móviles.

#wrapper {
   width: 80%;
   margin: auto;
   max-width: 1200px;
   min-width: 800px;
}

@media screen and (max-width: 800px) {
   #wrapper {
     width: 90%;
     min-width: 0;
   }
}

Está entrada solo es una introducción al tema, que es bastante amplio.  Algunos ejemplos de estas plantillas:

Para la compra, adaptación  o creación de plantillas que se ajusten a todos los medios puede solicitar ayuda profesional ingresando a nuestro sitio web:

www.creandoweb.co