Para explorar qué es el desarrollo web responsive, hay que analizar el contexto tecnológico en el que nos encontramos actualmente. Es evidente que todos poseemos, al menos, un dispositivo con pantalla. Es más, la mayoría hacemos uso de más de uno a diario: móviles, ordenadores, tabletas, relojes inteligentes… Y esperamos, además, tener acceso al mismo contenido, cualquiera que sea el dispositivo usado.
Todo ello, no facilita el trabajo de los diseñadores y desarrolladores web, que tienen que adaptarse continuamente al catálogo de tamaños de pantalla y resoluciones que se van acumulando. De esta necesidad de adaptabilidad del contenido nace la disciplina de la que vamos a hablar en este post.
Pongamos un ejemplo. Si yo estoy en casa viendo una serie en Netflix en la SmartTv y, de repente, tengo que ir a algún sitio. Está lejos y me toca coger transporte público. Imaginemos que son 40 minutos en bus y es un recorrido que tengo muy visto. Para hacerlo más ameno, me pongo el siguiente episodio de la serie en el móvil. Yo espero que el contenido encaje en la interfaz del móvil como lo hizo en la de la televisión. Y así es.
Eso es adaptabilidad, o responsiveness en inglés, y es lo que esperamos hoy en día de todo lo que consumimos digitalmente, desde la página web más sencilla hasta una plataforma de redes sociales. Entendida la realidad digital en la que vivimos y las exigencias del usuario, indaguemos en qué es el desarrollo web responsive y qué elementos lo conforman.
¿Qué es el desarrollo web responsive?
La primera página en adaptarse al ancho del navegador se publicó en 2001 y fue la de Audi, el fabricante de automóviles alemán. Desde entonces, han ido surgiendo diversas propuestas que llevaron a que este tipo de desarrollo se convierta en una rama dentro del sector de la creación de aplicaciones y páginas web.
Aunque, el primero en acuñar un término para nombrar esta disciplina fue el diseñador Ethan Marcotte en un artículo publicado en A List Apart en mayo de 2010. Lo tituló responsive web design, diseño web adaptable en español. El autor pronosticaba la explosión de las nuevas tecnologías para el consumo de contenido al igual que la expansión de los smartphones como dispositivo de cabecera. Por eso, insistía en la introducción de esta nueva modalidad de crear y entender el contenido web.
Pero, entonces, ¿qué es el desarrollo web responsive? Se trata de una disciplina que se encuentra dentro del diseño y desarrollo web, cuyo objetivo es desarrollar páginas que se amolden a cualquier navegador, sistema operativo, dimensión del dispositivo o resolución de pantalla, para optimizar la experiencia de usuario.
Los 3 elementos básicos del desarrollo responsive
Para lograr la adaptabilidad del contenido a las diferentes posibilidades de interfaces, los desarrolladores consideran principalmente 3 elementos: la fluidez de la retícula, la flexibilidad de las imágenes y los denominados media queries.
Por un lado, la fluidez de la retícula tiene que ver con el hecho de hacer uso de porcentajes a la hora de definir el tamaño de los elementos y evitar unidades absolutas como píxeles o puntos. Esto hace que el elemento en cuestión siempre ocupe la misma proporción de la pantalla, sea cual sea su tamaño.
Por otro lado, cuando se habla de flexibilidad de las imágenes también se refiere a la determinación de su tamaño en términos relativos, como los porcentajes, en lugar de absolutos. De esta manera, se adaptan al tamaño de la pantalla.
Finalmente, los media queries son propiedades de las hojas de estilo CSS que permiten definir diferentes elementos y atributos en función de las características de la pantalla en la que se van a ver. Por ejemplo, si el menú de una página web aparece distribuido horizontalmente en la pantalla de un ordenador, porque es más ancha, en la de un smartphone se puede articular verticalmente, adaptándose al formato de su pantalla.
En definitiva, la adaptabilidad del contenido se ha convertido en una norma hoy en día. No es posible, actualmente, crear una página web fija y pretender competir. Por ello, siempre hay demanda de profesionales que dominen esta rama.
¿Quieres convertirte en uno? Entonces, nuestro Desarrollo Web Full Stack Bootcamp es para ti. No solo aprenderás qué es el desarrollo web responsive, sino que también dominarás todo lo relativo a la creación de una página, la parte front-end y back-end. Paralelamente, si no tienes ni idea de programación y quieres dar tus primeros pasos, te recomendamos el Aprende a Programar desde Cero – Full Stack Junior Bootcamp, la mejor introducción a la programación que podrás encontrar.
