¿Qué es Responsive Design?

Hoy día la proliferación de diferentes aparatos que permiten conectarnos a Internet: móviles, tabletas, ordenadores y los distintos navegadores y sistemas operativos involucrados en ello, han llevado a los creadores de páginas web a optimizar su forma de diseñar y desarrollar las mismas bajo lo que se conoce como "Responsive Design".

Conceptos básicos mínimos necesarios para comprender Responsive design sin tener experiencia alguna en informática o programación:

Si antes de comenzar, tienes dudas de tantos conceptos que sueles escuchar cuando te adentras en el mundo web, "el HTM"L, "las CSS", "el Javascript" y no sabes de qué te están hablando, esta guía te va a venir estupendamente para ir aclarando conceptos antes de "dar el salto" al "responsive design".

• ¿Qué es el HTML?, ¿Qué son las CSS?, ¿Qué es el Javascript?

¿Qué es el "Responsive Design"?, ¿para qué sirve?

"Responsive Design" o "Diseño adaptativo", es una manera de diseñar y desarrollar páginas web para que estas se visualicen correctamente en cualquier dispositivo independientemente de las características técnicas que lo conformen. Es decir, tanto si se trata de dispositivos con grandes pantallas como los televisores o monitores de ordenador o de "pequeños" aparatos como las Tablets o los móviles, el "diseño adaptativo" permite al usuario seguir visualizando la web sin problemas a pesar de las evidentes diferencias que todos estos dispositivos presentan entre sí.

Pongamos ejemplos que clarifiquen los conceptos para "entendernos": píxel, resolución, sistema operativo, naveagdor:

Los móviles y los ordenadores poseen pantallas de diferentes tamaños. No es lo mismo ver una pantalla en el ordenador que visualizarla en un móvil. Esto es porque al disponer de mayor tamaño los monitores de ordenador también la resolución a la que muestran los contenidos suele ser mayor que la de los móviles.

Para referirnos al tamaño de "cualquier cosa" que "dibujamos" en la pantalla de un ordenador, un móvil o una tableta solemos referirnos al espacio que ocupan en píxeles. Los píxeles son esos pequeños "puntitos" que sirven para conformar la imagen que vemos en las pantallas.

Imagen extraída de lohago.com

La cantidad de píxeles que una pantalla puede tener determina lo que se suele llamar "resolución". Normalmente, una pantalla de ordenador tendrá más píxeles de resolución que la pantalla de un móvil (aunque poco a poco esto está pasando a ser anecdótico).

Si tengo que mostrar el "ojo" que vemos a la izquierda formado por 250 píxeles de ancho por 202 de alto en un monitor con una resolución de 1920 píxeles de ancho por 1080 de alto, es muy posible que no tenga ningún problema en cómo aparece el ojo. Esto es porque la resolución del monitor es mucho mayor la de la imagen del ojo.

Ahora imaginemos que en lugar de hacerlo en el monitor del ordenador lo hacemos en un móvil que tiene como resolución 280 píxeles de ancho por 320 píxeles de alto si lo colocas en vertical o 320 píxeles de alto y 280 de ancho si lo pones horizontal. El ojo que prácticamente no ocupaba nada en el monitor del ordenador, en el móvil que tiene mucha menos resolución (menos píxeles para mostrar la imagen) ocupa toda la pantalla y no permite casi ver nada más.

Imagen de ejemplo de Google+ Backup

Este es el "reto" o uno de los problemas al que tuvieron que enfrentarse los programadores y diseñadores web en el momento en el que dejaron de utilizarse sólo los ordenadores para mirar las páginas web en Internet. Conseguir que el ojo del ejemplo se vea correctamente en una pantalla con más resolución que en una pantalla con menos, en una pantalla más grande que en una menor.

¿Porqué es importante el "responsive design" para el SEO y el posicionamiento?

La respuesta es sencilla, si tu página no puede verse en tablets o móviles, tu página se pierde más de un 20% de visitantes. El diseño adaptativo es más que necesario porque con el tiempo, los tamaños de los sistemas de visualización no sólo van a cambiar, sino que su tendencia se inclina más al modelo móvil, a navegar por Internet desde "la cama" o "el sofá" con una tablet antes que "sentado delante del ordenador".

¿Cómo se hace el "responsive design" en una web?

La clave del diseño adaptativo reside en no tener que modificar la estructura general del código de la página web para "sólo" tener que cambiar sus hojas de estilo (CSS).

El diseño adaptativo se puede aplicar a una página web utilizando "media queries" que definan qué hoja de estilo aplicar dependiendo de la resolución del aparato donde se muestra la página web.

Por ejemplo, si mi página web debo mostrarla en un móvil, es muy posible que el tamaño del tipo de letra no pueda ser el mismo que el que utilizo en el ordenador, ya que en éste el tipo de letra se lee bien aunque sea "pequeña" pero se hace "ilegible" en un móvil donde habría que intentar que se hiciera "más grande".

Para solucionar este problema se utilizan las "Media queries", se le "pregunta" al dispositivo en el código fuente con qué resolución trabaja y en función de si es más grande o más pequeña, aumentamos o disminuimos el tamaño del tipo de letra del ejemplo, para que se vea bien independientemente de que se visualice en el móvil o en le ordenador.

¿Cómo se consigue aplicar el diseño adaptativo?

"Antiguamente" se hacían distintas páginas dependiendo de la resolución, con el tiempo y con el uso de las "Media queries" podemos abstraernos del sistema operativo, navegador o hardware donde se vaya a presentar nuestra web porque siempre podremos preguntar con la "Media query" qué tamaño tiene el dispositivo de visualización para escribir el código de nuestras hojas de estilo en consecuencia.

Es decir, no tenemos que cambiar nuestras entradas, nuestras páginas HTML ni los objetos que utilizamos en ellas, sólo debemos alterar las hojas de estilo. El mismo código fuente de la web podrá ser utilizado en toda ella solamente variando la hoja de estilo en función de la resolución del dispositivo en el que nos encontremos.

¿Qué haremos en la próxima entrega?

Asimilados los conceptos, comenzamos a aplicar ejemplos prácticos para nuestras páginas web.