Web and email differ significantly. Web browsers support media queries, which provide a consistent and reliable way to adapt content to different screen sizes.

Email clients, however, are much more diverse and inconsistent in their support for various methods. We outline some popular techniques below, but this is a constantly evolving field, so it's crucial to stay updated on the latest developments.

The approach you use depends on whether the content is displayed on the web or in email.

There's really only one method you need to know to support multiple screen sizes on a web page: Media queries.

Media queries define breakpoints based on screen size, allowing layout and styling to change as the screen size changes.

You can include the media queries directly in the SmartBlock layout, using a <style> tag.

Use unique classes and IDs, or selector paths to avoid affecting other elements on the page.
​

As a SmartBlock appears in the same way as any other element on a web page, it can also inherit any of the styles currently used on the site. You can therefore add classes or IDs to the elements in the SmartBlock layout so that it picks up the styles you already use.

For example, a framework such as Bootstrap has classes to control column widths and numbers based on its inbuilt media query breakpoints. It also provides classes to show or hide content based on the screen size/breakpoint.

Adding those classes to the elements in a SmartBlock layout means they automatically inherit whatever properties are in the style declaration, meaning the SmartBlock content replicates what the rest of your site does.

Due to the numerous differences and wide array of support in email clients, there are many ways to make your content resize or reflow to support multiple screen sizes in an email.

The following methods come with their certain benefits and drawbacks.

The same email is shown on mobile and desktop and is created to work well in both without any code to alter it.

Implementing a design that displays the same content across all screen sizes might seem simple, but it presents several challenges and limitations. For example, you often need to restrict yourself to a single-column layout.

Using elements that resize, because they’re based on percentages rather than fixed sizes, or reflow to fit different screen sizes.

This method relies on the screen itself to control the layout and sizing. You don't get a lot of finite control, but it doesn’t require code in the head of the email, which some email clients remove, so tends to work well across all email clients.

This relies on media queries in a similar way to web design.

Through the use of media queries defined in the head of the email, this approach allows a lot more specific control for each piece of content at various screen sizes.

The main drawback is complexity and limited support, as not all email clients support media queries Most popular mobile clients do, though.

For scalable designs, enure the content you’re including is the correct size. Most of our templates include an option on the user interface properties to let you set this.

This approach can be problematic when images contain embedded text. Although the image can be made to scale, reducing it in size typically means that the text within won't be readable on smaller screens. To avoid this, ensure any text within images remains readable at smaller sizes, or move text into HTML instead.

This is the approach used by most Fresh Relevance email templates.

Outlook-specific table code is normally used to make sure it works well in that client, while everywhere else elements that sit inline are used, which are then pushed onto their own line once the screen size is reduced.

This method doesn't rely on code elsewhere in the email to control how it works, so the generated Slot code should include everything that's required.

If you're using this approach, typically your email already contains a style declarations in the head, and uses a number of different classes to handle the common requirements.

When building your SmartBlock layout, you can include these classes so they form part of the final Slot code. Then, when you paste the code into your email it simply inherits the styling outlined.

For example, adding a class to make a banner image 100% wide on mobile devices while being a fixed 500 pixels on a desktop email client:

You need to look at the code in the email to figure out the names of the classes you should use to control each element, and you might need to add some for your Slot specifically.

Rather than simply showing the same image scaled to different screen widths, you might want to completely swap the image shown, so that you can create alternatives to target different device sizes.

To do this you would need to either:

From an implementation perspective, the two methods are similar. The only difference is that in method one you would add each SmartBlock to its own Slot, while in method two, you would create one SmartBlock but then add size=mobile or size=desktop as a query string parameter to the dynamic image URL.

You then control which version displays using styles defined in the email header: