2013-11-19
Update 2020: Together with a team I have created an Email Authoring App that provides users with a simple UI to create an email and generates an HTML code that's ready to be pasted into Luminate. The rendered code includes all the known solutions and hacks to make the email look close to the ideal across all email clients. This is a recommended solution for Luminate Online email.
I've created many responsive stationeries in Luminate Online and ran into a number of issues along the way. Here are a few pointers to make your life easier.
- Disable stylesheets in email, by asking support to set SDP EMAIL_INCLUDE_LINKED_STYLESHEETS to false (optional, but will ensure your content loads faster on mobile devices)
- Create stationery
- Leave CSS section blank
- Put your responsive CSS stylesheet on FTP
- Link to your CSS from body of email
- Alternatively you can put you CSS in block with media attributes for each breakpoints in the body. Note: CSS media queries in Styles section or in <style> section of the body are not picked up by email clients.
- Add body of stationery, be sure to include inline markup for browsers that don't support dynamic CSS
- Create sample email with body content
- Test, test & test
Notes:
- Floats are not supported in outlook, so keeping content in one column layout on all browsers is advisable, unless you want to hand-code 2 variants for each email.
- If you have a nested tables, make sure in responsive CSS you set the width of the inner table to 100%. I've ran into an issue where the parent was set to 320px & child table was set to 320px, however, child would have a narrower display in Android & iPhone mail.
- Yahoo mail doesn't support padding/margin on paragraphs, use hard line breaks when coding the body