El inspector de moldes

Cómo se lee la tabla.

Cada molde arranca con 100 puntos. Cada falla descuenta 10, cada caso a revisar 3, cada detalle 1. Una nota alta no significa que esté perfecto: significa que el inspector no encontró nada grueso. El ojo humano sigue siendo el que decide si es lindo.

Molde	Página	Nota	Hallazgos
02	Ferretería y herramientas 34 KB · 131 reglas de estilo	96	1
C1	Concesionaria ruta 59 KB · 176 reglas de estilo	96	4
P3	Pinturería brocha 38 KB · 162 reglas de estilo	96	4
P1	Pinturería lienzo 42 KB · 168 reglas de estilo	95	5
P2	Pinturería paleta 37 KB · 161 reglas de estilo	95	5
C3	Concesionaria central 38 KB · 164 reglas de estilo	91	1 5
01	Comercio multirrubro 44 KB · 168 reglas de estilo	89	2 5
C2	Concesionaria vidriera 44 KB · 166 reglas de estilo	89	2 5
HC	Home center CASA FIRME 59 KB · 250 reglas de estilo	86	1 4
07	Ferretería calculadora 51 KB · 218 reglas de estilo	86	3 5

El detalle, molde por molde.

Cada línea dice tres cosas: qué encontró, dónde está escrito y por qué importa. Con eso se corrige sin adivinar.

Ferretería y herramientas

Mejorable Caja colgando fuera de la foto (-16px -14px) .hero .foto .sello
Cuando se sale del marco corta la imagen y desarma la composición. Se nota mucho en el celular.

Abrir el molde

Concesionaria ruta

Detalle Letra de 15.0 px .badge
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Letra de 15.0 px .campo label
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Letra de 15.0 px .estrellas
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Letra de 15.0 px .form-tasa label
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.

Abrir el molde

Pinturería brocha

Detalle Letra de 15.0 px .linea-ped .info span
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Letra de 15.0 px .mini
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Letra de 15.0 px .oferta .cuotas
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Letra de 15.0 px .oferta .stock
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.

Abrir el molde

Pinturería lienzo

Detalle Letra de 15.0 px .chip b
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Letra de 15.0 px .control label
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Letra de 15.0 px .eti
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Letra de 15.0 px .lista i
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Demasiadas medidas de esquina 11 medidas distintas: [3, 5, 6, 8, 9, 10, 12, 14, 16, 20]
Una página se ve profesional cuando repite 2 o 3 radios. Con diez, cada caja parece de otro sitio.

Abrir el molde

Pinturería paleta

Detalle Letra de 15.0 px .ambiente .foto b
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Letra de 15.0 px .combo del
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Letra de 15.0 px .mini
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Letra de 15.0 px .pared .etiqueta
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Demasiadas medidas de esquina 10 medidas distintas: [5, 6, 8, 10, 12, 14, 16, 18, 20, 999]
Una página se ve profesional cuando repite 2 o 3 radios. Con diez, cada caja parece de otro sitio.

Abrir el molde

Concesionaria central

Mejorable Enlaces sin destino: ver informe 1 enlaces
Se pueden tocar y no pasa nada. En una maqueta se acepta en un par de lados; si son muchos, la web parece rota.
Detalle Letra de 15.0 px .aro b small
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Letra de 15.0 px .chico
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Letra de 15.0 px .form-turno label
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Letra de 15.0 px .paso i
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Demasiadas medidas de esquina 9 medidas distintas: [2, 4, 6, 8, 10, 12, 14, 99, 999]
Una página se ve profesional cuando repite 2 o 3 radios. Con diez, cada caja parece de otro sitio.

Abrir el molde

Comercio multirrubro

A revisar Texto #fff sobre rgb(221, 221, 221) = 1.36:1 .rubro div
No llega al mínimo de 4,5:1. Ese texto se pierde, sobre todo al sol o con la pantalla baja.
A revisar Texto #fff sobre rgb(221, 221, 221) = 1.36:1 .rubro h3
No llega al mínimo de 4,5:1. Ese texto se pierde, sobre todo al sol o con la pantalla baja.
Detalle Letra de 15.0 px .carta .etiqueta
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Letra de 15.0 px .cierre .datos-local b
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Letra de 15.0 px .kicker
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Letra de 15.0 px .marca i
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Demasiadas medidas de esquina 8 medidas distintas: [4, 6, 10, 11, 14, 18, 22, 999]
Una página se ve profesional cuando repite 2 o 3 radios. Con diez, cada caja parece de otro sitio.

Abrir el molde

Concesionaria vidriera

A revisar Texto #fff sobre rgb(247, 244, 240) = 1.1:1 .form-permuta input
No llega al mínimo de 4,5:1. Ese texto se pierde, sobre todo al sol o con la pantalla baja.
A revisar Texto #fff sobre rgb(247, 244, 240) = 1.1:1 .form-permuta select
No llega al mínimo de 4,5:1. Ese texto se pierde, sobre todo al sol o con la pantalla baja.
Detalle Letra de 15.0 px .columnas h4
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Letra de 15.0 px .cuota-final small
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Letra de 15.0 px .fila label
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Letra de 15.0 px .form-permuta label
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Demasiadas medidas de esquina 8 medidas distintas: [6, 10, 14, 16, 18, 26, 99, 999]
Una página se ve profesional cuando repite 2 o 3 radios. Con diez, cada caja parece de otro sitio.

Abrir el molde

Home center CASA FIRME

Falla Enlaces sin destino: Asesor IA Nuevo · Botón de arrepentimiento · Cambios y devoluciones · Centro de atención · Corrientes Capital Junín 1450 · 8 … 17 enlaces
Se pueden tocar y no pasa nada. En una maqueta se acepta en un par de lados; si son muchos, la web parece rota.
Detalle Letra de 15.0 px .card .cat
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Letra de 15.0 px .ci .rm
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Letra de 15.0 px .flag
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Letra de 15.0 px .logo span
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.

Abrir el molde

Ferretería calculadora

A revisar Texto #fff sobre rgb(245, 242, 236) = 1.12:1 .sello
No llega al mínimo de 4,5:1. Ese texto se pierde, sobre todo al sol o con la pantalla baja.
A revisar Texto #9FB4C3 sobre rgb(243, 220, 205) = 1.63:1 .aviso
No llega al mínimo de 4,5:1. Ese texto se pierde, sobre todo al sol o con la pantalla baja.
A revisar Texto #fff sobre rgb(239, 90, 30) = 3.41:1 .salto
No llega al mínimo de 4,5:1. Ese texto se pierde, sobre todo al sol o con la pantalla baja.
Detalle Letra de 14.0 px .calc .cabeza .eti
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Letra de 15.0 px .partida b
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Letra de 15.0 px .paso .n
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Letra de 15.0 px footer .demo
Por debajo de 16 px cuesta leer sin anteojos, sobre todo en el celular.
Detalle Estilos forzados con !important 41 usos
Es cinta adhesiva: cuando dos estilos pelean, alguien tiene que ganar a la fuerza. Ordena el CSS y sobran.

Abrir el molde

Los doce controles.

Esto es lo que mira. Cada control es una regla escrita una vez y aplicada a todos los moldes, para siempre.

1. Borde deshecho

Detecta el truco de pintar el borde transparente y encima dos fondos. En las esquinas queda medio píxel suelto: es el defecto que más se ve.

2. Letra chica

Marca todo texto por debajo de 16 píxeles. Sin anteojos no se lee.

3. Contraste

Calcula la relación entre el color de la letra y el fondo real (resuelve las variables de color y los fondos translúcidos). Por debajo de 4,5 a 1, falla.

4. Botón muerto

Enlaces que no llevan a ningún lado y botones que ningún código escucha.

5. Fotos sin descripción

Imágenes sin texto alternativo: invisibles para el lector de pantalla y para Google.

6. Fotos sin medida

Sin ancho y alto la página salta cuando la foto carga. Sin «lazy» se bajan todas de entrada.

7. WhatsApp

Que exista el enlace y que el botón tenga el símbolo real, no un dibujito parecido.

8. Caja sobre la foto

Recuadros que se salen del marco de la imagen y la cortan.

9. Exceso de efectos

Cuenta animaciones, transiciones, filtros y sombras. Si todo se mueve, nada se destaca.

10. Esquinas coherentes

Más de siete medidas distintas de radio y cada caja parece de otro sitio.

11. Texto apretado

Interlineado por debajo de 1,2 en párrafos: el texto se vuelve un bloque gris.

12. Estilos forzados

Cuenta los «!important». Son cinta adhesiva: donde hay muchos, dos estilos están peleando.

La lista para trabajar.

Todo lo que hay que arreglar, ordenado del molde más flojo al más limpio. Se copia y se pega donde haga falta.