Let's Code A Responsive E-Mailer template

Newsletter or Emailer is a good way of Online Marketing. If you are starting a business or want to boost your business you have to follow this medium. If you have a long list of Email IDs, in which you can boost your offers or business you should send a nice and attractive Email.

In today's era more than 60% users access their email form smartphones and other from desktop, So we should make a responsive template which can work for both.

Let’s start,

I will make internal CSS in my code. Firstly, we will draw a simple sketch for my layout using HTML then will make it responsive.



Above code has a top image, then heading and some content and then one click to action. These elements are without any style. The output will be the following, 



Now we have to make it bit impressive and responsive. Now let’s add some CSS, and make it Impressive and responsive. Here is the CSS which I have used for different elements,



Class Email-screen is used for complete screen which have grey background color. And have 10pz padding from all boundaries of screen.

Class email-body is used for the email screen, It has complete email content. The max-width of this screen is 700px. Background color is white, ant placement of this screen is in center. Overflow is hidden and border radius is 5px.

Class email-header is used for the top screen content. In this class we have fixed the placement of image : in Center using “margin:0 auto;”. And Heading 1 also has middle placement. Then paragraph has justify placement with 60px left and right padding. Here I have used 1.5em for line height, it means it will auto replace in all screens (mobile, desktop etc) with same proportion.

Then CTA button, this class is used for the URL. CTA has center replacement with blue background and white text. Border radius is used for the corner curve. You can minimize this curve. So using this CSS the final output of this code will be the following,



You can check this screen in all devices, this is responsive for every device. This is a simple example of responsiveness. We can extend it using media queries. Will make bit typical design in next article using media queries.