Diferencia entre revisiones de «Caso de estudio: TED Conferences»
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 | |
Nombre | TED Conferences |
---|---|
Período | 2014-2014 |
Palabras Clave | responsive design |
Estudiado en | Gráfica Digital 2014 |
Estudiado por | Mauro Villena |
URL | http://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
Primera vista
Versión PC (mínimo 1024px)
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.
Versión tablet (mínimo 768px)
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)
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.
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