Tips for Promoting Your Mobile App, Part 1: Encouraging Downloads When Patrons Are Off-Site

One of the questions our partners frequently ask is, "How should we promote our app?"  To help you answer that question, we decided to provide you with some tips.  However, there is so much information that we had to break it into two separate posts.

We'll start with tips for how to promote your app when the patrons are not at one of your events.

8 Tips for promoting downloads when the audience is not at your event or performance

1.  Encourage mobile users who visit your website to download your app.  Makes sense right?  They are already on their mobile devices, so you should take the opportunity to direct them to your app.  Here are two ways you can do this:

Silk Road Rising uses the

mobile redirect script to

send mobile users visiting

their website to the mobile

web version of their app.

• If you do not have a mobile responsive website or separate mobile site, be sure to use InstantEncore's mobile redirect script. (click here for how-to video)
• This will redirect mobile users from your standard website to the mobile web version of your app.
• It will also detect if the mobile user is on an Apple or Android device and present them with a prompt at the top of the screen to download your app on their device.
• If you do have a mobile responsive site or separate mobile site, feature a notice for your mobile app on the home screen.
• Provide a short message highlighting what additional features they will have access to by downloading the app.
• Add the icon for your app to the screen.
• Link the icon to your app's Smart App Download URL.
• Instruct the user to tap on the icon to download the app.

2.  Encourage desktop/laptop users who visit your website to download your app.  This one might not be as obvious as the first one.  With the rapid rise of smartphone and tablet users, the probability is strong that people who visit your website on their desktop and laptop computers are also mobile users.  So why not encourage them to download your app? Here are two suggestions:

• Add mobile app download buttons to your home screen.  



Austin Symphony Orchestra uses buttons on their website to
encourage visitors to download their mobile app.

• Add a button for both your Apple mobile app and your Android app.
• Buttons for:  Android  |  Apple
• Link the button to its appropriate URL.
• To find the web link for each of your apps:
• Go to www.instantencore.com
• At the top where it says "Search or Redeem," enter the name for you or your organization.



"Search or Redeem" field on the InstantEncore site.

• Find and click on your account name to go to your InstantEncore profile.
• Clicking on the image for your mobile app gives you a drop-down menu with links to your Android and Apple URLs.

Links to Seattle Shakespeare Company's Android and Apple
apps in their InstantEncore profile.

• Create a separate page on your website highlight your app's features and encourage your website visitors to download.  (Great example from Detroit Symphony Orchestra.)

3.  Create a video to spotlight your app.  While this may sound difficult, it really isn't.

• Decide which features you want to mention and which ones you want to show in use.
• Write out a script for the video.
• Consider recruiting one of your artists to be video spokesperson for the app.
• Practice going through the script while interacting with your device.  
• Get a sense of how long it takes you to go through the script.  You should be able to highlight the more exciting features in a 1 to 2 minute video.
• For example: here's an informative and funny video for the 2011 YouTube Symphony mobile app featuring flutist Nina Perlove:

• At the end of your video, include the Smart App Download URL as the closing image.
• Upload the video to YouTube - be sure to put the Smart App Download URL in the video's description.
• Post it everywhere -- embed the video on your website or blog; share it on social media; link to it in email newsletters; etc.

4.  Feature the app prominently in your email communications.  

• Spotlight your app in e-newsletters, subscriber emails, pre-show emails to ticket holders, etc.
  
  

  

  Email example from Curtis Institute of Music.

• Be sure to mention your mobile app in confirmation emails for online ticket sales and/or reservations.
• Include a brief description of your app's features as well as a link to the Smart App Download URL.

5.  Spotlight your app on the back of printed tickets and/or ticket envelopes.

• Include the app logo and a brief description of the app's value.
• Highlight the Smart App Download URL.
• Add a QR Code linked to the Smart App Download URL. (click here for how-to video)

6.  Highlight your app on printed promotional pieces for your events and season.

• Feature your mobile app and its features in your season brochure.
• Mention your mobile app and its value in your event postcards, posters, and flyers.
• Include the app logo, the Smart App Download URL, and/or QR Code.

7.  Alert your social media followers to your app.

• On a regular basis, post screenshots from your app to highlight new content available in your app.
• Include a link to the Smart App Download URL. 

8.  Use your App Store Description to highlight its features.  It's not enough to simply send patrons to your app's URL on iTunes or Google Play.  Once they are there, you need to communicate why they should download the app.

• How will downloading your app benefit them? What will they be able to do with it?
• Click here to learn How to Rock Your App's Description in the App Store.

In Part 2 of this blog series, we will focus on tips for encouraging app downloads when your patrons are attending your event or performance.

Questions?  Contact us at support@instantencore.com. 

Best Practices for Adding Images in Custom Tabs

As you customize your mobile app with unique content via custom tabs, adding images is a great way enhance the content so that your users have a more visually dynamic experience beyond reading a block of text.

An example from Silk Road Rising of how adding an image can enhance a custom tab.

Lets take a look at some best practices for embedding images effectively in custom tabs.

Where to Host Images

First, you need to decide where to host the images. There are a few options available to you.

Your Own Server: If you already have a dedicated server for your main website that you have easy access to, this would be a convenient place to host the images.

Third Party Server: Services like Photobucket and ImageShack offer reliable alternatives.

InstantEncore File Storage: However, we highly recommend hosting images directly on InstantEncore. Under the "Extras" menu in the Control Panel you will find a "File Storage" tool that gives you a quick and easy way to upload images you wish to embed.

Just select the desired file from your computer, provide a simple description and click "Upload".

We provide you with a convenient link to your image which you can copy and use to embed that image in your custom tab.

The major advantage of hosting your images directly on InstantEncore is that, if your website or third party server were to ever experience downtime, those image links would be broken in the App until that server came back online. Hosting your images in our File Storage area ensures that the images in your Custom Tabs will be visible whenever someone is using your App.

How to Embed Images

You can embed images in either the Design or HTML modes of the custom content editor.

Design Mode: The "Design" mode is the default mode when editing a custom tab, and a common way to make quick and easy edits to your custom content. Embedding an image is easy! First copy the URL of your image from our File Storage area (or from your own server or a third party service).

In the custom tab editor, click the icon in the toolbar that looks like a small picture.

Then paste the URL where it asks for the "Image Source". Click on "OK" and your Image will show up in the editor.

Some helpful tips for formatting images with this tool:

• Depending on the background of your app, you may wish to set a Border Thickness of 2 to 3 pixels to provide some contrast between it and the embedded image.
• Adding 5 to 10 pixels of Spacing keeps text from pressing right up against the image.
• While you can set a specific width and height for your image here, with a mobile design in mind you may want to consider using HTML mode and CSS to achieve the most power and control over your custom content with percentage based sizing.

HTML Mode: Working in the "HTML" mode gives you much finer control over your custom content. To add an image in this mode, type <img src="IMAGE URL"> and paste the URL between the quotes.

Our example image is fairly large to accommodate larger screen sizes. This is important as we want to use large images that we can scale down, instead of small images that would look bad when scaled up. So in the preview it will look like this:

Using CSS to Fit Images

By itself, the image is very wide and goes beyond the viewing area of the app, causing the tab to do what we call "free-scrolling" where the user can scroll up, down, left, and right with their finger in order to see all of the content. You'll notice I've also added some sample text at this point to make this feel like a real custom tab.

For usability, in most cases we want to limit scrolling to just up and down, but as your app will be used on devices with different sized screens, we also want to make sure that this content will scale to those different sizes.

Lets explore what CSS can do for us and also take a look at another feature, the "Custom CSS" tool in the "Styles" area of the Mobile App Control Panel.

This tool lets you set custom styles that will be applied to the app. Because we don't want these styles to be applied to everything in the app, just our images, we first need to use a class selector when adding images to the custom tabs. This lets us set CSS for several images without having to type out the code over and over, which makes changes and updates effortless. If you want to have some images take on one style and other images take on a different style, just create a different class for each set.

The HTML for the images in the custom tabs will look something like:

<img class="custom_class" src="IMAGE URL">

And the CSS in the Custom CSS tool will look like:

img.custom_class {
CSS CODE;
}

The .custom_class can be any unique keyword you like and should reflect what the class is being used for. Examples might be .banner, .mapImage, .artist_photos, etc. Specifying img will make sure that other elements that might be assigned the same class aren't affected as well. This may not be needed in your case, but it is a good practice to observe.

height: In all cases, we want to set the height property to height: auto; to make sure that the image will scale with the width and preserve the aspect ratio of the image.

width: Setting the width property to 100% means that the image will take up 100% of the width of its container (not including other margins or padding that may be set by the app). This is good if you want an image to act as a banner that always stretches across the entire screen.

img.custom_class {
height: auto;
width: 100%;
}

One thing to be mindful of is that this can cause an image to scale beyond its original size and lead to reduced image quality, which is why I prefer to use the next option, max-width.

max-width: The max-width property will define the maximum width the image can be. When set as a percentage, this will cause it to scale with its container until it reaches the actual size of the image.

img.custom_class {
height: auto;
max-width: 100%;
}

You'll notice that in this example, the first image looks the same as before, however in the wider example, the image does not continue to grow with the app as it has reached its actual size. This makes the property useful for photos or other situations where strict formatting is not important, but you still want it to scale within reason and without sacrificing quality.

min-width: Very rarely will you want to use the min-width property, but there are occasions. If you find yourself in a position where you need to embed an image with small text or a map with detailed information, you may wish to prevent the image from becoming too small, but still have it scale at larger sizes.

The image will display at normal size unless the container becomes wider than the actual image size, in which case it will start to scale according to what percentage is set.

img.custom_class {
height: auto;
min-width: 100%;
}

Notice that I have included some "fine print" in our example image to help illustrate this point. While we want to avoid "free-scrolling" when possible, ensuring that text content in the image is readable is also a valid concern, and min-width can be used for these instances.

What Else Can We Do?

Play around with the percentages. Set the max-width at 80% instead of 100% to include more white space or a width of 50% to leave room for text next to the image. You might need some other CSS and HTML tools to help get the formatting just right though.

I've linked several times already to w3schools - an outstanding resource for HTML, CSS, and more. It lets you experiment directly on their website before bringing what you've learned into your mobile app.

If you have any questions or run into challenges, email us at support@instantencore.com.