QA checklist
Todos nuestros proyectos pasan por esta lista de verificación antes de su lanzamiento
ESTILO
Títulos
Cada página web tiene un H1 y los correspondientes H2, H3, H4.
Colores
Todos los colores son globales, según el diseño.
Tipografía
Toda la tipografía se basa en clases adecuadas. Tamaños de propiedad adaptables.
Botones
Botones globales.
Padding y margin globales
Espacios consistentes entre todos los márgenes, rellenos y distancias; de acuerdo con el diseño.
Encabezado y pie de página
Tamaño adecuado de encabezado y pie de página para todos los dispositivos.
Favicon
Favicon: íconos cargados
SEO & ACCESSIBILITY
H1
Cada página debe tener solo un H1.
Estructura de encabezados
Cada página debe seguir una estructura de encabezados lógica (H2 después de H1, H3 después de H2...).
Velocidad
Prueba en GT Metrix Score para A.
Search console
Habilitar search console en el sitio
Alt text de imágenes
Alt text para describir cada imagen.
Código de idioma
Agregar los códigos de idioma de la página web.
Peso de las imágenes
Imágenes optimizadas (menos de 150 KB para las imágenes y 300 KB para los fondos) y/o WebP.
Formato de imágenes
Prefiero usar el elemento 'img' en lugar de configurar una imagen de fondo en un 'div'. Todas las imágenes deben tener ancho y alto.
Meta description & title tag
Cuenta con metadescripciones y etiquetas de título individualizadas para cada página.
Asignar etiquetas
Asignar las etiquetas correspondientes para el encabezado, el pie de página y todas las secciones del sitio web
Elementos de formulario y enlaces con etiquetas asociadas
Todos los elementos de un formulario deben tener una etiqueta asociada y todos los enlaces deben tener una etiqueta. Se puede hacer con el atributo personalizado: aria-label
DISEÑO Y USABILIDAD
Hover
Todos los enlaces y botones tienen estados de hover para indicar al usuario que hay una acción al dar click.
Enlazar páginas
Todos los enlaces están conectados a una sección, página del sitio web o a un enlace externo.
Footer
Se puede acceder a todas las páginas del proyecto desde el footer o desde la barra de navegación.
Interacciones
Todas las interacciones no deben retrasar la forma en que el usuario interactúa con el sitio. El contenido es más importante.
Hover en tablets y dispositivos móviles
Los elementos no deberían tener estados de hover en tablets y dispositivos móviles.
Alto de las imágenes
Todas las imágenes deben tener una altura máxima.
Scroll horizontal
Ninguna página del sitio debe tener desplazamiento horizontal.
Responsivo
Revisar todas las páginas en todos los dispositivos.
Diferentes navegadores
Revisar las páginas en Google Chrome, Safari y Firefox.
OTROS
Analítica
Instalar Google Analytics.
Revisión ortográfica
Con el cliente, revisar la ortografía del sitio.
Página 404
Página de error 404 implementada con la identidad de la marca
Vista previa de imagen en redes sociales
Asegurarse de que la imagen de vista previa de la URL de la página web en las redes sociales sea adecuada. Comprobar en el siguiente link
WEBFLOW PERFORMANCE
Aplica solo para proyectos en Webflow
Comprimir Imágenes del Panel Assets
Convertir imágenes a formato AVIF o WebP en el panel Assets usando la función comprimir para reducir el peso en todo el sitio.
Comprimir Imágenes de CMS
Usar la opción "Compress Assets" en colecciones CMS para optimizar todas las imágenes dentro de posts y elementos de colección.
Optimizar Videos de Fondo
Mantener videos de fondo bajo 5MB, considerar formato AV1, y usar estratégicamente en páginas con mucho tráfico móvil.
Minificar Archivos de Código
Habilitar minificación de HTML, CSS y JavaScript en configuración del sitio bajo la pestaña Publishing para reducir peso de archivos.
Limpiar Estilos No Utilizados
Usar el ícono de escoba en Style Selector para remover clases no utilizadas y reducir el peso del archivo CSS.
Limpiar Interacciones No Utilizadas
Remover interacciones no utilizadas del panel Interactions para reducir JavaScript y mejorar velocidad de carga.
Dimensiones Responsivas de Imágenes
Usar tamaños relativos (porcentajes) en lugar de píxeles fijos para permitir que Webflow sirva imágenes apropiadas por dispositivo.
Preferir Imágenes Inline
Elegir imágenes sobre imágenes de fondo cuando sea posible para habilitar lazy loading y reducir uso de bandwidth.