The Goldilocks Approach
| Caso de Estudio | |
| Nombre | The Goldilocks Approach |
|---|---|
| Palabras Clave | CSS, sistema de grillas, framework, diseño de interfaz, diseño web |
| Estudiado en | Taller de Construcción DG 4 - 2012 |
| Estudiado por | Samira Bajbuj |
| URL | http://goldilocksapproach.com/ |
The Goldilocks Approach
Término
The Goldilocks Approach significa "El enfoque de Ricitos de Oro". Este término está basado en el clásico cuento infantil Ricitos de Oro y se refiere a que, ante la presencia de tres opciones; la opción 1 implica más de lo necesario, la opción 2 implica la medida adecuada o correcta y la opción 3 es insuficiente. Las características de la opción 1 y 3, provocan que la opción 2 sea la mas deseable y óptima. Debido a la armonía y proporción con que se visualizan los elementos, en este caso, de un sitio.
Introducción
El fundamento de diseño de The Goldilocks Approach está basado en Responsive Web Design, identificando que éste aún está pensado en la medida de sólo algunos dispositivos, frente a esto nace la idea de que en lugar de construir sitios independientes para cada dispositivo, se puede construir un sitio que se adapta a cada dispositivo, porque es allí donde nace el problema de la rapidez con que estos soportes pueden quedar obsoletos junto con el diseño, además de las diferentes resoluciones de cada dispositivo. Frente a esto The Goldilocks Approach propone un diseño universal y adaptable, que es totalmente independiente de los dispositivos de soporte, su diseño está pensado para funcionar en cualquier dispositivo, olvidandose de éste por completo.
El problema de la práctica actual
Al existir una gran cantidad de dispositivos móviles en el mundo actual, los diseños que se desarrollan bajo un sólo soporte o bajo una resolución o tamaño determinado corren el riesgo de quedar obsoletos debido a la rapidez con que la resolución de dispositivos varían su popularidad o uso (un claro ejemplo de ésto es un sitio de 600x400).
Cuando el diseño se basa en una medición de píxeles se crea una inestabilidad del tamaño de visualización en los diferentes dispositivos, lo que puede afectar en su legibilidad y uso (por ejemplo el tamaño de 16px de un texto en Iphone puede ser alrededor del 60% de un texto de 16px en un MacBook).
Estructura
Tamaño del cuerpo columna
El tamaño del cuerpo de la letra no está basado en medidas de píxeles o puntos, sino que en EMS, medida que se adapta siendo independiente de la resolución.
Too Big, Too Small, Just right
El diseño del sitio, dependiendo del dispositivo que lo soporta, será Too Big (Demasiado grande), Too Small (Demasiado pequeño) o Just Right (Tamaño justo o adecuado).
Too Big
Si el ancho de pantalla es mayor al ancho de columna, se modifica a un diseño de varias columnas (Ej: si el ancho de columna es 28 em, más 1 em de margen a cada lado, y el ancho de pantalla es mayor que 45 em, entonces el espacio es suficientemente grande para construir un diseño de tres columnas con ancho 13,5 em y margen 1 em, con contenido principal que une dos columnas para una legibilidad óptima)
Too Small
Si el espacio del ancho de la pantalla es demasiado pequeño como para permitir una legibilidad óptima, se debe aprovechar al máximo el espacio que tenemos.Por ejemplo:
- Reducir a la mitad el margen exterior (pero no eliminarlo); y/o
- Interponer cualquier línea de puntuacion colgando (por lo que no se corta).
Just Right
Si el espacio disponible es el adecuado para el ancho de la columna, entonces no hay nada de que preocuparse y la legibilidad es óptima. Esto no quiere decir que se piense el diseño multicolumna como algo que no es óptimo, pero The Goldilocks Approach concibe que en la práctica el diseño de una columna permite una mejor legibilidad al trabajar de arriba hacia abajo o viceversa.
Entonces, el enfoque de The Goldilocks Approach considera tres estados:
- Varias columnas (Too Big) (Demasiado grande)
- Columna estrecha (Too Small) (Demasiado pequeño)
- Una sola columna (Just Right) (Justo)
Diseño duradero
Al dejar la resolución del dispositivo fuera de la ecuación, se obtiene diseños que deberían funcionar en todos los dispositivos y contextos, incluso los que no se han inventado todavía,es así que mediante el diseño de las limitaciones humanas (lectura) en lugar de las limitaciones tecnológicas (tamaño del dispositivo y la resolución), los diseños no se fechan a corto plazo.
HTML y CSS
La página de The Goldilocks Approach ofrece descargar una serie de archivos HTML y CSS que permiten enfocarse directamente en el contenido del proyecto y no en problemas de soporte.
Sitios
Algunos de los sitios que utilizan el sistema The Goldilocks Approach son:
