A 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% of users access their email form smartphones and others from desktop, So we should make a responsive template that 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.
The 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 a 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 the complete screen which has a grey background color. And have 10pz padding from all boundaries of the screen.
Class email-body is used for the email screen, It has complete email content. The max-width of this screen is 700px. The background color is white, and the placement of this screen is in the center. Overflow is hidden and border-radius is 5px.
The 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 a middle placement. Then paragraph has justified 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 the same proportion.
Then CTA button, this class is used for the URL. CTA has a center replacement with a blue background and white text. The 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. We will make a bit of type design in the next article using media queries.