There are big differences between these two mediums. Web browsers offer a consistent way to adapt your content to the screen size in the form of media queries. These work in all modern web browsers and so offer a simple method that is guaranteed to work.

Email clients, on the other hand, are far more diverse and much less consistent in what methods they support. We outline some popular methods below, but this is a constantly shifting arena, so it's always worth making sure you’re up-to-date on the latest developments.

Where you want to use your content dictates the methods you need to use to make it responsive.

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

Media queries allow you to create rules called breakpoints based on screen size, allowing you to control what happens to the content when the screen size changes.

You can include the media queries within the SmartBlock layout itself, using a <style> tag - an internal stylesheet.

We recommend using unique classes and IDs, or at least a unique path, when setting these, so as not to affect other elements on the page that the SmartBlock is injected into.

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 a number of ways to make your content resize or reflow to support multiple screen sizes in an email.

There are three main methods which each come with their own benefits and drawback.

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

It sounds like the simplest to implement -- just show the same content on all screen sizes -- but that's much easier said than done, and also comes with a lot of limitations around what you can do. You typically need to limit yourself to a single-column design, for example.

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 negative — aside from being far more complex to implement — is that not all email clients support this approach. Most popular mobile clients do, though.

For scalable designs, make sure 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 can be difficult if you have text within your images. 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. You must either include text that is large enough to remain readable, or remove text from the image and include it in the HTML instead.

This is the approach typically used in our 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:

In terms of implementation, the two methods are pretty 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 would then combine those with styles in the email's header, either re-using existing ones or adding new ones: