Diferencia entre revisiones de «Caso de estudio: TED Conferences»

De Casiopea
Línea 138: Línea 138:


[[Image:Maurovillena1007201410.png|thumb]]
[[Image:Maurovillena1007201410.png|thumb]]


====Versión tablet (mínimo 768px)====
====Versión tablet (mínimo 768px)====

Revisión del 02:04 17 jul 2014





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."


Grilla

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 viñetas.

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

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;

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

Subtítulos de párrafo

Los subtítulos corresponden a texto h7, 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

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

Footer

Sidebars

Imagen

Criterios editoriales

Evaluación del sitio

Conclusiones

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

¿Cómo podría mejorar