Responsive Email Design - switching from two columns to one column on mobile

Lauren Brewer · April 2015

Hi,

I'm having a specific issue with responsive design. When I use display: block; and width: auto; to make a two column layout into one column on mobile, it does not work in Convio even though it has before. It also works in the email preview, but once I send it does not. I use the same method in other ESPs and it works perfectly. I am forced to use the other method of two tables, one aligned left and one aligned right. This works perfectly, but I need a solution for changing a horizontal nav bar of 3+ links into 3 stacked links and display: block was perfect! Any suggestions?? Could it be a doctype or meta tag issue?

Thanks!

Brian Mucha · April 2015

Not sure why you are seeing a change in behavior, did you change which client you are testiing on? Email Preview is useless here, since that is using the html engine in your browser, rather than an email client - which is way different. You should be testing on something like Litmus.

Luminate does (stupidly) inject two linked style sheets, which might interfere.

Regardless, if you are doing actual responsive design with media queries it will only work with iOS devices. Nothing else supports it. We use them very sparingly, and not for anything important.

US - "According to the latest data from Kantar Worldpanel ComTech, Android now holds 61.9% of the U.S. market share to Apple’s 32.5%, the lowest percentage iOS has captured since the iPhone 4s launched in 2011." (http://bgr.com/2014/07/01/android-market-share-2014/)

Globally - "In Q4 2013, according to research firm IDC, Google's Android mobile operating system had a 78% share of all users globally. Apple's iOS had just 18%. Now, IDC predicts that in 2014 Android will claim 80.2% of users and only 14.8% will be on Apple's iOS system." (http://www.businessinsider.com/iphone-v-android-market-share-2014-5)

Display is not supported in any version of Outlook or Gmail.

https://www.campaignmonitor.com/css/

Lauren Brewer · April 2015

Brian Mucha:
Not sure why you are seeing a change in behavior, did you change which client you are testiing on? Email Preview is useless here, since that is using the html engine in your browser, rather than an email client - which is way different. You should be testing on something like Litmus.

Luminate does (stupidly) inject two linked style sheets, which might interfere.

Regardless, if you are doing actual responsive design with media queries it will only work with iOS devices. Nothing else supports it. We use them very sparingly, and not for anything important.

US - "According to the latest data from Kantar Worldpanel ComTech, Android now holds 61.9% of the U.S. market share to Apple’s 32.5%, the lowest percentage iOS has captured since the iPhone 4s launched in 2011." (http://bgr.com/2014/07/01/android-market-share-2014/)

Globally - "In Q4 2013, according to research firm IDC, Google's Android mobile operating system had a 78% share of all users globally. Apple's iOS had just 18%. Now, IDC predicts that in 2014 Android will claim 80.2% of users and only 14.8% will be on Apple's iOS system." (http://www.businessinsider.com/iphone-v-android-market-share-2014-5)

Display is not supported in any version of Outlook or Gmail.

https://www.campaignmonitor.com/css/

I use my iPhone to check emails I'm working on along with Email on Acid. Currently running a trial account on Litmus as well to compare the two for our digital team here. The function works on the testing sites, just not when I send from Convio. I did just notice the additional style sheets you mentioned - that could definitely be the issue. The display property doesn't work in Gmail or Outlook, however it works on IOS so that shouldn't be an issue. At this point I know it's something specific to Convio - I currently use this method successfully in Salsa. I may just need to think outside the box and come up with a different solution altogether. Thanks for the input!

Christopher Hallahan · July 2016

Lauren - your statistics on marketshare don't take into account that iPhone and iPad take the #1 and #3 slots for most popular EMAIL clients (according to Litumus, 2016). https://emailclientmarketshare.com

Personally, I think it's unbelieveable that proper repsonsive email support doesn't exist in Convio/Luminate when mobile marketshare is this high. There are times when it's critical to adjust the layout between desktop and mobile - especially when displaying images and text side by side.

I am going to attempt to have our administrator implement this fix from another post to see if it fixes the block display: "There is an SDP, EMAIL_INCLUDE_LINKED_STYLESHEETS, which will suppress the linked stylesheets (UserGlobalStyle.css and CustomStyle.css) from the head of emails if set to FALSE"

Can anyone else verify success with turning off the default stylesheets?

Francis Lim · July 2016

Christopher,

Thanks for telling us about EMAIL_INCLUDE_LINKED_STYLESHEETS. They keep messing with some of our font size and styles. I contacted Support and had it turned off, and it's seems to turns it off for viewing message online, too. I've been wanting to do this for a LONG time. Definitely a good idea to turn this off.

Thanks for sharing!

Christopher Hallahan · July 2016

No problem. There is also a setting "MAIL_DELIVERY_DOC_TYPE" which supposedly stops Luminate from adjusting the HTML DOCTYPE and other metadata that is required for responsive email. I'm not sure how this all works though since I'm not an administrator.

Responsive Email Design - switching from two columns to one column on mobile

Comments

Categories