Qué es Responsive Design: Consideraciones
Responsive Design se refiere al uso de técnicas para adaptar una web a la mayor cantidad de dispositivos. En éste artículo aprenderemos lo que debemos tener en cuenta a la hora de realizar un sitio que sea Responsive.
Por qué necesitamos Responsive Design.
Principalmente por dos razones.
- Los smartphones son cada día más comunes. Cada vez hay más personas utilizando smartphones para acceder a internet, y cualquiera que cuente con uno puede ingresar a tu sitio y convertirse en un cliente, por lo que es muy importante que tu web se adapte a cualquier tipo de pantalla.
- Debes considerar que existen diversos tipos de tamaño de pantalla, y van desde un smartphone con una pantalla muy reducida, hasta pantallas muy grandes y de mucha resolución. Con Responsive Design tu sitio está preparado para ser visto desde cualquier dispositivo.
Brevemente explicamos qué se debe tener en cuenta para realizar un diseño Responsive.
1. Patrones de diseño
Existen diversos patrones o formas de diseñar un sitio Responsive Design. Son las siguientes:
- Most fluid. El contenido principal se distribuye. Como se muestra en la imagen, a medida que la pantalla es más pequeña, cada caja que conforma la cuadrícula va cayendo y empujando a la siguiente que a su vez empuja a las otras, así hasta que nos quedamos en una sola columna con las cajas apiladas verticalmente.
- Column drop. Son columnas una al lado de la otra que van a ir cayendo según sea el tamaño de la pantalla.
- Layout shifter. Reajusta el diseño del sitio de acuerdo al ancho de la pantalla. Cambia mucho la disposición de los elementos, no solamente “empuja” o “caen” los elementos, sino que el diseño cambia de acuerdo a las necesidades.
- Tiny tweaks. O “Pequeños cambios” en el diseño, como ajustar el tamaño de la fuente, cambiar el tamaño de las imágenes o desplazar el contenido de diferentes maneras. A veces pareciera que únicamente se redujo el tamaño del sitio para que entrase en la pantalla.
- Off canvas. El contenido menos usado se coloca fuera de la pantalla y solo se muestra cuando el tamaño de la pantalla es lo suficientemente grande; en las pantallas más pequeñas se requiere que el usuario se desplace hacia la derecha o izquierda.
2. Orientación de la pantalla.
Antes el usuario no podía cambiar la orientación del enorme monitor de video de su computadora. Con la diversidad de dispositivos móviles actuales un sitio web debe verse bien en Portrait como en Landscape. (Vertical y Horizontal). Un diseño web responsive debe considerar este hecho.
3. El ViewPort.
Se utiliza para definir el alto, ancho y escala del navegador para visualizar el contenido. En Viewportsizes.com vemos información relacionada al Viewport para diversos dispositivos.
4. Unidades de medida.
Existen absolutas como el pixel (px) y relativas (como porcentaje (%), altura de fuente (em), root-em (rem), viewport-height (vh) y viewport-width (vw).
5. Densidad de pixel.
Se debe tomar en cuenta la cantidad de pixeles que se pueden mostrar en una determinada pantalla. De no hacerlo así, algunas imágenes se podrían ver muy bien en determinados dispositivos y verse mal (o “pixeleadas”) en otros.
6. Gestos táctiles.
En los dispositivos móviles no existe el clic, sino el “tap” y una buena cantidad de gestos táctiles. Algunos nuevos dispositivos incluyen “force touch” que diferencia entre un toque simple y uno con más presión. 
7. Estrategia de creación.
Existen dos vertientes: el Graceful degradation y el progressive enhancement. Al primero también se le conoce como Desktop first y al segundo como Mobile First. La elección bien puede ser determinada por el principal objetivo a alcanzar, si el proyecto se orienta más a Desktop o a dispositivos móviles. Un conocido ejemplo de Mobile First es Instagram, que comenzó siendo únicamente para dispositivos móviles pero que debido al éxito de la app ahora cuenta con una aplicación web que puede verse en Desktop.
8. Tiempo de carga del sitio.
Se debe considerar que aún existen muchos usuarios con conexiones lentas y que deben estar considerados al momento de diseñar y crear el sitio.
Referencias
1. LePage (2015). Patrones de diseño web receptivos . Disponible en [https://developers.google.com/web/fundamentals/design-and-ui/responsive/patterns/?hl=es] consultado el [14-06-2016].
Tu comentario
