DBSamsung Email Client - Revisited
Hi All!
Have any of you been able to address the ongoing issues with the Samsung Email Client (red)? Here are a few links for reference:
Essentially, the preferred method of stacking content using display: block does not work. The folks over at Silverpop offer a suggestion/hack using [mso] conditionals and additional wrapping tables, but this disallows the use of any "alternative" stacking (read left-over-right). Additionally, the code becomes clunky and inelegant, at best.
The Samsung market share seems to have a pretty decent chunk of the larger Android market share; this will have a significant impact on my recommendations, moving forward.
I guess my questions are:
What would your suggestion be?
Would you abandon responsive support for Samsung devices? Theoretically, it may be possible to target/exclude them with a media query...
Would you integrate the hacks into your code?
Thanks in advance for your input; I'll certainly look forward to your answers and further discussion.
Very Best,
Dan
The best solution is one that doesn't rely on media queries to achieve column stacking.
The main problem I've found with the native mail client on Samsung Galaxy devices running android 4.3+ is that it doesn't support
display: blockon table elements (<table><tr><td>etc). To get around this I put a<div style="display: inline-block">around each<table>I want to stack. The stacking order is then controlled using thedirattribute.Here's a snippet of code that I scoped to illustrate this.
By manipulating divs instead of tables I haven't had any problems with responsive email on SGS4/SGS5 native mail clients. I'd be interested to see if this helps.
Is there any need for display:block on tables?
I've found it's only required on cells.
If you push the width to 100%, it'll blow the other table down, just fine
I meant any table element, such as
<table>,<tr>,<td>etc. does not support display block. This behaviour is similar to the way tables work in IE7, the table will still render as a table even if you setdisplay: blockon any of these elements.I tend to stack cells only when it doesn't seem necessary to add two tables and have them stack.
If it's really bad though, I fall back to aligned tables and push them to 100%. No issues then.
And if the tables sit really close and don't allow for Outlook's spacing shenanigans, I wrap the 'ghost' cells around them and problem solved for normal stacking.
Reverse stacking however...
Any highly elaborate answer is going to inevitably effect the ease of use of the template.
I would suggest designing without multiple columns, or if really necessary, use two columns with short copy.
To me the benefit of a consistent, simple template outweighs a complex responsive template with all manner of hacks.