{"id":20372,"date":"2022-07-28T00:00:00","date_gmt":"2022-07-28T00:00:00","guid":{"rendered":"https:\/\/www.mailgun.com\/blog\/simplificar-complejo-concepto-renderizacion-emails\/"},"modified":"2026-09-16T06:16:40","modified_gmt":"2026-09-16T06:16:40","slug":"simplificar-complejo-concepto-renderizacion-emails","status":"publish","type":"blog","link":"https:\/\/www.mailgun.com\/es\/blog\/email\/simplificar-complejo-concepto-renderizacion-emails\/","title":{"rendered":"12 consejos para la renderizaci\u00f3n de emails en distintos clientes de email y dispositivos"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">You\u2019ve worked with an email designer to create a great email marketing campaign. You\u2019ve made sure <a href=\"https:\/\/www.mailgun.com\/es\/blog\/email\/segmentacion-lista-contactos\/\" target=\"_tabs\" rel=\"noopener noreferrer\">your mailing list is up to date<\/a>. Now it\u2019s time to get sending. But wait   \u2014 why are those beautifully rounded corners suddenly square?!<\/p>\n\n<p class=\"wp-block-paragraph\">Don\u2019t let these email rendering issues plague your workflow. In this article, we\u2019ll go over what email rendering is and how it works. We\u2019ll share twelve tips for email rendering and end with some suggestions on how to test emails.<\/p>\n\r\n    <nav data-content-type=\"longform\" class=\"toc-block longform-spacings px-5 py-6 px-md-6 px-lg-7 py-md-7 bg-light fs-sm rounded-lg\" aria-labelledby=\"toc-title-4135\"><p class=\"h5 m-0\" id=\"toc-title-4135\">\u00cdndice<\/p><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">01<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#what-is-email-rendering\">What is email rendering?<\/a><\/div><\/div><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">02<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#how-does-an-email-render\">How does an email render?<\/a><\/div><\/div><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">03<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#what-are-some-tips-for-email-rendering\">What are some tips for email rendering?<\/a><a class=\"scrollme link-body-color\" href=\"#anchor_1-use-html-tables-to-code-emails\">1. Use HTML tables to code emails<\/a><a class=\"scrollme link-body-color\" href=\"#anchor_2-pay-special-attention-to-your-preview-text\">2. Pay special attention to your preview text<\/a><a class=\"scrollme link-body-color\" href=\"#anchor_3-always-add-alt-text-for-images-in-emails\">3. Always add alt-text for images in emails<\/a><a class=\"scrollme link-body-color\" href=\"#anchor_4-choose-inline-css-and-tables-over-css-stylesheets\">4. Choose inline CSS and tables over CSS stylesheets<\/a><a class=\"scrollme link-body-color\" href=\"#anchor_5-write-your-emails-in-universally-accepted-fonts\">5. Write your emails in universally accepted fonts<\/a><a class=\"scrollme link-body-color\" href=\"#anchor_6-never-design-emails-with-javascript\">6. Never design emails with JavaScript<\/a><a class=\"scrollme link-body-color\" href=\"#anchor_7-design-mobile-responsive-emails\">7. Design mobile-responsive emails<\/a><a class=\"scrollme link-body-color\" href=\"#anchor_8-dont-add-custom-bullets\">8. Don\u2019t add custom bullets<\/a><a class=\"scrollme link-body-color\" href=\"#anchor_9-do-not-include-calls-to-action-ctas-in-background-images\">9. Do not include calls-to-action (CTAs) in background images<\/a><a class=\"scrollme link-body-color\" href=\"#anchor_10-add-html-text-for-ctas\">10. Add HTML text for CTAs<\/a><a class=\"scrollme link-body-color\" href=\"#anchor_11-avoid-gmail-clipping-by-designing-emails-within-102kb\">11. Avoid Gmail clipping by designing emails within 102kb<\/a><\/div><\/div><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">04<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#what-else-should-i-do-before-sending-an-email\">What else should I do before sending an email?<\/a><\/div><\/div><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">05<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#how-can-i-test-my-email-preview\">How can I test my email preview?<\/a><\/div><\/div><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">06<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#wrapping-up\">Wrapping up<\/a><\/div><\/div><\/nav>\n<h2 class=\"wp-block-heading\">What is email rendering?<\/h2>\n\n<p class=\"wp-block-paragraph\">Email rendering is how various email clients display your carefully crafted message to your email recipient. In the section below, we\u2019ll discuss how emails render differently across different email clients. As you can imagine, this creates a whole host of problems and adds complexity for email developers. Keep reading to find out some best practices for improving your email rendering.<\/p>\n\n<h2 class=\"wp-block-heading\">How does an email render?<\/h2>\n\n<p class=\"wp-block-paragraph\">A few factors determine how an email renders:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Your Email Service Provider (ESP)<\/li>\n\n\n\n<li>Your subscriber\u2019s device\u2019s screen size<\/li>\n\n\n\n<li>Your subscriber\u2019s Operating System (OS)<\/li>\n\n\n\n<li>Your subscriber\u2019s email client within their OS<\/li>\n\n\n\n<li>Whether your subscriber has manually elected to have images displayed or blocked<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">Let\u2019s look at how an email renders by going through the parts of an email\u2019s journey from you to your customer:<\/p>\n\n<ol class=\"wp-block-list\">\n<li>When you send out your email, you may rely on an ESP like Mailgun. ESPs can alter your code even before your email is sent. Usually, they <a href=\"https:\/\/help.mailgun.com\/hc\/en-us\/articles\/360013191513-Open-Tracking-Troubleshooting\" target=\"_tabs\" rel=\"noopener noreferrer\">add tracking pixels<\/a> and <a href=\"https:\/\/help.mailgun.com\/hc\/en-us\/articles\/360011566033-How-to-Enable-HTTPS-Tracking-Links\" target=\"_tabs\" rel=\"noopener noreferrer\">redirect links for tracking purposes.<\/a> They may also strip out certain parts of the code.<\/li>\n\n\n\n<li>Next, your email reaches your subscriber. Your subscriber may use several devices, like desktop monitors, laptops, mobile phones, or tablets, to read your email. Each device has a different screen size, which influences how your email renders for your subscriber.<\/li>\n\n\n\n<li>In addition, your subscriber\u2019s device uses a particular OS.For instance, iOS and Android render emails slightly differently. The OS of your subscriber\u2019s device can either limit or enhance the capabilities of the email client that sits on top of it.<\/li>\n\n\n\n<li>That\u2019s right, your subscriber\u2019s email client, like Gmail, Apple Mail, Yahoo, or MicrosoftOutlook, sits \u201con top\u201d of their OS. Apart from how different email clients display emails, your subscriber\u2019s OS also influences how the email client will display your message. Additionally, app-based and web-based clients may render emails differently.<\/li>\n\n\n\n<li>Finally, your subscriber may have manually set some preferences for their email client. For instance, they might have enabled or blocked images. This also affects how your message will render.<\/li>\n<\/ol>\n\n<p class=\"wp-block-paragraph\">It\u2019s daunting to design and code emails to overcome all this variability and ensure a smooth experience across all devices and email clients. But with a bit of elbow grease, you can improve the <a href=\"https:\/\/www.mailgun.com\/es\/blog\/product\/analiticas-campana-mas-alla-envio-masivo-email\/\" target=\"_tabs\" rel=\"noopener noreferrer\">performance of your email campaigns<\/a> and make them look good.<\/p>\n\n<h2 class=\"wp-block-heading\">What are some tips for email rendering?<\/h2>\n\n<p class=\"wp-block-paragraph\">If you create well-designed HTML emails, you save the embarrassment of sending a broken email, eliminating the possibility of your emails landing in the spam folder. The following twelve tips can help you simplify the intricacies of email rendering:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Use HTML tables to code emails.<\/li>\n\n\n\n<li>Pay special attention to your preview text.<\/li>\n\n\n\n<li>Always add alt-text for images in emails.<\/li>\n\n\n\n<li>Choose inline CSS and tables over CSS stylesheets.<\/li>\n\n\n\n<li>Write your emails in universally accepted fonts.<\/li>\n\n\n\n<li>Never design emails with JavaScript.<\/li>\n\n\n\n<li>Design mobile-responsive emails.<\/li>\n\n\n\n<li>Do not add custom bullets.<\/li>\n\n\n\n<li>Use instead of <i>float <\/i>and <i>clear.<\/i><\/li>\n\n\n\n<li>Do not include calls-to-action (CTAs) in background images.<\/li>\n\n\n\n<li>Add HTML text for CTAs.<\/li>\n\n\n\n<li>Avoid Gmail clipping by designing emails within 102kb.<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">Let\u2019s dig into each of these tips below.<\/p>\n\n<h3 class=\"wp-block-heading\">1. Use HTML tables to code emails<\/h3>\n\n<p class=\"wp-block-paragraph\">Most clients now support adding styles to <code>&lt;div&gt;<\/code> tags, but Outlook still doesn\u2019t. That means <code>&lt;div&gt;<\/code> tags will render differently in Outlook, so if you want your emails to look the same across all email clients, you might want to\u00a0<strong>use\u00a0<\/strong><code><strong>&lt;table&gt;<\/strong><\/code><strong>\u00a0tags instead.<\/strong>\u00a0Tables offer a consistent experience to email subscribers without causing any changes in formatting. It\u2019s an excellent practice to help get you started on the right foot.<\/p>\n\n<h3 class=\"wp-block-heading\">2. Pay special attention to your preview text<\/h3>\n\n<p class=\"wp-block-paragraph\">Have you seen the bug where your preview text is displayed as code? It might look something like this:<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"813\" height=\"266\" src=\"http:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/image1.png\" alt=\"Tu aplicaci\u00f3n env\u00eda mediante HTTP o SMTP a Mailgun, el cual hace la entrega v\u00eda API o SMTP a proveedores como Gmail y Outlook\" class=\"wp-image-4117\" srcset=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/image1.png 813w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/image1-300x98.png 300w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/image1-768x251.png 768w\" sizes=\"(max-width: 813px) 100vw, 813px\" \/><\/figure>\n\n<p class=\"wp-block-paragraph\">So, how do we stop this from happening again? No stress \u2013 simply use this code snippet:<\/p>\n    <div data-content-type=\"longform\" class=\"code-snippet longform-spacings rounded-lg overflow-hidden shadow \" data-count=\"1\">\r\n        <ul class=\"nav nav-buttons code-snippet__tabs longform-except position-relative d-flex gap-2 flex-wrap p-3\" role=\"tablist\">\r\n\r\n                            \r\n                    \r\n                        <li class=\"nav-item\" role=\"presentation\">\r\n                            <button class=\"nav-link active\" data-bs-toggle=\"tab\" data-bs-target=\"#code_0\" type=\"button\" role=\"tab\" aria-controls=\"code_0\" aria-selected=\"true\">\r\n                                PHP                            <\/button>\r\n                        <\/li>\r\n\r\n                    \r\n                            \r\n        <\/ul>\r\n        <div class=\"code-snippet__tab-content tab-content\">\r\n\r\n                            \r\n                    <div class=\"tab-pane show active\" id=\"code_0\" role=\"tabpanel\" aria-labelledby=\"code_0\">\r\n                        <div class=\"code-snippet__code-wrapper\">\r\n                            <div class=\"nav nav-buttons code-snippet__copy-wrapper\">\r\n                                <button type=\"button\" class=\"nav-link code-snippet__copy\" data-clipboard-target=\"#code_0_content\" data-clipboard-label=\"Copia al portapapeles\" data-clipboard-success-label=\"\u00a1Copiado!\" data-clipboard-error-label=\"No se ha podido copiar\" data-tooltip=\"Copia al portapapeles\" data-tooltip-placement=\"left\" role=\"tooltip\" aria-label=\"Copia al portapapeles\">\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--default\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/file-stack.svg\"><\/svg>\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--success\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/badge-check.svg\"><\/svg>\r\n                                <\/button>\r\n                            <\/div>\r\n                            <pre class=\"w-100 h-100 m-0 line-numbers language-PHP\">\r\n                                <code id=\"code_0_content\" class=\"language-PHP\">\r\n\r\n                                    &lt;div style=&quot;display:none&quot;&gt;\r\nEnter pre-header text here\u2026\r\n&lt;\/div&gt;\r\n                                <\/code>\r\n                            <\/pre>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <\/div>\r\n    <\/div>\r\n\n<p class=\"wp-block-paragraph\">Be sure to create relevant preview text that matches your subject line and lets the subscriber know what the email is about. Don\u2019t forget to stay within the character limit. Otherwise, this can lead to some <a href=\"https:\/\/www.mailgun.com\/es\/blog\/email\/que-hacer-errores-tipograficos-emails-masivos-marketing\/\">embarrassing text cut-offs<\/a>.<\/p>\n\n<h3 class=\"wp-block-heading\">3. Always add alt-text for images in emails<\/h3>\n\n<p class=\"wp-block-paragraph\">Image suppression poses a significant challenge in email rendering, and many email clients block images by default. To resolve this issue, you can include alt-text for every image. Doing so will <strong>convey the purpose of your email content even with images turned off<\/strong>. That way, your emails are more accessible to everyone, including the subscribers who might be using visual aids or voice assistants to access your emails.<\/p>\n\n<p class=\"wp-block-paragraph\">Let\u2019s look at how Crate&amp;Barrel does it. Even if the subscriber views an email like this, they will still understand what the images are about.<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"372\" height=\"709\" src=\"http:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/image2.jpeg\" alt=\"Newsletter por email de Crate &amp; Barrel que presenta una oferta del 20 % de descuento en sillas de comedor y decoraci\u00f3n navide\u00f1a\" class=\"wp-image-4141\" srcset=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/image2.jpeg 372w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/image2-157x300.jpeg 157w\" sizes=\"(max-width: 372px) 100vw, 372px\" \/><\/figure>\n\n<h3 class=\"wp-block-heading\">4. Choose inline CSS and tables over CSS stylesheets<\/h3>\n\n<p class=\"wp-block-paragraph\">Emails render differently on websites like <a href=\"http:\/\/outlook.live.com\/\">outlook.live.com<\/a>, and many email clients do not support stylesheets. We suggest that you use inline styles to ensure flawless rendering.<\/p>\n\n<p class=\"wp-block-paragraph\">In addition, you should specify widths and heights in pixels rather than a percentage since percentage values are not considered a valid property by several email clients. The safest bet is to use pixel sizes, especially when using larger images in your <a href=\"https:\/\/resources.emailmonks.com\/infographics\/email-design-trends-2019.html\">email designs<\/a>.<\/p>\n\n<h3 class=\"wp-block-heading\">5. Write your emails in universally accepted fonts<\/h3>\n\n<p class=\"wp-block-paragraph\">Email clients recognize plain text and <a href=\"https:\/\/www.mailgun.com\/es\/blog\/email\/fuentes-tipografia-seguras-email-mejorar-accesibilidad-emails\/\">web-safe fonts<\/a>\u00a0like Arial, Tahoma, and Courier. Use these fonts to make sure that your emails are readable on every email client. Don\u2019t use periods or extra spaces between letters since these can make your email hard to read.<\/p>\n\n<h3 class=\"wp-block-heading\">6. Never design emails with JavaScript<\/h3>\n\n<p class=\"wp-block-paragraph\">JavaScript has a tendency to trigger spam filters. In fact, it isn\u2019t supported in email at all. Don\u2019t compromise your deliverability by designing emails with JavaScript.<\/p>\n\n<h3 class=\"wp-block-heading\">7. Design mobile-responsive emails<\/h3>\n\n<p class=\"wp-block-paragraph\">Many email recipients check emails on\u00a0<a href=\"https:\/\/www.statista.com\/statistics\/274774\/forecast-of-mobile-phone-users-worldwide\/\">mobile devices<\/a>. Make your emails responsive to keep them accessible to your customers. For instance,\u00a0<strong>design your responsive emails with a single column layout<\/strong>\u00a0to avoid rendering issues. Check out the example below:<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"772\" height=\"525\" src=\"http:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/image3.jpeg\" alt=\"El sitio web de Rue La La mostrado en un monitor de escritorio, tablet y smartphone\" class=\"wp-image-4142\" srcset=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/image3.jpeg 772w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/image3-300x204.jpeg 300w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/image3-768x522.jpeg 768w\" sizes=\"(max-width: 772px) 100vw, 772px\" \/><\/figure>\n\n<h3 class=\"wp-block-heading\">8. Don\u2019t add custom bullets<\/h3>\n\n<p class=\"wp-block-paragraph\"><strong>Standard bullets work better than custom-designed bullets.<\/strong>\u00a0Design an image of the bulleted list with the right alt-text. This will serve the objective of sending the email even when images are blocked in the email client.<\/p>\n\n<h3 class=\"wp-block-heading\">9. Do not include calls-to-action (CTAs) in background images<\/h3>\n\n<p class=\"wp-block-paragraph\">Since images can be suppressed or rendered incorrectly,\u00a0<strong>we recommend designing bulletproof buttons and backgrounds<\/strong>\u00a0without relying on image support. If you use background images, play it safe, and don\u2019t add CTAs to your background.<\/p>\n\n<h3 class=\"wp-block-heading\">10. Add HTML text for CTAs<\/h3>\n\n<p class=\"wp-block-paragraph\"><strong>Instead of a CTA button as an image, use HTML text<\/strong>\u00a0that lets the subscriber know about the next action, even with blocked images. This is called bulletproof button design.<\/p>\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"306\" src=\"http:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/image4-1024x306.png\" alt=\"El pangrama &quot;Sphinx of black quartz, judge my vow&quot; mostrado en fuentes Arial, Verdana y Open Sans\" class=\"wp-image-4134\" srcset=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/image4-1024x306.png 1024w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/image4-300x90.png 300w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/image4-768x229.png 768w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/image4.png 1424w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<h3 class=\"wp-block-heading\">11. Avoid Gmail clipping by designing emails within 102kb<\/h3>\n\n<p class=\"wp-block-paragraph\">Gmail likes to truncate emails that exceed the size of 102kb. This means your unsubscribe link becomes harder to find, which means readers are more likely to use the next best thing if they don\u2019t want to receive your messages \u2013\u00a0<strong>the spam button<\/strong>. This can wreak havoc on your\u00a0<a href=\"https:\/\/www.mailgun.com\/es\/blog\/deliverability\/domain-ip-reputation-gmail-care-more-about\/\">sender reputation<\/a>\u00a0and negatively impact your deliverability.<\/p>\n\n<h2 class=\"wp-block-heading\">What else should I do before sending an email?<\/h2>\n\n<p class=\"wp-block-paragraph\">Before you send an email, test it first. Testing your emails across different devices and email clients allows you to catch any mistakes before your recipient sees them. If you notice any rendering issues, be sure to resolve them before deploying the email.<\/p>\n\n<h2 class=\"wp-block-heading\">How can I test my email preview?<\/h2>\n\n<p class=\"wp-block-paragraph\">Now that you\u2019re ready to get testing, the big question is how?<\/p>\n\n<p class=\"wp-block-paragraph\">Don\u2019t worry \u2013 we\u2019ve got you covered. <a href=\"https:\/\/www.mailgun.com\/es\/blog\/deliverability\/como-aprovechar-previsualizacion-bandeja-entrada\/\">You can leverage our preview tool to test email rendering.<\/a><\/p>\n\n<p class=\"wp-block-paragraph\">Email on Acid is a powerful email testing tool that renders your email templates \u2013 even in less popular email clients like Yandex.ru or Orange.fr.<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"435\" src=\"http:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/image5.gif\" alt=\"Interfaz de prueba de Acid mostrando un editor de c\u00f3digo y una previsualizaci\u00f3n de una prueba de renderizado de la altura m\u00ednima de CSS\" class=\"wp-image-4143\" \/><\/figure>\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.emailonacid.com\/email-testing\/\">Email on Acid\u2019s Campaign Precheck tool<\/a>\u00a0provides live previews to see how your email will display in most browsers, email clients, and operating systems. Email on Acid offers a free seven-day trial period.<\/p>\n\n<h2 class=\"wp-block-heading\">Wrapping up<\/h2>\n\n<p class=\"wp-block-paragraph\">With these simple and actionable tips, you will be able to create user-friendly emails. When you create better emails, you create a better user experience, which encourages opens and clicks. Doing this will help you build a better sender reputation in the long run. Start\u00a0<a href=\"https:\/\/www.mailgun.com\/es\/soluciones\/software-de-pruebas-de-email\/\">rendering and sending<\/a>\u00a0with Mailgun today.<\/p>\n\r\n    <aside data-content-type=\"longform\"  class=\"banner-block longform-spacings rounded-lg shadow-lg px-5 py-6 px-md-6 py-md-7 p-lg-7 bg-light\" data-theme=\"dark\" aria-labelledby=\"banner-block-block_1bccd31e48a3bb9fdfa9dbc441fab0f7\">\r\n                    <p class=\"text-uppercase section-caption text-body-color\">\r\n                Email rendering            <\/p>\r\n                            <p class=\"h4 text-accent fw-bold\" id=\"banner-block-block_1bccd31e48a3bb9fdfa9dbc441fab0f7\">\r\n                Building out our email template features            <\/p>\r\n                            <div class=\"mb-0 text-body-color\">\r\n                                    <div class=\"content-body mb-0 text-body-color\">Create, customize, store, and use your email templates from start to finish \u2013 all in one platform on Mailgun via our HTML editor or drag-and-drop template builder.<\/div>\r\n                            <\/div>\r\n        \r\n        <div class=\"text-start mt-5\"><a href=\"https:\/\/www.mailgun.com\/blog\/product\/mailgun-template-builder\/\"  class=\"btn btn-secondary\" >Find out more<\/a><\/div>\r\n    <\/aside>\r\n\r\n","protected":false},"excerpt":{"rendered":"<p>Cualquier remitente se ha llevado las manos a la cabeza alguna vez en su carrera al ver que un email se renderizaba mal. Repasaremos los pasos que puedes seguir para garantizar que los emails se programen correctamente antes de enviarlos.<\/p>\n","protected":false},"author":13,"featured_media":4074,"menu_order":0,"template":"","meta":{"_acf_changed":false,"footnotes":""},"blog_category":[20],"class_list":["post-20372","blog","type-blog","status-publish","has-post-thumbnail","hentry","blog_category-email"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>12 consejos para renderizar correctamente tu email en todos los clientes y dispositivos - Transactional Email API Service For Developers | Mailgun<\/title>\n<meta name=\"description\" content=\"No olvides comprobar c\u00f3mo se renderizar\u00e1 tu email. Sigue nuestros doce consejos para solucionar los problemas de renderizaci\u00f3n m\u00e1s comunes y asegurarte de que tus campa\u00f1as de email se muestren a tu p\u00fablico exactamente como quieres.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.mailgun.com\/es\/blog\/email\/simplificar-complejo-concepto-renderizacion-emails\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"12 consejos para renderizar correctamente tu email en todos los clientes y dispositivos - Transactional Email API Service For Developers | Mailgun\" \/>\n<meta property=\"og:description\" content=\"No olvides comprobar c\u00f3mo se renderizar\u00e1 tu email. Sigue nuestros doce consejos para solucionar los problemas de renderizaci\u00f3n m\u00e1s comunes y asegurarte de que tus campa\u00f1as de email se muestren a tu p\u00fablico exactamente como quieres.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mailgun.com\/es\/blog\/email\/simplificar-complejo-concepto-renderizacion-emails\/\" \/>\n<meta property=\"og:site_name\" content=\"Transactional Email API Service For Developers | Mailgun\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-16T06:16:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Email.png\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"448\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/email\\\/simplificar-complejo-concepto-renderizacion-emails\\\/\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/email\\\/simplificar-complejo-concepto-renderizacion-emails\\\/\",\"name\":\"12 consejos para renderizar correctamente tu email en todos los clientes y dispositivos - Transactional Email API Service For Developers | Mailgun\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/email\\\/simplificar-complejo-concepto-renderizacion-emails\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/email\\\/simplificar-complejo-concepto-renderizacion-emails\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/MG-Blog-Email.png\",\"datePublished\":\"2022-07-28T00:00:00+00:00\",\"dateModified\":\"2026-09-16T06:16:40+00:00\",\"description\":\"No olvides comprobar c\u00f3mo se renderizar\u00e1 tu email. Sigue nuestros doce consejos para solucionar los problemas de renderizaci\u00f3n m\u00e1s comunes y asegurarte de que tus campa\u00f1as de email se muestren a tu p\u00fablico exactamente como quieres.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/email\\\/simplificar-complejo-concepto-renderizacion-emails\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/email\\\/simplificar-complejo-concepto-renderizacion-emails\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/email\\\/simplificar-complejo-concepto-renderizacion-emails\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/MG-Blog-Email.png\",\"contentUrl\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/MG-Blog-Email.png\",\"width\":720,\"height\":448},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/email\\\/simplificar-complejo-concepto-renderizacion-emails\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"12 consejos para la renderizaci\u00f3n de emails en distintos clientes de email y dispositivos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/#website\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/\",\"name\":\"Transactional Email API Service For Developers | Mailgun\",\"description\":\"Potentes API de email transaccional que te permiten enviar, recibir y hacer seguimiento de emails, creadas pensando en los desarrolladores. \u00a1Descubre m\u00e1s!\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/#organization\",\"name\":\"Transactional Email API Service For Developers | Mailgun\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/cropped-android-chrome-512x512-1.png\",\"contentUrl\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/cropped-android-chrome-512x512-1.png\",\"width\":512,\"height\":512,\"caption\":\"Transactional Email API Service For Developers | Mailgun\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"12 consejos para renderizar correctamente tu email en todos los clientes y dispositivos - Transactional Email API Service For Developers | Mailgun","description":"No olvides comprobar c\u00f3mo se renderizar\u00e1 tu email. Sigue nuestros doce consejos para solucionar los problemas de renderizaci\u00f3n m\u00e1s comunes y asegurarte de que tus campa\u00f1as de email se muestren a tu p\u00fablico exactamente como quieres.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.mailgun.com\/es\/blog\/email\/simplificar-complejo-concepto-renderizacion-emails\/","og_locale":"es_ES","og_type":"article","og_title":"12 consejos para renderizar correctamente tu email en todos los clientes y dispositivos - Transactional Email API Service For Developers | Mailgun","og_description":"No olvides comprobar c\u00f3mo se renderizar\u00e1 tu email. Sigue nuestros doce consejos para solucionar los problemas de renderizaci\u00f3n m\u00e1s comunes y asegurarte de que tus campa\u00f1as de email se muestren a tu p\u00fablico exactamente como quieres.","og_url":"https:\/\/www.mailgun.com\/es\/blog\/email\/simplificar-complejo-concepto-renderizacion-emails\/","og_site_name":"Transactional Email API Service For Developers | Mailgun","article_modified_time":"2026-09-16T06:16:40+00:00","og_image":[{"width":720,"height":448,"url":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Email.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.mailgun.com\/es\/blog\/email\/simplificar-complejo-concepto-renderizacion-emails\/","url":"https:\/\/www.mailgun.com\/es\/blog\/email\/simplificar-complejo-concepto-renderizacion-emails\/","name":"12 consejos para renderizar correctamente tu email en todos los clientes y dispositivos - Transactional Email API Service For Developers | Mailgun","isPartOf":{"@id":"https:\/\/www.mailgun.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.mailgun.com\/es\/blog\/email\/simplificar-complejo-concepto-renderizacion-emails\/#primaryimage"},"image":{"@id":"https:\/\/www.mailgun.com\/es\/blog\/email\/simplificar-complejo-concepto-renderizacion-emails\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Email.png","datePublished":"2022-07-28T00:00:00+00:00","dateModified":"2026-09-16T06:16:40+00:00","description":"No olvides comprobar c\u00f3mo se renderizar\u00e1 tu email. Sigue nuestros doce consejos para solucionar los problemas de renderizaci\u00f3n m\u00e1s comunes y asegurarte de que tus campa\u00f1as de email se muestren a tu p\u00fablico exactamente como quieres.","breadcrumb":{"@id":"https:\/\/www.mailgun.com\/es\/blog\/email\/simplificar-complejo-concepto-renderizacion-emails\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.mailgun.com\/es\/blog\/email\/simplificar-complejo-concepto-renderizacion-emails\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.mailgun.com\/es\/blog\/email\/simplificar-complejo-concepto-renderizacion-emails\/#primaryimage","url":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Email.png","contentUrl":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Email.png","width":720,"height":448},{"@type":"BreadcrumbList","@id":"https:\/\/www.mailgun.com\/es\/blog\/email\/simplificar-complejo-concepto-renderizacion-emails\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.mailgun.com\/es\/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https:\/\/www.mailgun.com\/es\/blog\/"},{"@type":"ListItem","position":3,"name":"12 consejos para la renderizaci\u00f3n de emails en distintos clientes de email y dispositivos"}]},{"@type":"WebSite","@id":"https:\/\/www.mailgun.com\/es\/#website","url":"https:\/\/www.mailgun.com\/es\/","name":"Transactional Email API Service For Developers | Mailgun","description":"Potentes API de email transaccional que te permiten enviar, recibir y hacer seguimiento de emails, creadas pensando en los desarrolladores. \u00a1Descubre m\u00e1s!","publisher":{"@id":"https:\/\/www.mailgun.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.mailgun.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.mailgun.com\/es\/#organization","name":"Transactional Email API Service For Developers | Mailgun","url":"https:\/\/www.mailgun.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.mailgun.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/06\/cropped-android-chrome-512x512-1.png","contentUrl":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/06\/cropped-android-chrome-512x512-1.png","width":512,"height":512,"caption":"Transactional Email API Service For Developers | Mailgun"},"image":{"@id":"https:\/\/www.mailgun.com\/es\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/blog\/20372","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/users\/13"}],"version-history":[{"count":5,"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/blog\/20372\/revisions"}],"predecessor-version":[{"id":23643,"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/blog\/20372\/revisions\/23643"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/media\/4074"}],"wp:attachment":[{"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/media?parent=20372"}],"wp:term":[{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/blog_category?post=20372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}