Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • How to Create a Responsive newsletter ?

    @akash.badwal
    Recommendations Offline Message

    • 0
    • 2
    • 1
    • 0
    • 1
    • 0
    • 0
    • 0
    • 990
    Comment on it

    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:- 

    1. <table style=width: 600px;>

    one would write

    1. <table style=width: 100%;>

    Make sure to add these styles to each table cell that contains content:

    1. <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:

    1. <body>
    2.     <table width="100%">
    3.         <tr>
    4.             <td></td>
    5.             <td style="max-width: 600px; display: block; clear: both;">
    6.                 <table style="width: 100%;">
    7.                     <tr>
    8.                         <td>Content Block 1</td>
    9.                     </tr>
    10.                 </table>
    11.             </td>
    12.             <td ></td>
    13.         </tr>
    14.     </table>
    15.  
    16.     <table width="100%">
    17.         <tr>
    18.             <td></td>
    19.             <td style="max-width: 600px; display: block; clear: both;">
    20.                 <table style="width:100%;">
    21.                     <tr>
    22.                         <td>Content Block 2</td>
    23.                     </tr>
    24.                 </table>
    25.             </td>
    26.             <td></td>
    27.         </tr>
    28.     </table>
    29. </body>

    3:- Viewport

    Most Important check viewport like this:-

    1. <meta name=viewport content=width=device-width, initial-scale=1, maximum-scale=1>

    Now your template behave like responsive Newsletter.

    HTML tags HTML 5 Responsive Newsletter Responsive Table
    Comment on it

 1 Comment(s)

  • @yourteaminindia
    Recommendations Offline Message

    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. 
Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: