Clicky

5 pruebas esenciales (y gratis!) a ejecutar antes de lanzar un sitio web

Analizar nuevo sitio web

Asegúrate de no saltarte las pruebas de validación de HTML y CSS

Es la peor pesadilla de cualquier propietario de un sitio web. Has estado trabajando en tu sitio por un tiempo de manera obsesiva asegurándote de que es lo que necesitan y quieren tus clientes. Ahora es el momento de lanzarlo y ver las ventas y consultas en vivo, ¿verdad? Pero entonces, algo anda mal. El diseño de tu sitio no se muestra correctamente - se ve francamente horrible en todos los diferentes dispositivos móviles y navegadores que pensabas que nadie estaría utilizando. Tu sitio es lento para cargar, y la gente se marcha. Se obtiene retroalimentación de los aspirantes a los clientes que las formas de venta no funcionan... Todo parece roto. En lugar de celebrar el nuevo sitio, uno se queda preguntándose qué salió mal.

Para evitar situaciones como esta, prueba tu sitio web antes de lanzarlo. Unos pocos controles simples te ayudarán a detectar y eliminar problemas del sitio web antes de que afecten negativamente a su reputación y la línea de fondo. La pruebas son importantes no sólo para tu tranquilidad, sino también para la construcción de una confianza entre tu y tus visitantes. Un mejor funcionamiento y un sitio web confiable te ayudará a destacar de la competencia, ofrecer más ventas e incluso mejorar tu posicionamiento en los motores de búsqueda.

Incluso si eres de pequeña escala, por ahora, trata las pruebas como una fase necesaria de cualquier proyecto de sitio web. Para empezar, aquí están cinco test esenciales de sitios web que se pueden ejecutar GRATIS antes de lanzar tu sitio web.

1. Validar HTML y CSS

"Mi sitio se ve bien y funciona bien. ¿Por qué molestarme en la validación?"

En primer lugar, la validación te ayudará a deshacerte de errores web de estilo y scripts, antes de que arruines la experiencia de tus visitantes. En segundo lugar, es una prueba rápida para determinar si el desarrollador hizo en tu sitio un buen trabajo y limpio. En tercer lugar, si tu sitio aprueba a los estándares HTML y CSS profesionales desde el principio, es mucho más fácil de mantener y expandirlo, incluso si cambias los desarrolladores en el futuro. Por último, HTML y CSS válido aumentan las posibilidades de que tu sitio web se visualice correctamente en todos los navegadores y dispositivos.

El Validador de marcado de W3C es una herramienta gratuita que comprueba la validez de los documentos Web. Puede procesar HTML, XHTML, y varios otros lenguajes de marcado.

Validador de marcado W3C

Otra herramienta gratuita para detectar los errores de HTML es HTML tidy. Incluso va a generar un archivo ordenado para ti.

HTML tidy

Para encontrar errores o problemas de cumplimiento CSS, usa el servicio gratuito de validación de CSS del W3C.

¿Cómo prevenir errores de código?

Una onza de prevención vale una libra de curación no sólo en el departamento de salud personal. Incluso con herramientas automáticas para ayudar a descubrir los errores de HTML y CSS, limpiar el código es un proceso que consume tiempo y es arduo. Así que la mejor manera de evitar errores de código es evitarlos mediante el uso de las herramientas y recursos adecuados.

Trata de encontrar un desarrollador con una buena reputación. Aunque que suene trillado, se obtiene lo que se paga, por lo que no escatimes gastos.

Si prefiere bricolaje, elige un tema que esté codificado correctamente. Si te apetece ejecuta el tema en contra de esta lista de comprobación del "tema de WordPress perfecto" por Yoast.

Una vez que tengas el tema adecuado, el ardiente deseo de hacer uno propio probablemente te conducirá a ajustes de CSS. En ese caso, sin duda recomendamos el uso de CSS Hero, especialmente si no estás al 100% seguro de la codificación. Mientras juegas con su intuitiva interfaz de apuntar y hacer clic, CSS Hero genera CSS limpio, de peso ligero que va claramente en una hoja de estilo CSS extra y anula estilo original de tu tema sin modificarlo. Y si te gusta trabajar con código, echa un vistazo a Inspector Pro, un complemento de CSS Hero. Inspector Pro te permite ver el código CSS de tus sitios de WordPress y luego inspeccionar, refinar y editar ese código con la ayuda del motor inteligente CSS Lint. Inspector Pro puede servir como una capa adicional de validación de la calidad del código de tu sitio.

CSS Hero

CSS Hero Inspector Pro

2. Pon a prueba la velocidad de carga de la página

El 57% de los compradores en línea abandonará tu sitio si no se carga dentro de 3 segundos (Radware). El 79% de los compradores web que tienen problemas con el rendimiento de un sitio web dicen que no volverán a ese sitio para comprar de nuevo (Akamai y Gómez). Todo que hay que decir es que la velocidad de un sitio webes muy, muy importante.

webpage test

Dos recursos sólidos para las pruebas de velocidad son WebPageTest y de Google Insights PageSpeed"‹"‹. Ambas herramientas te darán sugerencias detalladas para mejorar la velocidad de carga de tu página.

Google PageSpeed Insights

Además, aquí hay una lista de 20 cosas que podrían estar ralentizando tu sitio web hacia abajo, por E-Consultancy. HTML y hojas de estilo hinchadas ocupan sus puestos firmemente en la lista, así que asegúrate de no saltarte las pruebas de validación de HTML y CSS y utilizar herramientas que produzcan código de calidad.

3. Comprobar la visibilidad móvil

Cualquier problema de HTML o CSS que tenga tu sitio se mostrará especialmente agudo en los dispositivos móviles. Con el 11,8% de las personas que navegan por Internet únicamente desde dispositivos móviles y el 78% utilizando múltiples plataformas, no se puede arriesgar que una página web se vea fea en el móvil (Datos: comScore).

MobiReady es un fantástico servicio gratuito para comprobar cómo se ve tu sitio web en diferentes dispositivos móviles. MobiReady ofrece demostraciones en vivo de cómo se carga la página en varios medios. Una vez que ejecutes la prueba, podrás ver una descripción detallada de los errores y las recomendaciones sobre la forma de solucionarlos.

mobiReady

Otra manera de ver cómo tu sitio se ve en el móvil, junto con la capacidad de realizar personalizaciones específicas del dispositivo, es aprovechar CSS Hero"™s Responsive Editor. Así es, esta ingeniosa herramienta te permite editar y guardar tu sitio web en cinco diferentes puntos de vista : de escritorio, tableta (horizontal y vertical) y móvil (horizontal y vertical). Mientras te diviertes con la personalización visual de tu sitio web en todos los dispositivos, CSS Hero envuelve cuidadosamente tus ediciones de las media queries.

Una vez más, el Inspector Pro va un paso más allá y te permite codificar consultas multimedia personalizadas, mientras que editas en vivo en diferentes modos de dispositivo.

4. Pruebas Cross-browser

Esta es la dura realidad: la gente no sólo utiliza diferentes dispositivos para acceder a un sitio web, sino también diferentes sistemas operativos, diferentes navegadores e incluso diferentes versiones de navegadores. Tu trabajo es asegurarte de que tu sitio se ve bien en estas condiciones. No tiene que ser píxel perfecto, pero tiene que trabajar. De lo contrario, es posible que se pierdan ventas cuando funciona perfectamente en Chrome 48.0 pero ni siquiera se muestra en Internet Explorer 6.0.

Browsershots es un servicio gratuito en línea muy simple que te permite comprobar cómo se ve tu sitio web en los principales navegadores de escritorio. Pega la URL de la página, marca las versiones del navegador para la prueba y espera unos minutos para que se carguen los resultados.

browsershots

Sin embargo, ten en cuenta que Browsershots sólo proporcionará las imágenes de tu sitio web en diferentes navegadores; no serás capaz de probar la navegación y el formato. Browsershots es un buen punto de partida (y gratis!), así que si tienes un presupuesto ajustado o es la primera vez que sumerges tus pies en pruebas de cross-browser, sin duda te darán una oportunidad. Para una prueba más a fondo, sin embargo, tendrás que utilizar herramientas de primera como CrossBrowserTesting o BrowserStack. Estos sofisticados programas te proporcionarán una experiencia nativa en la navegación de tu sitio en diferentes navegadores.

5. Verificar los enlaces

Si tu sitio web está dominado por direcciones URL "muertas", tus visitantes pueden desviarse y perderse en la jungla digital, para no volver jamás.

W3C Link Checker

W3C Link Checker es un impresionante recurso gratuito para evitar esto. No sólo te mostrará las ubicaciones de las direcciones URL molestas sino que también te dará recomendaciones sobre qué hacer con los enlaces rotos, redirecciones y otras cuestiones relacionadas.

W3C Link Checker, resultados

Otra cosa a comprobar tus enlaces están o no están claramente definidos. Es una práctica común para la facilidad de uso colorear y subrayar el enlace de texto para mostrar que se puede hacer clic. Los usuarios no deberían tener que adivinar o flotar por toda la página para encontrar enlaces.

Las pruebas son sobre la creación de una página web de mejor calidad y hacer que tus visitantes se sientan bienvenidos, sin importar el medio que utilicen. ¿Tienes algunas herramientas interesantes de prueba para añadir a esta lista? Compártelas en los comentarios!

Jesus_Caceres