But, surprise, surprise! Numerous email clients now support media queries, at the very heart of responsive design. A recent post by Karol K on effective HTML newsletter design summarized these challenges. One of the first things youвЂ™ll learn when developing an HTML email is that you have to go back to the stone age for your email to display properly across the board: table-based layouts, no external CSS, no JavaScript or PHP. As a testament to their worth, I used the Responsive email starter template as the basis for the example HTML email shown throughout this post. IвЂ™ll point out some of the more useful snippets as we go. Not only are these very solid initial designs that will work for many email layouts, they are just chockfull of helpful email-specific coding, all lovingly commented. Responsive вЂ“ Similar to the Hybrid layout, but incorporating a media query for devices with a maximum width of 600px.Layout includes 2 and 3 column areas as well as float left and float right. Hybrid вЂ“ Offers the widest initial display with a single media query for screens with a maximum width of 480px.Multiple columns persist on devices with narrower widths. Fluid вЂ“ Similar to Basic, except no media queries are used although percentages are applied.Basic вЂ“ Layout includes single and two column design, with media queries for both devices with a width of 600 and 480 pixels, coded so that multiple columns are linearized.Use the starter template that best suits your design needs: From the Sample Folder column, choose Email Templates.Choose File > New to open the New Document dialog.To access these wonderful jumping-off points, follow these steps: To simplify all our lives, Dreamweaver CC includes four really great HTML email templates as starting points, all easy to adapt and customize. With the wide variety of email programs-many stemming from the earliest days of the Internet-the technology applied is pretty much a hot mess and very troublesome for todayвЂ™s web designers to get their collective heads around. If I had to pick one word to describe the entire HTML email ecosystem, it would be arcane. Jumpstart with Dreamweaver CCвЂ™s Email Starter Templates The state of HTML emails today demands exactly such a wide-spread grasp and implementation of the languages and protocols that Dreamweaver offers. Why is this venerable web development tool the number one choice for designing HTML emails? ItвЂ™s precisely because Dreamweaver has been around so long and mastered Web technology at every stage: from the early days of table-based layouts to the modern, responsive era with media queries. And not by a little: Dreamweaver was preferred by greater than twice as the nearest competitor.

A recent industry study named Dreamweaver CC the overwhelming favorite HTML editor for designing and developing HTML emails.

Html email template examples