Skip to main content
UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
VRAMP Employee Engagement, profile picture
Uploaded byVRAMP Employee Engagement
PDF, PPTX93,718 views

Why Responsive Email Content is like Water

The document discusses the importance of responsive email design, illustrating how content can adapt to various layouts and sizes, similar to how water takes the shape of its container. It outlines three main types of responsive email structures: fluid, adaptive, and hybrid, each with its own advantages and disadvantages. The choice of method is influenced by the need for compatibility across different email clients and screen sizes, particularly regarding services like Gmail and Outlook.

Design◦
Related topics:
Email Marketing Insights•
Download as PDF, PPTX
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  Doesn’t 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 screen’s 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