Caso de estudio: vouchercodes most-wanted
| Caso de Estudio | |
| Nombre | vouchercodes most-wanted |
|---|---|
| Período | 2014-2014 |
| Palabras Clave | responsive design |
| Estudiado en | Gráfica Digital 2014 |
| Estudiado por | Melany Marin |
| URL | http://www.vouchercodes.co.uk/most-wanted/ |
Introducción
"Vouchercodes Most-Wanted" es un sitio de venta de elementos principalmente femeninos relacionados a la moda, salud, tecnología, belleza, viajes, hogar, jardinería y comida. Ademas posee otra sección acerca de temáticas de interés de los seguidores del sitio, que abarca desde vida saludable, dias libres, crianza de hijos, entretenimiento hasta tecnología.
"Most-Wanted" es un sub-sitio de "Vouchercodes", esto se mencione en la sección superior, pero tambien se observa que MW no posee las mismas características de interfaz y estructurales del sitio Vouchercodes del cual procede.
Elementos que componen el inicio
Comencé sobre el supuesto de que cada sección se estructura en base a la lógica de filas y columnas para sitios responsive; mas al analizar el código del sitio se pudo ver que la estructura es diferente a la cual suponía. La estructura es a base de un gran contenedor que dentro de si tiene toda una sección. En los siguientes subtemas analizaremos detalladamente cada sección para entender la estructura que sostiene este sitio. Los principales contenedores se nombran según la categoría a la cual pertenecen, de la siguiente manera:
Encabezado Menú Menú primera categoría Menú segunda categoría Post primera categoría Publicidad Post segunda categoría Footer
Análisis estructural
Encabezado
El "header" o encabezado del sitio tiene un contenedor mayor llamado "header class logo" (el sector amarrillo mas claro) que define el fondo del header y dentro de si tiene un contenedor llamado "h1 class clickable fade in" que contiene la imagen del sitio centrada y como link a la home. En el contenedor de la imagen se le da un máximo de ancho a la imagen de 563 px centrada, como se puede ver en las estructuras de PC y tablet; mas al bajar de 563 px la resolución la pantalla, como en el caso de los móviles de 320 px, la imagen sigue centrada mas disminuye su ancho al de la pantalla. Se observa un margen al costado de la imagen, mas esto no esta definido por cascada sino que viene dentro de la imagen.
La barra de navegación superior consta de dos menús con diferencias jerárquicas, el primer menú contiene las categorías relacionadas con los elementos que están a la venta en el sitio, el cual se compone de las siguientes categorías (graficadas con morado oscuro):
Fashion (moda) Tech (tecnología) Home & Garden (casa y jardín) Beauty (belleza) Travel (viajes) Food & Drink (comida y bebidas)
El segundo menú trata de artículos de interés,se compone de los siguientes elementos (graficadas con morado claro):
Days out (días libres) Entertainment (entretenimiento) Parenting (crianza de hijos) Gifts (regalos) Healthy Living (vida saludable) MW news (noticias MN) Smarter Shopping (compra inteligente) Abouth MW (acerca de MW)
El alto de los menús varía según el alto del texto, el cual al disminuir el ancho de la pantalla, hay textos que pasan de usar una a dos lineas de texto, como se ve en el menú secundario de tablet (que crece desde 44px que tenia en PC a 58px en tablet) y movil (aumenta su medida desde 58px que tenia en tablet a 100 pc en movil).
El primer menú se encuentra dentro de un div llamado "nav primary", por lo que se ve la jerarquización tanto por su nombre en si, como por su color de fondo más claro y contrastado con la tipografía, sus textos se encuentran solo en altas y de 16px en pc y 14px en movil, con un padding lateral y márgenes superiores e inferiores.
El menú secundario "nav secundary" posee un fondo mas oscuro que contrasta menos con la tipografía. Los textos de ambos menús se encuentran centrados y solo con margenes superior e inferior definidos (sin padding lateral), por lo que al cambiar de tamaño de pantalla los espacios laterales se van adaptando.
Al llegar al ancho de 320px el menú primario se adapta de una fila a tres filas con dos columnas, ordenando los elementos de la lista cuando el tamaño de la pantalla no es lo suficientemente ancho para soportar todos los contenidos en una sola fila. El menú secundario al no tener padding lateral como el menú primario; al llegar al ancho de 320px se ordena en dos filas.
Se observa que en el caso de PC y tablet el ancho de las celdas es variable según la cantidad de texto de cada ítem dándoles una distancia entre ellos por un padding (margen interno) del 2% de la pantalla, y con un alto fijo determinado mor los márgenes superior e inferior.
Pero en movil el ancho no se determina por la cantidad de texto, sino por porcentajes definidos en el contenedor, siendo del menú superior de 160x40px (50%del ancho de la pantalla) y en el menú secundario se definen 2 anchos, de 101px para la fila superior y de 77 para la fila inferior
El menú en si mismo no responde a una estructura responsive basada en columnas, sino que adapta su ancho según un porcentaje de ancho del div contenedor de la lista que cambia según el ancho de la pantalla.
Post del primer menú
Al leer el contenido de cada post se puede observar la categoría al cual pertenecen, mas no hay una titulación que contextualice el contenido, se pretende dar una jerarquía tanto en el menú al poner estas categorías sobre el menú con mas elementos, al igual que dentro del cuerpo del inicio se ponen primero los post del primer menú, mas se realiza implícitamente en el orden que se ubican en el sitio, instando primero a la compra y posteriormente a la lectura de artículos de interés.
En cuanto al modo en que se comportan los elementos de esta sección, en un principio pensé que se comportaban en base a columnas, debido a que el ancho del contenedor del artículo no variaba y se alineaban los contenidos similar a las columnas, mas al analizar la estructura del código, toda la sección de post primario se encuentra dentro de una fila "row".
Esta gran fila contenedora tiene dentro de si los 8 contenedores de artículo, los cuales se van adaptando según el ancho de la pantalla, sin deformar el alto del artículo considerablemente, sino que adaptando los márgenes que rodean al artículo según porcentajes.
El "div article container" le da altura fija al contenido que varía levemente en su ancho dependiendo cada tamaño de pantalla:
- 251 x 350 px - Contenedor del artículo en PC
- 230 x 350 px - Contenedor del artículo en Tablet
- 251 x 350 px - Contenedor del artículo en Movil
El contenedor del articulo dentro tiene la imagen y el contenedor del texto del artículo.
- 232 x 192 px - Imagen en todas las medidas de pantalla
- 253 x 168 px - Contenedor de texto en PC y Movil
- 232 x 167 px - Contenedor de texto en Tablet
Se ve que el ancho del contenedor del artículo y del texto disminuyen en su ancho, cuando el contenedor llega a 148 px de ancho (con la pantalla a 468px de ancho) el artículo pasa de usar 3 columnas a 2, como se ve en el movil, restableciendo su ancho de 232 px.
Publicidad
Se compone de dos filas al ancho de la pantalla, la primera contiene el título alineado a la izquierda, el cual se centra desde medidas de pantalla inferiores a 768px (desde tablet o inferiores) mientras que la segunda fila contiene un listado de imágenes, éstas tienen una altura y ancho fijo de 153 x 120 px definido por cascada de estilos, lo que se adapta son los márgenes entre los elementos definidos por una clase que se le da a cada uno, del modo "li class = first clickable fade in", "second clickeable fade in" hasta llegar al sexto, cada una de estas clases va cambiando según el ancho de la pantalla.
Resolución de 1280px, para pantalla de pc
Todas las imágenes se alinean en una sola fila, para mantener la distancia entre ellas del primer al quinto elemento tienen el margen a la derecha mientras que el sexto lo tiene en la izquierda, quedando a la vista una filas de 6 columnas.
Resolución de 768px para pantalla, tablet
El contenedor es una sola fila, mas los contenidos se ven en dos filas, debido a que las imágenes no se escalan, solo los margenes. Para construir una distancia proporcionada, el primer y segundo elemento tienen margen inferior y derecho, el tercero posee un margen inferior, el cuarto y quinto tienen margen inferior y derecho y el sexto solo margen inferior, quedando a la vista dos filas de 3 columnas.
Resolución de 320px, pantalla de movil
Sigue siendo el contenedor mayor una sola fila, mas los contenidos se ven en 3 filas con dos columnas, debido a que se reagrupan al disminuir el tamaño y cambian sus margenes. El primer, tercer y quinto elemento de la lista tienen margen derecho e inferior, mientras que el segundo, cuarto y sexto solo tienen margen inferior, quedando a la vista tres filas de 2 columnas.
Post de segunda categoría
Un detalle de interfaz es que se oculta a los 320 px de ancho de pantalla la pequeña imagen circular ubicada en la esquina superior derecha (que aparecen en los formatos mayores a 320px, en tablets y pc) y el "leer mas" queda como elemento fijo y no como uno que emerge (para pantallas móviles, donde no funcionan los elementos emergentes por su pantalla táctil), estos elementos emergentes aparecen desde los 768px y resoluciones superiores. Mas en las pantallas de 768 de tablet son táctiles, por lo que no funcionan los elementos emergentes y debería tener la misma ley que en las pantallas móviles, esto debido a que el diseño se adapta a pantallas móviles pero no esta pensado para las funcionalidades táctiles de los tablets y móviles.
Analizando la estructura de la sección de post secundario, al igual que en el caso de los post de primera categoría, los 8 contenedores de artículos se encuentran dentro de una misma fila, pero a diferencia del los primeros, los post de segunda categoría poseen un alto definido de 138px y un máximo de ancho de 547px, esto quiere decir que solo disminuyen los contenedores en su ancho, mas al no definir un mínimo de ancho se producen errores, esto porque al disminuir el ancho de la pantalla el contenedor de texto y margen se comprimen hasta quedar al mínimo (a los 482 px de ancho de pantalla, como se muestra en la sección de errores), donde son ilegible los títulos y donde no se ven el resto de los datos; y a un ancho menor a 482 px el contenedor pasa de tener 2 artículos por fila a uno por fila, volviendo a tener un ancho mas olgado, como se ve en móvil de 320px de ancho,al límite del borde de la pantalla.
El footer es la única sección del inicio que se rige bajo la estructura de filas y columnas, mas en cuanto al cuidado de los márgenes de los elementos se ve al límite de lo legible. La estructura funciona bien en anchos de pantallas para pc, mas al disminuir el ancho de la pantalla, los márgenes externos se hacen cada ves menores y el tamaño y distancia entre líneas de los links es muy pequeño para alcanzarlo con el dedo en pantallas táctiles.
El footer se compone de dos filas, la primera de 6 columnas, la cual se subdivide en 4 columnas simples y una doble en el caso del pc de 1280px.
Al disminuir el tamaño a 768px, son 6 columnas pero de anchos disminuidos, por lo que los primeros cuatro elementos pasan a usar el ancho de una columna mientras que la quinta usa dos.
En el tamaño de 320px para móvil, el ancho pasa a ser de 2 columnas; los primeros 4 elementos usan una columna de ancho (2 por fila), mientras que el último pasa a utilizar dos, ocupando todo el ancho de la pantalla.
La última fila contiene una imagen y un texto continuo al ancho de la página, ambos alineados a la izquierda, no hay columnas que los regulen, el texto se alinea a la imagen a medida que se disminuye el tamaño de la pantalla.
Márgenes
Cada sección tiene su manera particular de comportarse, como se pudo ver en la sección de análisis estructural. Este sitio en su mayoría (exceptuando al footer) no se rige en base a una grilla general, por lo que cada sección tiene sus propios márgenes que van actuando de forma independiente a medida que se disminuye el tamaño de la pantalla.
Encabezado
El encabezado lo que hace es centrar la imagen de ancho máximo de 563px, equilibrando sus márgenes laterales, mas al disminuir el tamaño de pantalla de esos 563px, el margen desaparece, dejando a la imagen a tope de los bordes de la pantalla.
Menú
En los anchos de 1280px a 768px los márgenes son resultantes de el contenedor centrado de ambos menú, este margen va disminuyendo junto con el ancho del menú, mas al llegar al tamaño de pantallas móviles cambia la codificación del menú a porcentaje de pantalla y no considera márgenes.
Post primera categoría
Toda la sección de post de primera categoría se encuentra dentro de una sola fila, esta fila o "row" contiene al "article class threecol" que le da un margen lateral e inferior a cada contenedor de artículo. El margen lateral es de un 3,8% de la pantalla, por lo que disminuye al hacerlo el formato, mientras que el inferior es fijo de 20px.
Publicidad
Es la sección que tiene márgenes más trabajados y varían en cada formato de pantalla. En 1280px del primer al quinto elemento tienen el margen a la derecha mientras que el sexto lo tiene en la izquierda, quedando a la vista una filas de 6 columnas. En 768px el primer y segundo elemento tienen margen inferior y derecho, el tercero posee un margen inferior, el cuarto y quinto tienen margen inferior y derecho y el sexto solo margen inferior, el contenedor mayor se encuentra centrado por lo que queda un margen externo muy amplio. En 320px los margenes externos e internos se ven muy disminuidos, solo un pequeño límite para separar las imágenes.
Post segunda categoría
En tamaños de pc, el margen exterior es mayor al interior y son concordantes a todos los margenes externos e internosde los demás contenedores. al disminuir a pantallas tablet el margen interior es mayor al exterior. Al llegar a pantallas móviles desaparece el margen interno y el externo es mínimo.
El footer es el menos trabajado en cuanto a márgenes, los textos se encuentran al límite del contenedor, son las distancias entre las columnas las que dan un poco de legibilidad al texto, pero al llegar a móvil el margen es mínimo a la izquierda y los textos estan al borde de la pantalla.
Tipografía
Todos los textos del sitio se encuentran con 5 opciones de tipografía, lo cual significa que la cascada de estilos ejecuta la acción de buscar la primera tipografía, si no la encuentra procederá con la segunda opción, hasta llegar a la última. Están ordenadas en el siguiente jerarquía:
font-family: Georgia,Cambria,"Times New Roman",Times,serif;
Las variables utilizadas son regular, italic y bold, las cuales no cambian a medida que cambia el tamaño de pantalla, mas lo que se ejecuta son ciertas modificaciones en los tamaños de la tipografía y la linea de base, entre otras características propias de cascada de estilos, a continuación, compararemos los cambios tipográficos según el tamaño de pantalla.
Menú primera categoría
El tamaño de la fuente es de 16px en resolución de pantalla de 1280px, ya que el tamaño de las celdas es más amplio en su ancho y permite destacar de mejor manera los items, mas al disminuir el tamaño de la pantalla a 768px o inferiores, el espacio de las celdas comienza a disminuir, por lo que un tamaño de tipografía muy grande hará a los elementos mas difíciles de leer, por lo que se disminuye en tamaño de la fuente a 14px. La línea de base cambia en pantallas móviles, debido a que el texto ya no considera un margen superior e inferior, la línea de base le da la distancia para que quede centrado. Una cualidad que se le da al texto por cascada de estilo dejar todo el texto con mayúsculas, con el código:
text-transform: uppercase; (texto en mayúscula)
Menú segunda categoría
El menú de segunda categoría tiene un tamaño tipográfico de 12px en pantallas de 1280px, se encuentra destacado pero con menor jerarquía que el texto del menú primario, esto por la decisión de destacar el contenido de venta por sobre los artículos de interes. El tamaño de la tipografía disminuye a 11px en pantallas tablet y móviles para hacerla más legible en el espacio disminuido del menú y a la vez que el tamaño no sea tan pequeño como para dificultar la lectura del contenido.La linea de base de 16px es la misma para todas las resoluciones. Se le da la cualidad de texto en mayúsculas por cascada de estilo.
Título artículo
El texto del título del artículo se mantiene en su tamaño de 21px hasta llegar al tamaño de 320px, en donde disminuye a 17px, la linea de base se determina por la medida de 1.25em, el valor "em" es un valor por defecto según pantallas de pc, tablet o móvil, el valor 1 em es el valor estandar, por lo que 1.25 em es 1/4 mas grande que el valor estandar.
Cuando el hover esta inactivo (esto quere decir que es cursor no esta sobre el elemento) el texto tiene la cualidaad de underline, esto quiere decir que al texto le aparece una linea de base:
text-decoration: underline;
Cuando el hover esta activo, desaparece la cualidad de underline y el código que aparece indica que el texto no se tiene que transformar.
text-transform: none;
Autor
En el caso de los textos que aparecen debajo del título del post, llamados textos de autor, donde ademas se señala la categoría a la cual pertenece el artículo; el tamaño de la fuente no cambia, mas lo que cambia es la medida de la línea de base, que disminuye en el caso de los móviles de 20px a 16px, debido a que el tamaño del contenedor se ve disminuido, una interlinea muy amplia perjudica al blanco inferior que se construye en el contenedor de texto.
Publicidad
La sección de publicidad solo posee el título de la sección, sus cambios son leves y solo respecto a la línea de base que disminuye de 20px para PC y tablet a 16px para móviles.
El footer mantiene las mismas medidas tanto en tamaño de fuente de 14px; la línea de base cambia de 20px en PC y tablet a 16px en móviles. Un detalle que aparece en el footer es el sombreado inferior de 1px blanco que se le da a los links con el siguiente código:
text-shadow: 0 1px 0 #fff;
Imágenes
En los post de primera y segunda categoría, la imagen tiene el mismo tamaño que el contenedor, y se realiza un zoom del 10% cuando el hover esta activo, ademas de darle una velocidad de transición de 0,25 segundos con el siguiente código:
.no-touch.csstransitions .block-posts .article-container:hover>a img {
webkit-transform: scale(1.1);
transition: 0.25s;
}
Esto se cumple en todos los tamaños, incluyendo los de movil y tablet, donde estas transiciones no funcionan por ser dispositivos de pantallas táctiles.
Post de primera categoría
Post de segunda categoría
Aciertos y Errores
El hecho de que el diseño del sitio sea en base a porcentajes de márgenes le da cabida a errores en puntos fuera de los analizados (solo se analizan los tamaños 1280px, 768px y 320px), mas al ver los puntos de quiebre pude encontrar algunos errores como los siguientes:
482px botón ver más desplazado
482px textos irregulares y poco legibles
482px textos no legibles
907px botón leer más desplazado
.png)
.png)
.png)
.png){kind=small}
Dentro de los comportamientos generales en pc la página funciona correctamente, entrega la misma cantidad de información para todos los dispositivos, solo cambiando su distribución. Parece extraño que dentro de todo el diseño de la página se utilicen filas que contengan toda una sección de artículos, pero presenta una lógica diferente de como pensar los códigos para la construcción de un sitio web. Pero la sección del footer es la única que esta pensada en base a filas y columnas y discrepa con toda la lógica de los demás elementos del sitio.
Un punto a considerar es que tanto en la diagramación como los elementos emergentes es el diseño de la página para tablet; la cual por su diagramación es similar a una página para pc, ademas de que posee elementos emergentes que no funcionaran en dispositivos táctiles. Si bien por tamaños el dispositivo tablet es mas similar al PC sus condiciones de uso son mas similares al movil, pero en el caso de este sitio no considera un punto intermedio entre el tablet y el movil.
Analizando el caso del movil, cumple con el hecho de volver fijos elementos como el "leer más" que en los otros casos es emergente, mas un punto a considerar es la extensión total del sitio en el movil, el menú solo se encuentra en la parte superior pero la extensión del sitio es muy larga y no existe ningún elemento que permita volver al principio, por lo que supongo que el diseño en si se adapta a la pantalla, mas no esta pensado para el uso según las características del dispositivo.
Análisis de Divs
Html con divs destacados
https://dl.dropboxusercontent.com/u/86748771/web%20most%20wated/3%20carpeta/Most.htm
Carpetas del proceso de trabajo del html y css
https://www.dropbox.com/sh/of5iecmuk4hntsi/AAAWB-mKbR0DzSlgm6fuS6BXa/WEB%20MOST%20WATED
