World Wild Life

De Casiopea





Caso de Estudio
NombreWorld Wild Life
Período2013-2013
Palabras ClaveResponsive Design
Estudiado enGráfica Digital 2013
Estudiado porGabriela Pérez
URLhttp://worldwildlife.org/


Presentación del sitio

Caso de estudio del sitio http://worldwildlife.org/ en su versión Responsive design para Pc, Tablet y Móvil. Se analiza este caso con el fin de visualizar los distintos cambios o desplazamientos de contenidos en formatos distintos de pantalla y su resolución.

Sobre el sitio World WildLife

El sitio de WWF (World Wildlife Fundation) Fondo Mundial para la Naturaleza, muestra la organización (Suiza - Norteamericana) de contenidos relacionados al medio ambiente y especies animales en su conjunto, viviendo en distintos hábitats.

Un fin de esta organización es ayudar a detener la degradación del medio ambiente natural y potenciar la vida humana en naturaleza, vivo contacto con los animales. Según la organización persiguen los siguientes objetivos:

  • Conservar la diversidad biológica del mundo
  • Garantizar un uso sostenible de los recursos naturales renovables
  • Promover la reducción de contaminación ambiental

Recursos dinámicos y gráficos

El sitio trabaja los elementos como la fotografía de manera que puedan de alguna manera tener interacción a través del tacto y la visualización propia por pantalla. Se recurre mucho en cada página o articulo, la integración de estos elementos visuales tipo slider, que generan dinamismo y secuencia, en cierta manera, de la información que se va presentando. El sitio tiende a utilizar en las 3 resoluciones analizadas este propósito, de manera que la información se muestra como imagen, que a la vez redirige a un link, para ampliar en detalle lo que se esta leyendo.

Las barras de menú resultan interesantes de analizar, en cuanto a su forma inicial, si se observan en Pc y su paso y cambio estructural a forma de bloques al pasar a visualizarlo en un teléfono móvil. Los cambios resultantes en la conversión de Pc a Tablet, no resultan en la orientación vertical tan interesantes. No se rearma el contenido, se ajusta más bien o tiende a reducirse en los espacios, se comprime de alguna forma.

Elementos gráficos del sitio comunes a Pc, Tablet y Smartphone

Para el caso de visualizar el sitio desde PC se tienen 2 niveles de navegación: rápida (nivel superior del header) y principal (nivel inferior del header). Estas barras ocupan la extensión de 1024 x 780, no se presenta un borde antes, como suele suceder en algunos sitios, donde la barra queda centrada y se guardan espacios a los costados. Esto hace que al pasar de Pc a tablet y iPhone se tome la extensión o ancho total de la pantalla, sin preocuparse de adaptar demasiado los espacios interiores de diagramación, si se presentan textos al interior de la grilla.

Barra de menú y Footer inicial
Navegación

Las herramientas de navegación propuestas en el sitio están concentradas en el Header y sus buscadores. La barra en el nivel PC aún se mantiene como presentando el ítem que caracteriza a dicha sección; aquella palabra identificadora se expone y permite que al posarse se despliegue los subíndices de cada categoría.

El sitio tiene 2 barras posibles de navegar y buscar información específica o directa en cuanto a su acceder: esta la barra superior al costado derecho de la pantalla que tiene:

  • About us: History, Leadership, Experts, News & Press, Financials, Careers y Contact
  • How to help: Take Action, Stay Informed, Fundraise, Send E-Card, Shop to Sopport, Join WWF y Make a Gift.
  • Donate: Make a One Time Donation, Make a Monthly Donation, Become a paperless members, Renew your Membership y Join as a partner in conservation.
  • Adopt: Symbolic adoptions, Buckets and Tubs, Apparel and more, Monthly Adoptions


En tanto la barra primaria o principal consta de las siguientes secciones:

  • Species
  • Places
  • Threats
  • Our Work

Estas secciones nos separan en el contenido esencialmente animal y lo que también se puede ver en ciertos lugares del mundo, respecto a la conciencia ambiental, acciones, efectos en la naturaleza.Nos dirigen entonces de manera catalogada a los contenidos, pudiendo existir en su interior links a otros sitios relacionados o artículos mismos del sitio.

Lo móvil

Dentro del sitio es posible identificar recursos visuales y gráficos que van definiendo el estilo y diseño del sitio. Una de esas herramientas muy utilizada en este ejemplo es el contenido móvil que a la vez dispone textos e imágenes, reunidas para ir de manera dinámica revisando por así decirlo la página siguiente, la noticia que sigue.

Se ubica en la pantalla ocupando borde a borde en el encabezado principal a veces y otras en medio del sitio, cuando se tienen muchos datos o resulta necesario mostrar sólo la portada de tales contenidos. Hay otros elementos también usados para potenciar ya sea el diseño, esto es hacer de la navegación algo agradable y ahorrar a la vez espacialidad poniendo elementos visibles sólo cuando te posas sobre ellos, sin hacer clic.

Visualización de contenidos

La grilla propuesta para el sitio varía acorde a los tamaños de cada dipositivo, dependiendo del ancho de pantalla, se visualizan los contenidos en una ordenación o distribución distinta. Los cambios suceden, por lo menos en el home visto desde los tres soportes visuales, proporcionadamente para el caso de las imágenes, en tanto que se genera un ajuste o desplazamiento de los elementos laterales. La grilla en el plano de visualización Iphone, aumenta de largo notablemente, ya que es la única manera de hacer aparecer el total del contenido, presentado inicialmente en la vista Pc. El paso final es de 3 columnas tanto para pc como para tablet llegando a dos para celular.


600px Desplazamientoscontenidos1-04.png

Diferencias en la visualización de contenidos

Existen variaciones en la forma de pasar de información que es netamente fotografías y textos breves a sólo links; como es el caso que se muestra en la imagen abajo. Lo que ocurre al ingresar al menú, cliquear la categoría Places, luego Travel, es que el contenido mostrado en pc al observarlo en un teléfono deja de ser lo que era, es un cambio bastante radical. Lo que es posible que sucediera, es que se privilegiara la navegación rápida, por sobre llenar un contenido infinito de imágenes hacia abajo en el teléfono, optando de este modo por mostrar sólo links para cada una.

Diferenciascontenidospciphone-01.jpg

Visualización en Pc (resolución 1280 x 800 px)

Homepage WWF


El sitio de la organización WWF inicialmente en la vista de Pc (Notebook) se visualiza no por completo, por lo que el contenido es demasiado extenso y sólo es factible de ver en un principio el header y slider de información; para avanzar o acceder a más debemos hacer scroll, lo que deja a la vista que hay una diagramación centrada del contenido bajo el slider, se permite los margenes externos e interiores y se pasa en el homepage a ver sólo indicios de la información. Así para intentar leer más, hacemos uso o de las barras de navegación, búsqueda o clickeando los recuadros que componen la grilla.

Vista completa del sitio y tipo de Grilla

El sitio expone tanto en el home como en algunas páginas tipo los contenidos tanto textuales como de imágenes. Esta composición de la grilla, varía respecto a que hay páginas interiores que contemplan más información que otras, por ende la grilla se ve extendida y más abierta a cambios no tan estructurales sino que más bien, se va modificando en la disposición de las imágenes y textos, por sobre cambiar la diagramación centrada y de columnas que le caracteriza.


Pchomesitio1-01.png Grillapc1-02.png Pchome1vista.pngGrillahomepc1-02.png

Visualizacion en Tablet (resolución 768 x 1024 px)

Vista Home en Tablet de forma vertical

Al pasar a Tablet, los contenidos visualizados se desplazan levemente. No se obtiene un gran cambio, excepto que hay una reducción o conversión de 1280 px de ancho (pc) a 768 px ancho (tablet vista vertical). Ahora el alto pasa a ser 1024 px que para ser el alto incrementan lo posible de visualizar en el pc. La grilla se comprime, se trabaja en un centro luego de pasar del encabezado central, que por lo general son fotografías de borde a borde. Hay divisiones de parrafos y fotografías o iconos que ocupan un espacio conectado con otros.

Interiormente,la diagramación es muy reducida, basta un tamaño de márgenes interiores que permitan seguir el mismo patrón para los márgenes horizontales, verticales de recuadros y titulaciones presentes a gran pt.

Extensión del sitio

Los cambios más visibles en la grilla, son aquellos que eran muy extensibles en el home de Pc. Ahora se reducen o desaparecen ciertas barras, títulos y opciones antes móviles. La barra de menú principal desaparece por su tamaño y despliegue incial y ahora pasa a ser un icono al costado superior derecho del header que al ser apretado despliega la información. El comportamiento visual del contenido en la tablet a pesar de ese cambio a bloques del menú, no varía en el cuerpo del sitio; ahora se visualizan las fotografías a menor tamaño comparado con la vista Pc y hay estos desplazamientos (sliders) ya no móviles por si solos, sino que requieren la interacción para avanzar y ver más.


Vistatototalsitio1ipad-01.png Tabletvistas1-04.png

Vista completa del sitio y tipo de Grilla

En la versión tablet, las vistas se reducen un poco, el cambio es bastante leve, en lo que se refiere a organización de columnas o espacios; lo que notoriamente se ve desplazado y distinto es la barra de menú o header. Pasa a visualizarse sólo la barra de navegación rápida de color naranjo, y el menú principal queda escondido tras un icono de barritas, que al cliquearlo despliega y revela la barra oculta.

Las imágenes en este proceso quedan cubiertas por este menú desplegado. Además hay un paso del buscador del sitio que se hallaba inicialmente en el header a mano derecha, y ahora queda bajo el menú principal que estaba oculto.

Homeipad1.5.pngGrilla1tablet-03.png

Diagramaciones con medidas en tablet

Se presenta la página tipo para definir una estructura que guía los contenidos y elementos dispuestos en el sitio. La grilla del home es una forma de visualizar como se trabaja en la mayor parte del sitio los textos, imágenes y elementos móviles.

Ipadhome1-05.pngGrillaipad1-05.png

Botones y elementos navegación

El sitio llega a utilizar este tipo de recursos en los 3 distintos dispositivos. Para ello hace un cambio más de diseño que de forma de interacción de los botones que guían la secuencia o temática móvil.


Extensión total de páginas tipo en tablet

Las visualizaciones en el tablet de algunos contenidos extensos, como es el caso de una infografía que contiene datos y que requiere de alguna manera ser visualizada en su conjunto para lograr entenderla, aquí es tratada de manera vertical en cuanto a la navegación. La adaptabilidad que los objetos componentes del sitio adquieren, permiten diseñar en base a una grilla común para cada caso, en sí este sitio no pierde el estilo de ubicar todo de manera central,es ahí en ese interior donde se va moviendo la información y se van haciendo los ajustes necesarios que requiere cada pantalla para una correcta visualización y lectura.

Visualizacion en teléfono móvil (resolución 320 x 480 px)

Los cambios en este aspecto, de los contenidos y estructura del sitio se ven notorios. El header pasa a ser una barra de menor tamaño y se han reducido además los elementos slideshow, dando paso o preferencia a algo más manual en cuanto a la interacción, los elementos que eran móviles ahora pueden tener más manejo por parte del usuario. Toda la estructura central del body se ve reducida, casi como comprimida de los lados, ya no hay bordes o márgenes delimitadores. Los recuadros y fotografías llegan al borde de la pantalla, casi no hay aire entre los pequeños márgenes interiores de las columna.

Vista del home

Iphonehorvertvistashome-03.png

Cambio en visualización de texto y slider en pantalla

Un detalle de estas visualizaciones, esta marcado por el hecho de que en el móvil los contenidos se ven cortados, en casos que son muy amplios los textos o recuadros propios de la diagramación del sitio o las fotografías ocupan mucho espacio en relación con otras cosas, que tal vez ceden espacio para propiciar las imágenes. Iphonemedidas4-03.png

Orientación vertical y horizontal: Grilla del home y aparición del menú secundario

Grillahomeiphone1-05.pngGrillamenuhorizontal1-03.pngVistagrillaverticaliphonemenu1-04-04.png

Vista completa del sitio y tipo de Grilla

Lo que podíamos ver en el pc con un scroll mínimo, al llegar a este modo de visualizar, se tiene que el contenido se ve dividido ahora por dos columnas y una división del body, por recuadros de información. Todo pasa a ser ajustado a la resolución disponible.

Homeiphone1-03.png
Iphonemedidas1-03.png


Elementos gráficos netamente visuales en pantalla

El sitio en su desempeño en las 3 variables digitales, permite ver cambios o ciertos patrones en el diseño. Las herramientas de entrega de la información son netamente visuales. Se configura en relación a imagen y datos breves, la cual requiere en ocasiones de una interacción por parte del usuario (hacer hover sobre ciertos elementos, avanzar o retroceder con flechas, etc).

Grilla de contenidos en su extensión

La extensión para teléfono móvil se amplia, llegando a un tamaño muy grande, que quizás puede llegar a resultar tedioso en el proceso de querer encontrar algunas temáticas especiales.


Comparaciones: Estructuración y Grillas de diagramación

Se disponen las tres grillas de páginas tipo del home del sitio. En ellas se observa una conservación de tamaños desde el Pc al Tablet, no así pasa con el traspaso a móvil; aquí el cambio es profundo, respecto a cómo se ajustan y achican todos los elementos del sitio.


Grillascomparaciones1-06-06.jpg

El desplazamiento de elementos o bien el hecho de potenciar un menú por ejemplo, por sobre el principal, como sucede en el paso del Pc al Tablet,resulta como una decisión de cómo abordar en espacios reducidos grandes tamaños de información o contenidos que deben visualizarse de un modo parecido al pc, para no perder continuidad en la lectura. Se tiene que hay objetos que se ocultan y que se requiere la intervención del usuario para que tengan alguna funcionalidad detrás.Este dejar pistas al usuario, facilita la interacción propia que le confiere utilidad, requerimiento y adaptabilidad a estos dispositivos o aparatos.


Pchomesitio1-01.png Grillapc1-02.png


Header: análisis de medidas

Los tamaños de barras son casi estándares en medidas de alto. No hay un margen especifico entre una barra y otra, más bien se hallan pegadas una sobre otra. Así funciona además con el menú de despliegue, que baja sobre el fondo slideshow, escondiendo este objeto.

Laas etiquetas de categorías en el menú en todos los casos permanecen centradas y no varían en gran medida en los tamaños tipográficos.

700px

Análisis tipográfico: header y cuerpo de texto

Los tamaños otorgados al menú y submenú se da por pocos puntos de tamaño. El hecho de analizar las barras pertenecientes al header, trae la presencia de estados visuales por los que pasa el botón o barra. Estos estados son Normal y Hover. Evidencia cambios en color, tamaño, grosor en la tipografía cuando esta en un etsado y en otro. Ese posarse sobre el objeto va determinando ya sea el paso de un color blanco de título a un tono celeste o textos subrayados. En general los cuerpos de textos y títulos varian de tamaño de 13pt a 14pt, así para los links se tienen tamaños 15pt o 12pt, además de hacer gran uso de colores , orientaciones de la tipografía. Practicamente el paso de la tipografía visisble en el pc para el caso del header, no varia al pasar tanto a tablet como móvil. No así sucede con los cuerpos de texto, estos varían mínimamente en el paso de una pantalla a otra.

Medidasheadertipografias-08.jpg Tipografias cuerpotexto1-10.jpg


Conclusiones

El sitio deja en manifiesto su interés por el uso de fotografías por sobre la información más textual, cuando esto cambia, se puede visualizar una grilla de 3 a dos columnas, que esta en sí bien orientada y no resulta difícil de navegar.

Al pasar de un dispositivo a otro, se obtienen cambios que responden a la grilla inicial y su planteamiento adaptativo. Creo que los elementos están bien pensados en el caso de acomodarse a los reducidos o amplios entornos. De esta forma, los contenidos y más que todo, los elementos netamente visuales tienen leves comportamientos de desplazamiento. Los cambios más notorios obviamente se dan en la reducción de los recuadros interiores que conforman la grilla. Estos recuadros inicialmente tienen aire alrededor y terminan pegados al borde de la pantalla.

En la medida que la pantalla cambia en resolución, los objetos deben poder reinventar su forma de visualizarse, algunas herramientas de avanzar o retroceder en la vista de imágenes cambian de apariencia y tamaño, para dar paso al modo más interacción - persona, en el dispositivo móvil mayormente.

Una fortaleza del sitio es saber dar cabida a la fotografía en espacios reducidos y la creación de una nueva disposición de las barras de menú, además de su forma de despliegue. El uso de estados Normal y Hover en las tipografías, es de gran ayuda al lector, ya que nos va indicando esa retroalimentación o proceso de visibilidad de que ese ícono, botón o texto tiene accesos a otras informaciones interiores al sitio. Las debilidades que no facilitan la navegación son el diseño de páginas tipo de gran extensión vertical en cuanto a contenidos, lo que quizás podría debilitar la lectura o accesos a informaciones que son de utilidad, pero que para llegar a ellas debemos desplazarnos muy abajo. La manera de búsquedas o barras de menú deberían ser el puente de acceso más rápido para no tener que pasar por esos detalles de ineficiencia nombrado.