Events  Deals  Jobs  NFT NYC 2024 
    Sign in  
 
 
Mon, Dec 05, 2016 @ 06:00 PM   $650   Noble Desktop, 594 Broadway, Ste 1202
 
     
 
 
              

      
 
Sign up for our awesome New York
Tech Events weekly email newsletter.
   
LOCATION
EVENT DETAILS
Its official: mobile email is now in the lead, surpassing webmail and desktop client usage by a large margin. In this class youll learn best practices for executing a responsive email design that will ensure an excellent user experience for desktop, webmail, and mobile users. Well show you how easy it is to set up a single-column email with a fluid layout that will work across devices and email clients. Well also show you how to create a more complex newsletter that, with the help of media queries, will go from a 2-column layout to a single column on most mobile devices.

This advanced level course is designed for people who are already familiar with web development and have prior experience coding HTML email. If you have some experience with HTML and CSS but have never coded an HTML email before, we recommend you take our HTML Email course to learn the basics before you take this class.

What Youll Learn
Section 1
Simple Responsive Layout: Part I
Topics
Coding the Outer Table
Placing the Header Image
Nesting an Inner Table
Adding the Text-Based Content
Fixing a Gap Below Images
Simple Responsive Layout: Part II
Topics
Styling the Content Using Embedded Styles
Managing Bulleted Lists
Making the Email Responsive
Introduction to Media Queries
2-Column Layout: Media Queries
Topics
Coding the Nested Table Structure
Writing Styles for Desktop and Mobile Versions
Media Queries for Fine Tuning Mobile Responsive Design
Modifying Media Queries

Section 2
Mobile-Friendly Column Layout
Topics
Coding the Table for the 2-Column Content
Converting the Mobile Layout to 1-Column
Adding the Other Date Listings
Refining the CSS for a Classier Look
Optimizing Images for Mobile
Topics
HTML Email Image Quality: A Balancing Act
Dealing with Hi-Res/Retina Images
Swapping the Banner on Mobile
Further Optimizing the Mobile Banner
Responsive Footer
Topics
Structuring the Footer Layout
Styling the Footer
Optimizing the Footer for Smaller Mobile Devices
Optimizing the Mobile Layout
Topics
Sizing Up Paragraph Text on Mobile
Removing Excess Margins on Mobile
Removing the Table Borders

Section 3
Best Practices: Preflight
Topics
Adding a Preheader to Entice Mobile Users
Inlining the Styles with MailChimps Inliner
Reviewing Email Client Results
Hybrid 2-Column Layout: Mobile-First Development
Topics
Normalizing Styles for Consistency
Wireframing the Email Structure
Structuring the Sidebar
Coding the Footer
Hybrid 2-Column Layout: Part II
Topics
Adding the Logo
Placing the Content
Adding a Preheader
Refining the Appearance with CSS
Hybrid 2-Column Layout: Responsive Techniques
Topics
Adding Desktop Widths and Styles
Coding Responsive Columns that Work on Gmail
Stacking Columns in Reverse Order

Section 4
Client-Specific Fixes
Topics
Adding Microsoft Conditional Statements
Fine-Tuning with Media Queries
Optimizing Font Sizes on Mobile
Adding CSS3 Support for Windows Phone
Progressive Enhancement
Topics
Using Border-Radius
Bulletproof Buttons
Adding Box Shadows
Embedding Google Fonts
Preflight and Testing
Topics
Removing Table Borders
Inlining the CSS
Sending Tests with PutsMail
 
 
 
 
© 2024 GarysGuide      About    Feedback    Press    Terms