Editing Designing mobile friendly emails

```mediawiki
'''Navigation:''' [[Main_Page]] > [[Email]] > [[Design]] > Designing mobile-friendly emails

== Designing Mobile-Friendly Emails ==

In today's digital age, a significant portion of subscribers access their emails on mobile devices. As a result, ensuring that your emails are mobile-friendly is no longer an option; it is a necessity. Designing mobile-friendly emails not only improves readability but also enhances user engagement and satisfaction. This article provides a comprehensive overview of best practices, configuration settings, and strategies for designing effective mobile-friendly emails using ActiveCampaign.

== How to Access This Feature ==

To access the features related to designing mobile-friendly emails, navigate to the '''Email Designer''' within your ActiveCampaign account. Depending on your plan, you can utilize various functionalities that allow optimizing emails for mobile viewing.

== Step-by-Step Instructions for Designing Mobile-Friendly Emails ==

1. **Enable Responsive Design**: 
   - The '''Responsive Design''' setting is activated by default for all campaigns. To confirm or adjust this:
     - Click on '''Global Settings''' located at the top right corner of the email designer.
     - Check the '''Responsive Design''' toggle in the general settings. If it’s off, simply click it to turn it on.

2. **Avoid Copying and Pasting Text**: 
   - When adding text to your email, avoid '''copying and pasting''' from external sources to prevent unwanted formatting. Instead, type directly into the text blocks, or use a plain-text editor before pasting it into your campaign.

3. **Optimize Column Order**: 
   - The order of your columns in the design determines their stacking order when viewed on mobile. Columns collapse from left to right. For best results, align your content in a logical sequence, allowing for an intuitive flow in mobile view.

4. **Maintain Email Width**: 
   - Keep your email’s width at or below '''650 pixels''' to ensure it fits well on mobile devices and does not introduce horizontal scrolling, which can hinder readability.

5. **Resize Images Appropriately**: 
   - Images should have a width between '''400 and 650 pixels'''. Any image uploaded outside this range may not display correctly on mobile devices. Make sure to check image dimensions using the Image Block options.

6. **Utilize ALT Text**: 
   - Always add '''ALT text''' to your images to provide context when images fail to load, ensuring accessibility for all users. This can be done in the image settings within the email designer.

7. **Use Image Blocks**: 
   - For optimal display, use '''Image Blocks''' instead of inserting images inline within text blocks. This practice prevents issues with image wrapping and clickability in different email clients.

8. **Manage White Space with Spacer Blocks**: 
   - Instead of padding, utilize the '''Spacer''' block to create white space and avoid narrow content issues on some mobile devices. You can set it to hide on mobile if needed.

9. **Hide Non-Essential Elements**: 
   - Use the '''Hide on Mobile Devices''' option to hide elements that may clutter the mobile experience. Enable this feature easily in the email design options.

10. **Test Your Email**: 
    - Before sending out your campaign, conduct thorough testing. Utilize the '''Desktop Preview''' and send test emails to various devices to see how they render. Consider using ActiveCampaign's compatibility preview feature for testing against multiple email clients.

== Configuration Options and Settings ==

- '''Responsive Design''': Ensures that your email adapts to different screen sizes.
- '''ALT text''': Text that appears in place of images for users who cannot view them.
- '''Spacer Block''': Used to create space within your email design.
- '''Hide on Mobile Devices''': Allows elements to be hidden when viewed on mobile screens.

== Best Practices and Tips ==

- Always start with a clear and concise subject line and preheader text to capture the recipient's attention.
- Test different layouts to find what works best for your audience.
- Ensure that all links are easily clickable on touch screens by giving them ample space.
- Monitor engagement metrics after campaigns to determine the effectiveness of your designs and make adjustments accordingly.

== Common Use Cases with Examples ==

1. **Promotional Campaigns**: Use bold images and clear calls-to-action that are easily tappable on mobile.
2. **Newsletters**: Arrange content in a single-column format to ensure fluid reading.
3. **Event Invitations**: Highlight essential details and RSVP buttons prominently for quick access.

== Troubleshooting Section ==

- **Issue with Images Not Scaling**: Ensure that images are within the recommended pixel range before uploading. Remember that inline images won't scale correctly on all platforms.
- **Poor Readability on Mobile**: Adjust the email width and ensure that the important elements are visible above the fold.

== Related Features Section ==

- [[Email Marketing]]
- [[Campaign Management]]
- [[Automation]]

== FAQ Section ==

=== 1. What is the best width for a mobile-friendly email? ===
The optimal width for a mobile-friendly email is no more than '''650 pixels'''.

=== 2. How can I add ALT text to my images? ===
You can add ALT text by selecting the image in the Email Designer and editing the '''Alternate text''' field in the Image Block options.

=== 3. Can I hide elements from mobile view? ===
Yes, use the '''Hide on Mobile Devices''' feature to keep non-essential elements invisible on mobile screens.

=== 4. What should I do if my email looks different on various devices? ===
Always send test emails and use the '''Desktop Preview''' to check how your email appears across multiple platforms.

=== 5. Why should I avoid copying text from external sources? ===
Copying text can lead to unwanted formatting that negatively impacts the display of your email; always use plain-text methods or type directly in the text blocks.

=== 6. How do columns collapse in mobile view? ===
Columns collapse from left to right, following the order in which they are arranged in the design.

=== 7. What types of images should I avoid using? ===
Avoid using images smaller than '''400 pixels''' as they will not display optimally on mobile devices.

By following these guidelines and best practices, you'll be able to design engaging, mobile-friendly emails that resonate with your audience and drive higher engagement rates.
```