-
How to Create a Responsive newsletter ?
about 11 years ago
Hello Users,
In the today world you can crate a responsive newsletter with help fo simple CSS.
You just follow 3 steps:-
1:- No Fixed Width
Generally we create f wrapper for a frame with fixed width. In this we can not use any fixed width. For example:-
<table style=width: 600px;>
one would write
<table style=width: 100%;>
Make sure to add these styles to each table cell that contains content:
<td style=max-width: 600px; display: block; clear: both;>
For images, its important to not set a width within the image tag, otherwise Android will stretch out the container of the image to that given width. Its required to include a maximum width style to the image:
2:- Table Setup
In order to make the collapsing of content blocks work, you can use a table within a table setup like this:
<body> <table width="100%"> <tr> <td></td> <td style="max-width: 600px; display: block; clear: both;"> <table style="width: 100%;"> <tr> <td>Content Block 1</td> </tr> </table> </td> <td ></td> </tr> </table> <table width="100%"> <tr> <td></td> <td style="max-width: 600px; display: block; clear: both;"> <table style="width:100%;"> <tr> <td>Content Block 2</td> </tr> </table> </td> <td></td> </tr> </table> </body>3:- Viewport
Most Important check viewport like this:-
<meta name=viewport content=width=device-width, initial-scale=1, maximum-scale=1>
Now your template behave like responsive Newsletter.
-
over 3 years ago
12 tips to make your newsletter mobile-friendly and responsive:
1. Start by using responsive design or mobile aware design
2. Keep subject lines to 45 characters or less
3. Switch to a single column
4. Keep your width less than 600 pixels; photos smaller than 300 pixels
5. Go light on photos
6. Limit the number of elements or stories
7. Use large fonts and high-contrast colours
8. Test on multiple platforms
9. Use just one call to action at the top
10. Do not use navigation or menu bars
11. Do not stack links on top of one another
12. Place the unsubscribe button away from all other buttons
The best you can do is Hire developer to get fully customised and responsive newsletter. -
1 Comment(s)