El diseño que se nota es el que falla: un texto gris claro que no se lee al sol, una imagen que tarda en cargar en el móvil, un botón que no alcanza el pulgar. Esta sección va de evitar esos fallos con criterios que se pueden comprobar, no solo con gusto.
Incluye accesibilidad, que además de ser una obligación legal en muchos mercados mejora la experiencia de todos, y el cuidado del texto de la interfaz, que es la parte del diseño que más se descuida.
Artículos6
LintGrafía: revisar la ortografía de una web tal como la ve tu cliente
Presentamos LintGrafía, una extensión de Chrome que revisa ortografía y gramática sobre la página ya renderizada, también en localhost y en preproducción. Qué hace, cómo funciona y qué pasa con el texto que analiza.
¿Por qué importa la accesibilidad de un sitio web?
Quién se queda fuera cuando una web no es accesible, qué se revisa exactamente para que lo sea, y por qué casi todo lo que hace falta coincide con lo que ya mejora la usabilidad y el posicionamiento.
Diseño responsive: por qué sigue importando y qué se mide de verdad
Adaptarse no es «que quepa en el móvil». Es un rango continuo de anchuras, densidades y proporciones, y hay cuatro medidas concretas que deciden si tu sitio funciona en el aparato de quien te visita.
Guía de imágenes para tu web: qué formato usar y de qué tamaño
Cuándo usar JPG, PNG, WebP, AVIF o SVG explicado sin tecnicismos, qué medidas necesita cada tipo de imagen -producto, portada, hero, logo- y qué revisar antes de subir un archivo a tu sitio.
¿Qué es un SVG y por qué vale la pena usarlo?
Por qué el formato de tu logotipo debería ser SVG, qué lo hace distinto de un PNG, por qué el que exporta tu diseñador pesa diez veces lo necesario y qué se le puede quitar sin romperlo.
¿Qué es la usabilidad desde la perspectiva de tu usuario? Y algunos consejos
Capítulo 5 de la guía De SEO a 100. En qué se diferencian usabilidad y experiencia de usuario, los cuatro principios de una interfaz usable, y qué revisar en el servidor, el HTML y el diseño visual de tu sitio.
Compruébalo en tu web
Utilidades gratuitas, sin registro, que hacen la comprobación de la que hablan los artículos.
- Comprobador de contraste WCAGRazón de contraste, niveles AA y AAA, transparencias incluidas, y el color más cercano que sí cumple.
- Optimizador de SVGReduce el peso de un SVG y comprueba, píxel a píxel, que sigue viéndose igual.
- Calculadora de relación de aspectoRelación exacta de cualquier medida, redimensionado sin deformar y el CSS listo para pegar.
- Cuál es mi resolución de pantallaTu resolución, el tamaño de tu ventana, la densidad de píxeles y lo que tu navegador ya sabe de ti.
- LintGrafíaExtensión de Chrome que revisa la ortografía de la página tal como la ve quien la visita.
¿Hablamos de tu proyecto?
Cuéntanoslo por escrito y te respondemos, en menos de 24 horas hábiles, con una primera lectura del alcance.
Respondemos en menos de 24 horas hábilesBogotá · UTC−5