¿Qué causa la gran discrepancia entre lo que cobran algunos desarrolladores de WordPress en comparación con otros? Responder esta pregunta requiere considerar la razón principal por la que quiere un sitio web.

Algunos desarrolladores se centran en el producto final literal: la combinación de código que resulta en un diseño de sitio web bastante agradable.

Pero los desarrolladores con conocimientos de marketing se preocupan por algo más que construir algo que se vea bien. Actúan como consultores de clientes que buscan lograr objetivos específicos con sus sitios web.

El diseño web está estrictamente conectado a sus objetivos de negocio

El diseño web está estrictamente conectado a sus objetivos de negocio

Con esto en mente, contratar a alguien para construir un sitio web que no parece estar interesado en / no hace preguntas sobre sus objetivos finales es una bandera roja. Es importante destacar el hecho de que incluso el más bello diseño web puede no ser ideal cuando se trata de conseguir que los visitantes se conviertan en clientes.

Dicho esto, el 94% de la gente juzga su credibilidad basándose en el diseño de su sitio web.

Así que, en lugar de eso, necesita enfocarse en usar su diseño para ofrecer la experiencia de usuario ideal. Debe facilitar a los visitantes la búsqueda de la información que buscaban visitando su sitio web en primer lugar y guiándolos hacia las actividades de conversión de objetivos.

Estas mejores prácticas de diseño web se centran en la intersección entre la creación de un hermoso sitio web y uno que sirva para su negocio.

¿Qué define las mejores prácticas de diseño web?

Seguro que todos tenemos opiniones diferentes a nuestra madre sobre lo que significa un sitio web bien diseñado.

El diseño web no es sólo cuestión de estética. Es un mundo mucho más complicado en el que UX, accesibilidad y objetivos de negocios deben conectarse. Mire estas mejores prácticas de diseño web! ✍️🔝 Haga clic para Tweet

Pero controlemos las opiniones de todos por medio de los expertos.

Según Orbit Media, se pueden agrupar las mejores prácticas de diseño web en estas tres categorías básicas de estándares:

  • Estándares de marca: Puede que le resulte más familiar referirse a este mismo concepto como «branding», «guías de estilo» o «tablas de estado de ánimo». Estas normas incluyen todo lo que tiene que ver con el aspecto de un sitio web e implica el uso de colores, tipografía y elementos que son específicos de la empresa en particular.
  • Normas de codificación: Los sitios web deben ser construidos de acuerdo a los estándares de programación acordados por el W3C, la comunidad internacional que trabaja en conjunto para desarrollar estándares web.
  • Normas de accesibilidad: El acceso a la información es un derecho humano básico, reconocido por la Convención de las Naciones Unidas sobre los Derechos de las Personas con Discapacidad. Además de eso, hacer que su sitio sea accesible tiene efectos positivos, no sólo en las ventas, sino también en el SEO. El W3C comparte una lista básica de estándares que deben seguirse para diseñar un sitio web accesible. Más adelante en este artículo detallaremos las mejores prácticas de diseño web relacionadas.

Veamos cómo desarrollar prácticas de diseño web basadas en cada uno de estos estándares:

Estándares de marca

Los sitios web que carecen de una marca consistente pueden ser estresantes para interactuar y causar confusión. Por lo tanto, no debe sorprender que un 38% de los visitantes hayan dicho que dejarán de participar en un sitio web si el contenido o el diseño no es atractivo.

Teniendo en cuenta que la apariencia no lo es todo, aquí hay algunos principios básicos de diseño a considerar para crear un sitio web que la gente quiera usar:

Balance

El equilibrio es el principio de diseño que prescribe cómo distribuir eficazmente los elementos visuales. En general, un diseño equilibrado se ve limpio y natural y tiene una buena simetría (aunque eso no es necesariamente una condición de equilibrio).

Puede incorporar el equilibrio en el diseño de la web en cuanto a la disposición de la página.

Centrar el texto u otros elementos a través de la página es una forma fácil de hacerlo. En general, las páginas web están construidas en un sistema de cuadrícula, lo que crea una forma de equilibrio. Puede usar la propiedad de flotación CSS para posicionar elementos y equilibrarlos a lo largo de la página.

El equilibrio puede lograrse de tres maneras:

1. Diseño simétrico

Ejemplo de diseño simétrico

Ejemplo de diseño simétrico

Disponiendo los elementos de manera uniforme a través de la página web. Por ejemplo, si tiene un elemento pesado a la izquierda, debería tener un elemento pesado a la derecha. Como ya se ha mencionado, el centrado es la forma más fácil de lograr la simetría, pero a veces puede resultar plano o aburrido.

Para evitar que la página se vea monótona, puede crear un equilibrio usando diferentes elementos, como equilibrar una imagen grande con un bloque de texto. También existe un tipo de equilibrio simétrico llamado equilibrio radial, en el que los objetos irradian desde un punto central.

2. Diseño asimétrico

Ejemplo de diseño asimétrico

Ejemplo de diseño asimétrico

Más difícil de hacer bien, el diseño asimétrico implica la distribución desigual de los elementos en una página. Por ejemplo, puede tener un elemento grande en el centro, que se equilibra con uno más pequeño más lejos.

Puede usar otros elementos de diseño, como el color o la textura, para equilibrar un diseño asimétrico.

3. Fuera de balance

Ejemplo de diseño fuera de balance

Ejemplo de diseño fuera de balance

Este tipo de diseños sugieren movimiento y acción, lo que puede hacer que la gente se sienta incómoda. Si su sitio web tiene la intención de hacer pensar a la gente, entonces un diseño fuera de balance es para usted.

Composición

El término composición se refiere a la colocación y organización de los elementos de diseño.

Composición

Composición

La Regla de los Tercios se usa comúnmente para crear una composición equilibrada, especialmente con fotos.

Espaciamiento

Los elementos deben estar espaciados uniformemente para que los usuarios puedan diferenciar secciones o bloques.

El papel del espaciado en el diseño de la web

El papel del espaciado en el diseño de la web

También debes introducir el espacio negativo o el espacio entre y alrededor del sujeto de una imagen. El espacio negativo puede reducir el ruido visual, aumentar la legibilidad y aportar equilibrio.

Puede introducir un espacio negativo añadiendo márgenes y relleno alrededor de sus elementos de diseño.

Punto focal

Llama la atención sobre un elemento

Llamar la atención sobre un elemento

Cree un área de enfoque donde quiera llamar la atención. Debería ser la parte más importante de su página, y lo ideal sería que cada página se centrara en un solo punto focal importante.

Color

El color es un elemento de diseño importante cuando se trata de la marca. Lo ideal es que entre en el proceso de diseño web con una comprensión de los colores que quiere asociar a su marca.

Para el diseño web específicamente, ayuda empezar con una tabla de estado de ánimo para su marca.

Ejemplo de la paleta de colores de Kinsta

Ejemplo de la paleta de colores de Kinsta

Elija un color primario y secundario (el color secundario puede complementar o contrastar el color primario), y un tono más claro y más oscuro para cada uno. Limita el uso del color para que los diferentes acentos no se conviertan en un adefesio.

Adobe Color proporciona una excelente herramienta gratuita para probar varias combinaciones de colores para crear una paleta de trabajo para los elementos del sitio web.

Además, al decidir sobre el color, es importante considerar a los daltónicos, que incluyen hasta el 4,5% de la población mundial.

Ejemplo de cómo se vería un diseño normal para los usuarios daltónicos

Ejemplo de cómo se vería un diseño normal para los usuarios daltónicos

Hay tres tipos de daltonismo (daltonismo total, visión a dos colores y visión a colores deficiente), así que asegúrese de que su diseño sigue siendo utilizable en consideración a aquellos que no pueden diferenciar los colores.

Contraste

Al elegir el color, es importante ser consciente de las proporciones de color y el contraste.

El contraste de color se refiere a la diferencia de luz entre el primer plano y el fondo. El uso de colores suficientemente contrastados permite distinguir fácilmente la visibilidad del sitio web. En general, utilice opciones de color de alto contraste, como el texto negro sobre fondo blanco, para que su sitio sea legible.

El mal contraste puede ser problemático

El mal contraste puede ser problemático

La relación de contraste es el valor numérico asignado a la diferencia de contraste entre los elementos de la página.

Las Directrices de Accesibilidad al Contenido Mundial (WCAG) 2.0 recomiendan una relación de contraste de 4,5:1 para el texto normal. WebAIM comparte algunas combinaciones predeterminadas que se ajustan a la relación de contraste ideal para ayudarle a visualizar esta mejor práctica de diseño web.

Para ayudar a navegar usando esta proporción, asegúrese de que cuando diseñe su sitio web, esté imaginando a todos los públicos (incluyendo aquellos con problemas de accesibilidad). Es más fácil hacer esto que planear para abordar estos temas después del hecho.

Considere todos los aspectos del sitio web con los que la gente interactuará, incluyendo encabezados, pies de página, menús – todos los cuales deben ser fácilmente visibles para ser utilizables.

Algunas herramientas que puede usar para comprobar las proporciones de contraste de color incluyen:

Tipografía

La tipografía del sitio es otra consideración de marca importante.

Si bien existen muchas fuentes diferentes para encontrar posibles fuentes para usar en su sitio web, primero deberá considerar las opciones que se mostrarán de manera consistente, independientemente de las fuentes que el usuario final tenga instaladas en su computadora.

Google Fonts ofrece una amplia variedad de fuentes gratuitas seguras para la web con las que puede contar para que se muestren correctamente, independientemente de las fuentes/programas instalados por el usuario. Asegúrese de incluir fuentes en su tabla de estado de ánimo para ver si coinciden con su estética de color.

Si tiene problemas para encontrar combinaciones, las fuentes de Google pueden sugerir emparejamientos populares. También puede usar un sitio como FontPair para obtener sugerencias.

Intente limitar el peso de las fuentes que utiliza, ya que tener que cargar demasiados archivos puede contribuir a reducir la velocidad de la página. En ese sentido, considere la posibilidad de alojar localmente las fuentes de Google para introducir beneficios adicionales de rendimiento.

Tipografía pobre vs. tipografía ideal

Tipografía pobre vs. tipografía ideal

Cuando se trata de seleccionar elementos tipográficos basados en las mejores prácticas de diseño web, como regla general, utilice fuentes sans-serif para los encabezamientos y fuentes serif para el contenido. Como mínimo o no utilice fuentes decorativas para el contenido del cuerpo, ya que será difícil de leer.

Además, no se sienta tentado a usar una gran variedad de fuentes diferentes en su sitio web. Una buena regla general es usar una fuente para su logo, otra para sus menús/encabezados, y una más para el contenido del cuerpo. En ese sentido, intente emparejar fuentes que se complementen entre sí, como las de la misma familia de fuentes.

Jerarquía de elementos

La jerarquía se refiere a la disposición de los elementos de diseño que muestran la importancia relativa. Esto se logra manipulando elementos como el contraste visual, el tamaño y las ubicaciones para llamar la atención.

Ejemplo de jerarquía de elementos

Ejemplo de jerarquía de elementos

Por ejemplo, el contenido debe desglosarse en bloques lógicos para que los usuarios puedan distinguir las secciones entre sí.

Esto puede hacerse mediante el uso de encabezamientos de contenido, que no sólo facilitan a los usuarios el salto a las partes que desean leer, sino que también dividen grandes cantidades de texto en trozos legibles, de modo que los lectores de pantalla puedan determinar el contexto de cada sección.

Si busca algunas ilustraciones visuales útiles de estos conceptos de diseño y más, el blog de Tilda Publishing cubre algunos de los errores de diseño de páginas web más comunes y cómo corregirlos.

Mejores prácticas de diseño/formato en la web

Según la investigación de Orbit Media, hay algunos estándares comunes de diseño web que se observan en los 50 principales sitios web de comercialización.

Estándares de diseño web

Estándares de diseño web

Por «estándares» se entiende que el 80% de los sitios web utilizan un enfoque de diseño similar:

  • El logo en la esquina superior izquierda.
  • Navegación horizontal principal en la parte superior de cada página.
  • Propuesta de valor alta en la página principal ubicada «por encima del pliegue». Tenga en cuenta que la mayoría de los diseñadores web le dirán que no hay una altura de píxeles estándar para los navegadores, y técnicamente no hay «pliegue». Pero, en general, los elementos importantes del diseño deben aparecer en lo alto de las páginas que generalmente son visibles para la mayoría de los visitantes, incluso sin desplazarse.

A continuación se presentan algunas de las mejores prácticas de diseño web para elementos comunes del sitio:

Imágenes

Las prácticas óptimas de diseño de páginas web para el uso de imágenes podrían inspirar muchos volúmenes de consejos, pero centrémonos en lo mínimo en este debate sobre las prácticas óptimas de diseño de páginas web:

  • Añadiendo texto ALT. Las imágenes no pueden ser procesadas usando lectores de pantalla a menos que se use texto ALT. Añadir texto ALT también contribuye al SEO, pero algunas personas utilizan el texto ALT sólo para complementar su estrategia de palabras clave. Un uso más útil del texto ALT sería describir la imagen – aunque ciertamente se podría satisfacer a las arañas de búsqueda y a los lectores de pantalla al mismo tiempo con el enfoque adecuado.
  • El uso de imágenes con rostros humanos tiende a ser más efectivo que otros gráficos o animaciones. Hace que las personas se involucren más con la imagen, ya que los humanos se sienten atraídos por lo que perciben como empatía y emociones reales.
  • Usar imágenes sensibles, que crecen o se encogen dependiendo del tamaño del navegador. Esto ayuda tanto a la velocidad del sitio como al SEO.

Navegación del sitio web

Los usuarios esperan poder encontrar fácilmente el contenido que están buscando en un sitio. Por lo tanto, es importante que la navegación por el sitio web sea simple y directa.

La navegación en un sitio web es un término general que se refiere a la arquitectura de enlaces internos de un sitio web. No olvide que el principal objetivo de la navegación es ayudar a los usuarios a encontrar fácilmente el contenido relevante de su sitio web.

La arquitectura de enlaces internos de su sitio constituye la base de su mapa del sitio, lo que ayuda a los motores de búsqueda a acceder más fácilmente a su contenido. Se ha descubierto que tener un sitio bien diseñado donde el contenido es fácil de encontrar afecta positivamente el tráfico del sitio web que obtendrá de los motores de búsqueda (junto con una mayor probabilidad de obtener enlaces de sitios de Google).

Navegación del menú

Hay varios aspectos que conforman la navegación de un sitio web, pero su menú superior/principal debe ser un foco primario ya que será una de las primeras cosas con las que los usuarios interactúen cuando visiten su sitio web.

Hay diferentes heurísticas de diseño de menú de sitio web, pero las más populares incluyen:

Menú de navegación

Idealmente, esto está ubicado en el frente y el centro de un sitio web. Esto podría implicar el uso de un menú desplegable si hay varias categorías. Sin embargo, los menús desplegables no son recomendables, especialmente cuando se trata de SEO técnico (son más difíciles de rastrear). Además, se ha descubierto que a la mayoría de la gente no le gustan los menús desplegables.

Esto se debe a que el ojo humano trabaja más rápido que la mano, por lo que la gente encuentra molesto cuando ya han decidido sobre qué hacer clic y algo más se cae – lo que puede conducir a una disminución de las visitas a las páginas.

Menú de hamburguesas

El menú de la hamburguesa suele estar situado en la parte superior izquierda o derecha de la página. Aparece como un cuadrado con tres líneas que se pueden expandir con un clic. Sin embargo, muchos diseñadores desprecian el menú de las hamburguesas, que ha inspirado a los desarrolladores web a considerar nuevas formas de hacer que la navegación de los sitios web móviles sea divertida y funcional.

Aquí hay algunos consejos para diseñar la navegación basada en las mejores prácticas de diseño web:

¿Cansado de experimentar problemas con su sitio de WordPress? Obtenga el mejor y más rápido soporte de hosting con Kinsta! Consulte nuestros planes

  • Añadir una barra de búsqueda para ayudar a los usuarios a encontrar fácilmente el contenido (a continuación se explica cómo mejorar la funcionalidad de búsqueda de WordPress). Esto es especialmente útil para los sitios web que tienen mucho contenido, como un blog de noticias.
  • Diseñe su sitio siguiendo la regla de los tres clics, que establece que los usuarios deben ser capaces de encontrar la información deseada con no más de tres clics de ratón. Esto se debe a que los usuarios realmente prefieren navegar por un sitio en lugar de buscar en los resultados de la búsqueda, cuando es posible.
  • Hacer que los títulos de los menús sean descriptivos (teniendo en cuenta las palabras clave), lo que ayuda a los usuarios a encontrar los artículos más fácilmente y también contribuye positivamente al SEO.
  • La posición de los elementos del menú importa. Ponga las páginas más importantes al frente de su menú para que sean fácilmente accesibles.
  • Mantenga los elementos del menú a un máximo de 7, no sólo para mantener el diseño del sitio limpio sino también porque tener demasiadas categorías de elementos del menú puede afectar potencialmente a su capacidad de clasificación en la búsqueda. Es posible que Google interprete estas categorías aparentemente no relacionadas como una señal de que su sitio web no se ha decidido por un nicho específico.

Para un formato más conveniente, aquí hay una práctica infografía:

Mejores prácticas de diseño web para la navegación de menús

Mejores prácticas de diseño web para la navegación de menús

Estándares de codificación

Con tantos sitios web creados y consumidos en todo el mundo, ciertamente se necesita un conjunto normalizado de principios de codificación. Algunos aspectos de estas normas de la web incluyen:

SEO

El SEO puede ser usado para aumentar el número de visitantes a su sitio de forma orgánica (sin el uso de anuncios). Dado que es demasiado complicado profundizar adecuadamente en el SEO en una pequeña subsección de un artículo, eche un vistazo a nuestra lista de control de SEO y a nuestros consejos sobre los mejores plugins de SEO para WordPress para familiarizarse con este aspecto de las mejores prácticas de diseño web.

Tenga en cuenta que los siguientes consejos de estándares de codificación funcionan de la mano con el SEO.

Respuesta móvil

El diseño sensible se preocupa por crear una gran experiencia para el usuario, independientemente del dispositivo o el navegador que se utilice para acceder a su sitio web.

Hoy en día es más importante que nunca diseñar su sitio web para que responda, ya que más del 60% de los usuarios de Internet acceden a la red a través de sus teléfonos móviles, y la mitad de las transacciones de comercio electrónico se realizan a través de plataformas móviles. Además, el nuevo algoritmo de búsqueda de Google también da prioridad a los sitios para móviles.

Ejemeplo de diseño de respuesta

Ejemeplo de diseño de respuesta

El hecho de tener un sitio web receptivo no sólo ayuda a los usuarios a navegar más fácilmente por su sitio, sino que también contribuye a aumentar el compromiso y las conversiones. Los usuarios recomiendan marcas con las que tienen una experiencia positiva en los sitios de respuesta a la telefonía móvil y, a la inversa, no sólo dejarán de comprar a marcas con una mala experiencia en los sitios móviles, sino que también desalentarán activamente a otros a hacerlo.

Sin embargo, a pesar de la demanda de un sitio de respuesta, se estima que el 91% de las pequeñas empresas no tienen uno. Deberían, ya que diseñar un sitio web que responda a las necesidades de los móviles ciertamente vale la pena. El 62% de las empresas han informado de un aumento de las ventas después de diseñar un sitio que responda a las necesidades de los móviles.

Lea el recurso de Kinsta sobre cómo hacer su sitio más amigable para el móvil, que incluye una lista de los mejores plugins de WordPress para el móvil para descargar, y asegúrase de revisar esta lista curada de los mejores temas de WordPress, donde podrá navegar a través de un montón de temas de respuesta.

Google también ofrece algunos consejos sobre cómo diseñar un sitio web receptivo.

Seguridad del sitio web

¿Otra práctica importante de codificación? Creando programas y sitios web seguros en los que los usuarios puedan confiar su información personal sensible. Contrariamente a la creencia popular, los hackers no buscan activamente sitios web específicos para piratear, por lo que incluso los sitios web pequeños son vulnerables a los ataques.

Info

Kinsta ofrece una garantía de seguridad con cada plan y, en caso de que algo malo ocurra, especialistas en seguridad arreglarán su sitio.

En general, WordPress es seguro, pero ayuda a tomar precauciones adicionales para mantener su sitio web seguro contra ataques.

Aquí están algunas de las mejores prácticas de seguridad del sitio web:

  • Obtenga un certificado SSL, que es especialmente importante para los sitios que se ocupan de los pagos y la información personal. El certificado SSL encripta la información enviada a través de las redes para que los hackers tengan dificultades para decodificarla. Además de eso, es un estándar de la industria. Chrome avisa a los visitantes cuando el sitio que están visitando no tiene un certificado SSL. Además de esto, Chrome está ahora depreciando las versiones TLS heredadas y comenzó a mostrar advertencias adicionales.
    Habilitar HTTPS (parte de la instalación de un certificado SSL) es también un factor de clasificación oficial de Google.
  • Mantenga sus credenciales de acceso seguras. Varios ataques son causados por hackers que intentan acceder por la fuerza a un sitio web. Ayude tener una página de inicio de sesión separada/ocultada (use el plugin WP Hide Login) y limitar el número de intentos de inicio de sesión. Utilice el plugin Login LockDown, que registra la dirección IP y la marca de tiempo de cada intento de acceso fallido y bloquea la función de acceso si se alcanza el número de intentos fallidos del mismo rango de IP en un corto período de tiempo. Además, crea una contraseña segura que tenga más de 6 caracteres y que sea una mezcla de letras mayúsculas y minúsculas, números y caracteres especiales. Cambie su contraseña a menudo. También puede usar la autenticación de dos factores para iniciar la sesión si busca seguridad adicional.
  • Mantenga el núcleo de WordPress, los plugins y los temas actualizados. No te olvides de descargar los plugins o temas de una fuente de confianza. Una buena señal es si el plugin/tema tiene múltiples instalaciones y ha sido actualizado recientemente. También deberías leer las críticas para decidir por ti mismo si el plugin es fiable (asegúrate de comprobar las que aparecen aquí). En ese sentido, descargue un plugin de seguridad de WordPress como Wordfence, SucuriDefender, ya que el 73,2% de las instalaciones más populares de WordPress que son vulnerables pueden ser detectadas usando herramientas automatizadas gratuitas. Aquí hay una lista más detallada de los mejores plugins de seguridad.
  • Usa un servidor web seguro. Para los que no lo sepan, puede parecer que su anfitrión web no tiene nada que ver con la seguridad del sitio, pero el 41% de los ataques se producen a través de una vulnerabilidad de seguridad en la plataforma de alojamiento. Busque un proveedor de hospedaje que incluya características como: firewall y encriptación del lado del servidor, servidores web NGINX o Apache, software antivirus y antimalware, sistemas de seguridad en el sitio, y la disponibilidad de certificados SSL y un CDN.

Para obtener más información sobre la seguridad de WordPress, consulta nuestro completo recurso sobre cómo mantener seguro su sitio de WordPress.

Velocidad de la página

Alrededor de la mitad de los usuarios esperan que un sitio se cargue en 2 segundos o menos, y si toma más tiempo que eso, el 40% de las personas no dudarán en rebotar de la página, (probablemente) para nunca regresar.

Además de las visitas al sitio web, la velocidad de la página es importante ya que también afecta a la conversión y a los ingresos. Por cada segundo de velocidad de carga de página añadida, las ventas caerán hasta un 27%. Aumentar la velocidad del sitio web puede evitar la pérdida del 7% de las posibles conversiones.

Aquí hay algunas maneras de hacer que sus páginas web se carguen más rápido:

  • Utiliza una red de entrega de contenido (CDN), que toma archivos estáticos como imágenes, CSS y JavaScript, y los entrega en los servidores más cercanos a la ubicación física del usuario.
  • Considere cómo utiliza las imágenes. El sitio web promedio usa 1.8MB de imágenes, lo que representa el 60% del tamaño de un sitio. Para ayudar con eso, reconsidere la forma en que diseña su página web. Si quiere mantener la velocidad de la página rápida, intente reducir el número de imágenes grandes utilizadas en su diseño y asegúrese de optimizarlas.
  • Si su sitio web necesita utilizar muchas imágenes grandes, utilice plugins que incluyan la funcionalidad de compresión GZIP, almacenamiento en caché u optimización de imágenes, como WP Rocket e Imagify. Pueden ayudar a reducir el tamaño de los archivos (sin sacrificar la calidad) para que se carguen más rápido.
  • Considere el número de plugins y archivos que mantiene en su base de datos de WordPress ya que también pueden afectar a la velocidad de carga de la página. Limpia los que no uses. Mientras lo hace, mantenga su PHP, el núcleo de WordPress y los plugins actualizados a sus últimas versiones.

Revise nuestro completo recurso para la optimización de la velocidad del sitio web.

Estándares de accesibilidad

La Internet fue diseñada para funcionar para todas las personas, sin importar el hardware, software, idioma que utilicen, su habilidad o ubicación. Sin embargo, muchos sacrifican la accesibilidad por un hermoso diseño.

La accesibilidad es clave para cada sitio web

La accesibilidad es clave para cada sitio web

La accesibilidad se refiere a la práctica de hacer que su sitio web sea utilizable por todos.

Además de las discapacidades que afectan el acceso, W3 dice que la accesibilidad del sitio web también es beneficiosa para:

  • Los que utilizan dispositivos con pantallas pequeñas, diferentes modos de entrada, etc.
  • Los ancianos.
  • Personas con «discapacidades temporales» incluyendo una extremidad rota, gafas perdidas o una condición médica.
  • Usuarios con «limitaciones de situación», como los que acceden a la Internet en dispositivos a la luz del sol o en un entorno en el que no pueden escuchar el audio, como el transporte público.
  • Individuos con una conexión a Internet lenta.

La accesibilidad debería ser una preocupación de todos, ya que todos estamos afectados por ella de alguna manera.

Razones para hacer que su sitio sea accesible

¿Aún no está seguro de que valga la pena gastar su tiempo en accesibilidad en esta discusión sobre las mejores prácticas de diseño web?

Considere estas razones:

  • Es un requisito de la ADA. La Ley de Estadounidenses con Discapacidades (ADA) fue aprobada en 1990 para proteger los derechos civiles de los discapacitados contra la discriminación. Cubre cosas como el transporte, las telecomunicaciones, el empleo, e incluso los códigos de construcción. Dado que esta ley fue aprobada casi 30 años antes, cuando Internet no era tan omnipresente, los legisladores están tratando de enmendarla.
  • Fomenta la inclusión. Una encuesta del Pew Research Center muestra que las personas con discapacidades tienen tres veces menos probabilidades de conectarse a Internet que sus homólogos sin discapacidades, lo que es una lástima ya que las estadísticas muestran que alrededor del 30% de los profesionales tienen una discapacidad, y que el 62% de los discapacitados «vuelan por debajo del radar» por miedo a los prejuicios negativos.
  • Te ayudará a ganar más negocios. Al ser más inclusivo, traerá una red de personas con discapacidades, lo que representa 7 billones de dólares en ingresos disponibles
  • Beneficios de SEO. Los motores de búsqueda recompensan a los sitios web que cumplen con los requisitos de accesibilidad a fin de alentar a más sitios web a ser accesibles.

Cómo hacer su sitio web más accesible

Una manera fácil de hacer su sitio web más accesible es instalar el plugin de accesibilidad de WP, que añade características de accesibilidad, incluyendo:

  • Una barra de herramientas donde los usuarios pueden cambiar el tamaño de las fuentes y ver su sitio en alto contraste y escala de grises.
  • Comparando el contraste de colores para comprobar si se ajusta al estándar de la ADA.
  • Eliminar los atributos de título de las imágenes insertadas en el contenido. La mayoría de los lectores de pantalla no son capaces de sentir esto y leer el texto de anclaje en su lugar.
  • Habilitar los enlaces de salto, que son enlaces de páginas internas que permiten a los usuarios saltar directamente al contenido, lo que resulta útil para las personas que utilizan lectores de pantalla.

Unos cuantos pasos adicionales a tomar:

  • Añada subtítulos o una transcripción si su sitio produce medios de comunicación como audio, audiolibros, vídeos, podcasts, etc., para beneficiar a los sordomudos, así como a las personas que quieren consumir su contenido pero no pueden consumir los medios de comunicación en público.
  • Crear enlaces y menús accesibles por teclado para las personas que tienen discapacidades motoras y sólo pueden utilizar un teclado (no el ratón) para navegar por su sitio. Se desaconseja el uso de menús desplegables, pero puede remediarlo asignando atajos para cada elemento desplegable (como: presione «1» para la página de inicio, «2» para la página de información, etc.).
  • Por último, compruebe la accesibilidad de su sitio web. La Iniciativa de Accesibilidad a la Web no respalda ninguna herramienta específica, sino que ofrece una lista de herramientas que puede utilizar para auditar sus esfuerzos.

Pensamientos finales: Mejores prácticas de diseño web para su próximo proyecto de sitio web

Los buenos sitios web no deberían definirse por un diseño objetivamente bueno. Igual de importante es la usabilidad del sitio, la facilidad de navegación y la accesibilidad. Armado con estas mejores prácticas de diseño web, tienes todo lo que necesitas para crear algo que se vea y funcione bien.

El diseño web no es sólo cuestión de estética. Es un mundo mucho más complicado en el que UX, accesibilidad y objetivos de negocios deben conectarse. Mira estas mejores prácticas de diseño web! ✍️🔝 Haga clic para Tweet

Sólo tenga en cuenta que estas son las mejores prácticas de diseño web. Es probable que no pueda seguir cada uno exactamente, dependiendo de la naturaleza de su sitio web. Pero antes de que pueda romper las reglas, ayude al menos ser consciente de por qué existen.

¿Nos hemos perdido algo importante? Comparta sus mejores prácticas de diseño web en los comentarios de abajo!


Si le ha gustado este artículo, entonces le encantará la plataforma de Kinsta WordPress hosting. Acelere su sitio y reciba soporte 24/7 de nuestro equipo de WordPress veterano. Nuestra infraestructura potenciada por Google Cloud se centra en escalamiento automático, rendimiento y seguridad. ¡Déjenos mostrarle la diferencia con Kinsta! Conozca nuestros planes