El diseño responsive o diseño adaptativo es un método de diseño web que sirve para adaptar nuestra web a diferentes dispositivos. A día de hoy accedemos a internet mediante ordenadores, portátiles, tablets, smartphones, etc… Es la manera en la que adaptamos nuestra web para que pueda ser visitada en cualquiera de ellos sin problemas para el usuario.
Sin un diseño web responsive el contenido de nuestra web se mostrará de forma ilógica en las diferentes pantallas de los dispositivos. Por muy bueno que sea el contenido, si nuestra página no está adapta a diferentes terminales perderemos usuarios y eso no nos interesa.
Resumiendo, un buen diseño adaptativo mostrará nuestro contenido de igual manera en pantallas de ordenador como en móviles independientemente de la resolución de las pantallas.
Pasos para desarrollar un diseño responsive
- Etiqueta viewport. Mediante este mecanismo en HTML5 le dirá al navegador como debe modificar el tamaño del contenido. Lo utilizaremos en primer lugar al crear nuestro diseño indicándole que se debe adaptar a cualquier medida de pantalla y después colocaremos el zoom normal.
- Patrones de diseño responsive. Gracias a estos patrones conseguiremos reducir la dificultad del proceso en la creación de nuestro diseño. Existen muchos patrones actualmente y van apareciendo nuevos constantemente.
- Media Queries. Los utilizaremos para que nos muestre el contenido de nuestra página en función de la pantalla que seleccionemos. Detallaremos todas las particularidades de visualización responsive conforme al dispositivo.
- Breakpoints. Una vez hayamos puesto el media Queries añadiremos breakpoints dónde consideremos que es necesario. Normalmente se utiliza un ancho de 600 pixeles que es el tamaño que utilizan los terminales con pantallas más pequeñas, ahí podremos colocar un breakpoint.
- Necesidad de las imágenes. Para poder contar con contenido multimedia en nuestra página, tendremos que tener en cuenta el tamaño y adaptarlo para que quede perfecto en cualquier dispositivo.