Cuál es el mejor tipo de paginación en ecommerce

Tipos de paginación en ecommerce, ¿Cual debes utilizar?

¿Cuál es el mejor en UX , el tipo de paginación en ecommerce para mostrar productos: paginación, un botón «Cargar más» o desplazamiento infinito?

En este último año he llevado a cabo varios estudios de usabilidad a gran escala de más de 50 sitios web de comercio electrónico lideres en su sector. He probado (entre otras cosas) estos tres patrones de diseño para la carga de productos, tanto de escritorio como para móviles. La paginación sigue siendo la forma más popular de cargar nuevos elementos en un sitio web porque se genera por defecto en casi todas las plataformas de eCommerce.

Sin embargo, estas pruebas de usabilidad encontraron que los botones «cargar más» combinados con la carga perezosa (lazy-loading) son una implementación superior, lo que resulta ser una experiencia de usuario más fluida.

Encontramos que el desplazamiento infinito puede ser francamente perjudicial para la usabilidad, en particular, para los resultados de búsqueda y en los móviles. Sin embargo, no es en blanco y negro, porque el rendimiento de cada método varía según el contexto de la página.

Los resultados de la prueba

Decidí pedir a varias personas que navegaran por diferentes eCommerces, estos usuarios generalmente percibían que la paginación era lenta, y la presencia de más de un puñado de enlaces de paginación a menudo los desanimaba a navegar por la lista de productos. Más importante aún, observé que estos usuarios navegaban mucho menos en la lista total de productos que en los sitios web que se basan en los botones «Cargar más» o en el desplazamiento infinito. Por el lado positivo, pasaron relativamente más tiempo en la primera página de resultados.

Con el desplazamiento infinito, a veces referido al desplazamiento sin fin, el usuario experimenta la página como si todos los productos se cargaran a la vez (independientemente de si realmente ven todos los productos), pero sin la penalización de rendimiento de la carga de cientos de productos potenciales.

Por lo tanto, cuando el desplazamiento infinito se implementa bien, puede ser una experiencia increíblemente suave y sin fisuras. El usuario puede simplemente desplazarse por la lista de productos sin ninguna interrupción. No se necesita interacción – los productos simplemente aparecen a medida que el usuario se desplaza por la página. No es de extrañar, por tanto, que los usuarios naveguen con más productos en sitios web con desplazamiento infinito que en sitios web con botones de paginación o de «Cargar más».

Menos exposición con el desplazamiento infinito

Sin embargo, los resultados iniciales recibieron relativamente menos exposición. El desplazamiento infinito es, por lo tanto, ideal para mostrar rápidamente la amplitud de toda una categoría; pero debido a que los usuarios no se detienen naturalmente al desplazarse, tienden a escanear más y a centrarse menos en productos individuales de la lista.

También impide el acceso del usuario al pie de página del sitio web en algunos casos. Este es uno de los mayores desafíos de diseño del desplazamiento infinito: Debido a que los resultados se cargan continuamente a medida que el usuario se acerca a la parte inferior de la lista, el usuario verá el pie de página durante un segundo o dos hasta que el siguiente conjunto de resultados se cargue y se inserte repentinamente, empujando el pie de página fuera de la vista. Si hay muchos elementos en la lista (lo que suele ocurrir con las categorías de búsqueda y de alto nivel), esto impide que el usuario llegue al pie de página. Esto puede ser muy problemático, porque el pie de página a menudo contiene enlaces a páginas de ayuda vitales, navegación cruzada, contenido de categoría e información sobre asistencia al cliente, envíos y devoluciones.

Comparación de los eCommerces

Sólo algunos de los sitios web probados utilizaron el botón «Cargar más», pero fueron bien recibidos por los usuarios. De hecho, al comparar los ecommerce, encontré que sólo el 8% utiliza el enfoque «cargar más». El botón de «Cargar más» es un diseño muy sencillo que no supone una carga para el usuario a la hora de decidir a qué página ir, sino que simplemente le pregunta: «¿Quieres ver más resultados? Esto hace que la interfaz sea muy sencilla y probablemente la carga cognitiva más pequeña posible para la carga bajo demanda de elementos adicionales.

Los usuarios generalmente navegaban por más productos en sitios web con un botón «Cargar más» que en aquellos con enlaces de paginación, pero debido a que la carga de productos adicionales seguía requiriendo una elección activa y un clic, los sujetos tendían a leer los elementos mostrados mucho más de cerca que en los sitios web con desplazamiento infinito.

Ventajas del botón cargar más y desplazamiento infinito

Una de las ventajas de las implementaciones de «cargar más» y desplazamiento infinito es que la lista de productos crece, en lugar de que los resultados sean reemplazados. «Cargar más» permite al usuario comparar más fácilmente los productos de una lista completa. El hecho de contar con una lista consolidada de bienes facilitó considerablemente a los usuarios la evaluación de los productos hacia los que era mejor navegar y, en consecuencia, aumentó la tasa general de descubrimiento de productos.

Entonces, ¿qué método debo utilizar?

Lo ideal es utilizar múltiples variaciones de «cargar más». Las pruebas demostraron que ningún método era perfecto en todos los casos; diferentes contextos justificaban una de las tres implementaciones diferentes del enfoque «cargar más». Cubriremos estas tres variaciones durante el resto de este artículo:

· Para las categorías, utilice una combinación de «cargar más» y carga perezosa (lazy-loading).
· Para la búsqueda, utilice el botón «cargar más», Principalmente con un número dinámico de resultados devueltos basado en las puntuaciones de relevancia.
· En el móvil, utilice el botón «cargar más», pero cargando un menor número de productos por defecto.

Nota: Estos resultados provienen de las pruebas de sitios web de comercio electrónico. El rendimiento puede variar en otros tipos de sitios web.

«Cargar más» para las categorías

Mostrar de 10 a 30 productos en la página inicial de carga, y luego cargar otros 10 a 30 productos, hasta llegar a 50 a 100 productos, y luego mostrar un botón «Cargar más». Una vez que se haga clic en ese botón, cargar otros 10 a 30 productos, y reanudar la carga hasta que se hayan cargado los siguientes 50 a 100 productos, en cuyo momento mostrar el botón «Cargar más» una vez más. El umbral del botón «Cargar más» de 50 a 100 elementos determina cuándo interrumpir al usuario, mientras que el umbral de carga perezosa es simplemente una optimización del rendimiento para reducir el tiempo de carga y la carga del servidor.

Ten en cuenta que el número de productos a cargar es deliberadamente un rango. Las pruebas muestran que el número ideal dependerá del contexto y de la industria de tu sitio web. Para las listas con productos más específicos (la mayoría de los productos electrónicos de consumo, hardware, piezas y suministros), utiliza la gama inferior. Por el contrario, las pruebas demostraron que los usuarios pueden tratar con un mayor número de artículos cuando la lista contiene más productos visuales (prendas de vestir, muebles, decoración, etc.).

«Cargar más» para los resultados de la búsqueda

Debido a la indefinición de la búsqueda, tiende a tener muchos más resultados que la navegación por categorías. Cientos de resultados de búsqueda no eran poco comunes, y en los eCommerce masivos, las consultas de búsqueda a menudo devuelven miles de resultados.

Además, con la búsqueda, los resultados se ordenan por relevancia. Así, el quinto resultado es típicamente mucho más relevante para el usuario que el centésimo resultado. Esto significa que los usuarios no deberían tener que escanear más de cien productos durante la búsqueda, sino que se les debería animar a examinar los primeros elementos cuidadosamente. Los resultados de la búsqueda deben, por lo tanto, cargar sólo de 25 a 75 productos de forma predeterminada, y el desplazamiento infinito nunca debe utilizarse para los resultados de la búsqueda.

Interesantemente, la famosa prueba A/B de Etsy de desplazamiento infinito también documentó un éxito significativo en la experiencia de búsqueda. La paginación o un botón «Cargar más» sería mejor para los resultados de búsqueda, ya que no fomentan el escaneado rápido de un gran número de productos, sino que incitan al usuario a centrarse más en explorar el primer conjunto de resultados. De hecho, debido a la menor cantidad de resultados, la carga perezosa no es un requisito (pero, si se implementa para la navegación por categorías, también puede reutilizarse aquí).

¿Cuantos productos cargar por defecto?

Para llevar las cosas al siguiente nivel, el umbral de cuántos productos se cargan por defecto puede ajustarse dinámicamente en función de las puntuaciones de relevancia de los resultados de búsqueda. La mayoría de los motores de búsqueda clasificarán cada resultado con una puntuación de relevancia y devolverán primero los que tengan la mayor relevancia. Estas puntuaciones se pueden utilizar para determinar un umbral dinámico que aumenta o disminuye el número de productos cargados según si se debe animar al usuario a escanear sólo los primeros resultados o a navegar por una gama más amplia de elementos.

En la práctica, esto se puede hacer detectando caídas repentinas en las puntuaciones de relevancia para los resultados de búsqueda del usuario y, basándose en estas caídas, determinando un número óptimo del resultado que se debe devolver para esa consulta de búsqueda en particular. Por ejemplo, si las puntuaciones de relevancia empiezan a caer bruscamente después de los primeros 28 resultados, entonces el número de productos cargados puede reducirse para aumentar el enfoque en esos elementos. Sin embargo, si todos los primeros 100 resultados tienen puntuaciones de relevancia muy altas, entonces el número de productos cargados puede aumentar para fomentar una exploración más amplia.

Botones de «Cargar más» para móviles

Despues de muchas pruebas, encuentro que los enlaces de paginación pueden ser difíciles de utilizar con precisión y que normalmente darán como resultado una nueva carga de página. Mientras tanto, el desplazamiento infinito demostró ser muy efectivo para que los usuarios exploraran muchos productos (de hecho, los usuarios de se desplazaron a través de más del doble de productos en sitios web con desplazamiento infinito que en aquellos con paginación). Sin embargo, como ya se ha mencionado, puede hacer que el pie de página sea inaccesible. Durante las pruebas móviles, hizo que los enlaces de pie de página móvil vitales – tales como «Sitio de escritorio», «Preguntas frecuentes» y «Envío», fueran inaccesibles para los usuarios de la prueba, quienes tenían expectativas claras de que estos enlaces estuvieran disponibles en el pie de página.

La mejor solución, por lo tanto, es tener un solo botón grande de «Cargar más» al final de la lista de productos. Sin embargo, los móviles vienen con algunas limitaciones únicas:

Menos pantalla

Debido a que una pantalla móvil es mucho más pequeña, los elementos de la lista ocuparán una parte relativamente grande de la pantalla, y por lo general sólo se mostrarán dos o tres elementos en el diseño de la vista de lista. Por lo tanto, 50 elementos ocuparían muchas más alturas de vista en un dispositivo móvil que en un ordenador de sobremesa. En otras palabras, el usuario tendrá que interactuar (es decir, desplazarse) mucho más en un dispositivo móvil que en una lista de productos comparable en el escritorio.

Restricciones de desplazamiento

En un dispositivo táctil, el usuario sólo puede desplazarse arrastrando y deslizando con el dedo. Contrasta esto con un escritorio, donde el usuario normalmente tiene numerosas entradas para desplazarse, como la rueda de desplazamiento del ratón (o un deslizamiento del trackpad), una barra de desplazamiento de la interfaz de usuario arrastrable y varias entradas del teclado (las flechas arriba y abajo, las teclas de subida y bajada de la página, la barra espaciadora, etc.).

Desplazamiento lento

Además, en estas pruebas, los sujetos demostraron menos control sobre el desplazamiento continuo de la lista de productos. Por un lado, algunos se desplazarían demasiado despacio al tener que arrastrar continuamente el dedo por la pantalla; en este caso, una lista de hasta 50 productos tardaría mucho tiempo en explorarse. Por otro lado, algunos se desplazarían por la lista demasiado rápido porque involuntariamente invocarían el ímpetu del desplazamiento al pasar el dedo en rápida sucesión; en este caso, se perderían muchos productos

Eventos JavaScript

Por último, la forma en que se disparan los eventos JavaScript en la mayoría de los dispositivos táctiles significa que la técnica de carga dinámica y perezosa a menudo no se puede implementar también. Los eventos JavaScript se disparan sólo una vez que termina el desplazamiento del usuario; por lo tanto, los productos no se pueden obtener mientras el usuario se desplaza, sólo una vez que se detiene el desplazamiento.

Por estas razones, recomiendo cargar sólo de 15 a 30 productos en dispositivos móviles antes de mostrar el botón «Cargar más», y luego simplemente cargarlos todos a la vez (no de forma perezosa).

La API de historial de HTML5

La API de historial de HTML5 nos permite cumplir con las expectativas del usuario. Específicamente, la función history.pushState() nos permite invocar un cambio de URL sin recargar la página, haciendo coincidir el comportamiento del botón de retroceso del navegador con las expectativas del usuario. El navegador recordará la posición de desplazamiento del usuario, pero necesitamos asegurarnos de que cualquier clic de «Cargar más» se cargue por defecto cuando el usuario vuelva.

Ten en cuenta que si no dispones de los recursos técnicos necesarios para soportar un comportamiento correcto de los botones de retroceso, le recomiendo que no experimentes con el botón de «cargar más», sino que te atengas al modelo de paginación inferior.

Color en diseño web: todo lo que necesitas saber

El éxito de cualquier pieza de comunicación visual depende del color. La investigación sobre el impacto del color en el marketing nos dice que a una persona promedio le toma solo 90 segundos tomar una decisión subconsciente sobre un producto, y que alrededor del 70% de esas decisiones se basan solo en el color.

En consecuencia, aumentar tu conocimiento de la teoría del color y la psicología puede contribuir en gran medida a aumentar las conversiones y, en muchos casos, mejorar la usabilidad de tus interfaces.

Aquí hay algunos factores que debe tener en cuenta al tomar decisiones de color en tus diseños.

Entiende que significa el color en diseño web

Cuando se trata de color, una cosa que seguramente te encontrarás es la controversia. Ha habido múltiples intentos de mapear los sentimientos humanos y las emociones en relación con el color. En general, diferentes colores representan lo siguiente:

rojo

Connotaciones positivas: energía, pasión, fuerza, calidez, emoción.
Connotaciones negativas: ira, agresión, miedo, rebelión, maldad.
Se utiliza para: crear urgencia, estimular el apetito, detener la señal

Amarillo

Connotaciones positivas: felicidad, optimismo, calidez, alegría, diversión
Connotaciones negativas: críticas, cobardes, impacientes, pesimistas, impulsivas.
Se usa para: Iluminar el espíritu, demostrar alegría, mostrar calor.

Verde

Connotaciones positivas: Crecimiento, vitalidad, natural, terrenal, equilibrado.
Connotaciones negativas: codiciosas, materialistas, envidiosas, tortuosas, indiferentes.
Se utiliza para: demostrar el crecimiento, mostrar credenciales ecológicas, señal de marcha

Azul

Connotaciones positivas: confianza, estabilidad, calma, integridad, lealtad
Connotaciones negativas: tristeza, frialdad, previsibilidad, conservador, rigidez.
Se utiliza para: Promover la calma, ganar confianza, mostrar limpieza.

Negro

Connotaciones positivas: autoridad, control, fuerza, sofisticación, seducción.
Connotaciones negativas: secreto, negativo, oscuro, deprimente, distante.
Se utiliza para: crear misterio, afirmar confianza, demostrar sofisticación.

Antes de continuar te recomiendo este libro que a mi me ha ayudado mucho, Psicología del color de de Eva Heller y Chamorro Mielke, Joaquín, puedes comprarlo en el siguiente enlace: Psicología del color.

Si bien estos son grandes puntos de referencia, la investigación nos dice que nuestra percepción del color está muy influenciada por nuestros antecedentes personales, cultura, experiencias y preferencias.

En China, por ejemplo, el amarillo se ha convertido en sinónimo de publicaciones pornográficas, por lo que si bien la página de inicio de Mailchimp (arriba) significa felicidad, optimismo y la calidez para algunos, esos simpáticos monos pueden interpretarse de forma inesperada en el país más poblado del mundo.

Una vez que sepas para quién estás diseñando, ten en cuenta el impacto de tu uso del color para asegurarte de que no envías a los usuarios el mensaje equivocado suponiendo que todos reaccionarán de la misma manera.

La regla 60-30-10

Usado tradicionalmente para el diseño de interiores, la adopción de esta fórmula de tres colores le dará equilibrio y consistencia a tus interfaces. Si incluyes un color primario 60%, un color secundario 30% y un color de acento 10%, los usuarios podrán moverse cómodamente entre los puntos focales de tu interfaz sin sentirse abrumados por una paleta excesiva.

Haz que el color funcione para ti

¿En qué harías clic: rojo o verde?

Comprender que algunas secciones de tu público responderán de manera diferente a los colores elegidos que otras debe servir como un recordatorio de que el color tiene la capacidad de trabajar a favor y en contra de tu proyecto. Rojo y verde en el contexto de un sistema de semáforo físico significa dos cosas muy diferentes; detente y sigue. Sin embargo, esta lógica no siempre se traduce al mundo digital del diseño de interfaces.

En un experimento titulado The Button Color A / B Test: Red Beats Green, Joshua Porter probó un botón verde y un botón rojo uno contra el otro en una landing page para ver que botón conseguía convertir en su plataforma. Dadas las connotaciones mencionadas para cada color, uno podría predecir que el verde tendría mejor desempeño, pero un 21% más de personas hicieron clic en el botón rojo. Podemos suponer que esto se debió a la naturaleza que llama la atención del rojo, o quizás porque el rojo contrastó más con los reflejos verdes preexistentes en la interfaz.

No importa cómo lo mires, debemos tener en cuenta que, si bien los colores significan un significado, siempre vale la pena probarlos con los usuarios en el contexto del diseño de tu página. Esto asegurará que el color funcione en tu beneficio, en lugar de en detrimento de tu tasa de conversión.

Refuerza tu mensaje con color.

El fondo azul oscuro de Monzo significa estabilidad.

Para evitar socavar el mensaje de tu marca, elige colores para tu interfaz que refuercen sus valores o propuesta. Es fácil caer en la trampa de elegir colores llamativos y gradientes de moda, pero las opciones funcionales podrían ser mejores a largo plazo.

Aunque las tarjetas bancarias físicas de Monzo son un coral llamativo y muy práctico, el esquema de color del sitio web cuenta una historia de estabilidad y confiabilidad, utilizando un fondo azul oscuro combinado con reflejos azules claros que son lo suficientemente brillantes como para llamar tu atención, pero lo suficientemente silencioso para mantener un aire de integridad.

Al jugar con los valores CSS de la página de inicio, podemos hacer que el coral sea el color de fondo principal, creando una página de inicio juvenil y de aspecto energético. Es innegable que llama la atención, pero ¿es más probable que los clientes potenciales confíen en una organización financiera basada en estas cualidades? Tendrías que probarlo con los usuarios para estar seguro, pero la psicología del color sugeriría un gran no.

¿Confiarías en Monzo si su página de inicio fuera de este color?

Color en diseño web y accesibilidad.

Aproximadamente uno de cada 12 hombres y una de cada 200 mujeres se ven afectados por la ceguera al color. Esto, combinado con el hecho de que los lectores de pantalla no comunican el color a los usuarios con discapacidades visuales, significa que debemos tener en cuenta que el color solo no siempre es un medio apropiado para transmitir el significado dentro de nuestras interfaces.

Si por ejemplo necesitas comunicar un error en tu página, es posible que el color rojo no sea suficiente por sí solo. Se debe utilizar una buena redacción combinada con la jerarquía espacial y tipográfica para permitir que las personas con ceguera al color y las que usan lectores de pantalla comprendan mejor los errores que intentas mostrar. Al diseñar tu próxima interfaz, intenta ver tu archivo en escala de grises para comprobar si tus mensajes de error, llamadas a la acción y notificaciones aún tienen sentido sin depender del color.

Cómo diseñar para la web en 2019 / Nuevas tendencias

He escrito acerca de cómo diseñar para la web moderna antes de 2018, pero la web avanza rápidamente por lo que esas pautas ya están obsoletas y son obsoletas a medida que las convenciones más modernas se han generalizado.

Analicemos los principios de diseño más importantes para la web moderna en 2019

Deja que los usuarios sepan que tienes una aplicación móvil

Este sigue siendo el principio más importante y no deja de tener razón. Los grupos focales bien pagados han demostrado que lo primero que un usuario desea hacer cuando visita tu página web en su navegador es instalar una aplicación móvil.

La mejor manera de lograr esto es mostrar un diálogo que les solicite que la instalen.

Como paso opcional, puede agregar un botón o un hipervínculo para cerrar dicho cuadro de diálogo, pero es importante usar algún texto, preferiblemente que esté redactado de tal manera que avergüence al usuario para que cumpla con los requisitos.

Implementa una política de no seguimiento

Muchos navegadores modernos en estos días son compatibles con un encabezado HTTP llamado DNT que significa No rastrear. Este encabezado tiene la intención de indicar que un usuario no desea ser rastreado y, desafortunadamente, esto está habilitado de manera predeterminada en algunos navegadores.

Sin embargo, no te preocupes ya que no todo está perdido. Hemos encontrado que la mayoría de los usuarios eliminarán este encabezado cuando se le solicite hacerlo. Recomendamos que sirva una guía sobre cómo deshabilitarlo cuando el encabezado está presente.

Consejo : No sirvas el mensaje para deshabilitar DNT en la guía que muestra a los usuarios cómo deshabilitar DNT ya que la tasa de conversión termina siendo bastante pobre.

Implementando una Política de Cookies

El consentimiento de las cookies es confuso, mientras que en la mayoría de los casos no es necesario con un uso razonable de cookies, es mejor pedirle al usuario que lo autorice para que podamos rastrear todo sin temor a las repercusiones.

Consejo : No sirvas páginas sin cookies habilitadas, incluso cuando no las necesitamos, ya que significa que podemos rastrear menos información personal, por lo que tenemos menos información de usuario para vender.

Bloqueando los bloqueadores de anuncios

Los bloqueadores de anuncios están en todas partes y realmente pueden dañar tus márgenes, por lo que la precaución obvia a tomar es bloquear los bloqueadores de anuncios.

Chrome se está moviendo para bloquear los bloqueadores de anuncios, por lo que si el usuario usa un navegador como Brave, podremos decir que el navegador del usuario no es lo suficientemente moderno.

Consejo : No le cuente a nadie sobre Brave, el navegador de código abierto basado en Chromium con bloqueo de anuncios incorporado.

Maximizando tu diseño

Los días de 800 píxeles de ancho se acabaron. Las pantallas modernas tienden a ser de pantalla ancha, así que asegúrate de aprovechar todo el ancho del diseño.

Utilizar notificaciones

Los navegadores modernos admiten notificaciones, por lo que habilitarlas es una obligación, pero como alternativa también pueden también suscribir automáticamente al usuario a un boletín, notificaciones por SMS y / o notificaciones por correo electrónico.

Sugerencia : Usa estas notificaciones para avisar a los usuarios cuando tengas una nueva versión de la aplicación móvil disponible.

Preguntar al usuario

A veces, los usuarios olvidan que pueden registrarse, asegúrate de avisarles regularmente y presentar un enlace o botón de registro prominente.

Sugerencia : También puedes preguntar al usuario cuando esté a punto de abandonar tu página web o cuando el cursor del mouse lo abandone.

Permitir que el usuario opte por salir

Es muy importante que seamos amigables con el usuario y que no seamos intrusivos, lo que significa que debemos permitir que los usuarios desactiven nuestras solicitudes constantes y diálogos modales.

La mejor práctica aquí es colocar la configuración de exclusión voluntaria en un lugar donde el usuario la detecte fácilmente, ya que esto se encuentra dentro de una de las páginas de «preferencias de cuenta».

Usa JavaScript

Es un hecho conocido, todos los sitios web requieren de JavaScript.

Mientras podrías estar pensando, «Oh, es sólo texto sin formato». ¿Pero en el futuro? Para entonces, habrá muchos más, y te lo prometo ahora mismo. Cuando eso suceda, te arrepentirás de no haber convertido tu sitio web en una aplicación isomórfica utilizando el último marco que se ejecuta en una nube sin servidor.

Consejo : No renderices esta página con JavaScript.

7 reglas del diseño web que siempre hay que cumplir

Reglas del diseño web

El diseño web puede ser un mundo complejo. Está lleno de reglas, terminología y técnicas que rigen lo que hace que una página web excelente logre los objetivos para los que fue diseñada, y otra que no. Sin embargo, el diseño web puede ser complicado de dominar si no tienes la capacitación adecuada. A pesar de su complejidad, el diseño web se está convirtiendo en una habilidad cada vez más valiosa en nuestro mundo digital. Aprender sobre los fundamentos del diseño web te ayudará a construir y refinar la marca de tu empresa.

1. Evita los problemas de legibilidad

Si los usuarios no pueden leer correctamente el texto de tu página web, tu mensaje no se está difundiendo bien. Tener texto legible en tu página web es increíblemente importante, pero hay varios errores que los diseñadores novatos cometen para disminuir la legibilidad.

Las malas opciones de color del texto pueden ser fácilmente contraproducentes. Por ejemplo, una página web puede tener un texto blanco sobre un fondo de color claro, lo que puede dificultar su lectura. Del mismo modo, tener texto oscuro sobre un fondo oscuro también dificulta la lectura. El texto colocado sobre una imagen (como un banner) también puede dificultar su interpretación.

Para evitar esto, usa el contraste de color apropiado. Utiliza texto oscuro sobre el fondo blanco o texto claro sobre un fondo oscuro. Si bien ambas son buenas opciones, el texto oscuro sobre un fondo claro tiende a proporcionar el mejor contraste, pero es más tenso para los ojos cuando se lee durante un largo período de tiempo. Si estás colocando texto sobre una imagen, usa una superposición para aumentar el contraste entre el texto y la imagen. Una superposición oscura ayudará a que el texto de color claro sobresalga, mientras que usar una superposición de colores más claros hará que el texto oscuro aparezca.

Además, sería mejor si eligieras fuentes que sean fáciles de leer y no demasiado pequeñas. Una fuente complicada que está escrita en cursiva o con serif puede ser extremadamente difícil de leer, especialmente para usuarios mayores. Si el texto es demasiado pequeño, te encontrarás con el mismo problema. Elige fuentes claras, sans-serif y tamaños de letra grandes para mejorar la legibilidad de tu página web.

2. Aplicar jerarquía visual

Otro concepto fundamental en el diseño web es la idea de jerarquía visual. Este es el orden en que un usuario procesa la información en una página web .

Hay una serie de técnicas que puedes utilizar para facilitar a los usuarios la comprensión de la jerarquía de tu contenido, como el uso de diferentes tamaños de fuente y color. Por ejemplo, el título del artículo que estás leyendo en este momento es mucho más grande que el título de la sección. Además, el encabezado de esta sección es más grande que la fuente del texto. Esto se debe a que queremos que los usuarios lean el título primero y luego se muevan hacia abajo en la página. Los diferentes tamaños de nuestros títulos, encabezados y texto ayudan a guiar a los espectadores a medida que interactúan con nuestro contenido.

El color es útil para establecer la jerarquía visual también. Por ejemplo, los botones en una página de inicio que les dicen a los usuarios que deben «registrarse» o «comprar ahora» pueden ser de un color más brillante que los otros colores de la página. Los enlaces también pueden tener un color diferente al del texto normal.

Piensa en cuál es tu objetivo final para tu sitio web. ¿Quieres que los usuarios compren tus productos? ¿Quieres que se registren a tu newsletter? ¿Programar una consulta gratuita? Cualquiera que sea el caso, puede utilizar la jerarquía visual para guiar a los usuarios hacia los puntos de venta de tu página web.

3. No utilices muchas fuentes diferentes

Mientras estamos en el tema de las fuentes, se debe tener en cuenta que la regla general es utilizar tres fuentes o menos. Muy a menudo, una fuente es suficiente. En pocas palabras, tener demasiadas fuentes hará que tu página se vea desestructurada y poco profesional, por decir algo.

También debes asegurarse de que tus opciones de fuente sean cohesivas. Además, deben ser apropiadas para tu industria y el mensaje que estás tratando de transmitir. Las fuentes Sans serif son particularmente útiles para transmitir una imagen moderna y también son ideales para productos digitales (como eCommerces). Evita las fuentes exageradas, infantiles o no profesionales a toda costa.

4. Tener una CTA visible

Una de las primeras cosas que los usuarios deberían ver cuando visitan tu sitio web es una llamada a la acción (CTA). Por lo general, este es un botón en la página principal de tu pagina que les dice «Compre ahora», «Obtenga más información» o «Programe una consulta». Su CTA es tu punto de venta e impulsará el compromiso del cliente.

Algunos sitios web entierran su CTA en la parte inferior de la página u olvidan incluirla en absoluto. Ya que el CTA genera la respuesta del cliente que está buscando, asegúrate de que sea uno de los primeros elementos que alguien vea.

5. Incluye tu información de contacto

Parece obvio, ¿verdad? Pues te sorprenderías de cuántas empresas se niegan a incluir su información de contacto en sus páginas web. Una de las razones principales por las que los visitantes visitan tu sitio es ponerse en contacto con tu empresa. Si no pueden encontrar la información que están buscando dentro de los primeros segundos de visitar tu página, se irán.

Por este motivo, asegúrate de incluir información de contacto clara y fácil de encontrar en tu sitio web. Asegúrate de incluir cosas tales como:

Tu número de teléfono
Dirección comercial de tu empresa
La dirección postal de tu empresa, si es diferente de la dirección comercial
Direcciones de correo electrónico de los contactos clave (o al menos una dirección de correo electrónico genérica)

También puedes configurar un formulario de contacto en tu página web para que los usuarios completen y envíen consultas. Sin embargo, aún debes incluir tus detalles completos de contacto, como tu número de teléfono y direcciones físicas. Recuerda que algunos usuarios preferirán llamarte o visitar tus instalaciones. El porcentaje de usuarios que prefieren usar mecanismos de contacto «tradicionales» variará según el tipo de usuarios a los que se dirige. Cuanto más fácil sea para que las personas se comuniquen contigo, más eficaz será tu web.

6. Evitar las distracciones automáticas

Si bien el video, el audio y otras formas de medios digitales pueden agregar vida y compromiso a una página web, evita la función de reproducción automática. Incluir un video o audio de reproducción automática en tu web puede dificultar que los usuarios naveguen por tu sitio. Además, estas características pueden dificultar la búsqueda de la CTA.

Además, la reproducción automática de audio o video puede ser molesta y frustrante para los espectadores. ¿Alguna vez has abierto un enlace a una página web en tu teléfono, solo para que el audio alto proveniente de un video incorporado comenzase a reproducirse de repente? Esto no solo puede ser discordante, sino que los videos en reproducción automática también pueden ser incómodos y vergonzosos si estás en público.

La solución a esto es bastante sencilla. En lugar de habilitar las funciones de reproducción automática, simplemente permita a los usuarios hacer clic en el botón de reproducción.

7. Corrección, Corrección, Corrección

¿Alguna vez has estado navegando por una página web y has encontrado un error tipográfico deslumbrante? Ese error tipográfico puede sacarte del contenido del sitio web y hacer que pienses más en el error que la compañía dejó de cometer. Si bien los elementos visuales de un sitio son cruciales para su diseño general, el texto es igualmente importante (si no más).

Los accidentes de puntuación, así como los errores gramaticales y ortográficos, pueden disminuir la credibilidad de tu empresa. Mientras que unos pocos errores tipográficos de vez en cuando no necesariamente significan un desastre, muchos errores a lo largo del tiempo pueden dañar la imagen profesional que intentas crear.

Cuando diseñes tu sitio web final, asegúrate de tomarte un tiempo adicional para revisar todas las secciones. Haz que un colega o dos también lo revisen, en caso de que accidentalmente se haya perdido algún error. Tan pronto como veas un error tipográfico, corrígelo! Asegúrate de mantener tu página web limpia y libre de todos los errores para que no distraigan de tu diseño y contenido.

El diseño web es una habilidad compleja de dominar, y tal vez uno podría decir que es mejor dejarlo en manos de los expertos. Sin embargo, si realizas el trabajo tú mismo, la familiaridad con estas reglas te permitirá saber qué funciona y qué no funciona cuando evalúas la calidad y la eficacia de tu página web.

Responsive design vs diseño adaptativo

Responsive design o diseño adaptativo

Ambos términos tienen un objetivo muy similar. Buscan brindar la mejor experiencia posible en un solo sitio web cuando se visualiza en una gran cantidad de dispositivos de escritorio, móviles y tabletas.

Ethan Marcote es ampliamente citado como la combinación del término responsive design, que es el uso de consultas para servir a diferentes CSS permitiendo que un sitio cambie su apariencia cuando se ve en pantallas de diferentes tamaños. En resumen, se puede lograr simplemente con HTML y CSS. (En estos días suele ser HTML5 / CSS3, pero no es obligatorio)

Diseño adaptativo es el título del libro de Aaron Gustafson, toda una autoridad en este campo. El diseño adaptable del sitio incluye las consultas de CSS del responsive design, pero también agrega mejoras basadas en Javascript para cambiar el marcado HTML del sitio basado en las capacidades del dispositivo. Esto también se llama «Mejora progresiva»

Un ejemplo es que puede tener una barra lateral de navegación en la versión de tamaño de escritorio del sitio, y luego, cuando se ve en un teléfono inteligente, el menú se convierte en una lista de selección para ahorrar espacio en la interfaz. Otro ejemplo es que puede ofrecer funcionalidades en un dispositivo móvil no disponibles en una computadora de escritorio. Supongamos que tiene un sitio web de restaurante: cuando se visualiza en un dispositivo móvil con GPS, aparece un panel que dice «Obtenga direcciones a nuestro restaurante desde su ubicación». Los escritorios no conocen su ubicación, por lo que no les parece.

Responsive design (RWD)

Los elementos clave que conforman un sitio web Responsive son CSS3, consultas de medios, la regla @media y cuadrículas fluidas que utilizan porcentajes para crear una base flexible. También es fundamental utilizar imágenes flexibles, videos flexibles, tipos de fluidos y EM en lugar de píxeles. Todos estos puntos clave permiten que el sitio web adaptable modifique su diseño para adaptarse al dispositivo.

El Responsive design es del lado del cliente, lo que significa que la página se envía al navegador del dispositivo (el cliente), y el navegador modifica la apariencia de la página en relación con el tamaño de la ventana del navegador.

La definición de un sitio Responsive design es que modificará de manera fluida su composición para mejorar la accesibilidad del contenido en función del tamaño de pantalla de la ventana del navegador.

Diseño web adaptativo (AWD)

El diseño web adaptativo utiliza diseños predefinidos que se han construido cuidadosamente para una variedad de tamaños de pantalla. Un diseño particular se activa cuando el tamaño de la pantalla del dispositivo que ve el sitio web se detecta y se combina con una hoja de estilo.

El diseño adaptativo es predominantemente del lado del servidor. Esto significa que el servidor web realiza todo el trabajo de detección de los distintos dispositivos y carga la hoja de estilo correcta en función de los atributos del dispositivo. Además de cambiar el diseño según el tamaño de la pantalla, también pueden cambiar según las condiciones, como si el dispositivo tiene una pantalla retina o no.

El servidor puede detectar esto y mostrar imágenes de alta calidad para dispositivos de visualización de retina como iPad e imágenes de baja calidad para pantallas de definición estándar.
Las desventajas de AWD son que la construcción inicial es muy costosa ya que tiene muchos diseños para diseñar. Además, mantener y actualizar todos estos diseños puede llevar mucho tiempo y, por lo tanto, costará mucho dinero.

La definición de un sitio web adaptativo es aquella que tiene un conjunto de diseños predefinidos que se activan cuando mejor se adapta al dispositivo detectado por el servidor.

Similitudes y diferencias

La similitud obvia de ambos métodos es que mejoran la accesibilidad del contenido del sitio web en dispositivos móviles y varios tamaños de pantalla. Ambos también brindan a los visitantes una experiencia de usuario mejorada para dispositivos móviles.

Son diferentes en la forma en que entregan el diseño adaptable al usuario. RWD depende de las cuadrículas de fluidos y AWD se basa en diseños de tamaño predefinidos. Además, el hecho de que utilicen el lado del cliente o el lado del servidor es otra forma en que difieren.

Las ventajas del web responsive:

1. Fácil de usar y flexible en diferentes resoluciones de pantalla.

2. Experiencia visual y operacional unificada en múltiples terminales, con un bajo costo invertido en mantenimiento.

3. SEO amigable y no hay distinción de versión de página, manteniendo la estrategia SEO consistente.

4. La conexión entre sitios móviles y de escritorio puede completarse sin redirección.

Las ventajas del diseño adaptativo:

1. Compatible incluso con algún sitio complicado.

2. Se puede implementar a un precio menor.

3. La codificación será más eficiente.

4. Las pruebas serán mucho más fáciles y la operación puede ser relativamente más precisa.

¿Debo usar web responsive o responsivo?

Al sumar el puntaje, el web responsive es casi siempre la opción más segura para tu sitio. Siempre funciona bien independientemente de los nuevos tamaños de pantalla, mejora los tiempos de carga y, por lo general, vale la pena el esfuerzo adicional.

Sin embargo, para algunos sitios, la adaptación puede ser una mejor opción. Es probable que estos sean sitios web más nuevos y pequeños que recién están comenzando y que necesitan preservar sus recursos. Un sitio de adaptación es más fácil de crear, y el tamaño y la audiencia más pequeños evitarían que los tiempos de carga más lentos o la menor flexibilidad sean un problema.

Consejos rápidos para los diseñadores:

Determina las diferencias y similitudes entre los elementos de la página y desarrolla patrones comunes para las plantillas de página. Este enfoque ahorrará tiempo y le dará una sensación consistente al sitio.
Al diseñar adaptativo, diseña para estos seis anchos de pantalla comunes: 320, 480, 760, 960, 1200 y 1600.
Proporciona a tu desarrollador una guía de estilo como esta junto con sus PSD.
Realiza un control de calidad de los archivos codificados para asegurarte de que cada página se muestre como lo habías previsto.
Las consultas de medios no funcionan en Internet Explorer 8 y anteriores. Utilice un polyfill de Javascript como CSS3-MediaQueries.js para admitir consultas de medios en navegadores antiguos. Sin embargo, considera que los rellenos automáticos se pueden agregar al tamaño del archivo y que los usuarios pueden desactivar Javascript.
Para diseños de cuadrícula flexibles en web responsive, utilice ems o porcentajes. Evitar anchos fijos.
En elweb responsive, usa el ancho máximo: 100% para hacer que las imágenes, los videos y el lienzo HTML5 sean escalables. A medida que se reducen las vistas, cualquier medio se reducirá de acuerdo con el ancho de su contenedor. Sin embargo, el ancho máximo no funciona con medios incrustados. Echa un vistazo a este artículo para conocer la solución proporcionada por A List Apart.
Mantente en constante comunicación con tu diseñador. Si estás confundido, pregunta ahora para no tener que arreglar nada más tarde.

Cómo usar fuentes variables en la web 2018

Las fuentes variables se desarrollaron como un esfuerzo conjunto de las cuatro compañías de tecnología más grandes involucradas en el diseño de tipos: Apple, Google, Microsoft y Adobe. Como sugiere su nombre, las fuentes variables permiten a los diseñadores derivar un número ilimitado de variantes de fuente del mismo archivo de fuente. De esta manera, es posible ajustar el tipo de letra a diferentes dispositivos, vistas, orientaciones y otras restricciones de diseño.

¿Por qué usar fuentes variables?

Las fuentes variables reducen significativamente las limitaciones de los formatos de fuente actuales. Las fuentes web de hoy son inflexibles y no se escalan muy bien; solo nos proporcionan algunos estilos fijos con nombres como «Light», «Bold» o «Extra Bold». Incluso hay tipos de letra que solo tienen una variante de inclinación o peso. Sin embargo, con las fuentes variables, tenemos acceso a una flexibilidad infinita de peso, inclinación, altura x, losas, redondeo y otros atributos tipográficos.

Mejor aún, las fuentes variables mejoran el rendimiento. Las fuentes web como las conocemos necesitan que cada variante de fuente se almacene en un archivo separado. Por ejemplo, así es como se ve la carpeta de la fuente web Roboto :

Entonces, aquí hay una breve comparación:

Roboto: doce archivos de fuentes, doce variantes.
Fuentes variables: un archivo de fuente, variantes ilimitadas.
Como ya puede imaginar, nuestras opciones tipográficas crecen increíblemente con fuentes variables.

El formato de fuente OpenType

Entonces, ¿qué formato de archivo utilizan las fuentes variables? Según los documentos oficiales :

«Las fuentes OpenType pueden tener la extensión .OTF o .TTF, dependiendo del tipo de contornos en la fuente y el deseo del creador de compatibilidad en sistemas sin soporte nativo de OpenType».

Para ser completamente precisos, las fuentes variables se introdujeron en la versión 1.8 de la especificación del archivo de fuentes OpenType. OpenType es una extensión del formato de fuente TrueType, por lo tanto, las fuentes variables están disponibles como archivos .otfo .ttf.

Ejes de diseño

La nueva especificación del archivo de fuente OpenType viene con una nueva tecnología llamada Variaciones de fuente OpenType que nos permite interpolar la fuente en numerosos ejes de diseño, hasta 64,000, según el blog Adobe Typekit .

La especificación OpenType 1.8 define cinco etiquetas de eje registradas:

peso
anchura
tamaño óptico
inclinación
itálico

Además, los diseñadores de tipos también pueden definir ejes personalizados junto con sus propias etiquetas de cuatro caracteres en la tabla de «nombre» del archivo de fuente.

A continuación, puede ver una gran ilustración de cómo funcionan los ejes de diseño ( del artículo de John Hudson en Medium.com , referido por Typekit como el anuncio no oficial de fuentes variables). Demuestra una fuente variable de tres ejes con peso, ancho y ejes de tamaño óptico:

El glifo rojo en el centro representa el conjunto de contornos almacenados en la fuente, los glifos verdes representan los extremos de los tres ejes y los glifos naranjas representan las posiciones de las esquinas.

Todo el cubo representa el espacio de diseño al que tenemos acceso si usamos esta fuente variable de tres ejes. Es un cubo solo porque la fuente tiene tres dimensiones (peso, ancho, tamaño óptico). Con menos ejes, nos moveríamos hacia abajo hacia un rectángulo (2 ejes) o una línea (1 eje) y con más ejes, nos moveríamos hacia arriba en un hiperespacio multidimensional.

Y, por supuesto, una fuente variable de 3 ejes de la vida real no sería necesariamente un cubo, sino más bien un cuboide rectangular, ya que en la mayoría de los casos los diferentes ejes no tienen la misma longitud.

Instancias nombradas

Las fuentes variables aún permiten a los diseñadores de tipos definir instancias con nombre, variantes de fuentes específicas entre el número ilimitado de opciones. Por ejemplo, el Prototipo de fuente variable de Adobe contiene dos ejes (peso y contraste) y ocho instancias con nombre (Luz extra, Luz, Regular, Semibold, Negrita, Negro, Contraste medio negro, Contraste alto negro).

Las instancias con nombre son más importantes si queremos usar una fuente variable con programas de diseño como Adobe Illustrator. En la web, podemos generar fácilmente cualquier instancia (con nombre o sin nombre) con CSS (por ejemplo, en la fuente variable de Adobe, la instancia con nombre Extra Light toma el valor mínimo de los ejes de peso y contraste).

Adición de fuentes variables a una página web

Podemos agregar fuentes variables a un sitio web usando la regla @ font-face en la parte superior del archivo CSS.

Por ejemplo, podemos agregar la fuente de la variable Avenir Next con la siguiente regla de CSS:

@font-face {
font-family: «Avenir Next Variable»;
src: url(«AvenirNext_Variable.ttf») format(«truetype»);
}

Puede encontrar más fuentes variables en el sitio web de Axis Praxis (también tiene un área de juegos para fuentes variables), en las páginas de GitHub de diferentes compañías de diseño de tipos (por ejemplo , MonoType , Type Network ), y Typekit también ha comenzado a publicar las versiones de fuentes variables. De sus familias más populares de Adobe Originals.

Nota: no todas las fuentes OpenType que encontrará en la web son fuentes variables (solo se introdujeron con la versión 1.8).

Configuración de variaciones de fuente con CSS

Para definir las variaciones de fuente, podemos usar la font-variation-settingspropiedad CSS introducida con el Nivel 4 del Módulo de fuente CSS . Esta es una propiedad de bajo nivel que nos permite controlar las fuentes variables al especificar un valor para cada eje.

Ejemplo 1: Avenir Next

La fuente de variable Avenir Next contiene dos ejes de diseño: peso y ancho, ambos son ejes registrados. Avenir Next también tiene ocho instancias con nombre (Regular, Mediana, Negrita, Pesada, Condensada, Mediana Condensada, Negrita Condensada, Pesada Condensada).

El CSS completo (que pertenece a una variación aleatoria de fuentes sin nombre) se ve así:

body {
font-family: «Avenir Next Variable»;
color: rgb(0, 0, 0);
font-size: 148px;
font-variation-settings: ‘wght’ 631.164, ‘wdth’ 88.6799;
}

Podemos usar cualquier valor (incluso números flotantes) para los ejes entre los valores mínimo y máximo. En el caso de Avenir Next, podemos usar el rango [400, 900] para el peso y el rango [75, 100] para el eje de ancho.

¿Dónde encontrar las gamas? Los archivos de fuentes contienen las tablas de variación de fuentes (fvar) que contienen los datos necesarios. Sin embargo, para acceder a esa información, necesitamos ver el contenido del archivo de fuente con una herramienta como FontView . A veces, la documentación de la fuente contiene los rangos, pero desafortunadamente esto no siempre es así. La buena noticia es que el sitio web de Axis Praxis contiene los valores mínimo-máximo para todas las fuentes variables que incluye.

Ejemplo 2: Decovar

Decovar es una de las fuentes variables más versátiles que existen actualmente. Lo puede encontrar en Axis Praxis , en GitHub , y también tiene una página de demostración en el sitio web de TypeNetwork. Decovar contiene uno registrado (peso) y catorce ejes personalizados, y también tiene diecisiete instancias con nombre.

De los documentos de GitHub de Decovar, aquí hay algunas variantes que podemos lograr con esta fuente variable de 15 ejes:

El CSS que necesitamos usar es similar al del ejemplo anterior. Aquí, tenemos que definir los quince ejes (en línea, esquilado, losa redondeada, rayas, terminal de lombriz, esqueleto en línea, abierto en línea, terminal en línea, gusano, peso, ensanchado, redondeado, esqueleto de lombriz, losa, bifurcado).

div {
font-family: Decovar;
color: white;
background-color: rgb(0, 162, 215);
font-size: 157.12px;
text-align: left;
padding-top: 20px;
font-variation-settings: ‘INLN’ 285.094, ‘TSHR’ 346.594,
‘TRSB’ 786.377, ‘SSTR’ 84.268, ‘TWRM’ 200, ‘SINL’ 84.268,
‘TOIL’ 0, ‘TINL’ 91.983, ‘WORM’ 0, ‘wght’ 400, ‘TFLR’ 0,
‘TRND’ 0, ‘SWRM’ 0, ‘TSLB’ 277.155, ‘TBIF’ 0;
}

Nota: tenemos que especificar un valor para todos los ejes de la font-variation-settingspropiedad, incluso aquellos que no queremos usar.

En el caso de Decovar, podemos usar 0como valor para los ejes que no nos interesan; estos serán procesados con el valor predeterminado. Sin embargo, esto no siempre es así, ya que depende de los rangos que usa la fuente para los diferentes ejes. Decovar es fácil, ya que utiliza un rango de 0-1000 para todos los ejes, y 0 es el valor predeterminado para todos.

Puede generar font-variation-settingsdeclaraciones similares con Axis Praxis , no tiene que calcular los valores por su cuenta. El CSS anterior genera la siguiente variante de fuente:

Propiedades CSS de alto nivel

La font-variation-settingspropiedad es una propiedad de bajo nivel y de acuerdo con las recomendaciones del W3C, solo debe usarse si no hay otros métodos disponibles. qué significa esto exactamente?

De acuerdo con las CSS 4 especificaciones , seremos capaces de controlar ejes registrados con propiedades CSS de nivel superior en el futuro, a saber:

font-weight(controlará el wghteje)
font-stretch(controlará el wdtheje)
font-style(controlará los ejes slnty ital)
font-optical-sizing(controlará el opszeje)

Las tres primeras propiedades existen desde CSS2, sin embargo, las especificaciones de CSS4 amplían su uso. Vamos a ser capaces de utilizarlos no solamente con palabras clave predefinidas (por ejemplo, normalo boldpara font-weight) o números redondos (por ejemplo 400, 600, 800, etc.), sino también con todos los números en una escala predefinida (por ejemplo, font-weightoscilarán entre 1 y 1000 y font-stretchse rango entre 50% y 200%).

Sin embargo, estas características todavía están en la fase experimental. Por ahora, lo razonable es seguir usando font-variation-settings, ya que actualmente esta es la propiedad más estable para acceder a los ejes de las fuentes variables.

Uso efectivo del espacio negativo en el diseño web

Muchos diseñadores cometen un gran error al crear páginas web demasiado complejas, ocupadas y coloridas. Si no es intencional, debes evitar crear interfaces complejas y usar más espacio en su lugar. El espacio es un enfoque básico en el diseño web, ya que puede aportar una gran diferencia a todos los elementos de la página. En esta publicación, aclaramos la importancia del espacio negativo y compartimos consejos sobre cómo usarlo correctamente en el diseño web.

¿Qué es el espacio negativo en diseño web?

Antes de comenzar, primero definamos exactamente qué es el espacio negativo. Espacio negativo, o espacio en blanco, significa cualquier espacio no utilizado en la página web. Cualquier cosa que no llame la atención del usuario en la página es un espacio negativo. Esto no significa que el espacio deba ser necesariamente blanco: puede ser cualquier color, una imagen o cualquier otro fondo.

El espacio en blanco debe considerarse como un elemento activo, no como un fondo pasivo. ”- Jan Tschichold

Hay dos niveles de espacio negativo: micro y macro. El espacio micro negativo se relaciona con el espacio entre elementos pequeños como líneas, palabras y letras, mientras que el espacio macro negativo es el espacio entre bloques o elementos más grandes. Ambos niveles son importantes para la efectividad general del diseño web.

Echemos un vistazo a los siguientes diseños de páginas web que usan bien el espacio negativo.

Página web de Apple

Apple siempre ha prestado gran atención al diseño, y su propio sitio web no es una excepción. Solo mire cuán magistralmente usan el espacio micro y macro negativo. El sitio web tiene un diseño limpio y una llamada a la acción extremadamente clara (CTA).

Su atención se centra en la función principal, el producto en sí, y nada distrae su atención en esta página. Tener un solo objeto para mirar en el centro de la página es una manera perfecta de llamar la atención del usuario.

Página web Google

Google es probablemente el abuelo del espacio negativo en la web. El gigante de la búsqueda utiliza mucho espacio negativo y un diseño limpio para dirigir nuestra atención a la barra de búsqueda.

Google simplemente guía al usuario hacia las áreas más útiles de la página, a saber, Gmail, imágenes y la barra de búsqueda. El diseño se mantiene claro y simple para evitar confusiones.

Página web Dropbox

La página de inicio de Dropbox combina un perfecto espacio micro y macro negativo, una paleta de colores naturales y una fuente armoniosa que crea una atmósfera de calma y proporciona una experiencia de usuario fluida. El sitio web parece sofisticado debido al uso adecuado del espacio negativo, que a su vez crea simplicidad y limpieza.

Cómo usarlo

1. Usa para dividir la página.

Dividir el espacio en una página web es uno de los componentes visuales más esenciales en el diseño. Cuando un sitio web tiene demasiada información y muy poco espacio, es extremadamente difícil para los visitantes centrarse en la información principal.

El espacio le da a los usuarios tiempo para absorber la información que ven en la página. Existen algunas reglas que ayudan a los diseñadores a crear composiciones simétricas en la página y garantizar que las personas puedan percibir la información. El espacio equitativo entre los componentes de la composición establece la estructura de diseño adecuada y ayuda a los usuarios a percibir claramente la información. De acuerdo con las reglas de composición del diseño web, el espacio entre estos microbloques debería ocupar un tercio del espacio entre los macrobloques.

2. Trabajos de comprensión de contenidos.

La legibilidad y legibilidad del contenido es un aspecto muy importante en el diseño web. El espacio puede optimizar ambos. El espacio utilizado correctamente entre líneas, palabras y letras aumenta la comprensión de lectura varias veces.

Los márgenes de los párrafos y el espacio entre líneas son dos cosas principales que se deben tener en cuenta al optimizar la comprensión del contenido. El espacio entre cada línea, o simplemente el espacio entre líneas, aumenta la legibilidad general del texto del cuerpo, como se muestra en el siguiente ejemplo:

estructura del texto diseño de espacio negativo

3. Crear jerarquía visual.

No solo es un espacio vacío entre los elementos de la página, sino que es una herramienta esencial para crear una jerarquía visual. El espacio negativo puede componer o separar los elementos de la interfaz de usuario para que creen un diseño de página efectivo.

Proporciona un diseño acogedor que mantiene a los visitantes en la página por más tiempo. Además, el espacio negativo dirige la atención del usuario hacia los elementos importantes y ofrece un descanso para los ojos.

4. Aclarar relaciones.

Los psicólogos de la Gestalt, mientras aprendían cómo las personas organizan la información visual, desarrollaron la Ley de Proximidad. Esta ley establece que todos los objetos visuales ubicados uno al lado del otro parecen similares al ojo humano.

En el diseño web, el espacio negativo adecuado es una forma efectiva de implementar el principio de proximidad y hacer que un diseño sea más atractivo a la vista. Por ejemplo, este principio funciona bien para la arquitectura de blogs. Al separar armónicamente la mayor parte del texto en párrafos y bloques, los diseñadores pueden lograr un diseño más fácil de digerir y agradable.

La línea de fondo.

Como puede ver, el espacio negativo es una de las herramientas más poderosas en diseño web. Al seguir algunas reglas simples que se dan en este artículo, los diseñadores pueden crear un diseño visualmente atractivo y perfecto que será apreciado por cualquier visitante.

Términos de Diseño Web que necesitarás saber

Una gran verdad universal es que hay más de un significado para cada palabra, por eso te presento esta guía de términos de diseño web. Esto es doblemente cierto para la jerga de la industria del diseño web. Si acabas de comenzar con el diseño web, necesitas saber qué significa realmente todo si quiere salir adelante.

Así que aquí está: esto es lo que el Illuminati del Diseño Web no quiere que sepas. Lee este artículo y podrás vacilar a tus enemigos con tu nueva jerga moderna.

Guía de términos de diseño web

.htaccess

Un archivo que se encuentra en tu servidor web que, si se toca alguna vez, es quizás la forma más rápida y sencilla de cargarte tu página web.

AJAX

La práctica de hacer que todo tu contenido dependa de JavaScript para cargar en primer lugar; esto nunca sale mal.

API

Un sistema mediante el cual los jóvenes desarrolladores emprendedores obtienen dinero de los datos de sus usuarios. Recuerda que siempre puede destruirlos «ajustando» la API para el «rendimiento» porque «odia las cronologías cronológicas».

Accesibilidad

La práctica de crear sitios web que cualquier persona pueda, en muy poco tiempo poder utilizar.

Agile

Una metodología de desarrollo que aboga por la autoorganización de los equipos y la flexibilidad, permitiendo a las nuevas empresas darse cuenta de que están construyendo algo que nadie quiere.

Back End

Tu panel de administración, la parte de un sitio web donde gestionar tus contenidos.

Bandwidth

Una medida de velocidad con la que Google puede acceder a sus datos personales.

Porcentaje de rebote

Una medida de velocidad con la que los usuarios se dan cuenta de que no tienen lo que quieren.

Bounce Rate

El patrón de navegación contextual preferido por nueve de cada diez patos.

CMS

El sistema que debe resolver todos tus problemas y llevarte a la cima de Google. Esto se logra dejándolo solo hasta que una actualización rompa un complemento, o algo así. Los más conocidos son: WordPress, Joomla, Drupal…

CSS

Esa cosa que quieren implementar con JavaScript, ahora.

Cache

Espacio en las computadoras de otras personas donde puedes almacenar temporalmente parte de esa mierda desde el Back End.

Llamada a la acción

Rogando al usuario por dinero y / o atención.

Código

Lo que muestran en las pantallas de las computadoras en las representaciones de piratería de Hollywood menos ofensivas.

Comentarios (en código)

Chistes e ideas inteligentes que solo los nerds totales verán alguna vez. Un día, alguien logrará la verdadera iluminación y el secreto se escribirá como un comentario de código y se perderá en un oscuro repositorio de GitHub.

Obsoleto

Todo lo que olvidamos como usar mientras aprendíamos Flexbox.

Design Research

Navegando por Pinterest durante unas horas para robar paletas de colores.

Doctype

Una forma innecesariamente compleja de decirle al navegador qué tipo de HTML está usando. En serio, hubiera funcionado bien.

E-commerce

Una forma más elegante de decir que estás vendiendo cosas que no quieres en Ebay.

Framework

Lo que se supone que debes aprender en lugar de los lenguajes de desarrollo, ahora … supongo.

Interfaz

La parte de un sitio web donde le dice a los usuarios lo que crees que quieren escuchar, en base a investigaciones, encuestas y adivinaciones indiscriminadas.

HTML

La forma más fácil de decirle a otras personas que eres un programador, ahora.

iframe

Pensarías que estos fueron obsoletos, pero no lo son.

Mapa de imagen

Una cosa más que nunca funcionará en un sitio web sensible sin un complemento de jQuery.

JavaScript

El todo y el fin de todo. El lenguaje de desarrollo definitivo. Reemplazará a HTML y CSS porque algunas personas no pueden molestarse en aprender los «lenguajes» más simples jamás inventados.

Landing Page

La página con la que los diseñadores dejan que los profesionales de marketing se salgan con la suya para no tocar la página de inicio real. Las landing page normalmente superan a las páginas de inicio cuidadosamente elaboradas, enfureciendo a los diseñadores.

Metadatos

Lo que tenemos que usar mientras esperamos que la inteligencia artificial se vuelva más inteligente.

Navegación

La forma más rápida y fácil para que un cliente se pierda.

Online Marketing

El negocio de las mentiras, las malditas mentiras y las estadísticas.

Open Source

Una forma socialmente aceptable de usar el código de otras personas. También lo mejor desde el pan rebanado.
Solo me gustaría intervenir por un momento. A lo que te refieres como Linux, es de hecho, GNU / Linux, o como recientemente lo he llamado, GNU más Linux. Linux no es un sistema operativo en sí mismo, sino más bien otro componente libre de un sistema GNU en pleno funcionamiento hecho de utilidad por los corelibs de GNU, utilidades de shell y componentes vitales del sistema que comprenden un sistema operativo completo según lo definido por POSIX.

Muchos usuarios de computadoras ejecutan una versión modificada del sistema GNU todos los días, sin darse cuenta. A través de un peculiar giro de los eventos, la versión de GNU que se usa ampliamente en la actualidad a menudo se llama «Linux», y muchos de sus usuarios no saben que es básicamente el sistema GNU, desarrollado por el Proyecto GNU. Realmente hay un Linux, y estas personas lo están usando, pero es solo una parte del sistema que usan.

Linux es el núcleo: el programa en el sistema que asigna los recursos de la máquina a los otros programas que ejecuta. El núcleo es una parte esencial de un sistema operativo, pero inútil por sí mismo; Sólo puede funcionar en el contexto de un sistema operativo completo. Linux se usa normalmente en combinación con el sistema operativo GNU: todo el sistema es básicamente GNU con Linux agregado, o GNU / Linux. Todas las distribuciones denominadas «Linux» son en realidad distribuciones de GNU / Linux.

Pixeles

Trabaja como diseñador el tiempo suficiente, y comenzarás a notar cuando incluso una de estas cosas está fuera de lugar. Te perseguirá.

Prototipo

El terrible código temporal que escribes que inevitablemente se usará en el proyecto final, y siempre estarás un poco avergonzado.

Responsive Design

La razón por la que los diseñadores web tienen que hacer tal vez tres veces más trabajo para cada proyecto que antes.

Semantic Markup

La práctica de escribir HTML de un ser humano con estudios, que en realidad puedes ser capaz de leer.

Lado del servidor

Cualquier cosa que sea oficialmente problema del desarrollador.

Tema

Una forma socialmente aceptable de utilizar los activos y el código gráfico de otras personas .

UX design

Todo el mundo es un experto en esto, ahora. Aparentemente, es simplemente la experiencia de un usuario en tu página web.

Usabilidad

Es como Accesibilidad, pero para las personas que se avergüenzan cuando ven rampas para sillas de ruedas.

Validación

Lo que todos deseamos desesperadamente de nuestros compañeros diseñadores.
Ver: Estándares Web.

Estándares web

Una buena idea que muchos de nosotros estamos ignorando.

Últimas tendencias en navegación web 2018

La navegación web es la clave para una buena experiencia de usuario (UX). Los usuarios confían en la navegación digital intuitiva para localizar información útil, explorar la historia de una marca y tomar decisiones de compra.

La navegación confusa puede ser suficiente para hacer que un usuario se convierta en un rebote. A medida que los expertos en UX aprenden más sobre cómo los consumidores interactúan con el contenido digital, ha aumentado la cantidad de formas en que los diseñadores combinan y combinan los elementos de navegación. Elegir la configuración de navegación correcta para sus sitios móviles y de escritorio puede transformar su UX e impulsar su negocio.

La consistencia es Rey

Si hay algo en lo que todos los expertos en navegación están de acuerdo, es la importancia de la coherencia. La navegación debe ser coherente en todo el sitio y disponible en todas las páginas.

Un menú de navegación inconsistente genera confusión. Los usuarios no deberían tener que buscar menús de navegación ocultos o intentar demasiado para encontrar la página deseada. No importa qué tipo de configuración de navegación elija, debe priorizar la coherencia. Haga esto centrándose en algunos aspectos principales:

1. El menú debe estar presente en cada página. No deje a los usuarios varados en una página sin salida. El menú debe estar disponible en cada página de su sitio web. Si las opciones del menú tienen múltiples niveles, deje migas de pan para que los visitantes puedan ver la jerarquía de su ubicación en el sitio. Las migas de pan son particularmente importantes cuando los usuarios encuentran la página a través de una fuente externa.

2. Haga que cada elemento del menú reaccione de la misma manera. Si la pestaña Acerca de aparece en una lista de opciones diferentes, también lo deberían hacer las otras pestañas. Si uno es un enlace a una página de aterrizaje, haga los otros enlaces también. Cada elemento en el menú de navegación debería reaccionar de la misma manera al toque de un usuario (o hacer clic).

3. Los elementos deben ser intuitivos. Existen ciertos elementos de diseño de sitios web a los que los usuarios han llegado para conectarse con un significado. Por ejemplo, colocar una flecha en un elemento del menú generalmente significa que hay una lista desplegable que va con el artículo. Cree elementos que ayuden a los usuarios a saber qué esperar de la navegación y manténgala igual en todo su sitio.

Etiquetas claras y concisas

El menú de navegación no es el lugar para ser inteligente con su contenido. Los usuarios confían en el menú para recorrer su sitio web. El propósito del menú es proporcionar dirección. No necesita entretener o impresionar a los visitantes del sitio.

Mantenga las etiquetas de menú simples, claras y concisas. La mayoría de los sitios web usan las mismas etiquetas de una palabra por una razón. Los usuarios están familiarizados con opciones como Inicio, Productos, Acerca de, Blog y Contacto. Saben lo que significan las etiquetas y qué esperar cuando eligen una opción.

Alternativas al menú Hamburger

¿Recuerda el gran debate del menú de hamburguesas de 2014 para el diseño de sitios para dispositivos móviles? Está en curso, con los diseñadores de sitios web modernos a ambos lados del problema.

Muchos sitios web móviles todavía usan la hamburguesa de confianza, porque esto es lo que buscan la mayoría de los usuarios de dispositivos móviles. La «hamburguesa» es el ícono del menú que consta de tres líneas horizontales apiladas. Los diseñadores lo usaron inicialmente porque conserva espacio en pantallas móviles más pequeñas. Muchos diseñadores hoy en día están probando alternativas a la hamburguesa, tales como:

Pestañas
Navegación desplazable
Navegación inferior
Opciones «Mostrar más»
Lista en línea con encabezados
Control segmentado

Las alternativas al menú de hamburguesas han tenido un gran éxito en muchos sitios, especialmente aquellos con un número reducido de opciones. El consenso entre muchos diseñadores es que si puedes mostrar la navegación, muéstrala.

El buscador en el menú

Una característica que puede mejorar la usabilidad es el ícono de búsqueda (generalmente una lupa). Si los usuarios buscan la barra de búsqueda, ya están perdidos lo suficiente como para necesitar una función de búsqueda directa. No empeore la situación al ocultar la opción de búsqueda, o al omitirla por completo.

La barra de búsqueda ofrece a los usuarios una salida cuando están perdidos, o una ruta más directa a la información para usuarios con tareas específicas en mente. Quitar la barra de búsqueda puede provocar visitas frustradas que deciden buscar en otro lado en lugar de buscar en su sitio lo que quieren.

Coloque la barra de búsqueda en algún lugar claramente visible desde cada página. La mayoría de los usuarios mira hacia la esquina superior derecha de la opción de búsqueda, o al menos cerca del menú.

El menú del carrusel

Los menús de carrusel son cada vez más populares en los sitios de tipo blog y aquellos que publican actualizaciones periódicas e historias de noticias.

El «carrusel» hace referencia a un menú en la parte superior de la página que muestra los artículos más recientes que el sitio ha publicado. Muchos sitios de noticias y blogs usan imágenes en miniatura en el carrusel para llamar la atención y facilitar la selección de un artículo.

La pestaña del carrusel también tiene el título del artículo y / o una breve descripción de lo que hay adentro. Básicamente sirve como una presentación de diapositivas con enlaces clicables para que los usuarios puedan navegar fácilmente. Los menús de carrusel son excelentes para exhibir el contenido más reciente y para mantener a los usuarios en su sitio con una variedad de otros artículos interesantes que quizás quieran leer en un sitio sencillo.

Mega Menus

Otra tendencia que barre el diseño de navegación es el mega menú. Como su nombre lo indica, este menú tiene un tamaño más grande, ocupando la página vertical y horizontalmente. Estos menús se hicieron populares entre los blogs de estilo de revista , pero más marcas los están utilizando para hacer una declaración con sus menús.

El mega menú es ideal para un sitio con múltiples niveles de navegación. En lugar de confundir a los usuarios con una docena de menús desplegables, expanda el menú en la mitad de la página y configure las opciones con claridad, usando imágenes y miniaturas, si lo desea.

El mega menú también es ideal para sitios que publican artículos frecuentemente porque el diseñador puede usar columnas diferentes para historias recientes y enlaces relacionados.

Los menús de navegación fijos permanecen en su lugar cuando un usuario se desplaza hacia abajo en la página. Este tipo de menú también se denomina navegación adhesiva, y aparece como una barra de navegación superior.

El menú siempre está presente para que el usuario cambie las páginas. Facebook utiliza este formato para permitir a los usuarios ver sus perfiles o revisar las notificaciones mientras se desplazan por sus fuentes de noticias. El desplazamiento infinito con una barra de navegación fija puede ser apropiado si su sitio web tiene una sensación social, o si el sitio trata con una gran cantidad de datos.

No hay duda de que la navegación de un sitio afecta la experiencia del usuario. ¿Los usuarios tendrán una experiencia positiva o negativa? La optimización de su configuración de navegación con las últimas tendencias para el diseño de dispositivos móviles y de escritorio puede conducir a una mejor UX completa y a un mejor éxito comercial. Considere actualizar su sitio web para incluir algunas de las mejores prácticas de navegación del sitio.

Consejos para principiantes de diseño web responsive

Diseño web responsive, cada vez más importante

La mayoría de los diseñadores web saben sobre el diseño móvil y cómo ha afectado dramáticamente el diseño sensible. Pero hay otra técnica que puede ser menos popular pero que puede resolver problemas de una manera más clara, el diseño web responsive.

Con un enfoque de escritorio primero, puede construir todas las características que desees. Luego, cuando realice pruebas en dispositivos más pequeños, se concentrará en el diseño web responsive a la vez que admite tantas funciones de «gama alta» como sea posible.

Este flujo de trabajo es bastante diferente, pero desde el escritorio puede ser mejor para los diseñadores web que crean diseños ricos en funciones.

Los beneficios del escritorio primero

Técnicamente, «el escritorio primero» era la forma tradicional en que todos hacían páginas web hasta la era receptiva.

Hoy en día, muchas personas hablan primero de los dispositivos móviles, pero existen buenas razones para seguir con el enfoque de escritorio. A menudo prefiero comenzar con el diseño de escritorio cuando sé que mi sitio tendrá toneladas de características.

Aquí hay algunos beneficios de las ideologías de escritorio primero.

Tienes la oportunidad de ver todas las características principales a la vez. Te permite imaginar todas las posibilidades más grandes para tu diseño primero. Es la mejor estrategia si su audiencia utiliza principalmente computadoras de escritorio / portátiles. Cuando piensas en páginas web modernas como Twitter , piensas que son móviles. Pero tienen muchas características adicionales que vienen con la experiencia de escritorio. Estos usuarios de escritorio obtienen claramente un UX elevado, que es tan importante como cualquier otro dispositivo.

Por supuesto, no se puede negar que el móvil es importante. Recientemente, el uso móvil superó al escritorio, por lo que definitivamente está aquí para quedarse.

Pero las páginas web ricas en funciones a menudo dependen de un diseño de escritorio fuerte.

Este es quizás el mayor beneficio de un diseño de escritorio primero. Puedes ver la página como se debe ver con todas las campanas y silbidos. Estos extras pueden (y deben) eliminarse para pantallas más pequeñas a medida que realiza pruebas y encuentra que ciertas funciones simplemente no se transmiten bien.

Diseño web móvil primero

Otra forma de ver esto es a través de la simplicidad del diseño móvil primero. Cuando creas primero con el móvil, estás empezando inherentemente con las funciones más simples y luego agregas extras para pantallas más grandes. Pero es muy fácil olvidarse de las funciones o simplemente no tiene una planificación adecuada para decidir dónde deben ir o cómo deben funcionar.

Con un enfoque móvil primero es fácil considerar las características dinámicas más como una idea de último momento. Pero con un enfoque de escritorio primero, estas características se consideran el método de visualización principal y luego se eliminan según sea necesario.

No hay una opción perfecta, así que recomiendo probar ambos para ver lo que prefieres. Si eres como yo y realmente adoras la rica experiencia de escritorio, probablemente prefieras comenzar por trabajar más pequeño.

Apoyando todos los navegadores

La parte más complicada del diseño de escritorio primero es manejar el soporte del navegador.

Hace solo una o dos décadas, el único mercado eran los equipos de escritorio y portátiles. La revolución de los teléfonos inteligentes cambió todo eso con toneladas de navegadores móviles para iOS, Android y otros dispositivos propietarios como Blackberry.

La mayoría de los navegadores antiguos carecían de soporte para elementos de escritorio modernos como lienzo, audio / video y entradas dinámicas. Pero mucho ha cambiado en los últimos años.

Hoy en día es razonable que todos los navegadores móviles admitan básicamente las mismas características que los navegadores de escritorio. Los navegadores modernos también representan la mayoría de los elementos de la misma manera, por lo que no se ocupará de los problemas de representación del pasado.

Las mayores diferencias no se encuentran en el soporte HTML / CSS, sino en el soporte basado en el tacto.

Pantallas más pequeñas

Las pantallas móviles son mucho más pequeñas y también deben tocarse con un dedo. Los ratones de computadora son más precisos en comparación con un dedo humano, sin mencionar que las pantallas de escritorio son mucho más amplias y fáciles de ver.

Al pasar de una computadora de escritorio a una móvil, es crucial tener en cuenta cómo funcionan los diferentes navegadores, qué admiten y cómo manejar la entrada táctil del usuario.

Algunas buenas reglas a considerar al escalar su diseño de escritorio primero:

Agrandar los elementos transportables.
Aumenta el tamaño del texto del cuerpo para que los enlaces sean más fáciles de tocar
Añadir bibliotecas de JavaScript que admiten movimientos de deslizamiento

Especificaciones HTML5, JavaScript y CSS3

Siempre puede consultar las especificaciones de HTML5 de todos los navegadores para ver qué elementos son compatibles en qué navegadores. Pero en su mayor parte, las entradas táctiles son una cosa universal, por lo que el escritorio primero es una gran solución si también presta atención a la experiencia móvil.

Y puede encontrar toneladas de recursos gratuitos como TouchSwipe que agregan soporte para gestos táctiles y de deslizamiento a todos los sitios web.

Puede usar JavaScript para verificar las dimensiones del navegador o el sistema operativo como iOS o Win Mobile. Con esta información puede cargar hojas de estilo adicionales y crear una experiencia totalmente diferente con los eventos de toque / deslizar que solo se aplican a los usuarios móviles.

Comience con una lista de características que sabe que deseará tu página web. Organiza todas las propiedades más nuevas de CSS3, los elementos más nuevos de HTML5 y cualquier cosa que pueda ser dudosa con el soporte del navegador.

Búsqueda de navegadores

Luego, busca todos los navegadores que deseas admitir para considerar cómo puede manejar los rellenos y los rellenos múltiples. A medida que pase el tiempo, los navegadores más antiguos se irán eliminando y la compatibilidad con el navegador será más fácil. Esto crea un caso aún más sólido para el diseño de escritorio primero porque los motores de renderización serán casi idénticos en todos los ámbitos.

Para obtener más información y profundizar en las interacciones móviles, consulte estas guías relacionadas:

Degradación agraciada (y por qué importa)

El proceso de degradación elegante mira primero a la tecnología de nivel superior. Esto significa que usted construye todas las funciones principales de su diseño web responsive con todo lo que desea en el sitio. Luego, si otros navegadores no pueden admitirlas, puede volver a los métodos de respaldo .

Un ejemplo común de esta táctica es la eliminación de menús deslizantes desplegables para dispositivos móviles. Dado que los usuarios de teléfonos inteligentes no pueden desplazar los enlaces de los menús, tiene sentido ocultar los menús que se pueden desplazar. Y, en su lugar, crear un interruptor o un menú de hamburguesa oculto .

Sin embargo, esto no es una degradación estrictamente elegante, sino un cambio en la experiencia del usuario. En su lugar, está buscando funciones JS o propiedades CSS3 que, literalmente , no se pueden admitir en un determinado navegador.

Para esto, tendrá que encontrar un relleno polivalente o alternativo que cree una experiencia menos glamorosa, pero que aún funcione para el usuario.