Caso de estudio: TED Conferences

De Casiopea





Caso de Estudio
NombreTED Conferences
Período2014-2014
Palabras Claveresponsive design
Estudiado enGráfica Digital 2014
Estudiado porMauro Villena
URLhttp://www.ted.com/

Introducción

"TED Tecnología, Entretenimiento, Diseño (en inglés: Technology, Entertainment, Design) es una organización sin fines de lucro dedicada a las "Ideas dignas de difundir" (del inglés: Ideas worth spreading). TED es ampliamente conocida por su congreso anual (TED Conference) y sus charlas (TED Talks) que cubren un amplio espectro de temas que incluyen ciencias, arte y diseño, política, educación, cultura, negocios, asuntos globales, tecnología y desarrollo, y entretenimiento. Los conferenciantes han incluido a personas como el ex Presidente de los Estados Unidos Bill Clinton, los laureados con el Premio Nobel James D. Watson, Murray Gell-Mann, y Al Gore, el cofundador de Microsoft, Bill Gates, los fundadores de Google Sergey Brin y Larry Page, y el evangelista Billy Graham.

Hay más de 900 charlas TED disponibles en línea para consulta y descarga gratuita. Hasta marzo de 2011, las charlas han sido vistas más de 400 millones de veces y han sido traducidas a 80 idiomas."

El sitio está dirigido prácticamente a todos los grupos de interés imaginables, ya que cubre una gama temática sumamente amplia y presenta contenidos traducidos en 80 idiomas diferentes.


Grilla

Inicio

Como se puede observar a continuación, la grilla de seis columnas se mantiene a medida que se reduce el formato, mientras que los contenidos se disponen de una forma cada vez más alargada, dejando a primera vista los contenidos más recientes, y en último lugar información de carácter mayormente estático como datos de contacto, etc. En el único caso que la grilla de seis columnas varía es en la versión móvil, donde se reduce todo el contenido a una sola columna larga, con algunas subdiviciones que no respetan una ley de columnas, y más bien tienen que ver con el tamaño de algunas miniaturas.

Comportamiento

La grilla no sufre ninguna modificación entre el ancho mínimo para PC (1024px) y la versión para tablet (768px mínimo), sólo se transforma en la verión móvil (640px mínimo) donde las seis columnas iniciales se anidan en una sola. Sin embargo, a medida que se reduce el ancho, los contenidos se van ajustando de diferente manera en la misma grilla.

Los cambios notorios son los siguientes:

  • Historias recientes
    • (min 1024px)Los párrafos utilizan un ancho de dos columnas cada uno.
    • (min 768px) Los párrafos utilizan un ancho de tres columnas cada uno.
    • (min 640px) Los párrafos utilizan el ancho total de la única columna

Páginas interiores

En tamaño PC se mantiene la grilla de seis columnas. En tamaño tablet, la grilla se ajusta a cuatro columnas. En tamaño móvil, la grilla cambia dramáticamente, conformando dos columnas de diferente ancho.


Tipografía

Al ser un sitio responsive, la tipografía también se debe ajustar a ciertas características para tener un rendimiento óptimo en cuanto a accesibilidad desde diferentes dispositivos con distintas medidas de pantalla, es por eso que en la cascada de estilos no hay valores definidos en pixeles.

REM

rem es una medida tipográfica escalable, a diferencia del pixel que es estática. Esta unidad representa el font-size de su elemento raíz (por ejemplo el font-size del elemento <html> En este caso, 1rem=14px (87,5% [definido en .html]de 16px, que es el valor del rem por defecto), valor que se multiplica para cada clase de texto según esté definido en la cascada de estilos. Al estar definidos los cuerpos de texto en rem, en vez de pixeles, estos se pueden ajustar automáticamente para todos los tamaños de pantalla, sin tener que redefinir la variable font-size en cada caso.

Familias tipográficas

En todos los usos tipográficos se mantiene la familia tipográfica establecida para el body del sitio.

  • font-family:"Helvetia Neue Custom", "Helvetica", "Arial", "Sans-serif";
  • color:#333;

Helvetica Neue

Maurovillena1707201401.png

Títulos de párrafo

Los títulos correspondientes a bloques de texto estático corresponden al H7, que se define de la siguiente forma:

  • font-size: 2.28571rem (aproximadamente 31,9px)
  • weight: 300 (normal)
  • family: heredado de body
Maurovillena1707201410.jpg

Subtítulos de párrafo

Los subtítulos corresponden a texto h4, que se define de la siguiente forma:

  • font-size: 1,28571rem (aproximadamente 17,9px)
  • weight: 900 (extra bold)
  • family: heredado de body

Párrafos

  • font-size: 1rem (14px)
  • weight: 400 (normal)
  • family: heredado de body

Comportamiento

En el caso de los contenidos destacados en el slideshow, las medidas tipográficas varían de la siguiente forma:

  • Ancho mínimo de 1024px (PC):
    • font-size: 3.28571rem (52,5px app.)
  • Ancho mínimo de 768px (tablet):
    • font-size: 2rem (32px)
  • Ancho mínimo de 360px (móvil)
    • font-size: 100% (equivale a 1rem=16px)

Además, tanto en las versiones para PC y tablet, se mantiene en cada imagen el título del artículo, y el nombre de su autor, mientras que en la versión móvil, además de reducirse considerablemente el tamaño de fuente del título, el autor desaparece.

En términos generales el tamaño tipográfico se mantiene, al igual que la interlínea, y más que nada se ajusta en su ancho de grilla dependiendo del tamaño del dispositivo en el cual se visualiza para mantener una legibilidad óptima. Los cambios tipográficos más notorios tienen que ver con los títulos que se sobreponen a imágenes, ya que el texto plano en general no presenta variaciones entre móvil, tablet y PC.


Paralelo vistas responsive

Simbología

  • Header
  • Contenido destacado
  • Contenido destacado en slideshow
  • Listas de reproducción populares
  • Historias recientes
  • TED Global
  • Acerca de TED
  • Contenido indexado
  • Formulario de suscripción
  • Footer

Vista con screenshot

Vista en bloques


Navegación

Primera vista

Versión PC (mínimo 1024px)

Maurovillena1607201401.jpg

Aparecen los siguientes elementos:

  • Header con logotipo, slogan, menú de navegación, login, sing up y buscador.
  • Tres contenidos destacados (charlas) ordenados con sus correspondientes títulos y una pequeña bajada.
  • Filtros de búsqueda
  • Contenidos destacados en galería deslizable, esta aparece cortada, indicando al usuario que hay más contenidos hacia abajo. Además, presenta algunos contenidos con transparencia y con una flecha hacia la derecha, indicando que al cliquearlos se mostrarán más contenidos.
  • Al posar el cursor sobre cada imagen esta se amplía, añadiendo una bajada que precede su contenido, este hover, por supuesto, no existe en su versión móvil.
Maurovillena1007201410.png





Versión tablet (mínimo 768px)

Maurovillena1607201402.jpg

Aparecen los siguientes elementos:

  • Todos los elementos del header, exceptuando al logotipo y el botón "Login" se agrupan en un botón de navegación móvil.
  • Tres contenidos destacados (charlas) ordenados con sus correspondientes títulos y una pequeña bajada.
  • Filtros de búsqueda
  • Contenidos destacados en galería deslizable.
  • Seis listas de reproducción "populares" que se muestran como miniaturas. No se alcanza a ver el título, indicando que hay más contenido hacia abajo.



Versión móvil (mínimo 640px)

Maurovillena1607201403.jpg

Aparecen los siguientes elementos:

  • El header se mantiene con los mismos elementos que en la versión tablet, sin embargo se ajusta al ancho correspondiente.
  • Dropdown de contenidos recientes.
  • Galería deslizable con un número de objetos reducido.
  • Indicadores de paginación de la galería deslizable, indican que hay más contenido deslizando la galería.






Muestras de navegación

  • PC (Ancho mínimo 1024px)
    • Maurovillena1707201407.gif
  • Tablet (Ancho mínimo 768px)
    • Maurovillena1707201408.gif
  • Móvil (Ancho mínimo 640px)
    • Maurovillena1707201409.gif

Elementos de navegación

Header

Las modificaciones en el header son desde la versión PC a la tablet, las cuales se mantienen en la versión móvil. Concretamente el cambio ocurre en la línea de los 918px. de ancho, límite del diseño para PC, a los 917px. de ancho, donde el sitio sufre su primera reestructuración.

La versión PC incluye en el header los siguientes elementos:

  • Logotipo
  • Slogan del sitio
  • Menú de navegación
  • Buscador de contenidos
  • Boton de inicio de sesión
  • Botón de registro
  • Aclaración del slogan

La versión Tablet y Móvil incluyen solamente los siguientes elementos:

  • Botón menú de navegación desplegable
  • Logotipo
  • Botón de inicio de sesión

Menú de navegación

En el caso del formato PC, se trata de botones que despliegan categorías de contenidos cuando el cursor se posa sobre ellos. En formato tablet y móvil, estas categorías se agrupan en dropdowns dentro del botón de manú móvil.

Footer

El footer mantiene los mismos elementos en todos los tamaños de pantalla:

  • TED Talks Usage Policy
  • Privacy Policy
  • Advertising/Partnership
  • TED.com Terms of Use
  • Contact
  • Jobs
  • Staff
  • Press
  • Help
  • © TED Conferences, LLC

En las versiones PC y tablet el footer muestra sus contenidos de forma horizontal y extendida, dependiendo del ancho de pantalla puede que algunos elementos queden apilados. En la versión móvil, todos los elementos se apilan de forma vertical, y se alinean al centro de sus respectivas columnas conformando un listado.

En las versiones PC y móvil es clara la decisión de diseño que se tomó en cuanto a la forma de presentar los contenidos, donde por motivos lógicos en una pantalla de PC los elementos se extienden en un horizonte, y en una delgada pantalla de celular se apilan de forma vertical. Sin embargo, la versión tablet es un intermedio a mi parecer no muy diseñado, y más bien producto del azar, dado la forma en que comienzan a apilarse los items sin cambiar la estructura que los contiene.

Imagen

Comportamiento

Todas las imágenes del sitio son escaladas al cambiar el tamaño de la pantalla, es decir, no se recortan dentro de sus contenedores, si no que son elásticas, y se reubican dependiendo de la variación en la grilla, que es también elástica.

Tamaño

Las imágenes más grandes utilizadas en el sitio son las fotografías principales de cada artículo/charla que se muestran como galería/slideshow y sus características son las siguientes:

  • Tamaño: 2400px × 1800px
  • Formato: JPG
  • Peso aproximado: 427,19 kB

Formato

Como se muestra a continuación, el formato de las imágenes se utiliza de forma indiscriminada dentro de las mismas categorías. Por ejemplo, en estas dos imágenes de contenido destacado podemos ver que la primera es de extensión .jpg, mientras que la segunda es .png

Maurovillena1707201402.jpg Maurovillena1707201403.jpg

Criterios editoriales

Evaluación del sitio

Conclusiones

¿Qué funciona bien y qué no lo hace?

¿Cómo podría mejorar