Best Practices for HTML in Mobile Messaging

HTML in-app messages allow you to create rich, interactive content for your mobile app users. To ensure the best experience across all devices, follow these best practices.

HTML structure

Use the appropriate structure for your HTML:

Copy 
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <style>/* Your styles here */</style>
</head>
<body>
    <!-- Your content here -->
</body>
</html>

Required elements

Properly formatted HTML requires the following elements:

  • Modern DOCTYPE (<!DOCTYPE html>)
  • Viewport meta tag for mobile responsiveness
  • UTF-8 charset meta tag
  • Styles should be included in a <style> tag in the <head>

 

Best Practices

Mobile-first design

  • Use responsive units (%, vh, vw)
  • Set appropriate touch target sizes (min 44px)
  • Test on different screen sizes

Styling

  • Use system fonts for better performance:
    • font-family: -apple-system, system-ui, sans-serif;
  • Keep CSS simple and mobile-optimized
  • Use flexbox or grid for layouts
  • Avoid position: fixed or absolute when possible

Images

  • Always include alt text
  • Use responsive images:
    img {
    max-width: 100%;
    height: auto;
    }
  • Optimize image sizes for mobile
  • Use appropriate deep links for your app
  • Ensure touch targets are large enough
  • Include hover/active states

 

Limitations and Restrictions

Do not use

  • Email-specific markup (MSO conditionals, etc.)
  • External stylesheets or scripts
  • Complex table-based layouts
  • XML namespaces
  • Legacy HTML attributes (align, bgcolor, etc.)

Avoid

  • Large CSS files
  • Complex animations
  • Heavy JavaScript usage
  • External fonts

 

Example Template

Copy 
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <style>
        body {
            margin: 0;
            padding: 16px;
            font-family: -apple-system, system-ui, sans-serif;
        }
        .button {
            display: block;
            background: #ff7300;
            color: white;
            padding: 12px;
            border-radius: 8px;
            text-align: center;
            margin: 16px 0;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1>Welcome!</h1>
    <p>Your message here.</p>
    <a href="yourapp://action" class="button">Take Action</a>
</body>
</html>

 

Testing

Test your HTML message on:

  • Different iOS and Android devices
  • Various screen sizes
  • Both portrait and landscape orientations

Verify that:

  • All links work correctly
  • Images load properly
  • Content is readable
  • Buttons are easily tappable

 

Common Issues

Raw HTML showing

  • Make sure to use modern DOCTYPE
  • Remove any XML namespaces
  • Keep HTML structure simple

Layout problems

  • Always include viewport meta tag
  • Use responsive design principles
  • Test on multiple devices

Performance

  • Minimize CSS complexity
  • Optimize images
  • Avoid heavy scripts

 

Support

For questions or issues, click the blue Support button at the bottom of the screen.