{"id":38945,"date":"2024-03-29T17:44:05","date_gmt":"2024-03-29T12:14:05","guid":{"rendered":"https:\/\/email.uplers.com\/blog\/?p=38945"},"modified":"2024-04-04T18:39:30","modified_gmt":"2024-04-04T13:09:30","slug":"optimize-email-template-coding-with-marka","status":"publish","type":"post","link":"https:\/\/email.uplers.com\/blog\/optimize-email-template-coding-with-marka\/","title":{"rendered":"How Email Uplers is optimizing the email template coding process with \u2018Marka\u2019"},"content":{"rendered":"\n

Think beautiful emails, and the one sigh that every developer collectively heaves is the thought of the immense effort that goes into building clean pieces of flawless HTML code. <\/p>\n\n\n\n

Because it isn\u2019t just an email; it\u2019s a carefully crafted, pre-conceived concoction of art, effective copy, and seamless code. The balance has to be perfect. A slight tilt in the scales can result in the flavor not feeling quite right!<\/p>\n\n\n\n

And you don\u2019t want to be there! Your brand\u2019s emails should mirror your brand, being clear, concise, effective, and well-coded so that they render flawlessly in almost every email service provider (ESP) out there!<\/p>\n\n\n\n

We at Email Uplers are committed to delivering beautifully crafted, flawlessly rendering email templates that win hearts and minds, not just leads! \ud83d\ude09 <\/p>\n\n\n\n

In the quest to streamline the conversion of designs into HTML, we came across Marka, a valuable tool for coding email templates. <\/p>\n\n\n\n

But the question remains: Does it complement the efforts or eliminate the need for the master brewers\u2014the developers in this case?! Let’s find out! <\/p>\n\n\n\n

\"\"<\/a><\/figure><\/div>\n\n\n\n

An Introduction to Marka<\/h2>\n\n\n\n

Marka, an AI-powered Figma plugin, significantly reduces coding time, making it an essential resource for simplifying the HTML conversion process. While it may struggle with more complex designs, it excels in efficiently coding simpler designs like single-image or single-column layouts. This enables faster and more effective development, making it a valuable tool for email template coding.<\/a>.<\/p>\n\n\n\n

If you are wondering what a complex email design might look like, it can have multiple design blocks instead of a single image, text boxes, overlapping elements, and multiple tables. Coding such a design can be a tough task for Marka right now, though the tool’s makers are consistently working on enhancing its functionalities and prowess!<\/p>\n\n\n\n

Currently, it can convert Figma files into responsive HTML code that is rendered across devices.  The templates it generates work for all common email clients, including Gmail, Apple Mail, and Outlook.<\/p>\n\n\n\n

You can create an email using ready-made templates or create your own design from scratch.<\/p>\n\n\n

\"Custom<\/a><\/div><\/div>\n\n\n\n

What did Marka do for us?<\/h3>\n\n\n\n

Since we were looking for an accouterment that could reduce email coding and delivery times, we tried the tool and trained it, giving the right prompts. Though the code was generated in 10-30 minutes, it did require at least two and a half hours of iteration, testing, and editing by our coders to develop high-quality, seamlessly rendering clean code that our clients expect of us!<\/p>\n\n\n\n

So technically, 8 hours <\/strong>of manually coding email templates came down to 3 hours <\/strong>of concerted effort by deploying this tool.<\/p>\n\n\n\n

We began experimenting with this tool in October 2023, and this is how our journey has been so far!<\/p>\n\n\n\n

\"Email<\/figure>\n\n\n\n

Another cool point we love is that this is the only tool that follows table structure in coding emails and creates editable, responsive designs, which aligns with our best practices at Email Uplers.<\/p>\n\n\n\n

\"\"<\/a><\/figure><\/div>\n\n\n\n

Source<\/a><\/p>\n\n\n\n

Yep, that\u2019s exactly what our developers said when they delivered email templates coded to perfection way before the delivery date using the powerful combination of their skill set and expertise and the tool\u2019s AI powers! <\/p>\n\n\n\n

That\u2019s where the magic lies, people! In finding that balance! <\/p>\n\n\n\n

Here\u2019s a sneak peek into how we use the tool:<\/p>\n\n\n\n

1. Design a frame for desktop and optionally for mobile<\/p>\n\n\n\n

2. Run the Marka plugin and preview a template<\/p>\n\n\n\n

3. Export an HTML file<\/p>\n\n\n\n

Here are some examples of email templates that we designed in-house and coded using a conflation of the tool and our developers\u2019 expertise to make the code perfect.<\/p>\n\n\n\r\n

\r\n
\r\n \t\t
\r\n\t \t\t\t
\r\n\t\t
\r\n\t\t \t\t\t <\/div>\r\n\t\t \t\t\t
\r\n\t\t\t \t\t\t\t\t
\r\n\t\t\t\t \t
<\/div>\r\n\t\t\t\t <\/div>\r\n\t\t\t \t\t\t
\r\n\t\t\t
\r\n\t\t\t
<\/span><\/span><\/span><\/div>\r\n\t\t\t \t\t\t
\r\n\t\t\t \"Inhouse\r\n\t\t\t <\/div>\r\n\t\t\t \t\t\t <\/div>\r\n\t\t\t <\/div>\r\n\t\t\t
\r\n\t\t\t \t\t\t\t <\/div>\r\n\t\t\t <\/div>\r\n\t\t\t \t\t <\/div>\r\n\t\t \t\t
\r\n\t\t
\r\n\t\t \t\t\t <\/div>\r\n\t\t \t\t\t
\r\n\t\t\t \t\t\t\t\t
\r\n\t\t\t\t \t
<\/div>\r\n\t\t\t\t <\/div>\r\n\t\t\t \t\t\t
\r\n\t\t\t
\r\n\t\t\t
<\/span><\/span><\/span><\/div>\r\n\t\t\t \t\t\t
\r\n\t\t\t \"Inhouse\r\n\t\t\t <\/div>\r\n\t\t\t \t\t\t <\/div>\r\n\t\t\t <\/div>\r\n\t\t\t
\r\n\t\t\t \t\t\t\t <\/div>\r\n\t\t\t <\/div>\r\n\t\t\t \t\t <\/div>\r\n\t\t \t <\/div>\r\n\t <\/div>\r\n<\/section>\r\n\r\n\n\n\n

<\/p>\n\n\n\n

What are the challenges we faced with the tool?<\/h3>\n\n\n\n

Currently, if the original design is in a format other than Figma, such as PSD, PDF, Sketch, XD, etc., it must be converted to Figma format for the tool to generate the HTML code<\/a> successfully. Additionally, designs in Figma must be created using auto layout in vertical mode to ensure compatibility with Marka’s conversion process.<\/p>\n\n\n\n

The mobile version of the design also has to be enhanced manually by the developers as per the best practices in place. <\/p>\n\n\n\n

Also, the code structure relies heavily on tables, which can cause responsiveness and font rendering issues, as some fonts are rendered as images. To address this, you can take the following measures, like team Email Uplers did:<\/p>\n\n\n\n

  1. Utilize a default responsive code structure.<\/li>
  2. Avoid specifying widths in <td> tags unless necessary; opt for setting widths on the table when required.<\/li>
  3. Replace <div> tags with valign and align properties in <td> tags.<\/li>
  4. Integrate responsive classes for improved adaptability.<\/li>
  5. Ensure all images have appropriate alt tags and include proper links.<\/li>
  6. Address instances where text is mistakenly treated as an image by replacing it with actual text.<\/li>
  7. Adjust button code to ensure it’s structured at the <td> level, with proper height and display:block properties, and add necessary links.<\/li>
  8. Move text properties to appropriate <span> tags if needed within <td>; otherwise, remove <span> tags.<\/li>
  9. Align line heights consistently with the pixel-perfect layout, avoiding percentage-based values.<\/li>
  10. Remove any unnecessary tables to streamline the code.<\/li><\/ol>\n\n\n
    \"pixel<\/a><\/div><\/div>\n\n\n\n

    The final Game of Thrones<\/h2>\n\n\n\n

    At Email Uplers, we have our own catchphrase, \u201cthe code must meet the design requirements and not the other way around!<\/em>\u201d<\/p>\n\n\n\n

    And we swear by that much like the Northerners await the fall of the winters! <\/p>\n\n\n\n

    While the tool can always extend a helping hand, the developers reign supreme with their nonpareil skills, expertise, and years of experience helping us deliver email templates you love, we love, and your subscribers love over the years to come! <\/p>\n","protected":false},"excerpt":{"rendered":"

    Check out our explorations with the Figma plugin Marka in coding beautiful mails sprinkled with the magic of our developers!<\/p>\n","protected":false},"author":87,"featured_media":38977,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[382],"tags":[1288,1287],"class_list":["post-38945","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-email-coding","tag-email-templates-with-marka","tag-marka"],"yoast_head":"\nHow Email Uplers Uses Marka to Streamline Email Coding Process<\/title>\n<meta name=\"description\" content=\"Explore how Email Uplers transforms email templates with Marka. Dive into the blog to learn flawless coding techniques for brand-perfect emails.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/email.uplers.com\/blog\/optimize-email-template-coding-with-marka\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How Email Uplers Uses Marka to Streamline Email Coding Process\" \/>\n<meta property=\"og:description\" content=\"Explore how Email Uplers transforms email templates with Marka. Dive into the blog to learn flawless coding techniques for brand-perfect emails.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/email.uplers.com\/blog\/optimize-email-template-coding-with-marka\/\" \/>\n<meta property=\"og:site_name\" content=\"Email Uplers\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/email.uplers\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-29T12:14:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-04T13:09:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/03\/Blog-feature-image-Marca-tool-Divya-1-540x282.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"540\" \/>\n\t<meta property=\"og:image:height\" content=\"282\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Divya S\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@email_uplers\" \/>\n<meta name=\"twitter:site\" content=\"@email_uplers\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Divya S\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/email.uplers.com\/blog\/optimize-email-template-coding-with-marka\/\",\"url\":\"https:\/\/email.uplers.com\/blog\/optimize-email-template-coding-with-marka\/\",\"name\":\"How Email Uplers Uses Marka to Streamline Email Coding Process\",\"isPartOf\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/optimize-email-template-coding-with-marka\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/optimize-email-template-coding-with-marka\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/03\/Blog-feature-image-Marca-tool-Divya-1.jpg\",\"author\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/3ac86c6e2119c10bf076f887390b16e1\"},\"description\":\"Explore how Email Uplers transforms email templates with Marka. Dive into the blog to learn flawless coding techniques for brand-perfect emails.\",\"breadcrumb\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/optimize-email-template-coding-with-marka\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/email.uplers.com\/blog\/optimize-email-template-coding-with-marka\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/email.uplers.com\/blog\/optimize-email-template-coding-with-marka\/#primaryimage\",\"url\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/03\/Blog-feature-image-Marca-tool-Divya-1.jpg\",\"contentUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/03\/Blog-feature-image-Marca-tool-Divya-1.jpg\",\"width\":1170,\"height\":470,\"caption\":\"email template coding process with Marka\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/email.uplers.com\/blog\/optimize-email-template-coding-with-marka\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/email.uplers.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How Email Uplers is optimizing the email template coding process with \u2018Marka\u2019\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#website\",\"url\":\"https:\/\/email.uplers.com\/blog\/\",\"name\":\"Email Uplers\",\"description\":\"Email Marketing Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/email.uplers.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/3ac86c6e2119c10bf076f887390b16e1\",\"name\":\"Divya S\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image16-1-96x96.png\",\"contentUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image16-1-96x96.png\",\"caption\":\"Divya S\"},\"description\":\"With nearly eight years in IT, digital marketing, and client service management, Divya brings technical expertise and customer focus to every project. She excels in driving projects from start to finish, with a passion for innovation and seamless execution. Beyond project management, she is deeply interested in AI and stays updated on emerging technologies through continuous research. Outside work, she finds inspiration in exploring diverse cultures, fueling both her creativity and problem-solving skills.\",\"sameAs\":[\"http:\/\/linkedin.com\/in\/divya-s-a55a58189\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How Email Uplers Uses Marka to Streamline Email Coding Process","description":"Explore how Email Uplers transforms email templates with Marka. Dive into the blog to learn flawless coding techniques for brand-perfect emails.","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:\/\/email.uplers.com\/blog\/optimize-email-template-coding-with-marka\/","og_locale":"en_US","og_type":"article","og_title":"How Email Uplers Uses Marka to Streamline Email Coding Process","og_description":"Explore how Email Uplers transforms email templates with Marka. Dive into the blog to learn flawless coding techniques for brand-perfect emails.","og_url":"https:\/\/email.uplers.com\/blog\/optimize-email-template-coding-with-marka\/","og_site_name":"Email Uplers","article_publisher":"https:\/\/www.facebook.com\/email.uplers\/","article_published_time":"2024-03-29T12:14:05+00:00","article_modified_time":"2024-04-04T13:09:30+00:00","og_image":[{"width":540,"height":282,"url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/03\/Blog-feature-image-Marca-tool-Divya-1-540x282.jpg","type":"image\/jpeg"}],"author":"Divya S","twitter_card":"summary_large_image","twitter_creator":"@email_uplers","twitter_site":"@email_uplers","twitter_misc":{"Written by":"Divya S","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/email.uplers.com\/blog\/optimize-email-template-coding-with-marka\/","url":"https:\/\/email.uplers.com\/blog\/optimize-email-template-coding-with-marka\/","name":"How Email Uplers Uses Marka to Streamline Email Coding Process","isPartOf":{"@id":"https:\/\/email.uplers.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/email.uplers.com\/blog\/optimize-email-template-coding-with-marka\/#primaryimage"},"image":{"@id":"https:\/\/email.uplers.com\/blog\/optimize-email-template-coding-with-marka\/#primaryimage"},"thumbnailUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/03\/Blog-feature-image-Marca-tool-Divya-1.jpg","author":{"@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/3ac86c6e2119c10bf076f887390b16e1"},"description":"Explore how Email Uplers transforms email templates with Marka. Dive into the blog to learn flawless coding techniques for brand-perfect emails.","breadcrumb":{"@id":"https:\/\/email.uplers.com\/blog\/optimize-email-template-coding-with-marka\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/email.uplers.com\/blog\/optimize-email-template-coding-with-marka\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/email.uplers.com\/blog\/optimize-email-template-coding-with-marka\/#primaryimage","url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/03\/Blog-feature-image-Marca-tool-Divya-1.jpg","contentUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/03\/Blog-feature-image-Marca-tool-Divya-1.jpg","width":1170,"height":470,"caption":"email template coding process with Marka"},{"@type":"BreadcrumbList","@id":"https:\/\/email.uplers.com\/blog\/optimize-email-template-coding-with-marka\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/email.uplers.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How Email Uplers is optimizing the email template coding process with \u2018Marka\u2019"}]},{"@type":"WebSite","@id":"https:\/\/email.uplers.com\/blog\/#website","url":"https:\/\/email.uplers.com\/blog\/","name":"Email Uplers","description":"Email Marketing Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/email.uplers.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/3ac86c6e2119c10bf076f887390b16e1","name":"Divya S","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image16-1-96x96.png","contentUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image16-1-96x96.png","caption":"Divya S"},"description":"With nearly eight years in IT, digital marketing, and client service management, Divya brings technical expertise and customer focus to every project. She excels in driving projects from start to finish, with a passion for innovation and seamless execution. Beyond project management, she is deeply interested in AI and stays updated on emerging technologies through continuous research. Outside work, she finds inspiration in exploring diverse cultures, fueling both her creativity and problem-solving skills.","sameAs":["http:\/\/linkedin.com\/in\/divya-s-a55a58189"]}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/38945","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/comments?post=38945"}],"version-history":[{"count":17,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/38945\/revisions"}],"predecessor-version":[{"id":39095,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/38945\/revisions\/39095"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/media\/38977"}],"wp:attachment":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/media?parent=38945"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/categories?post=38945"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/tags?post=38945"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}