Mobile Best Practices

Follow these tips to ensure your campaign looks great on mobile devices without needing extensive CSS tweaking.

1. Image Widget

• The Image Widget automatically scales large images (including hotspots) to fit their container.
  • Note: Small hotspots will become even smaller on mobile devices due to scaling.

2. Background Images

• Avoid using background images for content containing vital information.
  • Background images are not automatically scaled and may get cut off on devices with smaller resolutions.
• Alternative Solution: Use Image Widgets, which automatically scale to fit mobile devices.

3. Using the CSS3 background-size Property

• Most modern browsers (including mobile Safari) support the background-size property, which can scale background images.
• Caveat: This property does not work in older browsers.

Example CSS

To resize all widget backgrounds, add the following to your Custom CSS:

body.mobile .ss_box {
    background-size: 100%;
}
/* Remove 'body.mobile' to apply this to desktop campaigns as well */

4. Use Percentage Instead of Pixel Dimensions

• Avoid pixel-based dimensions for padding, margins, and absolute positions when designing for mobile.
  • Pixel dimensions work for fixed-width designs but not for responsive layouts.
• Recommendation: Start with pixel dimensions during initial design, then convert them to percentages for better responsiveness.

Example

Instead of:

• This may cause content to be squeezed on mobile.

Use:

• This scales the side padding proportionally across devices while keeping the top padding fixed at 10px.

5. Hide/Show Widgets at Specific Screen Sizes

Steps to Configure Visibility in the Style Panel

1. Select the widget or container you want to configure.
2. Ensure you are in the "This 'Widget'" tab of the Style Panel.
3. Open the Widget section and locate the Widget Visibility options.

Visibility Options

• Hide Widget At This Width or Less:
  • Hide the widget on smaller screens (e.g., mobile devices).
• Hide Widget At This Width or Greater:
  • Hide the widget on larger screens (e.g., desktop).

Example

To display a widget only on phones:

• Use the Hide Widget At This Width or Greater option and select the middle size.

6. Overriding the Viewport Meta Tag

By default, ShortStack includes the following meta tag to optimize campaigns for mobile browsers:

<meta name="viewport" content="width=device-width, maximum-scale=1">

If you’re familiar with the viewport meta tag, you can override this default setting:

1. Add a new meta tag to a Code Widget in your campaign.
2. Customize the tag as needed for your campaign’s requirements.