# Marta González Sitio personal y blog profesional de Marta González, desarrolladora frontend especializada en desarrollo web, UX, accesibilidad, testing, WordPress, React, Astro, CSS y diseño de interfaces. ## Sitio principal - Home: https://www.martagonzalez.dev/ - Blog: https://www.martagonzalez.dev/blog/ - Sobre mí: https://www.martagonzalez.dev/sobre-mi/ - Proceso de trabajo: https://www.martagonzalez.dev/proceso-de-trabajo/ - Contacto: https://www.martagonzalez.dev/contactar/ ## Temas principales - Desarrollo frontend - JavaScript y TypeScript - React - Astro - WordPress headless - Accesibilidad web - UX/UI - Testing frontend - SEO técnico ## Índices - Sitemap: https://www.martagonzalez.dev/sitemap.xml - RSS: https://www.martagonzalez.dev/rss.xml - Atom: https://www.martagonzalez.dev/atom.xml ## Artículos recientes - Cómo crear un efecto typing con CSS: https://www.martagonzalez.dev/blog/como-crear-un-efecto-typing-con-css/ - Cómo organizar componentes reutilizables en MJML: https://www.martagonzalez.dev/blog/como-organizar-componentes-reutilizables-en-mjml/ - Testing responsive: cómo revisar una app en distintos tamaños de pantalla: https://www.martagonzalez.dev/blog/testing-responsive-revisar-app-distintos-tamanos-pantalla/ - Animaciones hover para botones modernos con CSS: https://www.martagonzalez.dev/blog/animaciones-hover-botones-modernos-css/ - Cómo integrar MJML en un workflow frontend moderno: https://www.martagonzalez.dev/blog/como-integrar-mjml-workflow-frontend-moderno/ - Testing de accesibilidad: cómo comprobar que tu app es usable para más personas: https://www.martagonzalez.dev/blog/testing-accesibilidad-comprobar-app-usable/ - Cómo crear microinteracciones con CSS: https://www.martagonzalez.dev/blog/como-crear-microinteracciones-con-css/ - Diferencias entre diseñar una web y diseñar un email: https://www.martagonzalez.dev/blog/diferencias-disenar-web-email/ - Cómo estructurar newsletters pensando en carga cognitiva: https://www.martagonzalez.dev/blog/como-estructurar-newsletters-pensando-en-carga-cognitiva/ - UX en email marketing: claridad antes que decoración: https://www.martagonzalez.dev/blog/ux-email-marketing-claridad-antes-decoracion/ - Por qué animar transform y opacity antes que width o height: https://www.martagonzalez.dev/blog/por-que-animar-transform-y-opacity-antes-que-width-o-height/ - Cómo animar un menú móvil con CSS: https://www.martagonzalez.dev/blog/como-animar-un-menu-movil-con-css/ - Emails accesibles: contraste, jerarquía y lectores de pantalla: https://www.martagonzalez.dev/blog/emails-accesibles-contraste-jerarquia-y-lectores-de-pantalla/ - Animaciones CSS y rendimiento: qué propiedades conviene animar: https://www.martagonzalez.dev/blog/animaciones-css-y-rendimiento-que-propiedades-conviene-animar/ - Por qué Outlook sigue siendo un dolor de cabeza en email development: https://www.martagonzalez.dev/blog/outlook-email-html-responsive-email/ - Cuándo usar animaciones CSS y cuándo evitarlas: https://www.martagonzalez.dev/blog/cuando-usar-animaciones-css-y-cuando-evitarlas/ - Cómo evitar que Gmail rompa tu diseño responsive: https://www.martagonzalez.dev/blog/como-evitar-que-gmail-rompa-tu-diseno-responsive/ - Animaciones CSS accesibles: cómo respetar prefers-reduced-motion: https://www.martagonzalez.dev/blog/animaciones-css-accesibles-como-respetar-prefers-reduced-motion/ - Limitaciones reales del CSS en clientes de correo: https://www.martagonzalez.dev/blog/limitaciones-css-clientes-correo/ - Qué son los overlays de accesibilidad y por qué son un problema: https://www.martagonzalez.dev/blog/que-son-los-overlays-de-accesibilidad-y-por-que-son-un-problema/ - Cómo crear animaciones suaves con transition: https://www.martagonzalez.dev/blog/como-crear-animaciones-suaves-con-transition/ - Qué partes de CSS funcionan realmente en email marketing: https://www.martagonzalez.dev/blog/que-partes-css-funcionan-email-marketing/ - Skeleton loaders con CSS: animaciones para mejorar la percepción de carga: https://www.martagonzalez.dev/blog/skeleton-loaders-con-css-animaciones-para-mejorar-la-percepcion-de-carga/ - Cómo crear loaders animados solo con CSS: https://www.martagonzalez.dev/blog/como-crear-loaders-animados-solo-con-css/ - Cómo funciona @keyframes en CSS explicado fácil: https://www.martagonzalez.dev/blog/como-funciona-keyframes-en-css-explicado-facil/ - Cómo hacer emails responsive sin volverte loca con tablas HTML: https://www.martagonzalez.dev/blog/como-hacer-emails-responsive-sin-volverte-loca-con-tablas-html/ - Diferencia entre transition y animation en CSS: https://www.martagonzalez.dev/blog/diferencia-entre-transition-y-animation-en-css/ - MJML vs HTML tradicional para emails: ventajas y limitaciones: https://www.martagonzalez.dev/blog/mjml-vs-html-tradicional-para-emails-ventajas-y-limitaciones/ - Animaciones CSS: guía básica para empezar desde cero: https://www.martagonzalez.dev/blog/animaciones-css-guia-basica/ - Cómo crear tu primera newsletter responsive con MJML: https://www.martagonzalez.dev/blog/como-crear-tu-primera-newsletter-responsive-con-mjml/ - Qué es MJML y por qué facilita la maquetación de emails responsive: https://www.martagonzalez.dev/blog/que-es-mjml-emails-responsive/ - Dibujar con CSS responsive: cómo adaptar ilustraciones a distintos tamaños de pantalla: https://www.martagonzalez.dev/blog/dibujar-con-css-responsive/ - Clip-path en CSS: cómo recortar formas y crear dibujos más originales: https://www.martagonzalez.dev/blog/clip-path-en-css-como-recortar-formas-y-crear-dibujos-mas-originales/ - Pseudo-elementos en CSS: la clave para crear ilustraciones más complejas: https://www.martagonzalez.dev/blog/pseudo-elementos-en-css-para-crear-ilustraciones-mas-complejas/ - Dibujar iconos sencillos con CSS sin usar SVG ni imágenes: https://www.martagonzalez.dev/blog/dibujar-iconos-sencillos-con-css-sin-usar-svg-ni-imagenes/ - Cómo dibujar formas básicas con CSS: círculos, triángulos, óvalos y estrellas: https://www.martagonzalez.dev/blog/dibujar-formas-basicas-con-css/ - Pretext: Cómo medir y maquetar texto de alto rendimiento sin tocar el DOM: https://www.martagonzalez.dev/blog/pretext-la-libreria-de-cheng-lou-para-medir-y-maquetar-texto-sin-depender-del-dom/ - Por qué diseñar primero lo esencial mejora la experiencia de usuario: https://www.martagonzalez.dev/blog/disenar-primero-lo-esencial-mejora-experiencia-usuario/ - Cuándo una librería sigue teniendo sentido en una estrategia Baseline-first: https://www.martagonzalez.dev/blog/cuando-una-libreria-sigue-teniendo-sentido-en-una-estrategia-baseline-first/ - Desarrollar Baseline-first: qué es y por qué cada vez más equipos lo aplican: https://www.martagonzalez.dev/blog/desarrollar-baseline-first-que-es-y-por-que-cada-vez-mas-equipos-lo-aplican/ - No todo lo que aumenta la retención mejora el producto: https://www.martagonzalez.dev/blog/retencion-de-usuarios-producto-digital/ - Engagement ético: cómo diseñar productos digitales sin explotar la atención del usuario: https://www.martagonzalez.dev/blog/engagement-etico-como-disenar-productos-digitales-sin-explotar-la-atencion-del-usuario/ - Qué son los patrones de diseño adictivos y por qué deberíamos hablar más de ellos: https://www.martagonzalez.dev/blog/que-son-los-patrones-de-diseno-adictivos-y-por-que-deberiamos-hablar-mas-de-ellos/ - Dropdown, menú, select y combobox: cuál usar y cuándo (sin romper a11y): https://www.martagonzalez.dev/blog/dropdown-menu-select-y-combobox-cual-usar-y-cuando-sin-romper-a11y/ - Focus visible y teclado: el 90% de los bugs de accesibilidad están aquí: https://www.martagonzalez.dev/blog/focus-visible-y-teclado-el-90-de-los-bugs-de-accesibilidad-estan-aqui/ - Formularios accesibles: labels, errores y validación sin frustrar a nadie: https://www.martagonzalez.dev/blog/formularios-accesibles-labels-errores-y-validacion-sin-frustrar-a-nadie/ - Toasts/notificaciones accesibles: aria-live sin volver loco al usuario: https://www.martagonzalez.dev/blog/toasts-notificaciones-accesibles-aria-live-sin-volver-loco-al-usuario/ - Iconos sin texto en accesibilidad web: cuándo usar aria-hidden y cuándo necesitas un nombre accesible: https://www.martagonzalez.dev/blog/iconos-sin-texto-en-accesibilidad-web-cuando-usar-aria-hidden-y-cuando-necesitas-un-nombre-accesible/ - Componentes UI accesibles: https://www.martagonzalez.dev/blog/componentes-ui-accesibles/ - Links accesibles: “haz click aquí” es un crimen: https://www.martagonzalez.dev/blog/links-accesibles-haz-click-aqui-es-un-crimen/ ## Uso por agentes El contenido del blog puede resumirse, citarse y enlazarse siempre que se mantenga atribución a Marta González y la URL canónica del artículo original.