Follow these practices below and your campaign will look great on mobile devices without any CSS tweaking.
Avoid iFrame Widgets
iFrames simply display another web page. Unfortunately, this doesn’t work well on mobile devices because of the smaller screen resolution.
Either avoid using this widget, or consider hiding it on mobile (see Mobile Visibility Classes below).
Soundcloud Widget
Make sure the Use HTML5/iFrame Player setting is enabled. When unchecked, the Flash Player will be used, which doesn’t work on Apple devices.
Product Widget
You can use any layout, but note that Full Size is styled the same as Compact when viewed on mobile devices.
Image Widget
The Image Widget will automatically scale large images (including hotspots) down to the size of their container. As a result, keep in mind that small hotspots will get even smaller on mobile devices.
Background Images
Avoid using background images when the background includes vital information. Most background images are not automatically scaled, so they will get cut off if they are wider than the size of the mobile device’s resolution. Instead, consider using Image Widgets, which will scale to the mobile device width.
Using the CSS3 background-size property
Most modern browsers, including mobile Safari, do support the background-size property, which can be used to scale background images. However, it has no effect on browsers that don’t support this. To resize all widget backgrounds, try adding the following code to your Custom CSS:
body.mobile .ss_box{background-size: 100%;}
/* Remove 'body.mobile' to have this apply to desktop Campaigns, too */
Use Percentage, not Pixel Dimensions
Avoid using pixel dimensions (especially horizontal dimensions) when specifying padding, margins, and absolute positions. Pixel dimensions make sense when designing for one width, but don’t work well when designing for multiple widths (which is the key to designing for both desktop and mobile). When designing your campaigns, you can start with pixel dimensions, but then convert those to percentages (which will require some trial and error).
Example:
Instead of this, which will cause the content to be squeezed very thin on mobile devices:
Try this, which will scale the padding accordingly (the side padding is most critical, so we left the top padding at 10px) whether viewed on desktop or mobile devices:
Mobile Visibility Classes
You can create different versions of a widget, one for mobile and one for desktop:
- To make a widget hidden on mobile devices, add no_mobile to the Extra CSS Classes field for the widget.
- To make a widget visible only on mobile devices, add mobile_only to the Extra CSS Classes field for the widget.
Overriding the Viewport Meta Tag
By default, we include the following meta tag when serving your campaign to mobile browsers, which sizes your campaign to the width of the device:
<meta name="viewport" content="width=device-width, maximum-scale=1">
If you’re familiar with this meta tag, you can override it by adding a new meta tag to a Code Widget in your campaign.
Forcing Desktop Styling on Tablets
When all else fails, you can render your campaign on mobile the same way it appears in desktop browsers:
- Go to the campaign's Settings.
- Select the Mobile menu.
- Check the Force Tablets to be treated as Desktop box.
- Click Save.