{"id":6303,"date":"2015-03-16T00:00:00","date_gmt":"2015-03-16T00:00:00","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/responsive-email-101-webinar-qa-html-css-basics\/"},"modified":"2026-03-10T09:52:03","modified_gmt":"2026-03-10T13:52:03","slug":"responsive-email-101-webinar-qa-html-css-basics","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/responsive-email-101-webinar-qa-html-css-basics","title":{"rendered":"Responsive Email 101 Webinar Q&amp;A: HTML &amp; CSS Basics"},"content":{"rendered":"<p>As mobile opens continue to rise (they\u2019ve increased over 500% in the past four years!), so has the talk of mobile email strategies like responsive design. In our <a rel=\"noopener\" href=\"https:\/\/litmus.com\/lp\/responsive-email-101-webinar\">Responsive Email 101: HTML and CSS Basics<\/a> webinar, we took a look at the mobile email landscape, the foundations of creating responsive emails, and why these techniques are crucial to improving the subscriber experience. We also covered email client support and demonstrated how to code a responsive email from scratch.<\/p>\n<div style=\"display: flex; justify-content: center;\"><iframe title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/urgD_dwm-0E?si=6Ngcf9WSdphbO0Fj\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>We had a full house for the webinar, so while we tried to answer as many questions as we could during the Q&amp;A portion, we weren\u2019t able to get to them all. Below, we\u2019ve rounded up some of the most commonly asked questions.<\/p>\n<h2>Getting Started With Responsive Design<\/h2>\n<p><strong>Do you think the rise in mobile opens has reached its saturation, or do you think it will continue to increase?<\/strong><\/p>\n<p>While we\u2019ve seen a huge jump in mobile opens over the past four years\u2014over 500%\u2014we\u2019ve already seen its growth start to <a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/53-of-emails-opened-on-mobile-outlook-opens-decrease-33\">flatten out a bit<\/a>. However, we think mobile opens will continue to rise slowly with the proliferation of more mobile devices.<\/p>\n<h3 class=\"h-lg\">What is the difference between fluid, adaptive, and responsive design?<\/h3>\n<p>Fluid design consists of relative widths with no media queries. Adaptive design consists of fixed or relative widths at multiple viewports\/breakpoints. Responsive design consists of relative widths at multiple viewports\/breakpoints. Here are some great resources to help you better understand the differences between them:<\/p>\n<ul>\n<li><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/defining-and-understanding-mobile-email-approaches\">Scalable, Fluid or Responsive? Understanding Mobile Email Approaches<\/a><\/li>\n<li><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=T6MCkGWSXa0\">Fixed vs. Fluid vs. Adaptive vs. Responsive<\/a><\/li>\n<li><a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/blog.teamtreehouse.com\/which-page-layout\">Which layout? Static, liquid, adaptive, or responsive?<\/a><\/li>\n<li><a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/www.liquidapsive.com\/\">Liquidapsive<\/a><\/li>\n<\/ul>\n<h3 class=\"h-lg\">Which approach has the best email client support\u2014fluid, adaptive, or responsive?<\/h3>\n<p>From a pure support perspective, fluid emails have the best support. Both adaptive and responsive design require the use of media queries, which have <a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/stylecampaign.com\/blog\/2012\/10\/responsive-email-support\/\">limited support<\/a>.<\/p>\n<p>However, it does not mean that fluid design is the best approach for emails. Fluid design is a good compromise for creating a mobile friendly version of an email, but maintains the full-width design of the email at its core. It really comes down to your specific audience, where they open their emails, and your design strategy for optimizing your subscribers\u2019 experiences.<\/p>\n<h3 class=\"h-lg\">What is a media query?<\/h3>\n<p>A media query (@media) is a conditional statement that triggers a set of CSS for a specific set of rules. You can learn more about media queries and email with the following resources:<\/p>\n<ul>\n<li><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/the-how-to-guide-to-responsive-email-design-infographic\/full-view\">The How-To Guide to Responsive Email Design<\/a><\/li>\n<li><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/understanding-media-queries-in-html-email\">Understanding Media Queries in HTML Email<\/a><\/li>\n<\/ul>\n<h3 class=\"h-lg\">Is there any data on the effect that responsive design has on emails?<\/h3>\n<p>You bet! We recently did a <a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/the-science-of-email-clicks-the-impact-of-responsive-design-inbox-testing\">report with MailChimp<\/a> on the effect that responsive design and email testing has on clicks. We found that responsive design results in a 15% increase in clicks for mobile users.<\/p>\n<h3 class=\"h-lg\">With mixed support and so many workarounds, moving towards responsive design seems overwhelming. How do I get started?<\/h3>\n<p>With such limited support from current email clients, responsive<a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-design\/\"> email design<\/a> can be hard to implement. Our first recommendation is to educate yourself as much as possible about responsive email design before diving in. We recommend checking out the resources at <a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/mailchimp.com\/\">MailChimp<\/a>, <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.campaignmonitor.com\/\">Campaign Monitor<\/a>, and Litmus to help guide you.<\/p>\n<p>If you aren\u2019t comfortable diving right into actual development of responsive email, consider using simple drag-and-drop email editors to build your emails. Products like <a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/www.stampready.net\/\">StampReady<\/a>, <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.campaignmonitor.com\/canvas\/\">Canvas<\/a>, and MailChimp will take the hassle out of email coding for you.<\/p>\n<p>If you are comfortable diving into code, check out <a rel=\"noopener\" href=\"https:\/\/litmus.com\/email-builder\">Litmus Builder<\/a>, a code editor built specifically for email design. Try implementing basic responsive email techniques as a start\u2014it will provide a great experience for users who open their email in clients that support responsive design (mainly Apple devices).<\/p>\n<p>Also, be sure to preview your emails before sending! You can send emails to yourself using <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/putsmail.com\/\">PutsMail<\/a> or see what your email looks like in over 40 different email clients with <a rel=\"noopener\" href=\"https:\/\/litmus.com\/\">Litmus<\/a>.<\/p>\n<p>If you ever have any questions or run into coding problems with responsive email design, just head over to the <a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/\">Litmus Community<\/a> for help.<\/p>\n<h3 class=\"h-lg\">Do you recommend any responsive frameworks?<\/h3>\n<p>Yes! We recommend checking out ZURB\u2019s responsive framework Ink (heads up: this framework requires a workaround to render correctly in Outlook 2007-2013). If you like Sass, Faust Gertz made a <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/github.com\/faustgertz\/sassy-ink\">Sass version of Ink<\/a> and Alex Ilhan has a Sass email framework called <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/github.com\/Omgitsonlyalex\/ZenithFramework\">Zenith<\/a>. In addition, Dan Denney from Code School has an awesome email workflow called <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/github.com\/dandenney\/emayll\">Emayll<\/a> and Brian Graves has an amazing collection of <a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/responsiveemailpatterns.com\">Responsive Email Patterns<\/a>.<\/p>\n<h2>Optimizing For Clients That Don&#8217;t Support Media Queries<\/h2>\n<h3 class=\"h-lg\">If a client doesn\u2019t support responsive design, what will display in that client?<\/h3>\n<p>Every single email client renders emails differently, especially when it comes to mobile email apps. Essentially, if they don\u2019t support responsive design, it will fall back to some version of the full-width email. Sometimes it will be a \u201czoomed out\u201d full-width version, sometimes it will be a scaled up \u201czoomed in\u201d version, and sometimes a client like Gmail may automatically increase font sizes to make a \u201cmobile friendly\u201d version of the email.<\/p>\n<p>The best thing to do is to always preview your email before sending it. You can send emails to yourself using <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/putsmail.com\/\">PutsMail<\/a> or see what your email looks like in over 40 different email clients with <a rel=\"noopener\" href=\"https:\/\/litmus.com\/\">Litmus<\/a>.<\/p>\n<h3 class=\"h-lg\">What is the best way to approach responsive design for clients that don\u2019t support it, like the Gmail app for Android? What type of \u201cbackup\u201d should we have in place?<\/h3>\n<p>We recommend making your emails <a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/anatomy-mobile-email\">mobile friendly<\/a> to begin with. This means having a minimal amount of email content and designing for a mobile use case, such as larger font and button sizes. A one-column design out of the box makes it easier to render your email for Gmail app, too.<\/p>\n<p>For those comfortable with advanced coding techniques, the best way to develop your emails and account for lack of responsive support in the Gmail app is the \u201chybrid coding approach.\u201d It essentially uses a mobile-first approach and scales the email up to a desktop width using some email-specific hacks. You can read more about how to implement the hybrid coding approach here:<\/p>\n<ul>\n<li>The Hybrid Coding Approach<\/li>\n<li>Hybrid Coding Redux-Raising the Bar<\/li>\n<li><a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/www.slideshare.net\/flcarneiro\/emaildesign-current\">Hard-Won Lessons in Responsive Email Design<\/a><\/li>\n<\/ul>\n<h2>Code Questions<\/h2>\n<h3 class=\"h-lg\">Can you put your media queries in a separate CSS document and link to that document in the head?<\/h3>\n<p>It is not recommended to use linked stylesheets (&lt;link&gt; tag) for emails due to <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.campaignmonitor.com\/css\/\">limited email client support<\/a>. All styles should be embedded in the &lt;head&gt; of an email.<\/p>\n<h3 class=\"h-lg\">What are the most common breakpoints for responsive email design? How many breakpoints is ideal?<\/h3>\n<p>With the <a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/emailclientmarketshare.com\">most opens<\/a> occurring on iPhones,\u00a0it\u2019s important for your emails to start implementing breakpoints at a minimum of 414px, which is the width of the new iPhone 6 Plus.<\/p>\n<p>There is no \u201cideal\u201d number of breakpoints for a given design\u2014it all comes down to your individual design and optimizing the experience for your subscribers. It is ideal to account for at least one breakpoint to make your email responsive.<\/p>\n<h3 class=\"h-lg\">Do you recommend using tables or divs?<\/h3>\n<p>Email design absolutely requires using a table-based layout and structure. The reason for this is a lack of support for &lt;div&gt;&#8217;s by email clients, like Outlook desktop clients, as it pertains to the actual structure and foundation of the HTML. Some email clients do support &lt;div&gt;&#8217;s and can be extremely powerful to use for certain hacks and workarounds, especially for responsive email.<\/p>\n<h3 class=\"h-lg\">Can you change the align=\u201cleft\u201d or align=\u201cright\u201d attributes within a table using media queries? Or, is it only for changes to style?<\/h3>\n<p>You can\u2019t technically change the align HTML attribute in CSS, but there other workarounds. You can wrap each individual table in an empty &lt;div&gt; and use the float property or the display property to swap tables around. ActionRocket has an great\u00a0blog post on using this advanced technique.<\/p>\n<h3 class=\"h-lg\">With responsive emails, how is support for background images? What are the ideal dimensions for saving background images if I want them to be full-width?<\/h3>\n<p>Background images are <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.campaignmonitor.com\/css\/\">very well supported<\/a> for mobile email clients. There are no \u201cideal\u201d dimensions for saving background images. You should always try to have relatively small file sizes so your subscribers can download your email quickly. You can use the <a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/introducing-image-check-never-send-an-email-with-broken-or-slow-loading-images-again\">Image Check<\/a> feature in Litmus to test your image download speeds.<\/p>\n<h3 class=\"h-lg\">Do styles have to be inline to get them to work with many of the email clients?<\/h3>\n<p>Yes. Several email clients remove any CSS styles in the &lt;head&gt; of emails, notably Gmail, making inlining CSS styles a necessity for emails.<\/p>\n<h3 class=\"h-lg\">Is it better to use pixels or ems for font size in emails?<\/h3>\n<p>It is better to use pixels for defining font sizes in emails, as many email clients do not support ems.<\/p>\n<h3 class=\"h-lg\">Is it possible to replace images using media queries?<\/h3>\n<p>It is possible to replace background images using media queries, but not inline images (<img alt=\"\" \/>&lt;img&gt;\u00a0tags).<\/p>\n<h3 class=\"h-lg\">What is the best way to optimize images so they render sharply on retina displays?<\/h3>\n<p>For retina, you typically want to make the image twice the size of its final display. For example, a 100&#215;100 image should actually be 200&#215;200, but scaled down to 100&#215;100 using HTML attributes or CSS styling. Typically, this technique should only be used for smaller images that need to be sharp\u2014not large images such as photos. There are a couple of great discussions on the Litmus Community about designing for retina:<\/p>\n<ul>\n<li><a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/discussions\/345-designing-for-retina\">Designing for Retina<\/a><\/li>\n<li><a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/discussions\/21-images-with-text-calls-to-action-and-retina-display\">Images with text calls to action and retina display<\/a><\/li>\n<\/ul>\n<h3 class=\"h-lg\">Does display:none; or display:block; work in responsive email?<\/h3>\n<p>It\u2019s not a matter of whether the <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.campaignmonitor.com\/css\/\">display property<\/a> works in responsive email, but whether it is supported by email clients. Like most CSS, it\u2019s supported by some and not others. It is most notably not supported by Gmail.<\/p>\n<h3 class=\"h-lg\">Is there any email client equivalent of a web browser&#8217;s &#8220;inspect element?\u201d It would be useful to troubleshoot my responsive designs.<\/h3>\n<p>There isn\u2019t an exact equivalent of a web browser\u2019s \u201cinspect element.\u201d However, the <a rel=\"noopener\" href=\"https:\/\/litmus.com\/interactive-testing\">Interactive Testing<\/a> feature in Litmus is extremely helpful. Also, <a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/litmusbuilder.com\">Litmus Builder<\/a> has 1-click testing and re-testing functionality to make iterating on email very quickly.<\/p>\n<p>Otherwise, we would recommend just troubleshooting in a WebKit browser (Chrome or Safari). Since the <a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/emailclientmarketshare.com\">majority of mobile opens happen on WebKit<\/a>, which has great CSS support, developing and troubleshooting in a WebKit browser is a good replication of what will happen for those email clients.<\/p>\n<h3 class=\"h-lg\">Is padding universally supported across email clients?<\/h3>\n<p>Padding is almost <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.campaignmonitor.com\/css\/\">universally supported<\/a> across email clients. The margin property, on the other hand, <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.campaignmonitor.com\/css\/\">does not have great support<\/a>. We highly recommend using padding.<\/p>\n<h3 class=\"h-lg\">How do you stack three columns properly using alignment? Should you use center alignment in addition to left and right? Or, do you not recommend using three column layouts at all?<\/h3>\n<p>Yes, you can stack three columns in responsive email design, although your options for stacking and reversing them are more limited or more difficult to do than a two-column design. The alignment of the tables depends on how you want to stack them, but you would typically align all three tables to the left.<\/p>\n<p>ActionRocket has an great post\u00a0on an advanced technique for reverse stacking tables.<\/p>\n<h2>Litmus Builder<\/h2>\n<h3 class=\"h-lg\">What is Litmus Builder?<\/h3>\n<p><a rel=\"noopener\" href=\"https:\/\/litmus.com\/email-builder\">Litmus Builder<\/a> is the world\u2019s first code editor built for email designers by email designers. It\u2019s completely free to create, edit, and share emails.<\/p>\n<h3 class=\"h-lg\">Is Emmet built directly into the Litmus Builder?<\/h3>\n<p>It is! Our Emmet integration makes shorthand coding a breeze.<\/p>\n<h3 class=\"h-lg\">Where can we find responsive email templates within Litmus Builder?<\/h3>\n<p>Litmus Builder has a gallery of 20+ email templates in the Templates section. All templates are completely free to use. Check out our full <a rel=\"noopener\" href=\"https:\/\/litmus.com\/help\/testing\/litmus-builder-guide\/\">help documentation<\/a> for Litmus Builder.<\/p>\n<h2>Try Our Free, Pre-Tested Responsive Templates<\/h2>\n<p>Responsive email lets you fine-tune your designs for an increasingly mobile audience. Simplify your email design process with a host of free, pre-tested templates on Litmus Community.<\/p>\n<div class=\"cta\">\n<table>\n<tbody>\n<tr>\n<td class=\"block-1\"><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/template-gallery-cta.png\" alt=\"\" \/><\/td>\n<td class=\"block-2\">\n<h2>Introducing Litmus Community Templates<\/h2>\n<p>Kickstart your next campaign with one of Litmus&#8217; pre-tested templates.<\/p>\n<p class=\"zero\"><a class=\"btn medium orange button\" rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/templates\" target=\"_blank\" rel=\"noopener noreferrer\">Access the templates \u2192<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>In our Responsive Email 101: HTML and CSS Basics webinar, we took a look at the mobile email landscape, the foundations of creating responsive emails, and why these techniques are crucial to improving the subscriber experience. We also covered email client support and demonstrated how to code a responsive email from scratch. We had a full house for the webinar, so while we tried to answer as many questions as we could during the Q&amp;A portion, we weren\u2019t able to get to them all. In this post, we round up some of the most commonly asked questions.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[102,177,179,10260],"blog_category":[53,50],"class_list":["post-6303","post","type-post","status-publish","format-standard","hentry","tag-html","tag-mobile","tag-responsive-email","tag-scale","blog_category-tips-resources","blog_category-webinars"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Responsive Email 101 Webinar Q&amp;A: HTML &amp; CSS Basics - Litmus<\/title>\n<meta name=\"description\" content=\"In our Responsive Email 101: HTML and CSS Basics webinar, we took a look at the mobile email landscape, the foundations of creating responsive emails, and why these techniques are crucial to improving the subscriber experience. We also covered email client support and demonstrated how to code a responsive email from scratch. We had a full house for the webinar, so while we tried to answer as many questions as we could during the Q&amp;A portion, we weren\u2019t able to get to them all. In this post, we round up some of the most commonly asked questions.\" \/>\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.litmus.com\/blog\/responsive-email-101-webinar-qa-html-css-basics\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive Email 101 Webinar Q&amp;A: HTML &amp; CSS Basics\" \/>\n<meta property=\"og:description\" content=\"In our Responsive Email 101: HTML and CSS Basics webinar, we took a look at the mobile email landscape, the foundations of creating responsive emails, and why these techniques are crucial to improving the subscriber experience. We also covered email client support and demonstrated how to code a responsive email from scratch. We had a full house for the webinar, so while we tried to answer as many questions as we could during the Q&amp;A portion, we weren\u2019t able to get to them all. In this post, we round up some of the most commonly asked questions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/responsive-email-101-webinar-qa-html-css-basics\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2015-03-16T00:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-10T13:52:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/template-gallery-cta.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Responsive Email 101 Webinar Q&amp;A: HTML &amp; CSS Basics - Litmus","description":"In our Responsive Email 101: HTML and CSS Basics webinar, we took a look at the mobile email landscape, the foundations of creating responsive emails, and why these techniques are crucial to improving the subscriber experience. We also covered email client support and demonstrated how to code a responsive email from scratch. We had a full house for the webinar, so while we tried to answer as many questions as we could during the Q&amp;A portion, we weren\u2019t able to get to them all. In this post, we round up some of the most commonly asked questions.","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.litmus.com\/blog\/responsive-email-101-webinar-qa-html-css-basics","og_locale":"en_US","og_type":"article","og_title":"Responsive Email 101 Webinar Q&amp;A: HTML &amp; CSS Basics","og_description":"In our Responsive Email 101: HTML and CSS Basics webinar, we took a look at the mobile email landscape, the foundations of creating responsive emails, and why these techniques are crucial to improving the subscriber experience. We also covered email client support and demonstrated how to code a responsive email from scratch. We had a full house for the webinar, so while we tried to answer as many questions as we could during the Q&amp;A portion, we weren\u2019t able to get to them all. In this post, we round up some of the most commonly asked questions.","og_url":"https:\/\/www.litmus.com\/blog\/responsive-email-101-webinar-qa-html-css-basics","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2015-03-16T00:00:00+00:00","article_modified_time":"2026-03-10T13:52:03+00:00","og_image":[{"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/template-gallery-cta.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/responsive-email-101-webinar-qa-html-css-basics#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/responsive-email-101-webinar-qa-html-css-basics"},"author":{"name":"","@id":""},"headline":"Responsive Email 101 Webinar Q&amp;A: HTML &amp; CSS Basics","datePublished":"2015-03-16T00:00:00+00:00","dateModified":"2026-03-10T13:52:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/responsive-email-101-webinar-qa-html-css-basics"},"wordCount":2056,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/responsive-email-101-webinar-qa-html-css-basics#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/template-gallery-cta.png","keywords":["HTML","Mobile","Responsive Email","Scale"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/responsive-email-101-webinar-qa-html-css-basics#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/responsive-email-101-webinar-qa-html-css-basics","url":"https:\/\/www.litmus.com\/blog\/responsive-email-101-webinar-qa-html-css-basics","name":"Responsive Email 101 Webinar Q&amp;A: HTML &amp; CSS Basics - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/responsive-email-101-webinar-qa-html-css-basics#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/responsive-email-101-webinar-qa-html-css-basics#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/template-gallery-cta.png","datePublished":"2015-03-16T00:00:00+00:00","dateModified":"2026-03-10T13:52:03+00:00","description":"In our Responsive Email 101: HTML and CSS Basics webinar, we took a look at the mobile email landscape, the foundations of creating responsive emails, and why these techniques are crucial to improving the subscriber experience. We also covered email client support and demonstrated how to code a responsive email from scratch. We had a full house for the webinar, so while we tried to answer as many questions as we could during the Q&amp;A portion, we weren\u2019t able to get to them all. In this post, we round up some of the most commonly asked questions.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/responsive-email-101-webinar-qa-html-css-basics#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/responsive-email-101-webinar-qa-html-css-basics"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/responsive-email-101-webinar-qa-html-css-basics#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/template-gallery-cta.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/template-gallery-cta.png","width":640,"height":742},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/responsive-email-101-webinar-qa-html-css-basics#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"Responsive Email 101 Webinar Q&amp;A: HTML &amp; CSS Basics"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/6303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=6303"}],"version-history":[{"count":12,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/6303\/revisions"}],"predecessor-version":[{"id":123128,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/6303\/revisions\/123128"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=6303"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=6303"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=6303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}