Best Practices - Designing for Mobile with Ingage

Weblinks can be opened on mobile devices. Here's what works best.

Overview

With the ability to publish an Ingage presentation to the web, you can quickly and easily develop content to be used on mobile devices. 

Many Ingage users communicate with their customers using text messages and want to be able to share a visual and media rich experience with the simplicity of a web link. 

Using unique analytics tags, you can even know if a specific person viewed the link.

Design Considerations

An Ingage presentation is primarily intended for use on an iPad or a computer which means that text and interactive elements will be scaled down when viewed on a phone. You’ll want to increase the size of text size so that it feels natural on the smaller screen, here’s  some suggested sizes:

Title: 72 pt

Heading: 64 or 48 pt

Body: 32 pt

Example of a page being designed for mobile inside Ingage Desktop.

Optimizing Interactions

Interactive elements will also need to be scaled up so that they maintain a reasonable touch size.

Minimum tap size: 80 x 80 pt

Example of a button that opens a full screen image carousel, presented over the bounds of the page.

There’s a few things to think about when presenting interactive content too.

• When using pop ups, they’ll be within the bounds of the page so try using a custom pop up size and use the fade in animation so it feels natural on the mobile web.
• Present image carousels with the full screen option. Ingage will automatically optimize the size of the buttons for mobile devices.
• Links in Web buttons will open in new tabs - this is the best way to make a hyperlink to other web content

The pages with a light gray background (#f2f2f2) blend in with the background of the webpage.

The pages in your presentation will be automatically stacked vertically, so you’ll want to consider how they interact with each other. A small space is automatically added between pages, a cool move is to use the same color as the space and site background to create a floating look to your content. 

Page background color: #f2f2f2

Testing & Performance

Make sure to frequently test your project on your phone using both a WiFi and cellular connection. Performance of a mobile experience is super important and including too many high resolution images, videos or too many pages can slow down performance.