Haz que la Web Trabaje para Todos
Haz que la Web Trabaje para Todos
Millones de sitios web tienen problemas de compatibilidad con uno o más de los navegadores web más populares, produciendo una pobre experiencia al usuario, pero la comunidad de desarrollo web puede solucionar esto.
La web ha cambiado inmensamente en los últimos 20 años. En 1996 había aproximadamente un millón de sitios web; ahora hay más de mil millones. Antes había aproximadamente 50 millones de usuarios de Internet; hoy hay más de 3 mil millones. Tenemos más contenido del que jamás hubiésemos imaginado posible. Las personas están disfrutando este contenido en 8.1 mil millones de dispositivos conectados, incluyendo más de 24,000 tipos diferentes tipos de dispositivos móviles.
Este explosivo crecimiento en contenido, dispositivos y usuarios ha hecho a la compatibilidad entre navegadores más esencial incluso de lo que fue en 1996. Stack Overflow tiene casi 55,000 preguntas que incluyen la palabra “cross-browser”, y cientos de miles de preguntas acerca de cosas que funcionan bien en (X Navegador). Cualquier pregunta acerca como un navegador en particular maneja un sitio web en particular es potencialmente una pregunta de compatibilidad.
Así que sí, la compatibilidad entre navegadores es aún un problema. Un problema del que nos preocupamos en Mozilla, y pensamos que tú también deberías preocuparte también. ¿Por qué? Bien, probablemente tus usuarios no usan el mismo navegador que tú. Ellos tienen diferentes habilidades y necesidades de las que tú piensas. Ellos no cambiarán de navegador si tu sitio web no funciona en ellos. Funcionando bien es una manera de demostrar dominio en el arte. Y las herramientas modernas hacen esto más fácil que nunca.
¿Qué causa incompatibilidad entre navegadores? Es complicado. Aquí hay algunas de las principales causas:
Desarrolladores que usan características específicas de un solo navegador (por ejemplo: prefijos del fabricante del navegador) para lograr ciertos efectos, sin respaldos o polyfills para otros navegadores.
Fabricantes de navegadores los cuales se apresuran a implementar características que desean los desarrolladores antes de que estén estandarizadas.
Fabricantes de navegadores los cuales se retrasan en implementar estándares y corregir problemas en sus navegadores.
Sitios web que emplean agentes de detección para mostrar diferente contenido para diferentes navegadores.
Desarrolladores que son demasiado dependientes de un único conjunto de herramientas (los cuales algunas veces solo soportan un único navegador) y pueden omitir problemas de compatibilidad entre navegadores.
Crecimiento en la industria, la intensa demanda ha animado muchos nuevos desarrolladores web a adentrarse en el campo, lo cual significa que los desarrolladores en general están menos experimentados en promedio de lo que lo estaban unos pocos años atrás.
Algunos de estos retos han estado con nosotros desde los primeros días de la web. Pero desde esos días, el desarrollo web ha hecho grandes progresos. Las buenas prácticas y las herramientas modernas pueden ayudarnos a construir vibrantes experiencias en cada navegador.
Así que, desarrolladores, aquí tienen algunas cosas para inspirarlos a hacer que su próximo sitio web trabaje para todos.
Más personas de las que tú piensas usan ese otro navegador
Muchos desarrolladores creen que el navegador que ellos usan es el único navegador que cualquiera realmente usa, por lo tanto, deberían desarrollar solo para él. En datos, 70% de los desarrolladores web usan Chrome en su equipo de escritorio. Pero solo cerca del 45% de la población en general usa Chrome en cualquier tipo de dispositivo, y solo cerca del 57% de la población en general usa Chrome en su equipo de escritorio. Desarrollando y probando solo en Chrome ignora a casi la mitad de los usuarios globales. (Es importante señalar aquí que existen diversas páginas de medición para las cuotas de mercado de cada navegador web, las cuales usan diferentes metodologías y producen diferentes números, y estos números cambian rapida y constantemente.)
Y el uso de los navegadores varía de acuerdo a la ubicación geográfica. Chrome, Firefox y IE/Edge son los navegadores más populares en muchos lugares, pero la proporción de usuarios de cada uno varía. Los usuarios alemanes prefieren Firefox por encima Chrome. IE es más popular en Japón. Un gran número de australianos prefieren Safari. Más de uno de cada cinco usuarios vietnamitas corre un fork de Chromium llamado Cốc Cốc. Desarrollando y probando en un solo navegador ignoras este tipo de diferencias en el mercado.
Finalmente, algunas características de tu navegador pueden no estar presentes en otros navegadores. Los fabricantes de navegadores implementan características a diferentes ritmos, así que una genial nueva API en tu navegador favorito puede no estar disponible para muchos usuarios.
Estos factores se combinan de formas inesperadas: Eligiendo una API la cual no es soportada en todos los navegadores, probando tu sitio web en un solo navegador, y lanzándolo en un mercado donde ese navegador no es dominante puede significar excluir sustancialmente more de la mitad de tu público potencial. Dejando dinero sobre la mesa. Dejando clientes afuera en el frío. Es por esto que vale la pena hacer el esfuerzo con tal de evitarlo.
La compatibilidad se cruza con la accesibilidad
Desarrollando un sitio web compatible entre navegadores significa diseñar y programar para ambientes de clientes desconocidos, a fin de hacer disponible el contenido para la mayor cantidad de público posible. Y ese público indudablemente incluye personas con alguna discapacidad, probablemente más de las piensas. Si tu sitio web trabaja en cualquier navegador, pero falla notablemente en un lector de pantallas, estás desperdiciando una poderosa oportunidad.
Las personas con alguna discapacidad representan una parte importante del mercado. Por ejemplo, en USA únicamente, hay más usuarios de internet con alguna discapacidad visual que todos los usuarios combinados en Canadá. Las características de la web moderna manejan las necesidades de este público; tu solo debes implementarlas.
Las técnicas de accesibilidad no solo ayudan a personas con alguna discapacidad únicamente, por ejemplo:
- Los sitios web que son más accesibles para los lectores de pantalla, lo son también para los algoritmos de los motores de búsqueda. Sencillas técnicas de optimización como usar el atributo alt-text en imágenes, usar descripciones en los enlaces, usar CSS solo para estilos (nunca para dar sentido), y usar las etiquetas semánticas de HTML5 mejoran el posicionamiento en buscadores de la página en general.
- Transcripciones del contenido de videos no solo son provechosas para personas con alguna discapacidad auditiva, estas también son útiles para usuarios en dispositivos móviles en áreas con poco ancho de banda los cuales no pueden descargar el video, y personas en ambientes ruidosos que no pueden escuchar el video. Y más contenido textual significa más oportunidades para palabras claves, así que una vez más, mejor posicionamiento en buscadores.
Los usuarios no cambiarán de navegador, ellos cambiarán de sitio web
Tu podrías pensar que los usuarios cambiarán de navegador para usar tu sitio web. Pero muchos de ellos no lo harán o no pueden hacerlo.
Los usuarios no tienen paciencia con las cosas que no funcionan, y ellos en vez de esperar se irán al sitio web de la competencia. Fallando en un punto clave el cual podría alejar a un cliente potencial para siempre. De acuerdo a Akamai,
- 32% de los usuarios que se encontraron con un problema en tu sitio web están menos interesados en hacer transacciones en línea con tu compañía
- 35% tendrán una percepción más negativa de tu compañía
- 45% están menos interesados en visitar tu sitio web nuevamente
- Y más de 1 de cada 5 usuarios (22%) lo dejará para siempre.
Lo que es más, muchos usuarios no saben cómo instalar un nuevo navegador web, o incluso no saben lo que es un navegador web (muchos usuarios no saben la diferencia entre un navegador web, un motor de búsqueda, y un sitio web).
E incluso si los usuarios supieran cómo instalar un nuevo navegador web, y quisieran hacerlo, ellos podrían no ser capaces de hacerlo. Muchas compañías eligen qué navegador web tienen sus permitido ocupar sus empleados, y muchas personas usan computadoras públicas en sitios como bibliotecas.
Por ejemplo, Microsoft dio como fecha límite el 12 de enero de 2016 a los usuarios para cambiar a la más reciente versión de su navegador, pero en marzo de 2016 más de la tercera parte de los usuarios de IE seguían en una versión desactualizada la cual ya no recibirá más actualizaciones de seguridad. Durante el año pasado (junio 2015 – mayo 2016) 2.07% usaban IE8, un navegador al cual Microsoft ya no le da soporte; lo mismo sucede con más de tres cuartas partes del 1.59% en IE9 y virtualmente todo el 10.95% que usa IE10 (aunque hay que señalar que el uso de estos navegadores ha reducido significativamente desde marzo).
Malas experiencias llevan a los usuarios a alejarse. Si la mitad de los usuarios de tu sitio usan un navegador diferente, y tú quieres conservarlos, probar tu sitio en ese otro navegador es esencial.
Compatibilidad=== Arte
La creación de la web es una disciplina especializada, no solo una tarea doméstica. Todos nosotros queremos sentirnos orgullosos de lo que hacemos, perfeccionar nuestro arte, y demostrar nuestra maestría en ello. Esto involucra:
- Estar al día con las últimas tecnologías, frameworks, y técnicas.
- Probar cuidadosamente e implementar la compatibilidad entre navegadores y plataformas de aplicaciones incluyendo respaldos para navegadores menos poderosos. ¿La experiencia es aceptable?
- Asegúrate que el contenido de tu sitio web esté accesible para personas con alguna discapacidad.
- Asegúrate que el aspecto en general y la experiencia de usuario de tus creaciones es agradable y se ajusta contigo y/o con la marca de tu cliente.
Así que, como desarrollador web, tus sitios creados son tu resumé. Una alta experiencia de uso es importante para tus usuarios, para tus compañeros y para tus actuales y futuros empleadores.
Pero muy a menudo, el tiempo y las restricciones comerciales se interponen en el camino de tales cosas. Tienes una fecha límite complicada a la cual llegar. Tu jefe solo está interesado en cómo el sitio web trabaja en su iPad y no quiere escuchar de accesibilidad. No tienes tiempo para arreglar ese error en IE con tanta prisa. Hacemos lo que podemos la mayoría de las veces, en lugar de lo que realmente nos hubiera gustado hacer.
Puede ser tentador dejar las pruebas de compatibilidad entre navegadores como algo para eliminar cuando la fecha límite llegue, esperando que las pruebas en el framework que elegimos nos ayuden. Pero tu sitio web no es completamente código del framework, y tú eres responsable por todo el código. Las pruebas para asegurarse de que tu código trabaja bien en todos los navegadores web es algo que debes tratar fuertemente de evitar.
Escribir código que perdure a través del tiempo; entregar información a quien la solicita; creando una rica funcionalidad que trabaje para todos: Estas son nobles metas de un magnífico desarrollador web.
Ahora ya sabes algunas estupendas razones para hacer tu sitio web más compatible. Pero, ¿cómo lo haces?
- Si has encontrado un error en el sitio web de alguien más, ¡regístralo en ¡webcompat.com! Si estás depurando tu propio sitio web, continúa leyendo.
- Prueba tu sitio web en diferentes navegadores web y muévete a través de él como lo haría un usuario. Analiza la consola de desarrollo en las herramientas de desarrollador del navegador en busca de errores (la mayoría de los navegadores web de escritorio modernos cuentan con increíbles herramientas de desarrollador incluidas que son capaces de ayudarte a depurar problemas, incluso en dispositivos móviles):
-
- Si encuentras un error el cual no es generado por tu sitio web, ¡quizás es un error en el navegador web! Registra un reporte de error, así los desarrolladores de tu navegador web pueden solucionarlo:
-
- Integrar una herramienta de prueba de compatibilidad entre navegadores en tu proceso de desarrollo, para hacer la prueba entre navegadores de forma automática:
- Saber cuáles navegadores han implementado características web antes de usarlas en tu sitio.
-
- Caniuse
- Tablas de compatibilidad de MDN
- Tablas de compatibilidad de Kangax ECMAScript
- Investigar herramientas de código que pueden mejorar la compatibilidad entre navegadores.
-
- Autoprefixier, CSSNext, Oldie y otros PostCSS plugins hacen posible escribir completamente, modernos CSS que no fallan en navegadores antiguos.
- Modernizr te ayuda a identificar y manejar las diferencias de implementación de características web entre navegadores (utiliza esto en vez de agentes de detección del navegador)
- @supports te ayuda a crear avanzadas mejoras en la experiencia de navegación para los navegadores más poderosos
- Ve más allá. Aprende acerca de las muchas características y peculiaridades de la web. Entre más sepas acerca de ella, más la querrás.
-
Cumpliendo con la promesa de la web
La promesa de la web es que cualquiera pueda acceder al contenido usando cualquier navegador en cualquier dispositivo. Incluidas dentro de esta promesa están algunas de las más grandes aspiraciones de la humanidad, autodeterminación, libertad, educación y descubrimiento. Diseñar para tener compatibilidad entre navegadores abre tu trabajo al mayor público y mercado posible, mejora tu maestría en el arte, y es un noble fin por sí mismo.
Mientras el paisaje de los dispositivos modernos y de los navegadores presenta muchos desafíos, las herramientas modernas ofrecen muchas soluciones. Más de 3 mil millones de personas están allá afuera buscando un sitio web, ¿estás listo para ellos?
Justin Crawford es un ingeniero de producción en Mozilla, trabaja en desarrollo de marketing y crecimiento. Le gusta pensar en el futuro, construir cosas y andar en bicicleta.
Más artículos escritos por Justin Crawford …
Chris Mills es un escritor de tecnología Senior en Mozilla, donde él escribe documentos y demostraciones sobre web apps abiertas, Firefox OS, y temas relacionados. El ama reparar cosas relacionadas con HTML, CSS, JavaScript y otras tecnologías web, el da ocasionalmente charlas sobre tecnología en conferencias y universidades. El solía trabajar para Opera y W3C, disfruta tocar heavy metal en la batería y beber buena cerveza. Él vive cerca de Manchester, Reino Unido, con su esposa y tres hermosos hijos.
Más artículos escritos por Chris Mills …
@alispivak. Ali se desempeña como Desarrollador de Marketing en Mozilla, y ha estado desarrollando y administrando sitios web por tanto tiempo que ella se preocupa por admitirlo en público. Ella es una apasionada por mantener la web libre y trabaja en cosas que los desarrolladores aman (como MDN). También ama viajar, cocinar, y crear cosas.
Más artículos escritos por Ali Spivak …
