Mejores prácticas para la mejora progresiva en diseño web

El oficio de crear sitios web es increíblemente complejo con muchas partes que cambian rápidamente. El objetivo de la comunidad de diseño web es disminuir la complejidad, y reducir el potencial de error En cada etapa del proceso de creación..

Mejora progresiva Es una idea tal en diseño web que tiene como objetivo reducir errores y proporcionar una experiencia de usuario consistente en todos los ámbitos. El concepto tiene su propia página de Wikipedia que lo explica como un método de contenido totalmente accesible, prestación de funciones mejoradas solo cuando es compatible con el navegador.

Es fácil de entender la mejora progresiva, pero no tan fácil de aplicarla directamente a su trabajo de diseño. Me gustaría cubrir algunos Mejores prácticas para la mejora progresiva en proyectos del mundo real. a Ayudar a los diseñadores a pensar de forma más sostenible sobre su flujo de trabajo..

1. Comprender la mejora progresiva

La teoría de la mejora progresiva recomienda comenzar con un sitio web simple que funciona en todos los navegadores, haciéndolo accesible para cada visitante. Luego agregue características siempre que sea posible.

Esto es lo opuesto a la degradación elegante, que incluye todas las funciones de forma predeterminada, luego se degrada cuando algo no funciona..

La mejora progresiva es mejor para la experiencia general del usuario, porque en su núcleo es carga solo elementos necesarios. Cada navegador web puede soportar texto (y usualmente imágenes). Sin ningún tipo de CSS, esta información parecerá insípida y sin sabor, pero será accesible.

Esta Lista aparte artículo argumenta que la mejora progresiva es contenido primero con Estilos y componentes dinámicos añadidos más tarde.. El contenido en HTML semántico debe ser entregado antes que cualquier otra cosa..

Los CSS y JavaScript avanzados que utilizamos hoy son ampliamente compatibles, pero si queremos seguir los principios de mejora progresiva, deben considerarse lujos..

Aquí hay un resumen general de las características principales de la mejora progresiva, que debe tener en cuenta:

Marcado semántico para todo el contenido
Usuarios preferencias del navegador necesita ser respetado
El contenido y la funcionalidad básica deben ser disponible para todos los usuarios
JavaScript no intrusivo se carga solo En entornos que puedan soportarlo.

Las restricciones tecnológicas en el desarrollo de front-end están determinadas principalmente por la compatibilidad del navegador. La mejora progresiva lo regresa a lo básico pensando en cómo la página web más simple y sencilla podría parecerse a A partir de ahí, puedes plan para características más avanzadas, como propiedades CSS3.

Pero ¿qué pasa con los navegadores que no admiten CSS3 moderno? Aquí es donde los sitios como Can I Use entran en juego. Debe decidir qué características vale la pena implementar y hacer juicios basados en en el público objetivo de su sitio web.

2. La subsistencia en hojas de estilo

La mayoría de los navegadores de hoy en día admiten todas las propiedades básicas que necesita. Pero CSS3 avanzado sigue siendo un problema para los usuarios heredados, y la mejora progresiva ofrece una solución.

En lugar de buscar métodos de reserva para mantener estas nuevas funciones, primero debe preocuparse por estructuras de diseño adecuadas.

Escriba código HTML semántico y CSS que funcione en tantos navegadores activos como sea posible (no es necesario el soporte para navegadores antiguos como el soporte IE5).

Tomemos, por ejemplo, este JSFiddle que usa flotadores con dos barras laterales (.fijo), y un área de contenido fluido (.fluido). Si elimina todo el CSS y vuelve a ejecutar el código, notará que todo se acumula muy bien con la primera columna, luego la segunda y finalmente la última.

Algunos desarrolladores preferirían tener la columna de contenido (.fluido) aparecen primero en el HTML. Aquí es donde la mejora progresiva entra en juego, y las soluciones CSS alternativas se vuelven viables..

Los dos objetivos principales de su HTML son los siguientes:

Completamente semantica y valida código
UNA experiencia consistente para todo el mundo

La forma más directa de alcanzar estos objetivos es empezar de la nada y elaborar, como la mayoría de los defensores de la mejora progresiva lo recomendarían.

Si su código se ve bien con CSS tanto deshabilitado como habilitado, entonces ofrece una solución razonable para todos.

También vale la pena considerarlo ¿En qué punto dejas de apoyar algo?. Microsoft ya ha eliminado el soporte principal para IE6, por lo que los usuarios que ejecutan ese navegador pueden no valer la pena..

Pero todavía hay una gran pregunta: si un navegador no es compatible con mi CSS moderno, ¿qué debo hacer??

Tu simplemente escribe código que funcione sin eso, y considerar el CSS moderno como una mejora progresiva. Esta es la belleza de la metodología de mejora progresiva..

No necesitas recargos, porque eres básicamente asumiendo que nada es compatible por defecto.

Los métodos de mejora progresiva consisten en hacer que el sitio sea utilizable incluso en los casos en que algo no es compatible, pero si es compatible, tanto mejor.

Necesitas considerar Cómo fluye realmente el contenido sin CSS. Por ejemplo, cuando deshabilito CSS en el sitio web de Transmit, el contenido aún fluye orgánicamente por la página.

Sí, es feo, y sí, parece que hemos perdido veinte años de progreso ... pero funciona.

3. Manejo de JavaScript

Vale la pena mencionar que cada problema de JavaScript con el que se puede encontrar durante el proceso de desarrollo es complicado y único. Cuando construye un nuevo proyecto con mejoras progresivas, debe enumerar todas las funciones requeridas basadas en JS y considerar cómo podrían hacerlo. operar sin JavaScript.

Esto requerirá mucha investigación en línea para encontrar soluciones válidas. Aaron Gustafson escribió una excelente publicación en el blog con soluciones para varios problemas, como reemplazar Ajax con una meta actualización para el contenido dentro de un iframe..

Además, cuando creas pestañas de JavaScript, es una buena idea Utilizar enlaces de anclaje con valores de ID reales.. De esa manera, cuando JavaScript está deshabilitado, aún puede tener las pestañas visibles y accesibles por valor de ancla. Aaron escribió otra pieza en A List Apart que cubre una descripción más general de cómo debería pensar acerca de estos problemas..

Aquí hay otro ejemplo. Digamos que tienes un enlace que carga contenido dinámicamente. los href el valor está vacío, porque todo se carga a través de JavaScript con el método preventDefault ().

En su lugar, sería prudente establecer el href propiedad a apuntar a una página diferente Donde el contenido podría cargar naturalmente, pero el visitante solo ve esa página cuando JavaScript está deshabilitado.

La mejora progresiva es mucho más que JavaScript, pero con el desarrollo web avanzando cada año, no hay duda de que JavaScript juega un papel importante.

Operar bajo el supuesto de que todo ha sido deshabilitado, y escalar desde allí. Esto podría incluir problemas con widgets incrustados que están fuera de su control, la