Blog de Marta González

Artículos sobre desarrollo frontend, UX, accesibilidad, testing, WordPress y diseño web.

1. Qué son los overlays de accesibilidad y por qué son un problema

   Qué son los overlays de accesibilidad, por qué pueden ser un problema para la a11y y cómo mejorar una web desde el código, el diseño y la experiencia real.

2. Cómo crear animaciones suaves con transition

   Cómo crear animaciones suaves con transition en CSS y aplica efectos hover fluidos, accesibles y optimizados en botones, tarjetas y menús.

3. Qué partes de CSS funcionan realmente en email marketing

   Descubre qué CSS funciona en email marketing, qué propiedades son compatibles y cómo evitar problemas en Outlook, Gmail y clientes móviles.

4. Skeleton loaders con CSS: animaciones para mejorar la percepción de carga

   Aprende a crear skeleton loaders con CSS, aplicar el efecto shimmer y mejorar la percepción de carga, la accesibilidad y el rendimiento web.

5. Cómo crear loaders animados solo con CSS

   Aprende cómo crear loaders animados solo con CSS con ejemplos de spinner, puntos, barras y buenas prácticas de accesibilidad y rendimiento.

6. Cómo funciona @keyframes en CSS explicado fácil

   Cómo funciona @keyframes en CSS paso a paso, buenas prácticas y consejos para crear animaciones CSS útiles.

7. Cómo hacer emails responsive sin volverte loca con tablas HTML

   Aprende cómo crear emails responsive con tablas HTML, CSS compatible y buenas prácticas para maquetar newsletters sin romperte la cabeza.

8. Diferencia entre transition y animation en CSS

   Aprende la diferencia entre transition y animation en CSS, cuándo usar cada una y cómo elegir la opción correcta con ejemplos claros.

9. MJML vs HTML tradicional para emails: ventajas y limitaciones

   Descubre las ventajas y limitaciones de MJML vs HTML tradicional para crear emails responsive más mantenibles, compatibles y fáciles de escalar.

10. Animaciones CSS: guía básica para empezar desde cero

    Guía básica de animaciones CSS para empezar desde cero: propiedades recomendadas, accesibilidad, rendimiento y buenas prácticas.

11. Cómo crear tu primera newsletter responsive con MJML

    Guía para crear tu primera newsletter responsive con MJML: estructura básica, bloques, ejemplo práctico, buenas prácticas y checklist antes del envío.

12. Qué es MJML y por qué facilita la maquetación de emails responsive

    Descubre qué es MJML, cómo funciona y por qué facilita la maquetación de emails responsive frente al HTML tradicional para email.

13. Dibujar con CSS responsive: cómo adaptar ilustraciones a distintos tamaños de pantalla

    Dibujar con CSS responsive y adapta tus ilustraciones a móvil, tablet y escritorio sin perder proporción, claridad ni equilibrio visual.

14. Clip-path en CSS: cómo recortar formas y crear dibujos más originales

    Aprende a usar clip-path en CSS para recortar formas, crear composiciones más originales y mejorar tus dibujos con CSS paso a paso.

15. Pseudo-elementos en CSS: la clave para crear ilustraciones más complejas

    Pseudo-elementos en CSS para crear ilustraciones más complejas, reducir HTML innecesario y mejorar tus composiciones al dibujar con CSS.

16. Dibujar iconos sencillos con CSS sin usar SVG ni imágenes

    Dibujar iconos sencillos con CSS sin usar SVG ni imágenes. Descubre técnicas, ejemplos prácticos y claves UX para crear iconos claros, ligeros y reutilizables.

17. Cómo dibujar formas básicas con CSS: círculos, triángulos, óvalos y estrellas

    Aprende cómo dibujar con CSS círculos, triángulos, óvalos y estrellas con ejemplos prácticos, interacción y consejos de diseño para reducir la carga cognitiva.

18. Pretext: Cómo medir y maquetar texto de alto rendimiento sin tocar el DOM

    La mayoría de nosotros aceptamos que el navegador se encargue de todo: le das un , un poco de CSS, y él decide dónde cortar las líneas. Pero,

19. Por qué diseñar primero lo esencial mejora la experiencia de usuario

    Descubre por qué diseñar primero lo esencial mejora la experiencia de usuario, reduce la carga cognitiva y encaja mejor en una estrategia de mejora progresiva.

20. Cuándo una librería sigue teniendo sentido en una estrategia Baseline-first

    Combobox accesible en Baseline-first: cuándo basta un select y cuándo una librería mejora claridad, accesibilidad y mantenimiento.

21. Desarrollar Baseline-first: qué es y por qué cada vez más equipos lo aplican

    Descubre qué significa desarrollar Baseline-first, cómo ayuda a reducir complejidad en frontend y cuándo un select nativo gana a un combobox accesible.

22. No todo lo que aumenta la retención mejora el producto

    Aprende cuándo la retención de usuarios no mejora un producto digital y cómo analizar métricas, engagement y experiencia con criterio UX.

23. Engagement ético: cómo diseñar productos digitales sin explotar la atención del usuario

    Hablar de engagement en producto digital se ha vuelto casi inevitable. Métricas como el tiempo en pantalla, la frecuencia de uso, la retención o la

24. Qué son los patrones de diseño adictivos y por qué deberíamos hablar más de ellos

    Hablar de patrones de diseño adictivos ya no es una exageración ni una moda crítica contra la tecnología. Es, más bien, una conversación necesaria dentro

25. Dropdown, menú, select y combobox: cuál usar y cuándo (sin romper a11y)

    Aprende cuándo usar un dropdown, un select o un combobox en interfaces web, qué diferencias tienen y cómo evitar errores de accesibilidad.

26. Focus visible y teclado: el 90% de los bugs de accesibilidad están aquí

    Aprende cómo usar focus visible y teclado para mejorar la accesibilidad web, ordenar la navegación con Tab y evitar errores comunes en interfaces.

27. Formularios accesibles: labels, errores y validación sin frustrar a nadie

    Aprende a crear formularios accesibles en HTML con labels claros, errores útiles y validación que mejora la experiencia de usuario.

28. Toasts/notificaciones accesibles: aria-live sin volver loco al usuario

    Los toasts (o “snackbars”, avisos flotantes, notificaciones breves) son ese tipo de UI que parece inocente… hasta que te das cuenta de que puede

29. Iconos sin texto en accesibilidad web: cuándo usar aria-hidden y cuándo necesitas un nombre accesible

    Aprende cuándo usar aria-hidden en iconos decorativos y cuándo un icono sin texto necesita nombre accesible para mejorar la accesibilidad web.

30. Componentes UI accesibles

    Diseñar y desarrollar componentes UI accesibles no va de “cumplir WCAG para pasar una auditoría”. Va de algo mucho más práctico: hacer que tu interfaz sea