Mobile Best Practices

Follow these practices below and your campaign will look great on mobile devices without any CSS tweaking.

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:

Hide/Show Widgets at Specific Screen Sizes

In the Style Panel, we have a setting that can show or hide the widget at specific screen sizes. Here's how to find the setting: 

1.  Click to select on the widget or container you wish to view at a certain screen size. 
2. Make sure you are in the "This 'widget'" tab for the Style Panel. 
3. Look for the section "Widget", and open it. 
4. You will see the Widget Visibilty and the following two options:
    
   1. • Hide Widget At This Width or Less - This allows you to hide widgets so they only show on larger screens, i.e. desktop. 
      • Hide Widget At This Width or Greater - This allows you to hide widgets so they only show on smaller screens, i.e. phones. 
   2. Select the screen size for the appropriate setting you wish. For example, If you want to show a widget for only phones, click on the middle size in the Hide Widget At This Width or Greater option.

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.