Coding for Responsive Email

•Download as PPTX, PDF•

12 likes•9,134 views

Brian Graves

Technology Business

Provide optimal experience regardless of device
Easy reading and interactions without scrolling or
zooming
Fluid Layouts
Fluid Images
Breakpoint Changes (Media Queries)
What is Responsive Design?
Coding Responsive Emails

Source: Campaign Monitor http://www.campaignmonitor.com/guides/mobile/
Responsive Support

Source: Litmus Email client usage worldwide, collected from 251 million email opens.

some of our major retail brands are
seeing 60%+ of their subscribers
viewing on a mobile device

More than Metrics
“It’s more than just metrics. The experience
on mobile matters. Responsive design is a
long term investment in customer experience.”
- Justine Jordan
Marketing Director, Litmus

Deckers
10% increase in CTR
9% increase in mobile opens

Crocs
15.63% lift in iPhone ‘read’ engagement
7.66% lift in CTOR

http://www.degdigital.com/blog/content-
choreography-in-responsive-email/
http://brianleegraves.com/ResponsivePatterns
Patterns: More In Depth
Coding Responsive Emails

Stop thinking in terms of
“pages” and start thinking
instead of “packages”

Content Content Packages
Header
Hero Content
Secondary Story
Products
Footer

Feature – several styles
All Image – flexible, variable height
Articles – primary, secondary
Product – feature, upsells, 2-3-4 across
Styled Text Areas
Commonly used Content Areas
Coding Responsive Emails

Templating Engine
• Automated separation of Templates and Content Areas
• The Power of Preprocessors (SASS)
• Easier Iteration
• https://github.com/degdigital/MiddlemanEmailTemplate

Non scaling images
Content Overflowing Containers
Padding on 100% width tables
CMS Business Rules & Appended Content
Gotchas
Coding Responsive Emails

More Resources
Degdigital.com/blog
BrianLeeGraves.com/ResponsivePatterns
Blog.exacttarget.com/blog/email-design-4
Zurb: Responsive Email Templates
Emailclientmarketshare.com
CampaignMonitor.com/guides/mobile
EmailDesignReview.com
Blog.mailchimp.com
https://litmus.com/blog/our-favorite-
responsive-and-mobile-email-resources
@briangraves
@emailgirl – Cara Olson
@degdigital - DEG
@krudz – Kristina Huffman
@meladorri – Justine Jordan
@iamelliot – Elliot Ross
@alexcwilliams – Alex Williams
@litmusapp - Litmus
@mparkerbyrd – Matt Byrd
@rodriguezcommaj – Jason Rodriguez
@moonstrips – Nicole Merlin
TwitterBlogs, Stats, & Patterns

What's hot

Product managers should embrace mobile to ease the users pain and increase conversion. Learnings from mobile should be tested and transfered to desktop. This talk went back to basics to illustrate how putting additional effort into the areas that appear obvious and easy can achieve true simplicity and deliver high values. The technology buzz word around mobile is currently Responsive Web Design we talked about the benefits and short comings of RWD. An adaptive or RWD 2.0 approach might be more valuable to some companies.

#ProdTank - Mobile Conversion, June 2013

Dave Martin

Email is a big deal, and one of the most important ways to connect with your audience. With the majority of people now reading email on mobile devices, creating robust responsive templates is no longer an option. Unfortunately email design is still considered a dark art, and its steep learning curve can be daunting. In this talk, I present email design techniques that make the task of developing for email more simple, along with strategies for optimizing user experience in email clients that will get those emails read.

Hard-Won Lessons in Responsive Email Design - ConvergeSE 2014

Fabio Carneiro

Developing a Progressive Mobile Strategy

Dave Olsen

Mobile email usage is growing exponentially, but how does it impact your business? This eye-opening educational session will provide you with the strategy and tactics you need to plan, execute and analyze successful mobile email marketing campaigns. Topics will cover: - Determining the value of your mobile audience - Crafting effective multi-platform campaigns - Preparing for increased mobile utilization - Assessing mobile email marketing effectiveness

Mobile Email Marketing: Small Screen, Big Opportunity

TheClubhou.se

Email for Mobile Devices | Stream:20 Best Practice

Stream20consultants

Carousel30: Optimizing for the mobile user experience whitepaper

Carousel30

For Publishers: Case Studies and Market Research for Mobile B2B Digital Marke...

Astek Consulting

Mobile optimization success guide

Arnas Rackauskas

Responsive HTML Email

Benjy Stanton

Astek Mobile Presentation: SIPA 2011

Astek Consulting

netCORE's Webinar - Go Mobile. Go Responsive.

Netcore Solutions

No matter what your customers use to access your website – from Internet Explorer 9 on a PC to Safari on an iPhone – they expect your site to be fast and work flawlessly. Join our featured speakers, Harley Manning, VP and Research Director from independent research firm Forrester Research, Inc., and Compuware CTO APM Solutions Imad Mouline to learn: - What growing browser and device proliferation means for IT and Website owners and developers - The latest browser trends including the evolution of mobile and HTML 5 -Best practices for companies attempting to maintain cross-browser interoperability How to meet customers’ web experience expectations regardless of browser or device

Top Tips to Deliver Quality Web Experiences From IE 9 to the iPhone

Compuware APM

optimize website for mobile marketing

Olatunji Adetunji

Are you maximizing the return on your mobile investment? With mobile services your customers expect quick anytime transactions that work flawlessly. Failure to identify and resolve a slow – or worse – malfunctioning mobile service will result in lost customers and irreparable brand damage. Join featured speakers, Julie Ask, VP and Principal Analyst from independent research firm Forrester Research, Inc., and Compuware CTO APM Solutions Imad Mouline to learn: - How to quantify the return on investment for your mobile services - What growing mobile Web adoption and rising customer expectations mean for mobile service owners - Common challenges that prohibit companies from capitalizing on the mobile opportunity - Best practices to deliver quality mobile Web and application experiences to all end-users

How to maximize mobile website & app ROI

Compuware APM

Years ago it was all about keeping up with digital screens that were getting bigger. Then they started to shrink. Now we’re all mobile and we want it all instantly, faster, better and appropriate to our device if it’s all the same to you. So, what does this mean for your content, your text, your images, your call to actions? How can you ensure this all works, has an equal amount of impact no matter how or what your content is accessed on. Does it matter anyway? And are you sure you know what the impact of not focussing on this will have on your business...? Our session is designed to help, we want to educate, share our knowledge and give you the power to make an informed decision before you make any investments

Responsive content ... because size does matter - Rob Suckley, Head of Design...

B2B Marketing

Mobile Email User Experience Strategies

Anushri Thanedar

Delivering Fast Responsive Site

Sheeraz Qurban

Mobile marketing copy

Jayne Navarre

Did you know that mobile is now the number one environment for email opens? A user's experience in a mobile environment for email is much different than a desktop one. Understanding the various methods of mobile email optimization is critical for any online marketer. George Adamidis from ExactTarget lead the latest eCommerce Toronto Meetup on the different methods for optimizing email for both the mobile and desktop experience.

The Mobile Experience Through Email

Demac Media

The Mobile Trends You Need to Know About in 2020

Branch

What's hot (20)

#ProdTank - Mobile Conversion, June 2013

Hard-Won Lessons in Responsive Email Design - ConvergeSE 2014

Developing a Progressive Mobile Strategy

Mobile Email Marketing: Small Screen, Big Opportunity

Email for Mobile Devices | Stream:20 Best Practice

Carousel30: Optimizing for the mobile user experience whitepaper

For Publishers: Case Studies and Market Research for Mobile B2B Digital Marke...

Mobile optimization success guide

Responsive HTML Email

Astek Mobile Presentation: SIPA 2011

netCORE's Webinar - Go Mobile. Go Responsive.

Top Tips to Deliver Quality Web Experiences From IE 9 to the iPhone

optimize website for mobile marketing

How to maximize mobile website & app ROI

Responsive content ... because size does matter - Rob Suckley, Head of Design...

Mobile Email User Experience Strategies

Delivering Fast Responsive Site

Mobile marketing copy

The Mobile Experience Through Email

The Mobile Trends You Need to Know About in 2020

Similar to Coding for Responsive Email

Responsive Email Design

ETCommunitiesKC

With U.S. consumers spending an avg. of 90 hours on their smartphones every month*, mobile devices have certainly become the focal point for all types of consumer engagements. According to Forrester*, 53% of enterprises using mobile to transform their customer experience have already realized significant positive financial gains.* However, the cross-platform and cross-channel nature of the modern consumer journey also creates big headaches for brands: Where to start to enhance that journey and what data to dig into for optimization? Join Tae Kim, Director of Partner Growth from Branch, and Richard Sgro, Director of Solutions from mParticle for an in-depth discussion on: -Top considerations in building a successful all-around mobile journey -User experiences that drive conversions for B2C enterprises on mobile -The essential data layer to understand the consumer journey -Case studies of effective mobile user experiences *Forrester: Mobile Moments Transform Commerce And Service Experiences

Branch<>mParticle Webinar: Customer-Centric Mobile Experiences that Convert -...

Branch

Think of the last time you used your smartphone or tablet to access a website. Were you able to find the information you were looking for? Did you have trouble navigating the page because of screen size limitations? Did you leave the website before making a purchase due to these problems? Responsive Design improves the customer experience and helps your customers find the product or service information they are looking for. Watch our webinar to learn: • The Importance of Mobile User Behavior Search Engine Optimization Considerations • How To Create a Consistent User Experience Across All Channels • Create Contextualized Interactions To Deliver the Right Experience to the Right Device

Webinar: How to Create Meaningful Mobile Experience with Responsive Design

Bridgeline Digital

Mobile Marketing 101

Molly Garris

Mobile Email Marketing: Small Screen, Big Opportunity

Mass Transmit

Interactive Innovation: How Smart and Successful BtoB Marketers Use Digital M...

Vivastream

Email Marketing Workshop Part 4: Let's Get Creative

Vivastream

How B2B Marketers Use Digital Media to Accelerate Marketing and Sales Perform...

Joel Book

Mobile loyalty appboy

YourzineBV

Mobile Marketing Strategy

Kenko Health, Inc.

Mobile email: strategies and how-tos for the small screen

Litmus

Evolving direct into the new world at sprint

Vivastream

Evolving Direct into The New World at Sprint

Vivastream

eMarketer Webinar: Mobile Messaging Trends—Tapping into SMS, Mobile Email and...

eMarketer

Mobile Marketing Made Easy - What you need to do to Grow Your Business

Mobile Marketing Pro LLC

Mobile App Vs Mobile Web

Kenko Health, Inc.

Mobile-content-strategy.pptx

DANYVERFULLO

Mobile Email Marketing

Online Marketing Institute

Trends2009sm 169 16th

Pipo Santos

Email is Media

Affiliate Summit

Similar to Coding for Responsive Email (20)

Responsive Email Design

Branch<>mParticle Webinar: Customer-Centric Mobile Experiences that Convert -...

Webinar: How to Create Meaningful Mobile Experience with Responsive Design

Mobile Marketing 101

Mobile Email Marketing: Small Screen, Big Opportunity

Interactive Innovation: How Smart and Successful BtoB Marketers Use Digital M...

Email Marketing Workshop Part 4: Let's Get Creative

How B2B Marketers Use Digital Media to Accelerate Marketing and Sales Perform...

Mobile loyalty appboy

Mobile Marketing Strategy

Mobile email: strategies and how-tos for the small screen

Evolving direct into the new world at sprint

Evolving Direct into The New World at Sprint

eMarketer Webinar: Mobile Messaging Trends—Tapping into SMS, Mobile Email and...

Mobile Marketing Made Easy - What you need to do to Grow Your Business

Mobile App Vs Mobile Web

Mobile-content-strategy.pptx

Mobile Email Marketing

Trends2009sm 169 16th

Email is Media

More from Brian Graves

Using Tomorrow's CSS Today

Brian Graves

CSS4 may only be in the working draft stage, but that doesn't mean we can't begin to use some of it's capabilities in our current designs. Variables, color manipulation, custom media queries, and custom selectors are just a few of the powerful new features that can be utilized to take our css to the next level. This talk will take a look at the benefits of using postprocessers to write powerful, bleeding-edge CSS and have it work in today's browsers.

Using Tomorrow's CSS Today

Brian Graves

Using Tomorrow's CSS Today - TEDC15

Brian Graves

Sweating the Small Stuff

Brian Graves

As your designs shift across breakpoints, keeping content priority in tact while delivering a great user experience can be tough. Add to that the challenging and outdated standards of email development and the task can seem even more daunting. What can be done to deliver consistently great experiences no matter the device your customers are on? Brian takes a look at how to overcome these challenges with design strategies and advanced CSS techniques that will wrangle your content into shape.

Winning the Design Battle on Every Screen

Brian Graves

How do you adapt email strategy and design to perform in the new multi-device landscape? This case study of Portland General Electric will take a look at the challenges presented by PGE’s highly mobile customer base and how creating simplified, responsive templates led to improved engagement, not just on mobile, but across the board. We’ll cover: Strategy - PGE’s audience and modeling content and strategy around mobile friendly design Design - A dive into the design methods and patterns used to make PGE’s campaigns user friendly regardless of device Results - A deeper look at how the redesign has performed, including increased engagement on mobile & desktop Looking Forward - How can multi-device engagement be improved in the future? A look at where we see multi-device engagement heading in the coming future.

Adapting to a Multi-Device World: A Utility Company's Perspective

Brian Graves

How To Optimize Your Email Workflow - TEDC13 Boston

Brian Graves

How to Optimize Your Email Workflow - TEDC13 London

Brian Graves

10 Essentials for Gamestorming

Brian Graves

More from Brian Graves (9)

Using Tomorrow's CSS Today

Using Tomorrow's CSS Today - TEDC15

Sweating the Small Stuff

Winning the Design Battle on Every Screen

Adapting to a Multi-Device World: A Utility Company's Perspective

How To Optimize Your Email Workflow - TEDC13 Boston

How to Optimize Your Email Workflow - TEDC13 London

10 Essentials for Gamestorming

Recently uploaded

Real Time Object Detection Using Open CV

Khem

Data Cloud, More than a CDP by Matt Robison

Anna Loughnan Colquhoun

GenAI Risks & Security Meetup 01052024.pdf

lior mazor

As privacy and data protection regulations evolve rapidly, organizations operating in multiple jurisdictions face mounting challenges to ensure compliance and safeguard customer data. With state-specific privacy laws coming up in multiple states this year, it is essential to understand what their unique data protection regulations will require clearly. How will data privacy evolve in the US in 2024? How to stay compliant? Our panellists will guide you through the intricacies of these states' specific data privacy laws, clarifying complex legal frameworks and compliance requirements. This webinar will review: - The essential aspects of each state's privacy landscape and the latest updates - Common compliance challenges faced by organizations operating in multiple states and best practices to achieve regulatory adherence - Valuable insights into potential changes to existing regulations and prepare your organization for the evolving landscape

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

TrustArc

Building Digital Trust in a Digital Economy Veronica Tan, Director - Cyber Security Agency of Singapore Apidays Singapore 2024: Connecting Customers, Business and Technology (April 17 & 18, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...

apidays

Abhishek Deb(1), Mr Abdul Kalam(2) M. Des (UX) , School of Design, DIT University , Dehradun. This paper explores the future potential of AI-enabled smartphone processors, aiming to investigate the advancements, capabilities, and implications of integrating artificial intelligence (AI) into smartphone technology. The research study goals consist of evaluating the development of AI in mobile phone processors, analyzing the existing state as well as abilities of AI-enabled cpus determining future patterns as well as chances together with reviewing obstacles as well as factors to consider for more growth.

Exploring the Future Potential of AI-Enabled Smartphone Processors

debabhi2

This presentations targets students or working professionals. You may know Google for search, YouTube, Android, Chrome, and Gmail, but did you know Google has many developer tools, platforms & APIs? This comprehensive yet still high-level overview outlines the most impactful tools for where to run your code, store & analyze your data. It will also inspire you as to what's possible. This talk is 50 minutes in length.

Powerful Google developer tools for immediate impact! (2023-24 C)

wesley chun

The 7 Things I Know About Cyber Security After 25 Years | April 2024

Rafal Los

A Principled Technologies deployment guide Conclusion Deploying VMware Cloud Foundation 5.1 on next gen Dell PowerEdge servers brings together critical virtualization capabilities and high-performing hardware infrastructure. Relying on our hands-on experience, this deployment guide offers a comprehensive roadmap that can guide your organization through the seamless integration of advanced VMware cloud solutions with the performance and reliability of Dell PowerEdge servers. In addition to the deployment efficiency, the Cloud Foundation 5.1 and PowerEdge solution delivered strong performance while running a MySQL database workload. By leveraging VMware Cloud Foundation 5.1 and PowerEdge servers, you could help your organization embrace cloud computing with confidence, potentially unlocking a new level of agility, scalability, and efficiency in your data center operations.

Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...

Principled Technologies

Boost Fertility New Invention Ups Success Rates.pdf

sudhanshuwaghmare1

Effective data discovery is crucial for maintaining compliance and mitigating risks in today's rapidly evolving privacy landscape. However, traditional manual approaches often struggle to keep pace with the growing volume and complexity of data. Join us for an insightful webinar where industry leaders from TrustArc and Privya will share their expertise on leveraging AI-powered solutions to revolutionize data discovery. You'll learn how to: - Effortlessly maintain a comprehensive, up-to-date data inventory - Harness code scanning insights to gain complete visibility into data flows leveraging the advantages of code scanning over DB scanning - Simplify compliance by leveraging Privya's integration with TrustArc - Implement proven strategies to mitigate third-party risks Our panel of experts will discuss real-world case studies and share practical strategies for overcoming common data discovery challenges. They'll also explore the latest trends and innovations in AI-driven data management, and how these technologies can help organizations stay ahead of the curve in an ever-changing privacy landscape.

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery

TrustArc

2024: Domino Containers - The Next Step. News from the Domino Container commu...

Martijn de Jong

Webinar Recording: https://www.panagenda.com/webinars/why-teams-call-analytics-is-critical-to-your-entire-business Nothing is as frustrating and noticeable as being in an important call and being unable to see or hear the other person. Not surprising then, that issues with Teams calls are among the most common problems users call their helpdesk for. Having in depth insight into everything relevant going on at the user’s device, local network, ISP and Microsoft itself during the call is crucial for good Microsoft Teams Call quality support. To ensure a quick and adequate solution and to ensure your users get the most out of their Microsoft 365. But did you know that ‘bad calls’ are also an excellent indicator of other problems arising? Precisely because it is so noticeable!? Like the canary in the mine, bad calls can be early indicators of problems. Problems that might otherwise not have been noticed for a while but can have a big impact on productivity and satisfaction. Join this session by Christoph Adler to learn how true Microsoft Teams call quality analytics helped other organizations troubleshoot bad calls and identify and fix problems that impacted Teams calls or the use of Microsoft365 in general. See what it can do to keep your users happy and productive! In this session we will cover - Why CQD data alone is not enough to troubleshoot call problems - The importance of attributing call problems to the right call participant - What call quality analytics can do to help you quickly find, fix-, and prevent problems - Why having retrospective detailed insights matters - Real life examples of how others have used Microsoft Teams call quality monitoring to problem shoot problems with their ISP, network, device health and more.

Why Teams call analytics are critical to your entire business

panagenda

AWS Community Day CPH - Three problems of Terraform

Andrey Devyatkin

🐬 The future of MySQL is Postgres 🐘

RTylerCroy

Discord is a free app offering voice, video, and text chat functionalities, primarily catering to the gaming community. It serves as a hub for users to create and join servers tailored to their interests. Discord’s ecosystem comprises servers, each functioning as a distinct online community with its own channels dedicated to specific topics or activities. Users can engage in text-based discussions, voice calls, or video chats within these channels. Understanding Discord Servers Discord servers are virtual spaces where users congregate to interact, share content, and build communities. Servers may revolve around gaming, hobbies, interests, or fandoms, providing a platform for like-minded individuals to connect. Communication Features Discord offers a range of communication tools, including text channels for messaging, voice channels for real-time audio conversations, and video channels for face-to-face interactions. These features facilitate seamless communication and collaboration. What Does NSFW Mean? The acronym NSFW stands for “Not Safe For Work,” indicating content that may be inappropriate for professional or public settings. NSFW Content NSFW content encompasses material that is sexually explicit, violent, or otherwise graphic in nature. It often includes nudity, profanity, or depictions of sensitive topics.

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

UK Journal

The presentation explores the development and application of artificial intelligence (AI) from its inception to its current status in the modern world. The term "artificial intelligence" was first coined by John McCarthy in 1956 to describe efforts to develop computer programs capable of performing tasks that typically require human intelligence. This concept was first introduced at a conference held at Dartmouth College, where programs demonstrated capabilities such as playing chess, proving theorems, and interpreting texts. In the early stages, Alan Turing contributed to the field by defining intelligence as the ability of a being to respond to certain questions intelligently, proposing what is now known as the Turing Test to evaluate the presence of intelligent behavior in machines. As the decades progressed, AI evolved significantly. The 1980s focused on machine learning, teaching computers to learn from data, leading to the development of models that could improve their performance based on their experiences. The 1990s and 2000s saw further advances in algorithms and computational power, which allowed for more sophisticated data analysis techniques, including data mining. By the 2010s, the proliferation of big data and the refinement of deep learning techniques enabled AI to become mainstream. Notable milestones included the success of Google's AlphaGo and advancements in autonomous vehicles by companies like Tesla and Waymo. A major theme of the presentation is the application of generative AI, which has been used for tasks such as natural language text generation, translation, and question answering. Generative AI uses large datasets to train models that can then produce new, coherent pieces of text or other media. The presentation also discusses the ethical implications and the need for regulation in AI, highlighting issues such as privacy, bias, and the potential for misuse. These concerns have prompted calls for comprehensive regulations to ensure the safe and equitable use of AI technologies. Artificial intelligence has also played a significant role in healthcare, particularly highlighted during the COVID-19 pandemic, where it was used in drug discovery, vaccine development, and analyzing the spread of the virus. The capabilities of AI in healthcare are vast, ranging from medical diagnostics to personalized medicine, demonstrating the technology's potential to revolutionize fields beyond just technical or consumer applications. In conclusion, AI continues to be a rapidly evolving field with significant implications for various aspects of society. The development from theoretical concepts to real-world applications illustrates both the potential benefits and the challenges that come with integrating advanced technologies into everyday life. The ongoing discussion about AI ethics and regulation underscores the importance of managing these technologies responsibly to maximize their their benefits while minimizing potential harms.

Artificial Intelligence: Facts and Myths

Joaquim Jorge

presentation ICT roal in 21st century education

jfdjdjcjdnsjd

Tata AIG General Insurance Company - Insurer Innovation Award 2024

The Digital Insurer

The Good, the Bad and the Governed - Why is governance a dirty word? David O'Neill, Chief Operating Officer - APIContext Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...

apidays

Recently uploaded (20)

Real Time Object Detection Using Open CV

Data Cloud, More than a CDP by Matt Robison

GenAI Risks & Security Meetup 01052024.pdf

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...

Exploring the Future Potential of AI-Enabled Smartphone Processors

Powerful Google developer tools for immediate impact! (2023-24 C)

The 7 Things I Know About Cyber Security After 25 Years | April 2024

Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...

Boost Fertility New Invention Ups Success Rates.pdf

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery

2024: Domino Containers - The Next Step. News from the Domino Container commu...

Why Teams call analytics are critical to your entire business

AWS Community Day CPH - Three problems of Terraform

🐬 The future of MySQL is Postgres 🐘

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

Artificial Intelligence: Facts and Myths

presentation ICT roal in 21st century education

Tata AIG General Insurance Company - Insurer Innovation Award 2024

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...

Coding for Responsive Email

1. Coding For Responsive Email

2. Provide optimal experience regardless of device Easy reading and interactions without scrolling or zooming Fluid Layouts Fluid Images Breakpoint Changes (Media Queries) What is Responsive Design? Coding Responsive Emails

5. Source: Campaign Monitor http://www.campaignmonitor.com/guides/mobile/ Responsive Support

6. Why Use Responsive Design?

7. Source: Litmus Email client usage worldwide, collected from 251 million email opens.

8. some of our major retail brands are seeing 60%+ of their subscribers viewing on a mobile device

9. Source: Litmus Email client usage worldwide, collected from 251 million email opens.

10. Source: Litmus Email client usage worldwide, collected from 251 million email opens.

11.

12.

13.

14. More than Metrics “It’s more than just metrics. The experience on mobile matters. Responsive design is a long term investment in customer experience.” - Justine Jordan Marketing Director, Litmus

15. Deckers 10% increase in CTR 9% increase in mobile opens

16. Crocs 15.63% lift in iPhone ‘read’ engagement 7.66% lift in CTOR

17. Building Responsive Emails

18. Code like it’s 1999

19. Code like it’s 1999 & 2013

20.

21.

22.

23.

24.

25.

26.

27.

28.

29. Media Queries: Web vs Email

30. min-width vs max-width

31. Attribute Selectors

32. !important

33. Common Responsive Design Patterns

34. Scaling Images

35. Column Drop

36. Source Order Shift

37.

38. http://www.degdigital.com/blog/content- choreography-in-responsive-email/ http://brianleegraves.com/ResponsivePatterns Patterns: More In Depth Coding Responsive Emails

39. Template Strategies & Content Areas

40. Stop thinking in terms of “pages” and start thinking instead of “packages”

41. Content Content Packages Header Hero Content Secondary Story Products Footer

42.

43. Saved Content Areas

44. Feature – several styles All Image – flexible, variable height Articles – primary, secondary Product – feature, upsells, 2-3-4 across Styled Text Areas Commonly used Content Areas Coding Responsive Emails

45. Templating Engine • Automated separation of Templates and Content Areas • The Power of Preprocessors (SASS) • Easier Iteration • https://github.com/degdigital/MiddlemanEmailTemplate

46. Testing

47. In Browser AutomatedDevice

48. Non scaling images Content Overflowing Containers Padding on 100% width tables CMS Business Rules & Appended Content Gotchas Coding Responsive Emails

49. Resources

50. More Resources Degdigital.com/blog BrianLeeGraves.com/ResponsivePatterns Blog.exacttarget.com/blog/email-design-4 Zurb: Responsive Email Templates Emailclientmarketshare.com CampaignMonitor.com/guides/mobile EmailDesignReview.com Blog.mailchimp.com https://litmus.com/blog/our-favorite- responsive-and-mobile-email-resources @briangraves @emailgirl – Cara Olson @degdigital - DEG @krudz – Kristina Huffman @meladorri – Justine Jordan @iamelliot – Elliot Ross @alexcwilliams – Alex Williams @litmusapp - Litmus @mparkerbyrd – Matt Byrd @rodriguezcommaj – Jason Rodriguez @moonstrips – Nicole Merlin TwitterBlogs, Stats, & Patterns

Editor's Notes

600 px, multi-column email becomes 320px, single column
• Fluid grids• Fluid images• Media queries
Opens on mobile devices consistently averaging 42%Mobile opens have increased 330% in the last 2 yearsMobile overtook desktop & webmail in November 2012
Averaging 43% of opens on mobile devices330% increase of the last 2 yearsMobile surpassed desktop and webmail as the top environment in November 2012
• Fluid grids• Fluid images• Media queries
600 or 620 no longer works, we have to contend with massive
But even still
1999 for webmail and outlook clients, 2013 for mobile and basically anything AppleStill HTML tables for layoutInline Styles means:Desktop down instead of mobile first
Think through elements will break downgood time to add classesAside: real content vs all images
Think through elements will break downgood time to add classesAside: real content vs all images
Packages of contentKaren McGrane: Structured content: discrete content chunks can be combined in different ways for different platforms.
ChunkingStory Types, Upsells, Cross Sells, Banners, Defined Hero Content

Coding for Responsive Email

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Coding for Responsive Email

Similar to Coding for Responsive Email (20)

More from Brian Graves

More from Brian Graves (9)

Recently uploaded

Recently uploaded (20)

Coding for Responsive Email

Editor's Notes