Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado. Leer más.

La mejora progresiva es una técnica que ayuda a garantizar que su software sea robusto y accesible. Al seguirlo, puede asegurarse de que tantas personas como sea posible puedan usar su sitio web o aplicación.

Comience con una versión mínimamente viable de su diseño web y asegúrese de que funcione según sea necesario. Luego, superponga funcionalidad y estilo adicionales, para que los navegadores más capaces puedan beneficiarse.

¿Cómo funciona la mejora progresiva?

Debido a su naturaleza extremadamente distribuida, la web siempre ha necesitado admitir una gran variedad de dispositivos. Desde computadoras básicas de la década de 1970 hasta computadoras de escritorio, tabletas y televisores modernos y capaces, los sitios web han recorrido un largo camino.

En el corazón de todo está HTML. Como es un lenguaje "perdonador", los navegadores mostrarán HTML tan bien como lo entiendan. Por lo general, ignorarán cualquier cosa que no admitan.

instagram viewer

Esto puede ser útil desde el punto de vista de un desarrollador, pero puede causar problemas a los lectores. Si su sitio muestra una página en blanco cuando JavaScript no se puede ejecutar, los usuarios no tienen más remedio que abandonarlo. La mejora progresiva lo alienta a entregar contenido central a todos los que pueden acceder a él, luego mejorar ese contenido utilizando tecnologías apropiadas, como CSS y JavaScript.

Un enfoque progresivo del estilo

CSS es el lenguaje de hojas de estilo de la web que puede usar para personalizar colores, fuentes, diseñosy muchos otros aspectos visuales de sus páginas. Puede usarlo para mejorar el aspecto predeterminado de su contenido, pero eso no significa que no deba estructurar su contenido correctamente en primer lugar.

Tome una barra de menú, por ejemplo; podrías estructurarlo así:

<navegación>
<un href="/register">registro</a>
<un href="/login">acceso</a>
<un href="/about">sobre nosotros</a>
<un href="/contact">contacto</a>
</nav>

Para mostrar un menú horizontal, en el que cada enlace se parece un poco a un botón, puede diseñarlo con este CSS:

navegar un {
texto-decoración: ninguno;
pantalla: bloque en línea;
relleno: 0.5em 1ellos;
borde: 1px sólido;
borde-radio: 8px;
margen derecho: 1em;
}

Cuando el navegador muestre esto por completo, debería tener el siguiente aspecto:

Sin embargo, si CSS no está disponible, el menú se mostrará así:

Observe cómo esto no se parece en nada a un menú y no es muy fácil de usar ya que los enlaces se fusionan en uno.

Puede usar una estructura alternativa para hacer que el diseño sea más robusto:

<navegación>
<ul>
<li><un href="/register">registro</a></li>
<li><un href="/login">acceso</a></li>
<li><un href="/about">sobre nosotros</a></li>
<li><un href="/contact">contacto</a></li>
</ul>
</nav>

Dado que este marcado utiliza un elemento de lista desordenado, es mucho más útil en ausencia de CSS:

Tenga en cuenta lo fácil que es escanear y comprender rápidamente estos enlaces, incluso con el estilo predeterminado del navegador. Este enfoque requerirá que agregue un poco más de CSS para anular los estilos de lista predeterminados:

navegaciónli { mostrar: en línea; }

Aunque la estructura final y el estilo son más complicados, y la mayoría de los usuarios tendrán CSS habilitado, este enfoque es más sólido. Será más amigable para los usuarios de lectores de pantalla y navegadores basados ​​en terminal.

Introducción progresiva de la funcionalidad

La mejora progresiva es más importante cuando se trata del funcionamiento de un sitio o aplicación. El principio establece que, pase lo que pase, su sitio web debe funcionar lo mejor posible.

En la práctica, esto suele aplicarse a JavaScript. Si introduce un comportamiento del lado del cliente, debe colocar la funcionalidad en la parte superior de un sitio o aplicación que ya funciona sin él.

Un caso muy común es el manejo de eventos. Imagina una página que carga contenido adicional bajo demanda. Esto podría ser un desplazamiento infinito manual, una inserción de comentarios o algo similar.

<cuerpo>
<!--... -->
<botón al hacer clic ="carga más();">
Carga Más
</button>
<!--... -->
</body>

Los botones al hacer clic El atributo contiene código JavaScript que se ejecutará cuando alguien haga clic en el botón. Sin embargo, si JavaScript no está disponible, este botón no hará nada. Un usuario se quedará haciendo clic en este botón sin comentarios y sin idea de lo que está mal. Un enfoque mucho mejor utiliza la mejora progresiva:

<cuerpo>
<!--... -->
<una identificación ="p2" href="/page/2">Página 2</a>

<guion>
funcióncarga más() { consola.registro("!"); }

/* Reemplazar enlace con botón */
variable enlace = documento.getElementById("p2");
variable botón = documento.createElement("botón");
boton.textointerno = "Carga más";
botón.addEventListener("hacer clic", carga más);
documento.cuerpo.insertarAntes(botón, enlace);
enlace.parentNode.removeChild(enlace);
</script>
</body>

Este código transforma el enlace básico en un botón con un controlador de eventos. Al introducir la dependencia de JavaScript utilizando JavaScript mismo, puede estar seguro de que funcionará. Y hay un comportamiento predeterminado funcional que funciona, en forma de enlace estándar a /page/2.

¿Es realmente necesaria la mejora progresiva?

Todos usan navegadores con CSS y JavaScript, entonces, ¿por qué molestarse en atender una situación que no se presenta? Bueno, hay varias razones por las que debería adoptar la buena práctica de la mejora progresiva.

  1. Primero, no todos los que visitan su sitio web usan un navegador. Algunos visitantes serán bots, como un indexador de motor de búsqueda, y es posible que no entiendan CSS o JavaScript en absoluto.
  2. En segundo lugar, no todas las personas que visiten su sitio utilizarán un navegador con CSS y JavaScript. Algunos visitantes pueden usar un navegador basado en terminal, que muestra texto sin formato con un formato mínimo. Otros pueden usar un lector de pantalla.
  3. En tercer lugar, incluso si un navegador admite CSS y JavaScript, las cosas salen mal. Un enlace roto o una mala conexión de red pueden provocar la falta de un archivo .css o .js. Un error en JavaScript puede hacer que otro código no se ejecute en absoluto.
  4. Finalmente, algunos visitantes pueden decidir activamente deshabilitar CSS o JavaScript. Es posible que lo hagan por motivos de privacidad o porque tienen una conexión lenta o de pago por uso.

Una mentalidad progresiva hace maravillas

Sobre todo, la mejora progresiva lo alienta a adoptar un enfoque de contenido primero. El contenido es el rey, por lo que su texto e imágenes siempre deben estar disponibles para todos, sin importar cómo accedan a su sitio.

Brindando a todos los lectores la mejor experiencia posible y luego haciéndola aún mejor para aquellos que pueden beneficiarse, puede tener lo mejor de todos los mundos. La mejora progresiva es solo un componente clave de una buena práctica de accesibilidad y usabilidad.