This email design is not the greatest in the world, but it will give you the fundamentals to create a responsive email template.
This is just an example I learned while researching the internet for the most powerful and effective ways to create a responsive email template right off the bat. Coding and designing a template takes time, so lets face it you don't want to take a lot of time building something.
Trust me you can code this if you're just a beginner. I consider everything as dabbling or tasting a skill that you might be good at one day. It's almost like tasting an exotic food or going to a Vietnamese restaurant for the first time. You never know what you're going to get.
To get good at something, you need to try.
Okay so lets try building a responsive email template. There's just HTML and CSS.
I'll try to be as descriptive as possible.
Believe it or not I just picked up this skill, so you can do it too.
1.Build HTML format for responsive email template
Create HTML and CSS files
See picture below
2.Build HTML format for email - responsive email template
You probably notice the inline CSS in the HTML document. The reason for this format is because some email clients, such as Google has the tendency to cut off the head and footer, so you need to make the style inline.
The image should look like this. I failed to mention that you can choose any picture you want to design you email template. Resize the screen on your desktop down to a mobile size and it should be responsive to one column.
Congratulations! You just built a responsive email template.