Skip to main content

Modifying a layout block for the mobile version

By Optimizing your Template for Mobile

To make your design more suitable for mobile users, you may want to make some changes to the layout. You can do this in the Smartphone view without affecting your main design.

To get started, head to the Smartphone view:

When you first make changes to your mobile design in the Smartphone view (for example, by resizing a layout block), a popup window will appear:

By clicking on "Separate", you will detach the mobile version of your design from the desktop version. Any changes you go on to make will only be applied to the mobile version. This will be indicated on layout blocks by the "Mobile Modified" label:

If you decide you no longer want to have two separate designs, you can revert your mobile design back to the original by going to "Edit" > "Reset design to desktop version." This will undo all of the changes you have made in the mobile version.

A Quick Tour of Mail Designer 365

Advanced Design Techniques

Background

Blend Modes

Campaigns

Configuring Text Styles

Creative Tools

Editing Text

Graphics and Other Objects

HTML Export

Image Areas

Images

Layout Blocks

Links and Buttons

Optimizing your Template for Mobile

Other Sharing Options

Plain Text

Preparing your Design for Sending

Preview your Design

Tables

TextScout

Using Retina Images with your Design

Creating "mobile only" text styles

By Configuring Text Styles, Optimizing your Template for Mobile

Mobile only styles offer you a simpler way to edit your smartphone content without having to detach your mobile layout blocks from your main design.

To get started, head to the Smartphone view and make an adjustment to any text block. In this example, we will reduce the line height to save space for mobile users:

You will now see your mobile only change appear in a blue box in the Style menu:

Any further changes you make to this style for mobile will also appear in the blue box:

If you head back over to the main Desktop view, you will notice that the blue box is still in the Style menu to remind you, and anyone else collaborating on the design, of the changes you've made.

To reset the mobile only changes you can click the undo arrow in the top corner of the blue box. This will default your text style back to the desktop version across both designs.

Important: Mobile Style Adjustments are not supported by non-Gmail addresses in the Gmail mobile app – check your design using the new Gmail (IMAP) preview. You can access this by clicking on "Check Preview", which opens a device preview of the Gmail app:

A Quick Tour of Mail Designer 365

Advanced Design Techniques

Background

Blend Modes

Campaigns

Configuring Text Styles

Creative Tools

Editing Text

Graphics and Other Objects

HTML Export

Image Areas

Images

Layout Blocks

Links and Buttons

Optimizing your Template for Mobile

Other Sharing Options

Plain Text

Preparing your Design for Sending

Preview your Design

Tables

TextScout

Using Retina Images with your Design

Working with text and links

By Optimizing your Template for Mobile

How will the device version affect my text and links?

Working with text and links is the same in the desktop and mobile editing mode. If a layout block in the mobile version is not detached from the desktop version, then all changes you make will apply to both. If you make changes in the desktop version, it will also apply to the mobile version and vice versa. However, making independent changes is easy! Just detach the two versions and then edit your text and links.

 

 

A Quick Tour of Mail Designer 365

Advanced Design Techniques

Background

Blend Modes

Campaigns

Configuring Text Styles

Creative Tools

Editing Text

Graphics and Other Objects

HTML Export

Image Areas

Images

Layout Blocks

Links and Buttons

Optimizing your Template for Mobile

Other Sharing Options

Plain Text

Preparing your Design for Sending

Preview your Design

Tables

TextScout

Using Retina Images with your Design

Hiding layout blocks in the smartphone view

By Optimizing your Template for Mobile

In order to make the mobile version of your design more refined, you may want to set certain layout blocks to only be visible in the Desktop view.

To get started, head to the Smartphone view:

In order to hide a layout block, click the little eye icon on the left border of the block:

The layout block will then disappear. In its place, you will see a little flag with an eye symbol. The number next to the eye symbol stands for the number of layout blocks that are hidden for the mobile version:

If you hide multiple successive layout blocks for the mobile version, then the number in the arrow flag will increase:

When you switch back to the Desktop view, you will see a ”DESKTOP ONLY” flag for the layout blocks that are now hidden.

 

 

A Quick Tour of Mail Designer 365

Advanced Design Techniques

Background

Blend Modes

Campaigns

Configuring Text Styles

Creative Tools

Editing Text

Graphics and Other Objects

HTML Export

Image Areas

Images

Layout Blocks

Links and Buttons

Optimizing your Template for Mobile

Other Sharing Options

Plain Text

Preparing your Design for Sending

Preview your Design

Tables

TextScout

Using Retina Images with your Design

Adding layout blocks for the mobile version

By Optimizing your Template for Mobile

Sometimes you may want to add exclusive content for mobile users. In Mail Designer 365 you can make changes to your design so that certain layout blocks will only be visible in the mobile version.

To get started, switch your design to the Smartphone view:

Accessing layout blocks here works the same as in the Desktop view. Simply go to "Contents" > "Layout Blocks" and choose your block:

After you've dragged a block into your mobile design, you will notice the layout block is now labelled ”MOBILE ONLY.” This indicates that this particular layout block will only be displayed if the recipient is reading your newsletter on a smartphone or mobile device and won't be visible in the Desktop view.

 

A Quick Tour of Mail Designer 365

Advanced Design Techniques

Background

Blend Modes

Campaigns

Configuring Text Styles

Creative Tools

Editing Text

Graphics and Other Objects

HTML Export

Image Areas

Images

Layout Blocks

Links and Buttons

Optimizing your Template for Mobile

Other Sharing Options

Plain Text

Preparing your Design for Sending

Preview your Design

Tables

TextScout

Using Retina Images with your Design

Privacy Settings / Datenschutz-Einstellungen