Creación de sitios Web Compatibles con Navegadores cruzados
Publicado en Performance by WP Engine
Última actualización el 30 de mayo, 2019
A pesar de que la mayoría de las personas se apegan a usar un solo navegador, tiene docenas de opciones para dispositivos de escritorio y móviles. Idealmente, los sitios web se mostrarían perfectamente independientemente del navegador que utilizaras. Sin embargo, ese no siempre es el caso, que es donde entran en juego las pruebas entre navegadores.
Con pruebas exhaustivas entre navegadores, puede asegurarse de que su sitio web se vea y se comporte perfectamente en todas las opciones populares. De esa manera, sus visitantes tendrán una experiencia igualmente excelente, ya sea que usen Chrome, Firefox, Opera o opciones menos conocidas como SeaMonkey.
En este artículo, vamos a hablar un poco más sobre la importancia de las pruebas entre navegadores. Luego, repasaremos algunos pasos para ayudarlo a crear un sitio web compatible con varios navegadores. ¡A trabajar!
¿Por Qué Es Importante La Compatibilidad Entre Navegadores?
La mayoría de las personas utilizan navegadores conocidos, como Google Chrome, Safari, Firefox y Opera. Sin embargo, hay muchas más opciones disponibles de las que podría imaginar. Esto es bueno para el consumidor, pero el problema para usted es que cada navegador está construido de manera diferente. Eso significa que tu sitio web puede funcionar perfectamente en Chrome, pero experimenta problemas en Firefox (solo para dar un ejemplo).
En nuestra experiencia, la mayoría de los errores que verá en un navegador pero no en otro son problemas relativamente pequeños. Es posible que un elemento específico de su sitio no lo vea, o que una característica en particular no funcione correctamente. Si bien estos problemas pueden ser menores, deben abordarse si desea proporcionar la misma experiencia a todos los visitantes de su sitio.
Idealmente, querrá diseñar su sitio web para que sea compatible con varios navegadores desde cero. De esa manera, no se arriesgará a alienar a los usuarios de ningún navegador en particular. En las siguientes secciones, te mostraremos cómo hacerlo.
Cómo crear un sitio web compatible con varios navegadores
La idea de crear un sitio web compatible con varios navegadores puede sonar desalentadora. Sin embargo, unos pocos pasos simples pueden ayudar mucho a garantizar que su sitio funcione perfectamente en la mayoría de los navegadores. ¡Hablemos de lo que son!
Paso 1: Establece un ‘Doctype’ para tus archivos HTML
Cuando un navegador carga tu sitio web, tiene que averiguar qué versión de HTML estás usando. Esto es importante, porque las diferentes versiones de HTML contienen reglas diferentes.
Un ‘doctype’ es una instrucción que indica a los navegadores: «¡Oye, esta es la versión de HTML que vamos a usar!»De esa manera, los navegadores no tendrán que hacer conjeturas, lo que puede disminuir el número de errores que encontrarán sus usuarios.
Afortunadamente, este paso es notablemente simple. Todo lo que tiene que hacer es agregar el siguiente fragmento de código a sus documentos HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Como notarás, este fragmento es para la versión 4.01 de HTML. Si desea usar HTML5 en su lugar, puede usar este código:
<!DOCTYPE html>
El problema es que algunos navegadores todavía no funcionan bien con HTML5. A pesar de sus muchas mejoras, usarlo puede afectar la compatibilidad entre navegadores, por lo que deberá sopesar ese hecho junto con sus ventajas.
Paso 2: Use las reglas de restablecimiento de CSS
Generalmente, CSS es el principal culpable detrás de los errores de compatibilidad del navegador. Esto se debe a que cada navegador tiene su propio conjunto de reglas CSS. Para decirlo de otra manera, el CSS de tu sitio puede mostrarse de manera diferente dependiendo del navegador que usen tus visitantes.
Una forma de resolver este problema es usar un ‘reset CSS’. Estos son conjuntos de reglas que puede agregar a su sitio web, que establecen una línea de base para la forma en que funciona CSS en todos los navegadores.
Hay varias opciones cuando se trata de restablecer CSS, pero una de nuestras favoritas se llama Normalizar.css, debido a lo amplio que es:
puede descargar el normalizar.archivo css de su biblioteca de GitHub y úselo como punto de partida para el CSS de su sitio web. Esto le ayudará a maximizar la compatibilidad entre navegadores en su sitio.
Paso 3: Utilice Bibliotecas y marcos compatibles con navegadores
Las bibliotecas JavaScript y marcos amplios como Foundation y Bootstrap son increíblemente populares en estos días. Si vas a usar estos elementos para construir tu sitio web, puedes ahorrarte muchos dolores de cabeza al usar opciones amigables con otros navegadores.
Algunas bibliotecas y frameworks se desarrollaron desde cero para trabajar con tantos navegadores como fuera posible. En términos generales, los frameworks más populares, incluidos los dos que acabamos de mencionar, están diseñados para ser compatibles con la mayor cantidad de navegadores posible.
Sin embargo, solo para estar seguro, asegúrese de verificar la documentación de cualquier biblioteca o marco que pretenda usar. En la mayoría de los casos, encontrará información sobre la compatibilidad entre navegadores con bastante facilidad. Por ejemplo, aquí está la página de compatibilidad de Foundation de su documentación:
Un poco de investigación te ayudará a proporcionar una experiencia increíble para todos tus visitantes, no solo para aquellos que usan un navegador en particular.
Pruebas entre navegadores
Incluso si ha hecho un esfuerzo para crear un sitio web compatible con navegadores cruzados, sigue siendo una buena idea verificar y ver si todo funciona como debería. Ese proceso es relativamente simple: todo lo que tiene que hacer es cargar su sitio web utilizando varios navegadores y verificar si hay errores.
El problema es que hay muchos navegadores por ahí. Para cubrir sus bases, le recomendamos que se centre en las cinco opciones principales según la cuota de mercado, que son:
- Google Chrome
- Safari
- Firefox
- UC Browser
- Opera
Usted puede notar que Microsoft Borde de no hacer la lista. Su cuota de mercado es bastante pequeña en estos días, pero sigue siendo una buena práctica asegurarse de que su sitio también funcione con él.
Por supuesto, instalar cinco o seis navegadores diferentes en su computadora puede ser una molestia. Es por eso que hay muchos servicios que le permiten realizar pruebas en línea entre navegadores. Esto simplifica enormemente el proceso, y las tarifas involucradas generalmente son menores.
No sacrifiques Tu Experiencia Digital
No todos los visitantes de tu sitio web usarán el mismo navegador. Esto significa que si quieres asegurarte de que todos los usuarios disfruten de tu sitio web, tendrás que hacer algunas pruebas entre navegadores.
Tenga en cuenta, sin embargo, que incluso si su sitio funciona perfectamente en todos los navegadores, aún necesita usar un host web de alta calidad si desea proporcionar la mejor experiencia digital posible. Con WP Engine, obtienes un rendimiento increíble y acceso a soporte de nivel experto, ¡así que echa un vistazo a nuestros planes!