際際滷

際際滷Share a Scribd company logo

Why Responsive Email Content is like Water

VRAMP Employee Engagement
VRAMP Employee Engagement

Not sure what a Fluid or Hybrid responsive email is? This jolly little slideshow will both enlighten and entertain... probably.

1 of 14
Download to read offline
Why Responsive Email Content is like Water You put water into a cup, it becomes the cup you put water into a teapot, it becomes the teapot. you put water into a bottle, it becomes the bottle To quote 1958 Cha Cha Champion Bruce Lee www.newzapp.com
Why Build Responsively? The days of designing just for desktop clients are past Similarly we cannot just design for mobile devices The typical email audience opens them on a mixture of the two Responsive email building allows emails to change to a layout and size that suits the email reader
Main types of Responsive Email Structure Fluid Adaptive Hybrid
Pros Cons Fluid Simplest to build and proof No CSS needed in <head> Works cross platform No restriction on layout width Not very controllable Not the best for wider screens Adaptive CSS and @media queries in <head> mean greater control over layout Wider and narrower screens catered for More complicated to build and proof Not suitable for Gmail App on Mobile (which ignores CSS and @media queries) Hybrid Doesnt rely on CSS or @media queries Can still create layouts to suit wider and narrower screens ...including Gmail App on mobile A bit more complicated to build and proof Depends on MSO code for Outlook Left and right aligned tables can be flaky in some desktop readers Which Method Should We Use?
Fluid One of the earliest forms of Responsive techniques All table widths are set as percentages This works best for very simple layouts No CSS is required in <head> <table> and image elements expand to fit the screens width
Fluid Expansion works great for narrower screens Images set to scale with the email can become fuzzy and pixelated but on wider screens this can lead to layout problems Elements can be stretched too wide or move too far apart
Adaptive The next development of Responsive building Fixed-width <table> elements with multiple columns ensures a stable layout for wider screens Works well on desktop readers like Outlook , Gmail and Mac Mail This caters for wider and narrower screens by targeting them separately
Adaptive Fixed-width <table> elements given Fluid-style percentage-widths on narrower screens CSS and Media Queries in <head> of email will target narrower screens <table> column cells become CSS block elements which allows them to stack over each other Any CSS in the <head> of an email is ignored by most desktop clients
Adaptive Unfortunately, the Gmail App on mobile devices ignores CSS and Media Queries in <head> A broken version of the desktop layout is shown instead
Hybrid Uses Fluid layout for narrow screens, not CSS or Media Queries in the <head> Developed to address the issues in Gmail App on mobile Floating single-cell <table>s with left and right alignment allow stacking on narrower screens
Hybrid On wider screens, the left and right aligned <table>s unstack and sit in a single row Inline CSS style max-width on <table> stops expansion at a set point Works well for most mobile and desktop devices
Hybrid except the Outlook email reader, which ignores the max-width inline style MSO-specific code is needed to create ghost multi-column <table>s with fixed widths to prevent over- expansion These ghost <table>s are only active in the Outlook email client all other email readers ignore them
Remember Content Needs Room
www.newzapp.com

More Related Content

Why Responsive Email Content is like Water

  • 1. Why Responsive Email Content is like Water You put water into a cup, it becomes the cup you put water into a teapot, it becomes the teapot. you put water into a bottle, it becomes the bottle To quote 1958 Cha Cha Champion Bruce Lee www.newzapp.com
  • 2. Why Build Responsively? The days of designing just for desktop clients are past Similarly we cannot just design for mobile devices The typical email audience opens them on a mixture of the two Responsive email building allows emails to change to a layout and size that suits the email reader
  • 3. Main types of Responsive Email Structure Fluid Adaptive Hybrid
  • 4. Pros Cons Fluid Simplest to build and proof No CSS needed in <head> Works cross platform No restriction on layout width Not very controllable Not the best for wider screens Adaptive CSS and @media queries in <head> mean greater control over layout Wider and narrower screens catered for More complicated to build and proof Not suitable for Gmail App on Mobile (which ignores CSS and @media queries) Hybrid Doesnt rely on CSS or @media queries Can still create layouts to suit wider and narrower screens ...including Gmail App on mobile A bit more complicated to build and proof Depends on MSO code for Outlook Left and right aligned tables can be flaky in some desktop readers Which Method Should We Use?
  • 5. Fluid One of the earliest forms of Responsive techniques All table widths are set as percentages This works best for very simple layouts No CSS is required in <head> <table> and image elements expand to fit the screens width
  • 6. Fluid Expansion works great for narrower screens Images set to scale with the email can become fuzzy and pixelated but on wider screens this can lead to layout problems Elements can be stretched too wide or move too far apart
  • 7. Adaptive The next development of Responsive building Fixed-width <table> elements with multiple columns ensures a stable layout for wider screens Works well on desktop readers like Outlook , Gmail and Mac Mail This caters for wider and narrower screens by targeting them separately
  • 8. Adaptive Fixed-width <table> elements given Fluid-style percentage-widths on narrower screens CSS and Media Queries in <head> of email will target narrower screens <table> column cells become CSS block elements which allows them to stack over each other Any CSS in the <head> of an email is ignored by most desktop clients
  • 9. Adaptive Unfortunately, the Gmail App on mobile devices ignores CSS and Media Queries in <head> A broken version of the desktop layout is shown instead
  • 10. Hybrid Uses Fluid layout for narrow screens, not CSS or Media Queries in the <head> Developed to address the issues in Gmail App on mobile Floating single-cell <table>s with left and right alignment allow stacking on narrower screens
  • 11. Hybrid On wider screens, the left and right aligned <table>s unstack and sit in a single row Inline CSS style max-width on <table> stops expansion at a set point Works well for most mobile and desktop devices
  • 12. Hybrid except the Outlook email reader, which ignores the max-width inline style MSO-specific code is needed to create ghost multi-column <table>s with fixed widths to prevent over- expansion These ghost <table>s are only active in the Outlook email client all other email readers ignore them
  • 13. Remember Content Needs Room