Responsive Design
Se trata de un planteamiento de diseño en el que las páginas web se estructuran de forma que puedan adaptarse a cualquier dispositivo desde el cual estas puedan llegar a ser visualizadas, para lo cual se aplica una serie de propiedades y recursos enfocados en resolver este tipo de problemáticas.
Dentro del conjunto de propiedades y recursos utilizados para desarrollar el responsive design se encuentran:
- Estructuras Flexibles
-
- Contenedores flexibles
- Imágenes flexibles
- Videos flexibles
- Media Queries
-
Se usa en consultas de medios para aplicar estilos a diferentes tipos de medios o dispositivos, permitiendo ajustar los estilos de la página a:
- Ancho y alto de la ventana gráfica
- Ancho y alto del dispositivo
- Orientación del dispositivo (horizontal o vertical)
- Resolución
- El caso de uso de los estilos
-
- All
- Apto para todo tipo de dispositivos
- Print
- Destinado a material impreso y la visualización de documentos en una pantalla de modo de vista previa de impresión
- Screen
-
Destinado principalmente a pantallas
Nota: (Este es el que se desglosa en este apartado)
- Speech
- Destinado a sintetizadores de voz
- Operadores
-
- Orientación
-
- Landscape: La pantalla es más ancha que larga
- Portrait: La pantalla es más larga que ancha
Metodologías
A la hora de desarrollar los estilos de una página web responsive existen dos metodologías que se encuentran estandarizadas en la industria, las cuales son:
Mobile-first
-
Esta metodología se basa en el hecho de que es más fácil diseñar los elementos en una pantalla de teléfono y de allí agrandarlos para adaptarlo a una pantalla de computador, es decir que esta metodología se centra en desarrollar los estilos mobile primero, por lo tanto esta metodología va de pequeño a grande.
Desktop-first
-
Esta metodología se opone a la anterior ya que prioriza el desarrollo de los estilos de computador antes que los de mobile, si bien no significa que los deje de lado sí que empieza primero por la visualización de la página en un computador, por lo tanto esta metodología va de grande a pequeño.
Nota: Entre estas metodologías siempre que se trate con responsive design se recomienda el uso de mobile-first, ya sea por posicionamiento, facilidad, buenas prácticas entre otras cosas.
Aparte de estas existe una tercera metodología llamada content-first, la cual se centra principalmente en el contenido de la página y de allí lo adapta según a lo que retorne un mayor beneficio, esta metodología está más basada en el marketing que en el diseño en sí.
Propiedades
Lo primero a la hora de crear un diseño responsive es definir en qué circunstancia se utilizarán esos estilos, para eso se utiliza el @media query a la vez que se define el caso de uso seguido del condicional en el que se emplearán los estilos, dentro de la estructura de CSS esto actuará como un selector de la situación en la que se emplearán todos los estilos que se definan dentro de este caso.
Ejemplo
Este ejemplo indica al navegador que los estilos se utilizarán cuando: "la página sea una pantalla (screen), y posea un width mayor a 400px", para esto se utiliza la propiedad min-width
Del mismo modo que se define unas dimensiones mínimas para mostrar los estilos también se puede definir unas dimensiones máximas, para esto se utiliza la propiedad max-width, a su vez también es posible definir una dimensión mínima y una máxima al mismo tiempo para un estilo, por lo tanto no se aplicarán si la pantalla no alcanza el tamaño estipulado o si lo excede.
Ejemplo
De este modo este ejemplo define que: "si se trata de una pantalla (screen), y posee un width mayor a 400px y un width menor a 650px" entonces se muestren los estilos
En ambos ejemplos se muestran los estilos ya que se cumplen las condiciones establecidas, ya que se está utilizando el condicional AND si alguna de estas condiciones llegase a incumplirse entonces los estilos no serían aplicados a la página.
De este modo es como se pueden definir diferentes "casos de uso" para los estilos de una página, permitiéndonos ajustar los estilos de esta a cada dispositivo y circunstancia en la que esta se visualice.