Blog de Marta González

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

1. Cómo crear un efecto typing con CSS

   Aprende a crear un efecto typing con CSS paso a paso, simulando texto escrito letra a letra con steps(), @keyframes, cursor parpadeante y buenas prácticas de accesibilidad.

2. Cómo organizar componentes reutilizables en MJML

   Aprende cómo organizar componentes reutilizables en MJML para crear emails más consistentes, escalables y fáciles de mantener.

3. Testing responsive: cómo revisar una app en distintos tamaños de pantalla

   Descubre cómo hacer testing responsive en una app, qué tamaños de pantalla probar, qué errores detectar y cómo automatizar las pruebas responsive.

4. Animaciones hover para botones modernos con CSS

   Guía práctica para crear animaciones hover en botones modernos con CSS, con ejemplos de código, buenas prácticas, accesibilidad y consejos de rendimiento.

5. Cómo integrar MJML en un workflow frontend moderno

   Aprende cómo integrar MJML con Vite, React y Node.js en un workflow frontend moderno para crear emails responsive más mantenibles.

6. Testing de accesibilidad: cómo comprobar que tu app es usable para más personas

   Aprende a realizar testing de accesibilidad en tu app con pruebas manuales, herramientas automáticas, teclado y lectores de pantalla.

7. Cómo crear microinteracciones con CSS

   Las microinteracciones con CSS son pequeños detalles visuales que ayudan a mejorar la experiencia de usuario. En esta guía aprenderás cómo aplicarlas en botones, formularios,…

8. Diferencias entre diseñar una web y diseñar un email

   Descubre las diferencias entre diseñar una web y diseñar un email: estructura, CSS, responsive, UX, accesibilidad y testing.

9. Cómo estructurar newsletters pensando en carga cognitiva

   Cómo estructurar newsletters pensando en carga cognitiva UX para mejorar claridad, lectura, jerarquía visual y conversión en email marketing.

10. UX en email marketing: claridad antes que decoración

    Aprende cómo mejorar el UX en email marketing priorizando claridad, legibilidad, accesibilidad y diseño de newsletters orientado a la acción.

11. Por qué animar transform y opacity antes que width o height

    Aprende por qué conviene animar transform y opacity en CSS antes que width o height y cómo crear transiciones más fluidas y eficientes.

12. Cómo animar un menú móvil con CSS

    Cómo animar un menú móvil con CSS creando un menú hamburguesa accesible, responsive y fluido con transform, opacity, transition y JavaScript.

13. Emails accesibles: contraste, jerarquía y lectores de pantalla

    Aprende cómo crear emails accesibles cuidando contraste, jerarquía visual, textos alternativos y lectores de pantalla.

14. Animaciones CSS y rendimiento: qué propiedades conviene animar

    Aprende qué propiedades conviene animar en CSS, cuáles debes evitar y cómo optimizar el rendimiento de tus animaciones web.

15. Por qué Outlook sigue siendo un dolor de cabeza en email development

    Descubre por qué Outlook sigue complicando el email development y cómo crear emails HTML responsive más compatibles y resistentes.

16. Cuándo usar animaciones CSS y cuándo evitarlas

    Cuándo usar animaciones CSS y cuándo evitarlas para mejorar la UX, cuidar la accesibilidad y mantener una interfaz fluida y eficiente.

17. Cómo evitar que Gmail rompa tu diseño responsive

    Cómo evitar que Gmail rompa tu diseño responsive con buenas prácticas de CSS, tablas, imágenes fluidas, media queries y pruebas reales en email marketing.

18. Animaciones CSS accesibles: cómo respetar prefers-reduced-motion

    Aprende cómo crear animaciones CSS accesibles respetando prefers-reduced-motion, reduciendo movimientos innecesarios y diseñando interfaces más cómodas, inclusivas y profesionales.

19. Limitaciones reales del CSS en clientes de correo

    Descubre las limitaciones reales del CSS en clientes de correo y cómo crear emails HTML compatibles, responsive y accesibles.

20. 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.

21. 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.

22. 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.

23. 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.

24. 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.

25. 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.

26. 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.

27. 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.

28. 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.

29. 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.

30. 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.