how-to-do-stacking-table-method-on-mobile

How to do stacking table method on mobile?

53% of Email your business emails is viewed through mobile medium. If you email don’t support mobile responsive, you gonna lose some serious amount of visitor. There are two types of method where you can make it responsive. First method involves converting multiple column design in to single column design. And another method called staking TDs or stacking tables.

Both method are similar as they us two column layout. Table with align are used instead of floats as email service provider don’t allows float attributes in emails.

Let’s see how to make your emails responsive with stackable table.

Step 1

First in an inline style sheet declare a responsive media query function with media only screen and maximum width of 479px. Inside that function declare a class name td_align with display attribute as block width as 100% text align as left and another class as table_align display attribute as block and width as 100%.

Code:

<style type=”text/css”>
@media only screen and (max-width: 479px) {
.td_align {display:block;width:100%; text-align:left;}
.table_align {display:block;width:100%;}
</style>

Step 2

Now create a table with width 600px and align as center. Inside that table create two new table with class name as table align  and align as left and another table with class name as td_align  and align as right.   

Code:

<table width=”600px” align=”center”><tr>
<td>
<table align=”left” class=”table_align” ><tr>
<td>
ABCD
</td>
</tr></table>
<table align=”right” class=”td_align”>
<tr>
<td>
EFGH
</td>
</tr>

</table>
</td>
</tr>
</table>

The problem

The TD stacking method depends on the doctype and if correct doctype is not declared your table stacking method will remain in same row. This is where android version becomes relevant. The above code will work fine in android 2.3 and 4.0.3. However in android 4.4 will strip out doctype and display code. Hence there we get problem.

The solution

We recommend stacking method but it’s important to analysis what your customer most use

According to netmarketshare.com

Android 4.4 Android 4.4 18.62%
iPhone 18.11%
iPad 14.67%
Android 5.0 9.62%
Android 5.1 8.96%
Android 4.2 8.32%
Android 5.08%
Android 4.1 3.26%
Java ME 2.14%
Windows Phone OS 8.1 1.94%
Android 4.3 Android 4.3 1.76%
Symbian 1.73%
BlackBerry 1.48%
Android 4.0 1.18%
Android 2.3 Android 2.3 0.90%
Android 6.0 Android 6.0 0.77%
Windows Phone OS 8.0 0.44%
Windows Phone OS 10.0 0.28%
Windows Phone OS 7.5 0.13%
ipod touch ipod touch 0.10%
SAMSUNG SAMSUNG 0.08%
Android 2.2 Android 2.2 0.07%
Galaxy Tab Galaxy Tab 0.06%
Windows Phone OS Opera Mini/9.0 0.05%

 

Google should consider adding support of media queries in Gmail app. Till then it’s useless to include neither the table stacking method nor the TD stacking method. If most your subscriber are Gmail users you should consider contacting a professional.

Ecommerce Web Development

Looking For Ecommerce Web Development?

How to do stacking table method on mobile? by

Comments

  • All of these tips are great, that’s very interesting.It is very helpful for me.
    Thank you so much shared that valuable information.

  • Hi sir,

    Thanks for the useful tips..How to modifyresponsive website in desktop and mobile and then why we use bootstrap for mobile view website complications

    • Hi Vanessa,
      Good question. But unfortunately, lets discuss something related to email table stacking here. If you need to know more, please do email us about your query, we would help you out.

  • Superb i got some valuable tips from here. Really its a amazing article i had ever read. I hope it will help a lot for all. Thank you so much for this amazing posts and please keep update like this excellent article.

Leave a Reply

Your email address will not be published. Required fields are marked *

*