Smashing Magazine
| Caso de Estudio | |
| Nombre | Smashing Magazine: Análisis |
|---|---|
| Período | 2013-2013 |
| Palabras Clave | responsive design, web, analisis |
| Estudiado en | Gráfica Digital 2013 |
| Estudiado por | Daniela Pardo Tagle |
| URL | http://www.smashingmagazine.com/ |
Análisis del Sitio Smashing Magazine
Acerca del Sitio
El sitio web Smashing Magazine, creado en Marzo del año 2009 por Sven Lennartz y Vitaly Friedman, es una de las principales compañías de publicación en el campo del Diseño y Desarrollo Web online en el mundo.
Estructura del Diseño
El sitio posee un Responsive Design, lo que le permite ajustar su formato con respecto al tamaño del medio en el que es visto. Gracias a lo anterior es posible navegar desde cualquier dispositivo, sin importar las dimensiones, cómodamente, ya que está diseñado especialmente para eso.
320 x 480 IPhone 3G/3GS
La estructura de la grilla en este formato se compone principalmente de una columna, la cual posee todos los elementos del sitio: Header/Encabezado, que presenta el logo, ícono de menús y de búsqueda; el cuerpo con los artículos, y el footer.
La mínima presentación de secciones dadas en este formato, da a la idea de que el usuario que navega por medio de su móvil en este sitio tiene como propósito ver los artículo principales, ya que tanto el menú como la barra de búsqueda se encuentran escondidas a menos que se clickee en su ícono. Una navegación simple y rápida.
768 x 1024 IPad
Este formato, muestra los mismos elementos de navegación que el anterior, debido a que ambos medios tecnológicos son móviles y necesitan de un intercambio sencillo con el usuario.
La sección de los artículos posee un ancho mayor, por ende, el texto tiene un largo más amable con la lectura, indicando que los usuarios poseen más tiempo de lectura. Cabe mencionar, con respecto al formato anterior, que los textos correspondientes al título y esposición de los artículos, no disminuyen en tamaño y la tipografía no cambia. De hecho, los únicos elementos que cambian con la grilla son las imágenes.
1024 x 606 Pantalla PC
Dado a que el formato es más extenso, aparecen nuevas secciones en la grilla: los menús se presentan por completo, incluso hay un submenú; la estructura presenta ahora dos columnas, la principal con los artículos y la secundaria con la barra de búsqueda, anuncios de publicidad y ofertas de trabajo.
Se destaca una nueva adición a la presentación del sitio: Las Redes Sociales (Twitter, Facebook). Lo que indica que este tipo de medio es el que recibe más visitas con respecto a los otros móviles, ya que da la posibilidad de, además de visitar sus grupos en las redes sociales, de suscribirse a las Noticias del sitio, y de RSS-feed.
El usuario promedio que visita el sitio le otorga más tiempo a explorarlo que los usuarios de medios móviles como el teléfono celular o tablets.
1440 x 900 Mac Book Pro
Dadas estas dimensiones el sitio no cambia estructuralmente con respecto al formato anterior, excepto por una sección: el submenú se traslada a un lado de la columna de artículos, ya que el diseño aprovecha el espacio dado por la plataforma para hacer más fluída la navegación por el sitio.
Resolución Máxima
Los cambio más relevantes se presentan en el header o encabezado, el cual se traslada a la izquierda, a un lado de la barra de submenúes, nuevamente aprovechando el espacio dado por la grilla. Asimismo, la columna de artículos y el footer aumentan su ancho.
Observaciones
La grilla cambia proporcional y fluídamente con las dimensiones del medio, al igual que las imágenes presentes, tales como el logo. Mas los otros elementos mantienen su tamaño indiferente del formato.
Dependiendo del medio en el que se presente el sitio, su estructura cambia, dándole un carácter ligeramente distinto a la navegación diseñada. Como se puede apreciar en los medios móviles, no está presentado en la estructura principal los menús ni la barra lateral con publicidad y barra de búsqueda: el recorrido diseñado apunta a usuarios que tienen una acción específica en el sitio y quieren una navegación rápida. En cambio, los tamaños superiores de los notebooks y computadores estáticos dan lugar a que se aproveche su espacio tomando en cuenta que es el principal medio de visita de los usuarios, por lo que muestran todos los elementos del sitio y, en especial, los enlaces a las redes sociales, que dan cuenta de la existencia del sitio a todo el mundo, por lo que es un elemento esencial en esta época.
