Responsive Web Design

Una de las características que más se ha popularizado en los últimos años es el diseño adaptativo (Responsive Web Design o RWD). Se le denomina así a los diseños web que tienen la capacidad de adaptarse al tamaño y formato de la pantalla en la que se visualiza el contenido, respecto a los diseños tradicionales en los que las páginas web estaban diseñadas para un tamaño o formato específico.

De esta forma, se ha comenzado a escapar de los clásicos tiempos en los que se creaban varias versiones de una misma página para diferentes navegadores o resoluciones, donde el principal inconveniente para el desarrollador era que tenía que mantener varias versiones diferentes donde debía hacer los mismos cambios de forma repetitiva o complicaba el desarrollo en general.




El Responsive Web Design es algo muy útil en la era en que vivimos, donde existen dispositivos de todo tipo: smartphones de múltiples gamas y tamaños, tablets, sistemas de escritorio, etc. y sería inviable y poco práctico realizar una versión para cada uno de estos dispositivos.

Aunque en principio el concepto de web adaptativa es muy sencillo de comprender, aplicarlo puede ser todo un quebradero de cabeza si no se conocen bien las bases y se adquiere experiencia. En MediaQueri.es puedes encontrar algunos ejemplos de páginas que utilizan Responsive Web Design para tener clara la idea.

Estrategia adaptativa

Antes de comenzar a crear un diseño web adaptativo, es importante tener claro una serie de conceptos:

• Conoce las diferentes resoluciones más utilizadas
• Conoce el público de tu sitio web y tu objetivo
• Elige una estrategia acorde a lo anterior

En primer lugar, es importante conocer los formatos de pantalla más comunes con los cuales nos vamos a encontrar. Podemos consultar páginas como Screen Sizes o MyDevices, donde se nos muestra un listado de dispositivos categorizados en smartphones, tablets o pantallas de escritorio con las características de cada dispositivo: ancho, alto, sistema operativo, etc...

Una vez estés familiarizado con estos detalles, es importante conocer el público de tu sitio web. ¿Acceden más usuarios desde móvil o desde escritorio? ¿Predominan las tablets o los móviles? ¿Tu objetivo es tener más usuarios de móvil o de escritorio?

Consulta con algún sistema de estadísticas como Google Analytics para comprobar que tipo de público tienes actualmente. Si tu web aún no existe, lo tienes más fácil. Aún así, es aconsejable echar un vistazo a información externa como las estadísticas de W3Schools o algunas estadísticas globales como las de Global StatCounter.

Por último, decide la estrategia de desarrollo web que quieres utilizar. Aunque existen otras estrategias, hay dos vertientes principales:

Estrategia	Descripción
Mobile first	Primero nos enfocamos en dispositivos móviles y luego pensamos en otros.
Desktop first	Primero nos enfocamos en dispositivos de escritorio, y luego pensamos en otros.

Bien, si ya tenemos la teoría clara, toca volver al código.

Diseño con porcentajes

El primer paso para crear un diseño adaptativo correctamente, es comenzar a familiarizarse con un tipo de unidades: los porcentajes. Recordemos que los porcentajes son relativos al contenedor padre, por lo que si especificamos un porcentaje a un elemento, el navegador va a tomar dicho porcentaje del contenedor.

Podemos comenzar usando porcentajes en las propiedades width. De esta forma, se adaptarán dependiendo del ancho de la pantalla o navegador. Por ejemplo, si establecemos un ancho de 100%a los elementos grises (#header, #page y #footer), un 30% al azul (#menu) y un 70% al gris claro (#content), a los cuales se les indicará un display:inline-block para estar contiguos, podríamos obtener este diseño:

Sin embargo, utilizar porcentajes no nos garantiza un diseño adaptativo de calidad. El primer problema que encontraremos será que si sumamos el tamaño de los elementos (70% + 30%), no es inferior al 100% del contenedor padre, por lo que no cabe en su interior, así que el segundo elemento se desplaza a la zona inferior, descuadrando todo el diseño. Esto es algo muy habitual en CSS. Y frustrante.

Comprobaremos, sin embargo, que si reducimos alguno de los dos porcentajes interiores (70% o 30%), si conseguiremos el diseño propuesto. Luego, si intentamos aumentar su relleno (padding) o el tamaño del borde (border-width) veremos que se vuelve a descuadrar. Esto ocurre porque el tamaño en porcentaje no incluye rellenos o el tamaño del borde, salvo que se utilice la propiedad box-sizing:border-box.

Estar pendiente de realizar todos estos ajustes (sobre todo en diseños más complejos) no suele ser algo práctico, por lo que vamos a ver otra serie de propiedades que suelen facilitarnos un poco todo este desarrollo.

Tamaños máximos y mínimos

Si buscamos un grado de control aún mayor, podríamos recurrir a las propiedades max-width y min-width, con las que podemos indicar el ancho de un elemento como máximo y el ancho de un elemento como mínimo respectivamente, consiguiendo así garantizar cierto control del diseño.

div {
  max-width: 800px;
  min-width: 300px;
}

En este caso, el elemento tiene un tamaño máximo de 800 píxeles, y un tamaño mínimo de 300 píxeles, por lo que si ajustamos el ancho de la ventana del navegador, dicho elemento <div> iría variando en un rango de 300 a 800 píxeles, nunca haciéndose más pequeño de 300 o más grande de 800.

Nota: Es importante darse cuenta de que este ejemplo funciona porque no hay definido un width (por omisión, es igual a width:auto). Desde que exista un width, las otras propiedades pierden efecto.

Con las imágenes, videos y contenidos multimedia, se puede hacer lo mismo, consiguiendo así que las imágenes se escalen y adapten al formato especificado o incluso al tamaño de pantalla de los diferentes dispositivos utilizados:

img, video, object, embed {
  max-width:100%;      /* Aquí el tamaño máximo de tus imágenes */
  height:auto;         /* No es necesario, sólo para clarificar */
}

Media queries

El concepto de media queries no es algo nuevo, ya que lo abordamos en el apartado de medios paginados sin tener conocimiento explícito de ello. Sin embargo, es un tema mucho más amplio y potente, como veremos a continuación:

@media screen and (*condición*) {
  /* reglas CSS */
  /* reglas CSS */
}

Con este método, especificamos que queremos aplicar los estilos CSS para tipos de medios concretos (screen: sólo en pantallas, en este caso) que cumplan las condiciones especificadas entre paréntesis. De esta forma, una estrategia aconsejable es crear reglas CSS generales aplicadas a todo el documento: colores, tipo de fuente, etc. (características comunes en móviles y escritorio), y luego, las particularidades que se aplicarían sólo en el dispositivo en cuestión.

Veamos un ejemplo clásico de media queries en el que definimos diferentes estilos dependiendo del dispositivo que estamos utilizando. En este ejemplo se utiliza de forma transparente al usuario una variable del navegador, device-width, que contiene el tamaño de ancho de la región visible del mismo:

Observese en el código que hay 3 bloques @media donde se definen estilos CSS para cada uno de esos bloques. El código sería el siguiente:

@media screen and (max-width:640px) {
  /* reglas CSS */
}
@media screen and (max-width:1024px) and (min-width:640px) {
  /* reglas CSS */
}
@media screen and (min-width:1024px) {
  /* reglas CSS */
}

Los bloques de ejemplo superiores muestran como se especifica un bloque de medios que separa tres formatos generales diferentes donde se puede aplicar CSS:

• Resoluciones menores de 640 píxeles de ancho.
• Resoluciones menores de 1024 píxeles de ancho (pero mayores que 640 píxeles).
• Resoluciones mayores de 1024 píxeles.

Nota: También se pueden utilizar otras propiedades como max-device-width o min-device-width y sus equivalentes respecto a height, los cuales representan el tamaño actual de la pantalla, por lo que siempre es preferible utilizar los mencionados en los ejemplos.

Puedes utilizar la herramienta Responsivator para ver una página web en las diferentes resoluciones o formatos indicados.

El «viewport»

En muchos casos puede que oigas hablar del viewport del navegador. Esa palabra hace referencia a la región visible del navegador, o sea, la parte de la página que está visualizándose actualmente en el navegador. Podemos redimensionar la ventana del navegador para reducir el tamaño del viewport y simular que se trata de una pantalla y dispositivo más pequeño.

Si queremos editar ciertos comportamientos del viewport del navegador, podemos editar el documento HTML para especificar el siguiente campo meta, antes de la parte del </head>:

<meta name="viewport" content="initial-scale=1, width=device-width">

Con esta etiqueta meta, estamos estableciendo unos parámetros de comportamiento para el viewport:

Propiedades	Valor	Significado
width	device-width	Indica un ancho para el viewport.
height	device-height	Indica un alto para el viewport.
initial-scale	1	Escala inicial con la que se visualiza la página web.
minimum-scale	0.1	Escala mínima a la que se puede reducir al hacer zoom.
maximum-scale	10	Escala máxima a la que se puede aumentar al hacer zoom.
user-scalable	no/fixed | yes/zoom	Posibilidad de hacer zoom en la página web.

Las propiedades initial-scale, minimum-scale y maximum-scale permiten valores desde el 0.1 al 10, aunque ciertos valores se traducen automáticamente a ciertos números determinados:

• yes=1
• no=0.1
• device-width=10
• device-height=10

Por otra parte, user-scalable permite definir si es posible que el usuario pueda «pellizcar» la pantalla para ampliar o reducir el zoom.

SHARE

Oscar perez

Arquitecto especialista en gestion de proyectos si necesitas desarrollar algun proyecto en Bogota contactame en el 3006825874 o visita mi pagina en www.arquitectobogota.tk

• 
• 
• 
• 
•