Skip to content

5 Maneras de Diseñar para Grandes Vistas

Los diseñadores de páginas web siempre han sido personas con grandes imágenes, en el sentido de que les gusta tener pantallas realmente grandes delante de ellos. Es conveniente, y te hace sentir muy profesional. En este momento de mi vida, tampoco creo que pueda volver a tener un solo monitor. Y sin embargo, encuentro que muchos sitios web no están a la altura del potencial prometido por las pantallas gigantes, o incluso el presentado por los teléfonos con resoluciones HD.

Esto se debe a que vivimos en un mundo en el que el móvil es lo primero, con personas en el que el móvil es lo primero. Van a lugares lejanos y exóticos como el “exterior”, por lo que tienen que llevar sus pantallas consigo. La gente de fuera paga nuestras facturas, ya sea directa o indirectamente, y tenemos que crear sitios web que puedan utilizar en esas pantallas pequeñas.

Todo eso está muy bien, y no va a cambiar pronto. Pero las pantallas grandes tampoco van a ninguna parte. La gente sigue trabajando en oficinas, en casa y en cafeterías con ordenadores portátiles y de sobremesa. La gente todavía tiene “la computadora de la familia” en casa. Los jugadores de PC existen, y están comprando algunas de las pantallas más grandes, junto con los fotógrafos y videógrafos.

Estas personas a menudo se quedan con experiencias diseñadas para pantallas pequeñas y medianas. Esto probablemente no rompa la experiencia para ellos, pero ¿por qué no deberían tener una experiencia adaptada a sus necesidades? Además, ¿para qué es todo ese espacio extra en la pantalla, si no es para jugar con él? Aquí hay algunas maneras de aprovechar las pantallas más grandes, junto con algunos ejemplos:

1. Cuadros grandes literales

Una de las maneras más comunes en que la gente trata de usar el espacio vacío es poner fotos en él. Todos hemos visto los diez trillones de sitios web (quizás estoy exagerando) que usan alguna foto de stock como fondo, particularmente en la sección “héroe” de la página de inicio. Esto está en todas partes. Lo has hecho, lo más probable, y Dios sabe que lo he hecho.

No es la peor manera de hacerlo, y no es la mejor. Mientras que la compresión de imágenes es cada vez mejor, esas imágenes le golpearán en el ancho de banda, con o sin almacenamiento en caché. Si desea evitarle a usted y a su CDN algún problema, vaya con SVG. Lo sé, sigo diciendo esto, pero realmente funciona, y funciona de maravilla. Ver bebold para un ejemplo de cómo usar imágenes SVG simples para llenar un poco de espacio mientras se mantiene el ancho de banda y se renderizan los costos de la luz.

2. Escalar el diseño

Así que todos sabemos cómo funciona el diseño sensible, ¿verdad? Bueno, se ha vuelto mucho más fácil con CSS Grid. He estado experimentando con él para proyectos personales, y maldición, pero realmente lo cambia todo. ¿Esos diseños de tipo revista que los desarrolladores de front-end han estado tratando de hacer funcionar durante décadas? Ahora son fáciles. Fácil. Vaya a leer un tutorial.

Con todo el tiempo que le queda, ¿por qué no ver lo que puede hacer cuando deje que la envoltura central div tenga más de 1.200 píxeles? Podría ser divertido. Para un ejemplo absolutamente magnífico (si es que tiene mucho ancho de banda), vea Seedlip.

3. Tipo de respuesta

Pero oye, a veces no quieres molestarte tanto con las fotos. Tal vez sólo quieras un texto grande y maldito. Sin embargo, hemos tenido varias iteraciones en el diseño sensible durante años. Lo que ha sido más difícil es escalar nuestra tipografía hacia arriba y hacia abajo por resolución de pantalla de una manera que parece natural y fluida. Claro, puedes hacerlo con unas cuantas docenas de consultas de medios (o como dos, si eres perezoso como yo), pero la función CSS calc nos tiene cubiertos si queremos hacerlo de la forma más fácil.

Claro, Chris Coyier ha estado escribiendo sobre esto desde 2012, pero el soporte del navegador no siempre ha estado a la par. Me gusta bastante la técnica usada por la calculadora de tamaño de fuente de Mike Foskett, que permite especificar un tamaño máximo de fuente, y puede calcular todo en rem s y em s, si esa es la forma en que quieres ir.

Para un ejemplo de la técnica en acción ver cualquier artículo sobre CSS-Tricks.

4. Sólo tienes que poner más cosas en la pantalla

Como minimalista declarado, no soy un gran fan de bombardear al usuario con información en general. Sin embargo, hay veces en que esto es exactamente lo que quieren y necesitan. Los casos de uso más claros para este enfoque se encuentran en las interfaces de usuario estilo panel de control y en el simple y antiguo comercio electrónico. En cualquiera de estos casos, si no está utilizando el máximo espacio potencial para la funcionalidad y/o los productos, en realidad está ralentizando al usuario cuando no quiere que se ralentice.

La mayoría de los diseñadores de salpicaderos ya están, bueno….a bordo. Sin embargo, estoy viendo más y más plantillas del sitio del ecommerce que intentan atiborrar productos en áreas pequeñas en pantallas grandes, y eso tiene poco sentido para mí.

Ejemplo: No lo sé… ¿Amazonas? No voy a relacionar eso. Van a conseguir nuestro tráfico en cualquier caso. En realidad, el Seedlip ya mencionado también funciona muy bien para esta sección.

Ahora, cuando me opongo a este enfoque es en los sitios de noticias, y en general parecen estar de acuerdo conmigo. Aunque algunos todavía están usando la pantalla completa, hacen que el contenido sea lo suficientemente grande como para que no haya demasiado en la vista en un momento dado, lo que te anima a que te desplaces hacia abajo y elijas y elijas realmente tus artículos. Claro, lo hacen para mostrar más anuncios, pero esta puede ser una de las pocas veces que los anuncios han ayudado a mejorar una experiencia. Más o menos.

5. Vídeo

Y por último, una verdadera obviedad. No estoy seguro de que alguien esté haciendo esto mal. Aún así…. si vas a usar el video extensivamente en tu sitio de todos modos, y no te preocupa demasiado el ancho de banda, hazlo a lo grande. Es video, para eso es. Si nada más, por lo menos dale a la gente la opción de ver tus videos en modo de pantalla completa. Para ejemplos de este consejo en acción, vea el sitio de cualquier cineasta. Aquí hay uno: +Anillo.