Set different font styles for mobiles to ensure readability and visual appeal:

• Use a smaller font size to fit content on smaller screens,
• Use a safe font family for better readability, and
• Adjust font color to ensure good contrast in diverse lighting conditions or for dark-mode settings.

Email on desktops	Email on mobile devices

To change your font size, color, or family for mobiles, you will need to set the font styles for both mobile and desktop: 

1. Design your email. 
2. Access the developer mode. 
3. Search for the content for which you want to change the font styles. Your content settings are just above it in the code. 
4. Copy the codes corresponding to the type of style you want to change on mobile devices: 
   • Text font: font-family: 'font family name'
   • Text size: font-size: SIZEpx
   • Text color: color: 'HEX' 
5. Under the layout string and 320px value, paste the codes you copied above to edit the mobile font styles and replace their value with the one you need:
   
   • font-family: 'font family name' where font family name is the name of the font as it appears in the list of available fonts in the editor. 
   • font-size: SIZEpx where SIZE is the size you want to give to your content in px. 
   • color: 'HEX' where HEX is the HEX code corresponding to the color you want to give your content. 
     
6. From the content string, in our example 3 tips to practice safe yoga, remove any style, span, or class attributes between the single quotes '' to only keep your content.
   ➡️  For example

   If your content string is: 

   content: '<h2 class="default-heading2"><span style="color:#116b6b;">Our 3 tips to practice safe yoga 🧘</span></h2>'

   Remove any style or class attributes to only keep your content, such as: 

   content: 'Our 3 tips to practice safe yoga 🧘'
7. Switch between the desktop  (⇧ + D) and mobile (⇧ + M) modes using the corresponding icons at the top-right of your email editor. This will allow you to ensure that your font styles change according to the type of device on which they are read:
   
8. Make other changes in developer mode if necessary.  
9. Click the cross icon  to close the developer mode.

Congratulations! Your font styles are now changing depending on the device on which they are read. 

Gmail annotations allow Gmail users to view and engage with your promotions directly from their inbox by clicking the annotated image or text without opening the email. These annotations allow messages received in Gmail's Promotions tab to stand out by adding features such as:

To display Gmail annotations to your recipients: 

1. Design your email. 
2. Access the developer mode. 
3. Copy the code from the tab below corresponding to the type of annotation you want to display to your Gmail recipients: 
   
   Deal annotations Product carousels Single image preview

   Code to copy

   Values to replace

   promo: - @context: 'http://schema.org/' @type: DiscountOffer description: DESCRIPTION discountCode: DISCOUNT_CODE availabilityStarts: START_DATE_TIME availabilityEnds: END_DATE_TIME

   (Optional) DESCRIPTION is the text that displays with the deal badge, such as 20% off.  (Optional) DISCOUNT_CODE is the discount or promotion code for the offer, such as 20TODAY.  (Optional) START_DATE_TIME is the date and time when the offer begins in ISO 8601 format, such as 2023-09-25T18:44:37-07:00. (Optional) END_DATE_TIME is the end date and time of the promotion in ISO 8601 format, such as 2023-09-25T18:44:37-07:00.

   ❗️ Important

   For each image in your product carousel, add a PromotionCard type. 

   Code to copy

   Values to replace

   promo: - @context: 'http://schema.org/' @type: PromotionCard image: IMAGE_URL1 url: PROMO_URL1 headline: HEADLINE1 price: PRICE1 priceCurrency: PRICE_CURRENCY1 discountValue: DISCOUNT_VALUE1 position: POSITION - context: 'http://schema.org/' type: PromotionCard image: IMAGE_URL2 url: PROMO_URL2 headline: HEADLINE2 price: PRICE2 priceCurrency: PRICE_CURRENCY2 discountValue: DISCOUNT_VALUE2 position: POSITION

   IMAGE_URL is the URL to your image in PNG or JPEG format, such as https://www.example.com/image.png. The supported aspect ratios are 4:5, 1:1, 1.91:1. For product carousels, each image must have a unique URL and use the same aspect ratio. PROMO_URL is the URL for the promotion. When users click on the image from the Promotions tab, they visit this URL. (Optional)HEADLINE is 1 to 2-line description of the promotion that displays under the preview image. (Optional) PRICE is the price of the promotion. (Optional) PRICE_CURRENCY is the currency of the price in 3-letter ISO 4217 format, such as USD. Determines the currency symbol displayed with the price. (Optional) DISCOUNT_VALUE is the amount subtracted from the price to display an adjusted price. The adjusted price is displayed next to the original price. For example, if the discountValue is 25, the price is 100, and the priceCurrency is USD, the adjusted price displays as $75. (Optional) POSITION is the position of the card in the carousel.

   Code to copy

   Values to replace

   promo: - @context: 'http://schema.org/' @type: PromotionCard image: IMAGE_URL1 url: PROMO_URL1 headline: HEADLINE1 price: PRICE1 priceCurrency: PRICE_CURRENCY1 discountValue: DISCOUNT_VALUE1

   IMAGE_URL is the URL to your image in PNG or JPEG format, such as https://www.example.com/image.png. The supported aspect ratios are 4:5, 1:1, 1.91:1. For product carousels, each image must have a unique URL and use the same aspect ratio. PROMO_URL is the URL for the promotion. When users click on the image from the Promotions tab, they visit this URL. (Optional) HEADLINE is 1 to 2-line description of the promotion that displays under the preview image. (Optional) PRICE is the price of the promotion. (Optional) PRICE_CURRENCY is the currency of the price in 3-letter ISO 4217 format, such as USD. Determines the currency symbol displayed with the price. (Optional) DISCOUNT_VALUE is the amount subtracted from the price to display an adjusted price. The adjusted price is displayed next to the original price. For example, if the discountValue is 25, the price is 100, and the priceCurrency is USD, the adjusted price displays as $75.

4. At the top of the developer mode, under the fonts value and at the first level, paste the code you copied from one of the tabs above.
5. Make other changes in developer mode if necessary.
6. Click the cross icon to close the developer mode.
7. (Optional) Send a test email to a test email address using Gmail and with the Promotions tab active, to ensure the Gmail annotation displays correctly.

Alternatively, you can use our HTML editor to display Gmail annotations. To learn more, check Google's official documentation. 

Changing the color of your bullets or numbers can be useful to emphasize key points, group ideas, or match your branding. Below is an example of what a colored bulleted list looks like: 

To change the color of your bulleted and numbered lists:

1. Create a list of items with bullets or numbers. 
2. Access the developer mode. 
3. Search for the list you've just created in the developer mode and spot the content value corresponding to it. Your content settings are just above it in the code. 
4. Under the default value, paste the following code where HEX is the HEX code corresponding to the color you want to give your list: color: '#HEX'
   
5. Check your email design on the right of your screen to see if your list of items has changed color. Your bullets or numbers and associated text should appear in the color that corresponds to the HEX code you entered in the developper mode. 
6. Make other changes in developer mode if necessary. 
7. Click the cross icon to close the developer mode.
8. To change the color of your text while keeping the color of your bullets or numbers:
   1. Select the text you want to change the color of. 
   2. From the toolbar above your text, click the Font color icon.
      
   3. In the HEX field, paste the HEX color code you want to give your text. In our example, #
      3B3F44. 

Congratulations! You have changed the color of your bullet points or numbers. 

Non-breaking spaces and hyphens ensure proper formatting in email designs by preventing undesirable line breaks, such as a compound name or item price being split, and maintaining readability across devices. Check our example below to understand the importance of non-breaking spaces and hyphens:

Without non-breaking characters	With non-breaking characters

To insert non-breaking spaces and hyphens into your email design: 

1. Design your email. 
2. Access the developer mode. 
3. Search for the content to which you want to add a non-breaking space or hyphen. Your content settings are just above it in the code. 
4. Copy the code corresponding to the type of non-breaking character you want to include:
   • Non-breaking space:  
   • Non-breaking hyphen: ‑
5. Paste the code copied above in place of the space or hyphen you want to make non-breaking.
   
6. Check your email design on the right of your screen to see if your list of items has changed color. 
7. Make other changes in developer mode if necessary. 
8. Click the cross icon to close the developer mode.

Congratulations! You have added non-breaking characters to your email design. 

Outlook desktop versions using the Microsoft Word rendering engine have limited CSS support (e.g., Outlook 2007, 2010, 2013, 2016, and Office 365 desktop versions). Background images and text formatting often display incorrectly, showing white backgrounds instead of images and misaligned text due to poor handling of properties like background-image and line-height.

To ensure background images and text blocks render properly in Outlook, use the following workaround:

1. Design your email. 
2. Retrieve the height size in px of your background image. In our example, 265px. 
3. Access the developer mode. 
4. Click the tab corresponding to the rendering issue you want to solve:
   
   Background image Text block

   ❗️ Important

   This workaround only works for background images applied on body width, not full width, and under a grid-row value. Note that a grid-row value should not contain any button.

   1. Search for the grid-row value corresponding to where your background-image is displayed.
   2. Under the background-image value, enter height: followed by the height size in px of your background image. In our example, we will enter height: 265px.
      

   1. Search for the content for which you want to fix display issues. Search for the line-height value corresponding to where your text is displayed. If there's no line-height value for this content, add one.
   2. Replace the default size of your line-height value or enter a size in px as it is the only values that are supported by Outlook email clients. In our example, we will enter 30px.
      
5. Make other changes in developer mode if necessary. 
6. Click the cross icon to close the developer mode.
7. (Optional) Send a test email to a test email address using one of the Outlook versions that do not support background images to ensure it displays correctly.

Add alt-text to your social media icons in your email designs to improve accessibility for visually impaired people using screen readers, enhance user experience, and ensure context is clear if images don’t load.

To add alt-text into your email design: 

1. Design your email and include your social media icons.
2. Access the developer mode. 
3. Search for the type: social-media values. There should be one for each social media icon. Your content settings are just above it in the code. 
4. Under each type: social-media value, search for the alt: null value.
5. Replace null with your alt text. In our example, our website icon alt text will be The Green Yoga website, and our Instagram icon alt text will be Instagram account. 
   
6. Make other changes in developer mode if necessary.  
7. Click the cross icon to close the developer mode.
8. (Optional) Send a test email to check that your alt-text is displayed correctly for each of your media icons.

As opposed to what you may have thought, you cannot directly type HTML in the Developer mode. Instead, you should use YAML which is an easy representation for a tree structure similar to JSON.

With this language, you will use abstract definitions created by our team to make developing templates easy and to ensure the HTML generated and sent to the customers is managed by our tools. This allows for the best quality and wide support for email clients.

As you might know, email clients are not all the same and it can be difficult to create professional-looking newsletters that work everywhere, including on mobile phones and in Outlook.

This is also a standard work in progress as new email clients come and old clients change the way they render emails.

This is why we are working hard to make sure your emails will work as expected everywhere, with minimal effort on your side. We have created an abstract high-level way for you to define your HTML and we do the magic behind the scenes. 

For 99% of the use cases, you will rarely find any limitations with our templating language since we work constantly on updating it, but of course, there might be a few quirks or client-specific features that we may have missed. This opens up a new world of possibilities beyond what we offer in the interface. Discover our most frequent developer mode use cases for advanced email customization!